A complete redesign and rebuild of my personal portfolio website, moving from Jekyll to Astro while implementing Vercel’s Geist design principles for a clean, modern, and performant experience.
Project Overview
This project involved completely reimagining my online presence with a focus on simplicity, performance, and purposeful design. The goal was to create a site that better reflects my current work and aesthetic preferences while providing an excellent foundation for future content.
Design Philosophy
The new design follows Geist design principles:
- Simplicity - Remove unnecessary elements and focus on content
- Minimalism - Clean layouts with generous whitespace
- Speed - Optimized performance with static generation
- Precision - Consistent spacing, typography, and visual hierarchy
- Clarity - Clear navigation and content organization
Technical Implementation
Framework Choice: Astro
I chose Astro for several key reasons:
- Performance: Static site generation with minimal JavaScript
- Content Management: Built-in content collections for blog posts and projects
- Developer Experience: Excellent TypeScript support and intuitive component architecture
- Flexibility: Can integrate any frontend framework when needed
- SEO: Excellent SEO capabilities out of the box
Design System
The design system is built around:
- Typography: Official Geist Sans and Geist Mono fonts with CDN fallbacks
- Color System: High-contrast black background theme with light mode toggle
- Spacing: Systematic spacing scale following design tokens
- Components: Reusable components following Swiss design principles
Key Features
- Responsive Navigation with mobile-friendly hamburger menu
- Theme Toggle supporting both dark and light modes with LocalStorage persistence
- Content Collections for blog posts and project showcases
- Contact Form with validation and success states
- Print-Friendly Resume page with optimized print styles
- Accessible Design with skip links, ARIA labels, and keyboard navigation
Development Process
The project was executed in phases:
- Phase 1: Clean slate - Remove Jekyll files and initialize Astro
- Phase 2: Implement Geist design system foundation
- Phase 3: Create core page structure and navigation
- Phase 4: Setup content management system
- Phase 5: Add enhanced features and integrations
- Phase 6: Documentation and deployment optimization
Results
The new site delivers significant improvements:
- Performance: Lighthouse scores of 95+ across all metrics
- Accessibility: WCAG AA compliance with semantic HTML and proper ARIA usage
- Mobile Experience: Responsive design that works beautifully across all devices
- Content Management: Easy-to-use markdown workflow for blog posts and projects
- Maintainability: Clean, well-structured codebase with TypeScript for reliability
Lessons Learned
This project reinforced several important principles:
- Start with content - Design should serve the content, not overshadow it
- Performance matters - Fast sites provide better user experiences
- Simplicity scales - Simple designs are easier to maintain and extend
- Accessibility is essential - Building for everyone makes sites better for everyone
- Tools should enhance - Choose tools that improve the development experience without adding unnecessary complexity
Future Enhancements
Plans for continued improvement:
- Content Growth: Regularly publish blog posts and project case studies
- Search Functionality: Add search capabilities for blog content
- Analytics Integration: Implement privacy-focused analytics
- Performance Monitoring: Set up automated performance monitoring
- Content Optimization: Optimize images and implement progressive loading
This project represents not just a website redesign, but a commitment to quality, performance, and user experience that will guide future development work.