Add a page

Right now your site has one page — the homepage. Let's add a second one.

Create the about page

Ask your AI assistant:

Create an about page at /about with a heading "About Alex" and a short sentence about being a freelance photographer based in Portland who loves landscapes and street photography.

Once it's done, open your browser and go to localhost:5173/about. There it is — a second page.

How file-based routing works

Notice what just happened. Your AI created a file called about.tsx, and you can visit it at /about in your browser's address bar. That's file-based routing — the file name becomes the page address. No configuration, no wiring. One file, one page.

Your project's route files live in the app/routes/ folder:

  • app/routes/index.tsx → / (the homepage)
  • app/routes/about.tsx → /about
?How navigation works

Connect the pages

You have two pages, but no way to get between them without typing URLs. That's broken. Let's fix it.

Ask your AI:

Add a prominent navigation bar to the about page with links to Home and About. Only edit the about page file — don't create any other files or layouts.

Nav

※

Your result may look different — AI output varies each time. As long as the nav links work, you’re good. If something’s off, ask your AI to fix it.

※

Troubleshooting: If the page looks off after this change, restart the dev server (Ctrl+C, then pnpm dev again). Large AI edits can occasionally confuse Vite hot reload.

Click the links — they work. You can go back and forth between your two pages.

The duplication problem

Now go to the other page. Notice anything? The navigation bar only appears on the page your AI added it to. The other page doesn't have it.

You could ask the AI to copy the nav to every page. But then every time you change the nav — add a link, update the styling — you'd have to change it in every file. That's the problem. And it's exactly what layouts solve.