DEV Community: naveen gaur

GitHub as CMS: Modular, Effortless Developer Portfolio

naveen gaur — Mon, 02 Feb 2026 06:27:41 +0000

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:

Content: is stored as local MDX files.
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
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

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.
Styling: Tailwind CSS v4.1, utilizing a CSS-first configuration and semantic variables for instant theming.
Content Layer: Velite 0.1.8 + Zod for strict build-time schema validation of MDX files.
Deployment: Containerized via Docker and deployed to Google Cloud Run using a Continuous Deployment pipeline from GitHub.

What I'm Most Proud Of

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.
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.
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.
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.

Google AI Tools for Building Your Developer Portfolio: What to Use, When, and Why

naveen gaur — Sat, 10 Jan 2026 07:41:37 +0000

You're revisiting your portfolio and considering how Google's AI tools might fit into your workflow. You open Gemini, Google AI Studio, or Antigravity—and a practical question comes up quickly:

Which tool should I use for which kind of task?

This article is not a tutorial and not portfolio advice. It's a tool-to-use-case reference guide, using a developer portfolio website as a concrete example.

The goal is simple: help you choose the right Google AI tool for the right type of work, without guessing or misusing tools that weren't designed for the job.

The Tools (Quick, Technical Overview)

Before mapping use cases, it helps to understand where each tool draws its strength.

Gemini (Flash / Pro)

Text-only reasoning
Strong at comparison, abstraction, and evaluation
No UI preview, no code execution, no codebase awareness
Best for: Pure reasoning before implementation

Google AI Studio (Build + Annotation)

Rapid UI generation with live preview
Visual iteration through annotation
Optimized for visual iteration speed
Best when: You need to see something rendered immediately

Google Antigravity

Agentic IDE with full codebase awareness
Handles multi-file changes, refactors, and verification
Integrated terminal and browser testing
Best when: Code quality, structure, and maintainability matter

These tools overlap in capability, but they differ in strength. Choosing the wrong one usually costs time, not results.

Quick Reference: Which Tool Should I Use?

Your Task	Best Tool	Why
Deciding what to build	Gemini Pro	Pure reasoning, no implementation
Comparing stacks or approaches	Gemini Pro	Trade-off analysis without code
Seeing design ideas quickly	AI Studio	Live preview and fast iteration
Building from scratch with quality	Antigravity	Structure + verification
Refactoring existing code	Antigravity	Multi-file awareness
Debugging or fixing broken code	Antigravity	Terminal integration, can run tests
Quick one-off UI components	AI Studio	Speed over structure
Evaluating technical options	Gemini Pro	No execution needed

If you're unsure where to start, this table will usually get you there faster than reading the full article.

Use Case 1: Pre-Implementation Decisions

What this covers

Questions like:

What should my portfolio emphasize?
Which stack best represents my skills?
How complex should this site be?
Who is this portfolio primarily for?

Best Tool: Gemini Pro

Why Gemini Pro Wins

These are pure reasoning tasks:

No UI required
No code execution required
Heavy on comparison and trade-offs

Gemini Pro excels because it:

Decides what to build before generating any code
Evaluates options without pushing implementation
Helps you commit to a direction confidently

Why Not the Other Tools

AI Studio introduces visuals before decisions are settled
Antigravity adds unnecessary overhead when no code exists yet

Rule of thumb:

If you're deciding what or why before building anything, use Gemini Pro.

Use Case 2: Rapid Visual Prototyping

Scenario

You want a modern portfolio site quickly and need to see layouts, sections, and visual hierarchy immediately.

Best Tool: Google AI Studio (Build Mode)

Why AI Studio Wins

AI Studio is optimized for:

Fast UI generation
Immediate visual feedback
Iterating on layout and styling with minimal setup

You describe design goals in plain language (for example: "modern, minimal, dark theme"), and AI Studio renders a working UI you can refine visually.

Trade-offs

Code structure may be shallow
Components may not be reusable long-term
Best suited for exploration, not final architecture

Why Not Antigravity

Antigravity shines when structure matters
For early visual exploration, it adds unnecessary setup cost

