Bootstrap the Portfolio Pulse Workspace
Set up folders, partials, and version control rituals to support professional delivery.
Bootstrap the Portfolio Pulse Workspace
Learning Objectives
By the end of this lesson, you will:
- Organize the
portfolio-pulse/repository with clear folders. - Extract shared snippets into partials for reuse.
- Set up documentation and assets directories with naming conventions.
- Capture version control rituals and branching strategy.
Project Context
Even a single-page site benefits from structure. As you layer CSS, JavaScript, and deployment tooling, a tidy workspace prevents confusion. You will mirror production standards by separating content, assets, and documentation.
Recommended Structure
Core Directories
public/for assets served as-is (images, icons, fonts)src/for HTML partials, includes, and templates (if using build tooling)docs/for briefs, notes, and process artifactsnotes/for personal reflections and validation logs
Naming Conventions
Use kebab-case for files (hero-section.html, about-story.html) and keep
commit messages consistent (feat:, docs:, chore:, fix:).
Basic Example
portfolio-pulse/
├── docs/
│ ├── project-brief.md
│ └── accessibility.md
├── notes/
│ └── orientation.md
├── public/
│ ├── og-card.jpg
│ └── apple-touch-icon.png
└── index.htmlPractical Example
portfolio-pulse/
├── docs/
│ ├── project-brief.md
│ ├── accessibility.md
│ └── measurement.md
├── notes/
│ ├── orientation.md
│ └── retro-log.md
├── src/
│ ├── partials/
│ │ ├── head.html
│ │ ├── header.html
│ │ └── footer.html
│ └── includes/
│ ├── testimonials.html
│ └── services.html
├── public/
│ ├── fonts/
│ ├── images/
│ └── icons/
└── index.html✅ Best Practices
1. Centralize Repeatable Snippets
Why: Extracting <head> and <footer> into partials keeps metadata and
contact info consistent across pages.
<!-- src/partials/head.html -->
<head>
...
</head>2. Adopt a Branching Strategy Early
Why: Even solo builders benefit from feature branches for traceability and safe experimentation.
git checkout -b feat/hero-structure
# work...
git checkout main
git merge feat/hero-structure❌ Common Mistakes
1. Mixing Source and Build Outputs
Problem: Serving files from both src/ and root confuses deployment setups.
// Bad: compiled assets mixed with source partials in root
portfolio-pulse/
├── index.html
├── hero-section.html
├── build/Solution:
portfolio-pulse/
├── src/
│ └── partials/
└── public/2. Skipping README or Project Documentation
Problem: Collaborators (or future you) have no idea how to run or extend the project.
<!-- Bad: empty README -->Solution:
# Portfolio Pulse
- Setup instructions
- Deployment commands
- Content update workflow🔨 Implement in Portfolio Pulse
Task: Scaffold the Workspace
- Create the directory structure from the practical example.
- Extract
<head>,<header>, and<footer>markup intosrc/partials/while keepingindex.htmlas the entry point (use server-side includes or copy-paste until build tooling arrives). - Add a
README.mddocumenting repository purpose, setup, and deployment TODOs. - Commit with
git commit -am "chore: scaffold portfolio workspace".
Expected Result
You now have a disciplined folder structure that scales as the project grows and makes onboarding straightforward.
✅ Validation Checklist
Functionality
- All required directories exist and are tracked by Git.
-
index.htmlstill renders correctly after extracting partials.
Code Quality
- README includes setup and deployment notes.
- Partial files use consistent casing and naming.
Understanding
- You can explain where future CSS/JS will live.
- You know how to reassemble partials when using static site tooling.
Project Integration
- Notes log references the new structure.
- Project brief links to documentation assets for easy collaboration.