My New 2026 Portfolio: Powered by Google Cloud & AI

Source: Dev.to

Submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi, I’m a passionate full‑stack developer who loves exploring the intersection of design and engineering. For 2026, I wanted to express my evolution as a creator—moving beyond static pages to build immersive, interactive web experiences.

My goal with this portfolio was to create a “digital home” that feels alive. I wanted to showcase not just what I build, but how I think about performance, aesthetics, and user experience.

Portfolio

(The portfolio itself is live at the link provided in the challenge description.)

How I Built It

This portfolio is a modern web application built for speed, interactivity, and scalability.

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS & custom CSS
• Animations: GSAP (GreenSock) for complex timelines and Framer Motion for UI interactions
• 3D Elements: React Three Fiber (R3F) integration
• Deployment: Dockerized and hosted on Google Cloud Run

Design Decisions

I focused on a “Bento Box” grid layout for the main navigation, inspired by modern UI trends. It lets users explore different facets of my work (Blog, Projects, Experience) in a modular way.

The color palette uses deep, rich backgrounds with neon accents to create a premium, high‑tech feel. I avoided standard library components where possible, building custom UI elements like the “Floating Dock” navigation to ensure a unique identity.

Google Cloud & AI Integration

Deploying to Google Cloud Run was straightforward. I containerized the application using a multi‑stage Dockerfile to keep the image lightweight (leveraging Next.js standalone mode).

• Containerization: Built a highly optimized Docker image based on node:20-alpine.

  # syntax=docker/dockerfile:1
  FROM node:20-alpine AS builder
  WORKDIR /app
  COPY package*.json ./
  RUN npm ci
  COPY . .
  RUN npm run build && npm prune --production
  
  FROM node:20-alpine AS runner
  WORKDIR /app
  COPY --from=builder /app/.next/standalone ./
  COPY --from=builder /app/.next/static ./static
  EXPOSE 8080
  CMD ["node", "server.js"]

• Deployment: Pushed to Google Artifact Registry and deployed to Cloud Run with a single command.

• AI Assistance: Utilized Google’s Gemini models via Antigravity to generate complex GSAP animation logic and debug strict TypeScript errors during the migration to Next.js 15.

What I’m Most Proud Of

🚀 The Spaceship Game

A fully playable spaceship shooter game is embedded directly into the portfolio. It served as a challenge in state management and canvas performance optimization, running smoothly at 60 FPS even on mobile devices.

⚛️ Tech Gravity (Physics‑Based Stack)

Instead of a static list of icons, I built an interactive “Tech Gravity” box.

• How it works: Used Matter.js to create a 2D physics world where each tech icon is a physical body.
• Interactivity: Users can grab, drag, and throw the icons.
• Dynamic Effects: Collision events trigger SVG lightning bolts and glowing effects via GSAP, giving a sense of energy and connection between the technologies. An IntersectionObserver pauses the physics engine when the component is out of view to save battery life.

🌳 3D Organic Scroll Background

The background tells a story of growth as the user scrolls.

• Procedural Generation: A recursive algorithm generates a 3D tree structure in real‑time.
• Custom Projection: A lightweight 3D‑to‑2D perspective projection function maps the generated points onto an SVG canvas, avoiding heavy 3D libraries.
• Scroll Animation: Using GSAP ScrollTrigger, the branches “grow” and draw themselves as you scroll. Paths use quadratic Bézier curves for organic, fluid lines, and depth‑sorting (Painter’s Algorithm) correctly layers branches based on Z‑depth.

Built for the New Year, New You Portfolio Challenge.