Every developer needs a portfolio site. The question is: how do you build one that's fast, looks great, and costs nothing to host? Here's how I did it.
Why Static?
A portfolio is fundamentally a brochure. It doesn't need a database, user authentication, or server-side rendering. It's content that changes maybe once a month. Static HTML is the perfect fit — it loads instantly, costs nothing, and is impossible to break.
The Stack
- HTML + CSS — No framework. No build step. Just files.
- Three.js — For the cinematic 3D particle background
- Cloudflare Pages — Free hosting with global CDN
- Google Fonts — Syne for headings, Inter for body text
Performance First
Every decision was performance-driven:
- Google Fonts loaded with
media="print"+ onload trick to avoid render blocking - Three.js particles use custom shaders with additive blending for smooth 60fps
- All images lazy-loaded with
loading="lazy" - CSS animations use
transformandopacityonly (GPU-accelerated)
Accessibility
Performance means nothing if your site isn't accessible. I made sure to include:
- Skip navigation link for keyboard users
- Proper heading hierarchy (h1 → h2 → h3, no skipping)
prefers-reduced-motionsupport — disables all animations for users who need it- Semantic HTML with
<main>,<nav>,<footer>
Deployment
Cloudflare Pages makes deployment trivial. You upload your files and they're instantly available on a global CDN. The wrangler CLI handles everything:
wrangler pages deploy . --project-name=auton2No build step, no CI/CD pipeline, no Docker containers. Just upload and done.
The Result
A cinematic, accessible, lightning-fast portfolio that costs $0/month to host. SEO score: 0 issues. Accessibility score: 0 issues. Security score: 0 issues.
The best framework is no framework. When your content is static, don't complicate it.
Live site: auton.at