What to include is decided — this is the build. Every section maps to a pattern already on this blog.
The structure
<header> sticky nav — name + 3 links (glassmorphism guide) <section class="hero"> name, one-liner, two buttons <section class="projects"> the grid — 80% of reviewer time <section class="skills"> honest tags, no percentage bars <section class="contact"> email + GitHub + LinkedIn <footer>
Hero — 15 lines
.hero {
min-height: 90dvh;
display: grid; place-content: center; text-align: center; gap: 1rem;
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); letter-spacing: -0.03em; }
.hero p { color: var(--muted); max-width: 45ch; }Projects grid — the money section
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.25rem;
}
/* card pattern: image (object-fit guide) + title + 2-line description
+ tech tags + TWO links: Live Demo · GitHub
+ hover lift (card hover effects guide) */Assembly checklist
- Design tokens first (variables guide) — instant dark mode later
- Reveal-on-scroll on sections — tasteful, 15 lines
- Real favicon + OG tags — it WILL be shared in WhatsApp
- Lighthouse 90+ before shipping (performance checklist)
- Deploy: GitHub Pages (hosting guide), URL into resume header
One honest weekend, start to deployed.