This document outlines the structural foundation of the portfolio site, detailing the site map, navigation system, page routing, and how content is logically grouped and surfaced to users. The goal is to ensure clear discoverability, intuitive user flow, and readiness for MVP execution in Figma and V0.dev.
├── About Me
├── Case Studies
│ ├── StudyBuddy
│ ├── BudgetPal
│ └── [Coming Soon Placeholder]
├── Blog
│ └── Redirect to Medium
├── This Portfolio as a Product
│ ├── Changelog
│ ├── Roadmap (Productboard)
│ ├── Planning Docs (Notion links)
│ └── Retrospective
├── Toolkit
├── Contact
└── Resume (Download or View)
| Label | Route | Type | Functionality |
|---|---|---|---|
| Home | / | Static | Hero + featured projects |
| About | /about | Static | Photo, short intro, resume link |
| Case Studies | /case-studies | Static | Card layout linking to individual projects |
| Blog | /blog | External redirect | Redirects to Medium homepage |
| Portfolio as a Product | /product | Static sub-menu | Hosts changelog, roadmap, docs |
| └ Changelog | /product/changelog | Static | Version history in timeline format |
| └ Roadmap | /product/roadmap | External embed or link | Productboard embed or open in new tab |
| └ Planning Docs | /product/docs | Static or embed | Public Notion links |
| └ Retrospective | /product/retrospective | Static | Reflection blog for v1 |
| Toolkit | /tools | Static | Icons + descriptions of tool usage |
| Contact | /contact | Static | Email, LinkedIn, (optional) form |
| Resume | /resume | PDF link | Opens/downloads resume |
| Location | Links To | Purpose |
|---|---|---|
| Hero CTA | /case-studies | Direct recruiters to proof of work |
| Case Study Card | /case-studies/studybuddy etc. | Detailed exploration |
| Toolkit icons | /tools | Learn more about stack and role in each project |
| Footer | /resume, /contact, /blog | Ensure persistent access to core CTAs |
| Page | Included Sections |
|---|---|
| Home | Hero, Project Cards, Teardown Preview, About Snippet, Toolkit Preview, Footer |
| About | Bio, Photo, Resume Download Button, Contact CTA |
| Case Studies (Overview) | 3 Cards (StudyBuddy, BudgetPal, Coming Soon) |
| Case Study (x2) | Hero, Overview, Problem, Solution, Flows, Learnings, Tools Used, Links |
| Portfolio as Product | Tabs: Changelog, Roadmap Embed, Docs, Retrospective |
| Tools | Icons Grid + Usage Summaries |
| Contact | Form or email links, social icons |
| 404 / Coming Soon | Placeholder page for future features/projects |