Layouts and components
The navigation bar should appear on every page — without copying it everywhere. That's what a layout does.
Move navigation into a layout
Ask your AI:
Move the navigation bar into a shared layout that wraps all pages. The nav should appear on every page automatically.
Now the nav lives in one place. Every page gets it for free. Change the layout once, and every page updates.
Prove it — add a projects page
The layout only pays off when you add more pages. Let's prove it works.
Ask your AI:
Create a projects page at `/projects` with a grid of cards. Each card has a Lucide icon, a title, a short description, and an image from Unsplash. Use three photography projects: "Landscapes" (mountain and forest photography), "Portraits" (studio and natural light portraits), and "Street Photography" (urban life and candid moments). Add a "Projects" link to the navigation.
Open /projects in your browser.
Troubleshooting: Again, 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.
The page has a card grid — and the navigation bar is already there. You didn't ask for it. The layout handled it.
Notice the icons on each card. Those come from Lucide — an icon library with over 1,500 icons. Mentioning "Lucide icon" in your prompt is enough — the AI picks an appropriate icon for each card automatically.
?Why Lucide Icons?What just happened
Each project card is a component — a reusable piece of UI. Your AI defined it once and used it three times. If you wanted to add a fourth project, you'd just add another card.
Layouts are the outer shell — they wrap pages with shared structure like the nav bar. Components are the inner pieces — reusable UI like cards and buttons that live inside pages. Together, they keep your code organized so nothing gets copied around.
?Layouts vs. componentsYou now have three pages, shared navigation, and reusable components. That's a real site structure.