Building the rest of your site

Build the remaining pages one at a time, using the home page and written design rules as the reference. Each page should be faster, but longer content and smaller screens can still expose a missing rule.

Build Pages One at a Time

I would finish and review one page before creating the next, as each page can expose a missing design rule.

Give Claude the requirements, design rules, and an existing page to compare against:

Create about.html based on:
- Page requirements from _docs/requirements.md
- Design rules from .claude/rules/css.md
- Same header and footer as index.html

The existing page gives Claude a concrete reference, but I would still check the content, navigation, spacing, and mobile layout.

Building Each Page

Use the same prompt for each page, changing only the page name and any page-specific requirements:

Create [page-name].html based on:
- Requirements from _docs/requirements.md  
- Design rules from .claude/rules/css.md
- Same header and footer as index.html

After each page, open it in your browser. Does it match the home page style? If something looks off, run the iteration loop:

The spacing on the about page is different from the home page.
Make the section padding match what we have on index.html.

If you realize your requirements were missing something, update _docs/requirements.md first, then tell Claude to rebuild the page with the updated requirements. Keep your documentation as the source of truth.

In this walkthrough, one creation prompt produced each remaining page. The pages still needed the review and correction loop below:

Why This Went So Fast

The remaining pages were faster because they reused the home-page design. In this walkthrough, one prompt created each page, but I still reviewed and corrected the rendered result.

Karpathy's original "vibe coding" description involved letting the model write code without paying much attention to it. This workflow is more controlled: write down the outcome, review each page, test it, and correct the result.

The written files reduce repeated explanation. They are a reference for review, not proof that Claude followed every instruction.

If the project text already exists, include it in the prompt. Otherwise use temporary content, but review the layout again when the real text is added because its length will change the page.

Navigation Should Work

After all pages exist, check the navigation. Click every link on every page. Each one should take you to the right page, and the navigation should appear consistently on all of them.

If a link doesn't work:

The "About" link on the home page goes to the wrong URL.
It should link to about.html.

If the navigation looks different on different pages:

The navigation on contact.html looks different from the other pages.
Make it match index.html exactly.

If navigation styling is inconsistent:

Check all pages. The current page should be highlighted in
the navigation. On about.html, the "About" link should look
different to show it's the active page.

Making It Work on Phones

Test every page at a narrow browser width. The home page can work while longer headings or content break another page.

If things look broken:

The website looks broken when the browser is narrow (phone-sized).
Make the layout responsive:
- Navigation should collapse to a hamburger menu on small screens
- Headings should be smaller
- Sections should have less padding
- Images should scale down
- Nothing should go off-screen

"Responsive" means "works at different screen sizes." You do not need to write the responsive CSS yourself. You do need to describe what should happen, test every page at narrow widths, and understand the proposed change well enough to reject a bad result.

At narrow width, check the longest heading, navigation, images, and page-specific content instead of assuming the home-page test covers them.

Replacing Placeholder Content

You still need to provide the real content, as Claude cannot decide what your experience and work should say.

For each page, write the actual text and tell Claude:

Replace the placeholder text on the home page with this content:

Name: [Your Name]
Tagline: [What you do in one sentence]
Intro: [Your 2-3 sentence introduction]

Or paste your content directly:

Here's the real content for my about page:

I started my career in finance but realized I was more interested
in building things than analyzing them. After teaching myself to
code, I transitioned into product development...

Update about.html with this content.

Real content also tests whether the layout works with your actual heading and paragraph lengths.

Content Tips

If you're stuck writing content, Claude can help:

I need to write my "about me" section. Here's my background:
- Started in finance, moved to tech
- Now work as a product designer
- Care about accessibility and clean design

Write a friendly, professional 3-paragraph about section.

Or give Claude existing content to adapt:

Here's my LinkedIn summary. Rewrite it for my personal website.
Make it more conversational and less corporate.

A Consistency Check

Before moving to visual polish, compare the navigation, fonts, colours, spacing, and footer across every page:

Review all pages in the project. Check that:
- Navigation looks identical on every page
- Fonts are consistent
- Colors match
- Spacing feels the same
- The footer appears on all pages

Fix any inconsistencies you find.

Claude can compare the project files and propose consistency fixes. Review the diff, then open every page because a file-level check cannot confirm the rendered result by itself.

What You Have Now

Your project folder should look like:

my-portfolio/
  CLAUDE.md
  index.html
  about.html
  projects.html
  contact.html
  css/
    styles.css
  .claude/
    rules/
      css.md
  _docs/
    plan.md
    requirements.md
    archive/
      home-v1.html
      home-v3.html

Open every page at desktop and phone widths before moving to visual polish.

Next up: Making it look even better with visual polish and refinements.