Frontend Portfolio
Building a high-performance portfolio using Hugo and Vanilla CSS.
The Engineer's View
I chose Hugo for its sub-second build times and its ability to handle complex taxonomies without a heavy JavaScript runtime. This architecture ensures that even as the blog grows to hundreds of posts, the client-side performance remains constant.
The Challenge
Most modern portfolios are either “too heavy” (built with React/Next.js for 5 pages of text) or “too generic”. The challenge was to build a site that feels premium and dynamic—with glassmorphism, smooth transitions, and a solid design system—while maintaining a 100/100 Lighthouse score and zero infrastructure costs.
Technical Implementation
1. Zero-JS Glassmorphism
The navigation and cards use pure CSS backdrop-filter and rgba alpha-transparency. This provides a premium “Apple-like” feel without the performance cost of a heavy UI library.
2. SEO-Ready Architecture
Unlike SPA frameworks, every page is pre-rendered at build time. I implemented:
- JSON-LD Schema: For automated “Person” and “CreativeWork” indexing.
- Smart Asset Pipeline: CSS is minified and fingerprinted automatically by Hugo Pipes.
- Vanilla CSS Variables: Used for a robust theme system that supports dark mode and easy scaling.
Results & Impact
- Performance: 0.0s LCP (Largest Contentful Paint) in a controlled environment.
- SEO: Indexed by Google Search Console within 24 hours of first push.
- Maintenance: Zero server costs via GitHub Pages deployment.
Technologies Used
- Hugo
- Vanilla CSS
- GitHub Pages
- SEO