A. List of Screens to Design via UXPilot

Screen Description
1. Home Page Hero section, featured case studies, teardown blog preview, toolkit, footer
2. About Page Bio, photo, resume button, education, contact CTAs
3. Case Studies Overview Card layout: StudyBuddy, BudgetPal, Coming Soon
4. Case Study: StudyBuddy Case details: overview, problem, solution, mockups, learnings, metrics
5. Case Study: BudgetPal Same layout as StudyBuddy
6. Blog Redirect Page Hero text + blog cards linking externally to Medium
7. Toolkit Page Icons grid with descriptions of tool usage
8. Contact Page Email, LinkedIn, (optional) message form
9. Portfolio as a Product: Changelog Version history timeline or bullet format
10. Portfolio as a Product: Roadmap Embed Productboard or display Now/Next/Later visually
11. Portfolio as a Product: Docs List of Notion links to planning docs
12. Portfolio as a Product: Retrospective Blog-style reflection post
13. Resume Page PDF viewer or download button
14. 404 / Coming Soon Page Friendly UX page for unavailable routes

B. Design System Guidelines (for UXPilot + Figma)

Element Recommendation
Fonts Clean sans-serif like Inter, Manrope, or SF Pro
Colors Light theme, subtle blue or green accents
Cards Rounded corners (2xl), drop shadow, hover zoom
Spacing At least 24px padding inside sections
CTAs Buttons with emojis: “View Case Study”, “Let’s Talk”
Icons Use Lucide or Heroicons for consistency
Navigation Sticky top bar, hamburger menu for mobile
Menu Items “About”