Rule of thumb:

If seeing the design matters more than code structure, start with AI Studio.

Use Case 3: Building a Portfolio with Clean, Professional Code

Scenario

You expect other developers or hiring managers to inspect your repository.

You care about:

Folder structure
Reusable components
Accessibility
Maintainability

Best Tool: Google Antigravity

Why Antigravity Wins

Antigravity understands the entire project, not isolated files. It can:

Create consistent folder structures
Enforce shared layout and component APIs
Apply accessibility fixes (labels, focus states, semantic HTML)
Verify behavior by running the app

This is where Antigravity clearly outperforms other tools.

Trade-offs

Slower initial setup than AI Studio
Steeper learning curve
Overkill for small, throwaway prototypes

Why Not AI Studio

Limited awareness of existing structure
Generated code often requires refactoring later

Rule of thumb:

If code quality itself is part of what you're showcasing, use Antigravity.

Use Case 4: Refactoring an Existing Portfolio

Scenario

You already have a working portfolio, but want to:

Restructure folders
Extract shared components
Add TypeScript to existing JavaScript
Remove unused imports and dead code
Consolidate duplicate styling or logic
Fix prop drilling with better state management
Improve accessibility and performance

Best Tool: Google Antigravity

Why This Is Antigravity's Strongest Use Case

Refactoring requires:

Multi-file awareness
Understanding dependencies
Verifying that nothing breaks

Antigravity's agentic model is designed for exactly this type of work.

Trade-offs

Requires an existing codebase
Overkill for greenfield projects

Why Not AI Studio

Operates best on isolated code
Lacks full project context
Refactors become risky or manual

Rule of thumb:

If a change touches multiple files or affects structure, use Antigravity.

One Common Pattern (Not a Rule)

Many developers naturally follow this sequence:

Gemini Pro → clarify ideas and decisions
AI Studio → explore design and generate an initial version
Antigravity → refine structure and professionalize the code

You can skip steps, but this flow mirrors how decisions typically turn into implementation.

Anti-Patterns: When Not to Use Each Tool

Don't Use Gemini When:

You need rendered output
You need to test code execution
You're modifying an existing project

Don't Use AI Studio When:

You're refactoring existing code
You need consistent architecture across files
You care about long-term maintainability

Don't Use Antigravity When:

You're still exploring ideas
You're asking one-off questions
The task is small and isolated

Negative knowledge saves more time than best practices.

Final Takeaway

This article isn't about how to build a portfolio. It's about choosing the right tool for the right kind of work.

Gemini helps you reason
AI Studio helps you visualize
Antigravity helps you ship clean, maintainable code

Once you understand those boundaries, the workflow becomes obvious.

That's the real skill these tools reward.

Do you actually keep your portfolio site updated?

naveen gaur — Sat, 03 Jan 2026 14:17:57 +0000

My Experience
I built my personal portfolio site early last year with React. It looked good at the time, but here’s the truth: I haven’t updated it since.

Why?

Updating projects feels time‑consuming and not very rewarding.
I don’t feel my projects are showcased properly on the site.
Updating my Upwork profile seems easier and gives me more direct results (clients, visibility, reviews).

So even though I know a portfolio site is supposed to be important, I find myself neglecting it.

The Question
I’m curious about other devs and freelancers here:

Do you update your portfolio site regularly?
If not, what are the main reasons?

Do you find platforms like Upwork, LinkedIn, or GitHub more rewarding to keep updated compared to a personal site?

Why I’m Asking
I’ve been planning to update my portfolio for a long time, but the Google Portfolio Challenge finally gave me the push I needed. It feels like a great opportunity to rebuild my portfolio — not just for the sake of the challenge, but to create something genuinely useful for myself and (hopefully) for others too. That’s why I’m curious about how other developers approach portfolio updates, and what makes a portfolio worth maintaining in the long run.

Your input will help me design mine in a way that’s actually worth maintaining — not just another site that gets abandoned after launch.

For many of us, the portfolio site feels like a “must‑have,” but maybe the real question is: how do we make it useful enough that we want to keep it updated?