Skip to content
Docs Portfolio

react

2 posts with the tag “react”

Building a Chat Conversation Component for Sanity Studio (iMessage-Style Bubbles)

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.

Building a GitHub Contribution Graph with Next.js Server Components

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.