# Building the rest of your site

**Author:** Ivan Misic  
**Published:** 2026-01-25  
**URL:** https://ivanmisic.net/blog/ai-tools/building-the-rest

**TL;DR**

Use the reviewed home page, requirements, and CSS rules as references, then build one remaining page at a time. After each page, check its content, navigation, spacing, and mobile layout in the browser before creating the next one. Update the requirements when the plan changes, keep shared styles and components consistent, and test all pages at desktop and phone widths. Written rules reduce drift, but the rendered pages are the proof.

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:

```text
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:

```text
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:

```text
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:

![Completed portfolio home page in browser: dark theme with large outlined IVAN MISIC typography, Product Leader tagline, 20+ years experience stats, and navigation highlighting Home](/images/blog/ai-tools/portfolio-home-page-complete.png)

![About page with The Journey heading and Career Journey story: identical navigation with About link highlighted, consistent dark theme and typography](/images/blog/ai-tools/portfolio-about-page-complete.png)

![Projects page showing case study cards: Enterprise Platform Transformation, API Standardization Initiative, ProductCon Berlin talk, and Self-Service Analytics Dashboard in two-column grid](/images/blog/ai-tools/portfolio-projects-page-complete.png)

![Contact page with Get In Touch heading, Speaking and Connecting sections describing availability for keynotes and coffee chats, same consistent header and navigation](/images/blog/ai-tools/portfolio-contact-page-complete.png)

### 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:

```text
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:

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

If navigation styling is inconsistent:

```text
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:

```text
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:

```text
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:

```text
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:

```text
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:

```text
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:

```text
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.