Overview
This portfolio represents a complete redesign of my personal brand, moving from a standard React SPA to a high-performance static site generated with Astro. The goal was to achieve perfect Lighthouse scores while maintaining a rich, interactive user experience with a "Cyberpunk/Neon" aesthetic.
Tech Stack
- Astro: For zero-JS by default and islands architecture.
- Tailwind CSS v4: For utility-first styling and JIT compilation.
- TypeScript: For type safety across the entire codebase.
- Vercel: for edge deployment and CI/CD.
Key Features
1. Circuit Board Background
I implemented a custom procedural generation algorithm to create the background circuit lines that connect nodes dynamically.
// Simplified circuit generation logic
function generateCircuit(width, height) {
const grid = createGrid(width, height);
const start = getRandomPoint();
// ... pathfinding A* algorithm
return path;
}
2. View Transitions
Using Astro's View Transitions API, page navigations feel like a native app, with elements morphing between states.
Performance
The switch to Astro resulted in a 95% reduction in main-thread blocking time compared to the previous Next.js version.
| Metric | Previous (Next.js) | Current (Astro) |
|---|---|---|
| LCP | 1.2s | 0.8s |
| TTI | 2.5s | 0.4s |
| Bundle Size | 450kb | 42kb |
Future Improvements
- Add a 3D interactive element using Three.js.
- Implement a CMS backend for easier blog posting.