/* Three step-by-step tracks, each built entirely from real code shipped on this site and its portfolio. Follow one top to bottom, or dip into a single post. */
Everything that powers this blog — the Markdown pipeline, search, SEO, and the small components that tie it together. Read top to bottom to build one from scratch.
Astro 7 ships a new default Markdown processor. Here's why you'd override it with unified() to register your own remark and rehype plugins, and how remarkPlugins, rehypePlugins, and shikiConfig fit together.
Build a tiny remark plugin that counts the words in a Markdown post and exposes a '4 min read' estimate on Astro's frontmatter — grounded in real, working code.
Wrap every Shiki code block in a toolbar with a language label, a copy button, and a fullscreen button — emitted at build time by a rehype plugin so there's no layout shift and it works before JavaScript loads.
Astro's built-in Shiki highlighter treats a mermaid fence as code and syntax-highlights it. Here's how a tiny remark plugin rewrites that fence before Shiki sees it, so a client runtime can turn it into a real diagram.
Mermaid is a big library, and most blog posts have zero diagrams. Here's the one-guard pattern I use so only posts that actually contain a diagram download the mermaid JavaScript.
Mermaid's internal color math can't parse oklch(), so passing OKLCH tokens straight in gives you washed-out defaults. Here's how I map my OKLCH design tokens to hex and feed them to mermaid.initialize.
Astro highlights code with Shiki out of the box. Here's how to pick a theme like github-dark, enable line wrapping, and understand how it plays with custom code-block markup.
Define an Astro content collection with a Zod schema so every post's frontmatter is validated at build time and fully typed in your editor.
Learn how Astro's getStaticPaths turns your content into individual static pages at build time, using the real [slug].astro route from this blog.
Three small helper functions turn an Astro content collection into related-post suggestions and prev/next links — draft hiding, tag-based ranking, and adjacency.
Build a complete blog tag system in Astro — a helper that counts tags, a /tags index page, and dynamically generated per-tag pages using getStaticPaths.
Add fast, fully client-side search to a static Astro blog using Pagefind — no server, no API, and no query ever leaving the visitor's browser.
Ship the three SEO basics every Astro blog needs: an @astrojs/rss feed, an @astrojs/sitemap, and one BaseHead component that emits canonical, Open Graph, Twitter, and robots meta on every page.
Teach search engines what your post actually is. Build a BlogPosting + BreadcrumbList JSON-LD graph in Astro and inject it per-post for rich results.
My blog and my portfolio are separate sites, but they're one person. Here's how a single Person @id in JSON-LD tells search engines exactly that.
Add lightweight, cookie-free analytics to Astro with @vercel/analytics in a tiny reusable component — what it does, when it loads, and how to wire it up.
Add a real comment section to a static Astro blog with zero backend — Giscus stores every comment as a GitHub Discussion. Here's the setup, the config shape, and how to match a dark theme.
A small, dependency-free lightbox that opens images, diagrams, and code full-screen with zoom, drag-to-pan, and keyboard controls. Here's the real client-side logic, piece by piece.
Build one small Astro component that formats dates for humans and machines at once, using Intl.DateTimeFormat and the HTML time element with a datetime attribute.
How Astro's 404.astro convention works, what makes a helpful not-found page, and how static hosts serve it — walked through with this blog's real 404 page.
Tailwind v4 moves configuration out of JavaScript and into your CSS. Here's how this Astro blog wires up the Vite plugin and defines its whole design system with @theme — no tailwind.config file at all.
How the portfolio is statically prerendered for SEO, then layered with a hand-built horizontal-scroll interaction and a CRT/terminal aesthetic — without breaking the build.
A normal React + Vite app ships an empty HTML shell, which is bad for SEO. Here's how to prerender the real content at build time with vite-react-ssg — the single-page entry, the build script, and how hydration takes over.
window, document and localStorage don't exist in Node — so touching them at render time crashes a prerendered build. Here's the rule for keeping React SSG-safe, and the useIsMobile pattern that reads window only inside an effect.
Tabs and carousels only render the active item, so crawlers and screen readers miss everything else. The fix: a visually-hidden sr-only block that mirrors the full dataset into the DOM.
A typewriter effect that starts from an empty string breaks prerendering and causes hydration mismatches. The fix: seed state with the full text, then replay the typing on the client as pure decoration.
Build a class-based React error boundary that catches render crashes, shows a recovery UI, and stays safe under static prerendering — no browser globals during render.
A beginner-friendly guide to writing a JSON-LD @graph with Person, ProfilePage, WebSite, and FAQPage nodes so search engines understand your portfolio and show rich results.
Why JavaScript-based theming causes a flash of the wrong theme on static sites, and how baking class="dark" into index.html fixes it before any JS runs.
Why the Google Fonts <link> blocks rendering, and how importing @fontsource-variable/jetbrains-mono in your entry file ships the font with your bundle for a faster first paint.
How to build a keyboard-friendly skip link with the visually-hidden-until-focus pattern, and mark up navigation correctly with aria-label and aria-current.
Build a full-viewport horizontal slideshow in React where each section is a panel and navigation moves the whole track sideways with a single translateX on a ref.
A mouse wheel fires dozens of events per flick. Learn how to use a ref-based lock plus a timeout so one scroll gesture advances exactly one panel in a React slideshow.
Add arrow-key and Home/End navigation to a React slideshow, and learn the one guard that stops it from stealing keystrokes while a visitor is typing in a form.
Add left/right swipe navigation to a React slideshow using touchstart and touchend, a distance threshold to ignore accidental taps, and simple direction detection.
Replace the mouse pointer with a glowing dot-and-ring cursor in React by mutating the DOM directly on mousemove, and invert it over any background with mix-blend-mode: difference.
Pass an isActive prop down to each section so its entrance animations replay exactly when the panel scrolls into view — driven by a single current index in the parent.
Recreate the old-monitor / hacker-terminal look with plain CSS: scanline overlays, a clip-path glitch effect, a blinking terminal cursor, and typewriter text — no JavaScript.
Animate skill/progress bars from 0 to their target width using a CSS keyframe, a CSS variable for the target, cubic-bezier easing, and forwards fill-mode — driven straight from your data.
A tiny CSS keyframe that reveals an image by animating from blurred and over-bright to sharp, with a subtle scale settle — perfect for a load-in or on-screen reveal.
Animations can make some users sick. Here's how to switch them off with prefers-reduced-motion — and the keyframe trick that keeps content visible instead of stuck at width zero.
Tailwind v4 moves configuration into CSS. Here's how to set up @import, a dark variant, and map OKLCH color and radius tokens with @theme inline — with no tailwind.config file at all.
Centralize every bit of site copy — personal info, experience, skills, projects — into one typed TypeScript data file so components render from a single source of truth instead of hardcoded strings.
A production contact form with shared validation, spam defense, and email — plus the tooling that hardens and auto-publishes the whole thing.
Define your validation rules once with Zod, then reuse the exact same schema in your react-hook-form resolver and your serverless API handler. No drift, no duplicated rules.
Wire up react-hook-form with a Zod resolver, then make it accessible with aria-invalid, aria-describedby, and an aria-live region — plus a simple status state machine for submit feedback.
A honeypot is a hidden form field humans never see and bots always fill. Here's how I added one to my contact form — the hidden input on the client and the silent 200 on the server.
A tiny sliding-window rate limiter that tracks requests per IP in memory and returns 429 when a client sends too many — plus an honest look at why in-memory limits are only a first line of defence on serverless.
Send a real email from a Vercel serverless handler using Resend — creating the client from an env-based API key, building the message, escaping user input, and handling the failure cases.
Set up Vitest with jsdom and globals, then test three layers: a Zod schema, a React form with Testing Library, and a serverless handler by mocking the Resend constructor.
A practical walk through the vercel.json headers block I ship in production — HSTS, X-Frame-Options, X-Content-Type-Options, Permissions-Policy, and immutable long-cache for hashed assets, fonts, and images.
Use @anthropic-ai/sdk with a JSON schema so Claude returns validated, machine-readable data instead of free text — the exact pattern that powers this blog's auto-post generator.
A content queue, a Node generator script that calls the Claude API, and a scheduled GitHub Action that writes a post and commits it — the exact autopilot I use to keep this blog fed.
What an OG image is, why it's exactly 1200x630, and how to design one as an SVG template and render it to the PNG that social platforms show in link previews.