Overview
A modern, accessible portfolio website built to showcase my journey from aerospace engineering to Applied AI. The site emphasizes clean design, performance, and user experience.
The Challenge
I needed a portfolio that would:
- Showcase my technical projects and writing
- Demonstrate my front-end development capabilities
- Stand out from template-based portfolios
- Be easy to maintain and update
Process
Research & Planning
I analyzed portfolios of successful Applied AI practitioners and identified key patterns: clean typography, project-focused layouts, and authentic personal branding.
Design System
Built a custom design system from scratch with:
- Color Palette: Cream, coral, sage, and charcoal for a warm, professional feel
- Typography: Clean hierarchy with strong headings and readable body text
- Components: Reusable buttons, cards, and form elements
Development
Leveraged Next.js 16 with the App Router for:
- Static site generation for performance
- Server components for reduced bundle size
- Dynamic routes for blog and project pages
Solution
Key Features
- Reading Streak Gamification: Tracks blog reading habits to encourage consistent learning
- Markdown-Based CMS: Blog posts and projects managed through markdown files with frontmatter
- SEO Optimized: JSON-LD structured data, meta tags, and sitemap generation
- Accessibility First: Skip links, ARIA labels, reduced motion support, and keyboard navigation
Technical Stack
- Next.js 16 with App Router
- TypeScript for type safety
- Tailwind CSS v4 with custom theme variables
- Server-side rendering and static generation
- Deployed on Vercel
Results
The portfolio successfully demonstrates my technical capabilities while maintaining a clean, professional aesthetic. The markdown-based CMS makes content updates quick and painless, and the reading streak feature has helped me stay accountable to my learning goals.
Lessons Learned
Building this portfolio taught me the importance of starting with a solid design system. Having consistent spacing, colors, and typography from the beginning made development much smoother and the end result more cohesive.