I needed a way to display text side-by-side for translation comparisons in blog posts. This post walks through the two component variants I shipped, the decisions behind them, and the pattern that kept the implementation simple and maintainable.
Ever wanted to embed a conversation or chat screenshot in your blog post, but pasting an image felt too static? What if you could recreate chat bubbles—complete with sender names, timestamps, and multiple visual styles—as structured content?
That’s what I built for my Astro + Sanity blog. And thanks to the documentation system I built, it only took 90 minutes from concept to production.
Here’s how it works, what design decisions went into it, and the complete implementation guide.
There’s a moment in every developer’s journey when you finally realize: “I should have documented this the first time.”
Mine came after spending two hours debugging why my Sanity Studio components weren’t showing up in production—even though they worked perfectly on localhost. The problem? I had forgotten that my blog actually consists of two separate applications that need independent deployments.
This is the story of how writing documentation for “future me” accidentally made my development process 3x faster.
As a documentation engineer and technical writer, I needed a way to showcase both my technical writing work and my development projects.
I had already built a documentation site using Astro and Starlight at devportals.tech, and I wanted to add my Next.js portfolio site without disrupting the existing architecture.
This post walks through the technical decisions, implementation challenges, and solutions I encountered while integrating these two separate applications into a cohesive experience.
When building a portfolio, showing your GitHub activity tells a story about your consistency, the technologies you work with, and how you balance personal and professional projects. In this guide, I walk you through building a production-ready GitHub contribution graph using Next.js 14 Server Components and TypeScript.
Unlike client-side rendering, Server Components allow us to fetch data directly on the server, keeping our GitHub API token secure and improving initial page load performance. This is especially important for portfolio sites where first impressions matter.
