Building My Personal Portfolio with Next.js, Gemini, and Google Cloud Run

Sachi Goyal — Mon, 02 Feb 2026 07:37:51 +0000

For the New Year, New You Portfolio Challenge, I rebuilt my personal portfolio using Next.js 16, Google Gemini, and Google Cloud Run. This post walks through the design, architecture, AI features, and deployment setup behind sachi.dev, an open-source, production-ready portfolio.

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

About Me

Hi, I’m Sachi Goyal 👋

I’m a software developer who enjoys building functional, well-designed web applications. React and Next.js are my primary tools, and I usually reach for TailwindCSS and shadcn/ui when it comes to styling.

With this portfolio, my goal was to create something that feels personal but still production-grade. A place where I can write, showcase projects, and experiment with AI features without compromising performance, clarity, or maintainability.

Portfolio

The portfolio is deployed on Google Cloud Run and publicly accessible at:

Cloud Run URL (challenge requirement): https://sachi-dev-809350176771.asia-southeast1.run.app
Custom domain mapped to the same Cloud Run service: https://sachi.dev

The source code is fully open source:
https://github.com/sachigoyal/portfolio

Demo Video

Here’s a short walkthrough showing how the portfolio works, including the featured project modals and the Gemini-powered AI chat experience:

How I Built It

Tech Stack

Framework: Next.js 16 (App Router) with React 19
Language: TypeScript
Runtime & Tooling: Bun
Styling: Tailwind CSS v4, Radix UI, Framer Motion
Content: Velite with MDX
AI: Google Gemini API
Deployment: Docker + Google Cloud Run (asia-southeast1)

Key Features

Home page with intro, GitHub contribution heatmap, featured projects, and recent blogs
Filterable and sortable projects page with categories
Blog system with MDX, table of contents, search, filters, and year grouping
Rich MDX components including code blocks, callouts, tabs, accordions, file trees, and math rendering
Dynamic OpenGraph image generation and per-page metadata
Light, dark, and system themes with persistence
Animations across modals, tabs, and cards using Framer Motion
Featured project modals that open on click, with built-in AI chat powered by Gemini

Google AI Usage

Google Gemini is integrated directly into the portfolio as a practical, scoped feature:

Gemini powers a streaming AI chat inside featured project modals
Conversations are context-aware and limited to the selected project
Requests are rate-limited using Upstash Redis to ensure predictable usage

The goal was to make AI genuinely helpful. Visitors can ask questions about specific projects and get immediate, relevant answers without leaving the page.

Deployment on Cloud Run

The application is fully Dockerized and deployed using Cloud Build and Google Cloud Run.

A simplified deployment command looks like this:

gcloud run deploy sachi-dev \
  --source . \
  --region=asia-southeast1 \
  --allow-unauthenticated \
  --set-env-vars=GEMINI_API_KEY=...

I also configured custom domain mapping so the same Cloud Run service is accessible via both sachi.dev and www.sachi.dev. This keeps the deployment compliant with the challenge requirements while still using a personal domain.

What I'm Most Proud Of

AI that fits naturally
The Gemini integration is purposeful and contextual, not a generic chatbot.
A clean and flexible content system
Velite and MDX make it easy to write, organize, and evolve content over time.
Polished UI without unnecessary complexity
Search, filtering, theming, animations, and SEO all work together without feeling heavy.
Production-ready infrastructure
Fully Dockerized, scalable, and running entirely on Google Cloud Run.

Thanks to the Google AI and DEV teams for organizing the challenge. Building this portfolio was a good opportunity to refine my workflow and ship something I plan to keep improving.

DEV Community: Sachi Goyal