How I Redesigned My Portfolio from Scratch
A deep dive into the decisions, trade-offs, and lessons learned while rebuilding my portfolio with Astro and Cloudflare.
Why Rebuild?
My previous portfolio was built with Next.js and hosted on Vercel. While it worked well, I wanted something that better reflected my current skills and priorities.
Goals
The new portfolio needed to excel in three areas:
- Performance: Sub-second load times globally
- Simplicity: Easy to maintain and update
- Privacy: No third-party tracking scripts
Technology Choices
After evaluating several options, I chose:
Astro 5
Astro’s static-first approach with islands architecture was perfect for a content-heavy portfolio. Key benefits:
- Zero JavaScript by default
- Excellent MDX support
- Built-in image optimization
Cloudflare Pages
Edge deployment means content is served from locations closest to visitors:
- 300+ edge locations worldwide
- Automatic SSL certificates
- Free tier covers most portfolio needs
D1 for Analytics
Instead of Google Analytics, I built a privacy-friendly analytics system using Cloudflare D1:
- No cookies required
- Daily rotating visitor hashes
- Full control over data
Design Process
Carbon Design System Inspiration
I drew inspiration from IBM’s Carbon Design System, adapting their:
- 8px spacing grid
- Productive motion curves
- Typography scale
OKLCH Color Space
For the color palette, I used OKLCH for perceptually uniform colors. This made creating dark mode variants much easier.
Results
The new portfolio loads in under 500ms on 3G connections. Core Web Vitals are all green. Most importantly, I enjoy working on it.
What’s Next
I’m planning to add more interactive playground demos and possibly a newsletter integration.