GitHub as CMS: Modular, Effortless Developer Portfolio

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I am a Full‑Stack Freelance Developer. My mission is to use technology to solve everyday problems and ease the pain points we all face, whether in business or daily life. For 2026, I applied that same philosophy to my own personal brand by tackling a challenge many developers struggle with: portfolio rot.

Managing and refreshing a portfolio is often time‑consuming, so I designed a system that eliminates this friction. By treating GitHub Web UI as a Headless CMS, I can update both content and images directly in the browser — no local setup required, no database setup required.

This project reflects the “New Me”: an architect who orchestrates AI, automation, and practical innovation to build systems that stay fresh, solve real pain points, and make life easier.

Portfolio

How I Built It

The Innovation: GitHub as a Headless CMS
I wanted a portfolio that I could update in 3 minutes from my phone or a browser without ever cloning a repository. I architected the "GitHub-as-CMS" model:

1. Content: is stored as local MDX files.
2. Assets: Managed directly in the public/ folder for real-time GitHub previews. Next.js optimizes images automatically, removing the usual headaches of handling visuals for project
3. Validation: is enforced by Velite; if a user commits malformed data (like a missing project date), the GitHub Action fails the PR check before the site can break.

Leveraging Google AI Tools
Google Gemini Pro - Used for deep research, data analysis, and reporting. Its capabilities helped me investigate common pain points developers face with their portfolios. Two recurring issues stood out: the difficulty of ongoing management and the challenge of showcasing projects effectively. Gemini Pro guided me in devising a solution — from selecting the technical stack to evaluating feasibility and anticipating potential issues.

Google Antigravity agents
They handled the heavy lifting: converting screenshots into working code, building a full application from scratch, connecting it to my GitHub repository, and deploying seamlessly to Google Cloud. As the architect, I orchestrated multiple sub‑agents through the Agent Manager.

The Tech Stack

1. Framework: Next.js 16.1 (App Router) with the latest React 19 features, chosen not only for its modern architecture but also for its built‑in image optimization capabilities.
2. Styling: Tailwind CSS v4.1, utilizing a CSS-first configuration and semantic variables for instant theming.
3. Content Layer: Velite 0.1.8 + Zod for strict build-time schema validation of MDX files.
4. Deployment: Containerized via Docker and deployed to Google Cloud Run using a Continuous Deployment pipeline from GitHub.

What I'm Most Proud Of

1. The "Self-Driving" Repository: I designed a workflow where GitHub itself acts as the CMS. Content and images are updated entirely in the browser through Github Web UI. Safe updates (linters, types) are auto‑merged, while framework upgrades are flagged for manual review — ensuring my portfolio evolves without constant maintenance.

2. Composable LEGO Architecture: The site isn’t a rigid template. Every section — Hero, Gallery, Testimonials — is a modular “Block” that can be rearranged in a single file (page.tsx). This LEGO‑style architecture makes the portfolio endlessly adaptable without touching complex code.

3. High-Performance Visuals: Even with the easy‑to‑edit GitHub workflow, the site maintains a Lighthouse score of 98+. A custom MDX image interception component eliminates Cumulative Layout Shift (CLS), so uploaded images render smoothly and consistently. This ensures a polished user experience while keeping updates effortless.

4. Solving a Shared Developer Pain Point:
   I am most proud of attempting to provide a solution for an issue I and many fellow developers face: creating a portfolio but struggling to manage it due to multiple challenges. Managing text content and images often feels tedious, so this system uses the GitHub Web UI for direct updates, Next.js to optimize images automatically, and continuous deployment to Google Cloud Run. This project is not just a showcase of my skills and work — it’s also a chance to address an existing problem in our community by building a portfolio system that stays fresh, easy to maintain, and free from “Portfolio Rot.”

💡 Technical Deep Dive
If you are interested in the "Librarian" logic behind Velite or the semantic variables used in Tailwind v4, feel free to explore my repository!

Thanks to Google AI for motivating this refresh — it gave me the chance to think differently and build a solution that benefits both myself and fellow developers.