Sairam's Blog
A fast, modern personal blog — writing about code, technology, and the occasional rabbit hole.
Built with Next.js 16 · TypeScript · Tailwind CSS · Firebase
🌐 Visit my portfolio →
✨ Animated Background
The site greets visitors with a full-screen WebGL particle canvas powered by OGL. Hundreds of particles drift and shimmer behind every page, giving the blog a distinct, atmospheric look without impacting performance. Credits to reactbits.dev for the amazing background.
📝 Firestore-Powered Content
Posts are stored in Firebase Firestore and fetched server-side using the Admin SDK. Each post carries a title, date, excerpt, tags, estimated read time, and full Markdown content — all in one document. Updates to posts go live within an hour thanks to Incremental Static Regeneration.
🏷️ Tag Filtering
Every post is tagged by topic. The home page features a live tag filter bar — click any tag to instantly narrow down the post grid without a page reload. Great for readers who want to browse only a specific subject.
👍 Like & Dislike Reactions
Each post has a like / dislike button pair backed by Firestore. Reactions are tracked in real time and persisted — readers can show appreciation (or disagreement) with a single click, and the counts update instantly via Next.js Server Actions.
🖼️ Secure GitHub Image Proxy
A custom API route (/api/github-image) proxies images from GitHub repositories — but only for repos on an explicit allowlist stored in Firebase RTDB, and only for images actually referenced in the repo's README. This lets portfolio project write-ups embed their own screenshots safely, with no risk of path traversal or abuse.
⚡ Performance First
| Technique | Detail |
|---|
| Incremental Static Regeneration | Pages cached at the edge, revalidated every hour |
use cache directives | Firestore reads are cached at the function level |
next/font | Geist font loaded and optimised at build time |
| Server Components | Data fetching stays on the server — zero client waterfalls |
🛠️ Tech Stack
| |
|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Database | Firebase Firestore + Realtime Database |
| Canvas | OGL (WebGL) |
| Icons | Lucide React |
| Deployment | Vercel |
Built with ❤️ by Sairam Suresh
Sairam Suresh·4mo ago