miguelpv.dev

Overview

miguelpv.dev is my personal portfolio, and I designed and built every part of it — the layout, the visuals, the interactions, the build tooling and the deployment. But the more useful thing it does is double as evidence: rather than describe how I approach a project, I can point at the page you're already reading and let it make the argument.

So this case study is less a tour of features and more an explanation of the choices behind them — what I build for, why, and what each decision actually buys.

Why I build this way

The stack is deliberately old-fashioned: hand-written HTML, one vanilla CSS file driven by design tokens, one small vanilla JavaScript file, and no framework or runtime shipped to the browser. That's not nostalgia — each choice buys something concrete.

• Speed that reaches everyone. With no framework to download, parse and hydrate, the page paints almost instantly — on a flagship laptop and on a cheap phone over a weak connection alike. Fast isn't a vanity score; it's how many people stay, and how well the page ranks.
• Longevity and control. Nothing here breaks when a framework ships a new major version, and there's no dependency tree to keep audited and patched — a much smaller surface for bugs and supply-chain risk. Every byte on the page is there because I put it there.
• Privacy without the asterisks. No cookies, no analytics, no trackers — so there's no consent banner to bolt on, far less legal weight to carry, and not one third-party request following the reader. It respects the visitor, and as a side effect it's one more reason the page is fast.
• Usable by anyone. Semantic landmarks, always-visible keyboard focus, screen-reader-friendly components and respect for reduced motion mean nobody's locked out — which is simply the right thing to do, and happens to be better for every user and for search engines too.

Don't take my word for it

All of that is easy to say and harder to prove, so the proof is built in. This page earns a straight 100 across Lighthouse Performance, Accessibility, Best Practices and SEO — and you don't have to trust a screenshot. Open your browser's dev tools and run Lighthouse on this page yourself; watch the Network tab and you'll find no third-party domains, no tracking pixels, nothing phoning home. The standards aren't a claim on a slide — they're verifiable in about the time it took to read this paragraph.

And there's no client or deadline behind any of it. This is just the bar I hold my own work to when nobody is making me — which is the most honest indication of the bar I work to, full stop.

Under the hood

For anyone who wants the engineering detail, here's what actually goes into hitting those numbers:

• Self-hosted fonts, preloaded as woff2 and subset to the Latin range, so text renders immediately with no third-party font request and no layout shift.
• Responsive AVIF/WebP imagery with srcset and sized sizes, so each device fetches the smallest sufficient image.
• CSS and JS minified with clean-css and Terser (which also strips every console.* call), shipped from assets/min/*.
• JavaScript loaded defer, with each feature initialising lazily through an IntersectionObserver and degrading silently if its elements are absent.
• The matrix-rain background runs on a single canvas, is DPR-clamped, and bails out entirely under prefers-reduced-motion.
• Two hand-maintained locales served as sibling static directories, with a small Cloudflare Worker at the root negotiating Accept-Language and redirecting to /en/ or /es/ — everything else is static assets on Cloudflare Pages, with clean, extension-less URLs.
• Security headers (CSP, HSTS and more) declared in a _headers file, and a sitemap.xml with reciprocal per-page hreflang generated at deploy time.
• A reusable slider that lazy-initialises on scroll, supports video slides, auto-builds its dot indicators, pauses on hover/focus, announces changes to screen readers, and is fully keyboard-navigable. (Right-click any screenshot to open its full-resolution original.)

Status

Live, and you're looking at it. It keeps growing — this case study and the projects section that links to it are recent additions — and I treat it less as a finished artifact and more as the place I keep raising my own bar.