Personal Portfolio & Developer Tools Platform

This is my personal portfolio, but calling it a portfolio undersells what it actually is. It is a full-stack web application that doubles as a content platform, a public suite of developer tools, and a writing space, all served from a single codebase. Everything you see on the site, from the projects and case studies to the blog posts and the tools, is editable from a private admin dashboard built into the same app, so nothing is hard-coded and nothing requires a redeploy to change.

The front end is designed to feel alive without getting in the way. The landing page opens with an interactive WebGL hero, a real-time fluid simulation rendered on the GPU that reacts to the cursor, layered over a mask-reveal intro and a portrait composition. Throughout the site there is smooth inertia-based scrolling, scroll-triggered reveals, parallax, magnetic buttons, tilt and spotlight cards, a custom cursor, animated counters, and a light and dark theme that respects the visitor's system preference. A keyboard-driven command palette lets you jump anywhere on the site in a couple of keystrokes.

Under the hood it is built on Next.js with the App Router and React Server Components, written end to end in TypeScript, and styled with Tailwind CSS. Pages are statically generated and incrementally revalidated, so the site stays fast and cheap to serve while still reflecting fresh content from the database within a minute of any edit. The code is organized around a clean separation between raw database rows and the typed shapes the UI consumes, so components never touch unmapped data.

The heart of the project is a custom headless CMS. Instead of relying on an off-the-shelf platform, I built my own authenticated admin panel where I can create, edit, reorder, feature, publish, and unpublish every kind of content on the site: projects, blog posts, tools, testimonials, and global site settings. It includes media uploads with in-browser image handling, per-item publish toggles so I can draft in private and ship when ready, and even site-wide details like my name, role, bio, hero images, CV, social links, and the headline stats on the home page, all edited through the dashboard.

The backend is powered by Supabase, using Postgres for data, its auth layer for the admin login, and object storage for uploaded media. The database schema is version-controlled through SQL migrations, and the admin routes are protected by middleware so only the authenticated owner can reach them.

A standout feature is the built-in suite of more than thirty developer tools, each with its own page and all running entirely in the browser. They cover everyday tasks like formatting and validating JSON, converting between JSON, YAML, CSV, and TypeScript, formatting SQL and XML, decoding JWTs, generating UUIDs, hashes, HMAC signatures, bcrypt hashes, and strong passwords, testing regular expressions, diffing text, converting number bases, calculating subnets, checking WCAG color contrast, explaining cron expressions, generating .gitignore files and fake test data, and more. Because they run client-side, whatever you paste in never leaves your machine.

Several of the tools go beyond text. There is an in-browser AI background remover that produces a transparent PNG without uploading your image to any server, an image-to-text OCR tool, and a set of image utilities for compressing, converting, and resizing, all processed locally in the browser for speed and privacy.

The blog is fully markdown-powered, with syntax-highlighted code blocks, GitHub-flavored markdown, tags, cover images, featured posts, and excerpts. Posts are written and managed from the same admin dashboard and rendered through statically generated pages.

The contact page has a working form that sends real email through a transactional email service and is protected from spam and bots by an invisible CAPTCHA, with server-side validation on every submission.

SEO and performance were treated as first-class concerns. The site ships a dynamic sitemap and robots file, auto-generated Open Graph images for rich link previews, structured data for breadcrumbs, per-page metadata, and accessible, responsive layouts that work from large desktop screens down to mobile.

The whole thing is deployed on Vercel with a Supabase Postgres backend, fronted by a custom domain with DNS managed through Cloudflare. Continuous deployment means every push to the main branch ships to production automatically.

What I am most proud of is that this is not a template. The motion, the WebGL effects, the CMS, the tool suite, and the data layer were all built from the ground up, and the result is a single, cohesive product that I own end to end and keep extending.