DEV Community

Akkarapon Phikulsri
Akkarapon Phikulsri

Posted on • Edited on

New Year, New You Portfolio Challenge - Building & Deploying My Portfolio with Google Cloud Run

#devchallenge #googleaichallenge #portfolio #gemini

New Year New You Portfolio Challenge

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

About Me

Akkarapon Phikulsri — Software Engineer specializing in Go, Python, C#, and TypeScript. I build scalable systems with modern web frameworks and microservices.

Portfolio

✨ Take a look at it on Akkarapon Foliokub

How I Built It

I used Google AI Studio to ideate and implement my portfolio for the New Year, New You challenge. I then refined the project locally using Antigravity Editor, enhancing each section with relevant images and showcasing my certificates.

The portfolio is built using React, TypeScript, and Tailwind CSS, focusing on a clean, responsive design and maintainable component structure.

Antigravity I leverage Antigravity to bring my concepts to life, allowing for rapid prototyping and superior design quality.

What I'm Most Proud Of

Custom Animation System Built five reusable animation components (Aurora, ClickSpark, GlitchText, Bounce, FadeContent) that bring the portfolio to life without compromising performance.

Performance-First Custom useInViewOnce hook optimizes animations using Intersection Observer, triggering only when elements enter the viewport.

Project Showcase Two distinct sections (grid + timeline) highlight 14+ projects across backend APIs, mobile apps, and full-stack applications.

Production Deployment Dockerized with Nginx, deployed to Google Cloud Run with automatic scaling—ready for real-world use.

Interactive Portfolio Experience & Leveling System
The portfolio uses an experience (XP) and leveling system that rewards visitors and unlocks sections.
Features

  • Five XP categories Scroll, Game, Chat, Activity, and Other
  • Level progression Total level combines all categories (up to 1000)
  • Section unlocking New sections unlock as level increases
  • Persistent progress XP saved in localStorage across sessions
  • Expandable XP bar Shows total XP and detailed category breakdown with progress bars
  • Level-up celebration Confetti animation on level up with notifications
  • Visual feedback Gradient progress bars and real-time XP tracking

3D Interactive Skills Sphere
I built an interactive 3D sphere to showcase my technical skills using React Three Fiber. Skills are distributed evenly using the Fibonacci sphere algorithm, and users can rotate and explore the sphere with smooth hover interactions.

Dark Theme Switcher
A custom Dark theme toggle button that smoothly switches between light and dark modes. It remembers user preferences, respects system settings, and includes smooth animations. The entire site, including the 3D sphere, adapts dynamically to theme changes.
Both features improve the user experience and demonstrate modern web development techniques with 3D graphics and smooth state management.

White

Dark

"Take a Break" Game

To add interactivity and a fun easter egg, I built a full-screen canvas-based game that visitors can play directly on the portfolio.

Key Features

  • Canvas-based gameplay Built with HTML5 Canvas and requestAnimationFrame for smooth 60fps animations
  • Mouse-controlled ship Players move their cursor to collect colorful orbs floating across the screen
  • Multiple themes Three visual themes (Space, Neon, Retro) that can be switched on the fly
  • XP integration Scores earn XP points that integrate with the portfolio's gamification system Animated background Procedurally generated stars that create a dynamic space environment
  • Collision detection Real-time collision detection using distance calculations
  • Full-screen immersion Full-screen overlay with hidden cursor for an immersive experience

🐍 Snake Game (Arcade Zone)

Overview
Classic Snake implemented as a responsive web game. Earn XP while playing.

Features

  • Responsive board 20x20 grid that adapts to screen size (12–25px cells)
  • Speed settings Slow, Normal, Fast, Very Fast
  • Controls
    • Keyboard Arrow keys or WASD
    • Mobile Touch direction buttons
    • Spacebar to pause
  • Scoring 10 XP per food eaten
  • Game mechanics
    • Grow by eating food (red pulsing dots)
    • Game over on wall or self collision
    • Pause/Resume
    • Reset

🎯 Career Simulator Games

Example

Playgroud

Stats

Interactive role-playing scenarios based on real tech work. Earn XP through problem-solving, design decisions, and code challenges.

All simulators use a chat/log interface where you

  • Receive scenario briefings
  • Input solutions, code, or decisions
  • Get AI feedback from role-played colleagues (Junior/Senior Dev, Tech Lead, etc.)
  • Earn XP based on solution quality
  • Track progress with saved stats and achievements

Game List

  • Senior Engineer Simulator
  • Backend Developer Simulator
  • Frontend Developer Simulator
  • System Analysis Simulator
  • Project Manager Simulator
  • Database Admin Simulator

The Local Site-Based Simple Chatbot
Instead of relying on external AI APIs, I built a locally-powered chatbot that runs entirely client-side using a curated knowledge base.
Key Features

  • Zero API dependencies No external API keys or calls—everything runs locally in the browser Curated knowledge base Pre-built responses covering tech stack, projects, career, and engineering philosophy
  • Smart keyword matching Fuzzy matching and category-based routing to find relevant answers
  • Suggested questions Category-based question suggestions to guide conversations XP integration Each interaction rewards XP points, encouraging engagement
  • Typing indicators Realistic typing delays to simulate natural conversation flow
  • Privacy-first All conversations stay in the browser—no data is sent to external servers

Crafting software requires artistry, guided by imagination, grounded in logic, endlessly enduring. - Akkarapon Phikulsri

Deploy to Google Cloud Run

I will guide you through deploying a static React portfolio website to Google Cloud Run, a fully managed serverless platform.

What is Google Cloud Run?

Google Cloud Run is a fully managed compute platform that automatically scales your stateless containers. It's perfect for deploying static websites and web applications with minimal configuration. Cloud Run automatically handles

  • HTTPS/TLS certificates
  • Load balancing
  • Auto-scaling (including scaling to zero when not in use)
  • Pay-per-use pricing

Prerequisites

Before starting, ensure you have:

  1. Google Cloud Account (already registered)
  2. Google Cloud SDK - Will be installed in Step 1 below
  3. Docker (optional, for local testing) Install from docker.com

Step 1 Install Google Cloud SDK

Since your internet connection may be unreliable, this step is broken into parts with checkpoints after each section. Each part can be completed independently and verified before proceeding.

Part A Choose Installation Method

First, choose your operating system and preferred installation method:

macOS

Option 1 Homebrew (Recommended - Better for Interruptions)

  • Homebrew handles retries and resume automatically
  • Easier to manage updates
  • Preferred if you already have Homebrew installed

Option 2 Manual Installation

  • Direct download from Google Cloud
  • Works without package managers
  • Requires manual updates

Linux

Option 1 Package Manager (Recommended - Better for Interruptions)

  • apt for Debian/Ubuntu
  • yum for Red Hat/CentOS/Fedora
  • Package managers handle retries better than manual downloads

Option 2 Manual Installation

  • Direct download script
  • Works on any Linux distribution

Windows

Option 1 Installer (Recommended)

  • Windows installer (.msi file)
  • Handles installation automatically
  • Can be resumed if interrupted

Option 2 Package Manager (Chocolatey/Winget)

  • Requires Chocolatey or Windows Package Manager
  • Easier updates

Part B Installation by Platform

macOS Installation

Using Homebrew (Recommended)

# Check if Homebrew is installed (if not, install from https://brew.sh)
brew --version

# Install Google Cloud SDK
brew install --cask google-cloud-sdk

# Checkpoint Verify installation started
which gcloud
Enter fullscreen mode Exit fullscreen mode

If installation is interrupted

  • Homebrew automatically resumes from where it left off
  • Simply re-run brew install --cask google-cloud-sdk
  • Homebrew will continue from the last checkpoint

Using Manual Installation

# Step 1 Download the SDK (can be resumed if interrupted)
curl https://sdk.cloud.google.com | bash

# If download is interrupted, remove partial download and retry:
# rm -rf ~/google-cloud-sdk
# Then re-run the curl command above

# Step 2 Restart your shell or source the path
exec -l $SHELL

# Or manually add to PATH in your ~/.zshrc or ~/.bash_profile:
# echo 'source "$HOME/google-cloud-sdk/path.bash.inc"' >> ~/.zshrc
# source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Checkpoint Verify Part B Complete

# Check if gcloud is accessible
gcloud version

# If successful, you should see version information
# If command not found, restart your terminal or source your shell config
Enter fullscreen mode Exit fullscreen mode

Linux Installation

Using apt (Debian/Ubuntu)

# Part 1 Add Google Cloud SDK repository
echo "deb [signed-by=/usr/share/keyrings/cloud.google.gpg] https://packages.cloud.google.com/apt cloud-sdk main" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list

# If interrupted here, you can skip if the repository was already added (check with):
# cat /etc/apt/sources.list.d/google-cloud-sdk.list

# Part 2 Import Google Cloud public key
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key --keyring /usr/share/keyrings/cloud.google.gpg add -

# If interrupted here, check if key exists:
# sudo apt-key list | grep Google

# Part 3 Update package list
sudo apt-get update

# Part 4 Install Google Cloud SDK
sudo apt-get install google-cloud-sdk

# If installation is interrupted, apt-get will resume automatically:
# sudo apt-get install -f google-cloud-sdk
Enter fullscreen mode Exit fullscreen mode

Checkpoint Verify Part B Complete

gcloud version
# Should display version information if successful
Enter fullscreen mode Exit fullscreen mode

Using yum (Red Hat/CentOS/Fedora)

# Part 1 Add Google Cloud SDK repository
sudo tee -a /etc/yum.repos.d/google-cloud-sdk.repo << EOM
[google-cloud-sdk]
name=Google Cloud SDK
baseurl=https://packages.cloud.google.com/yum/repos/cloud-sdk-el7-x86_64
enabled=1
gpgcheck=1
repo_gpgcheck=1
gpgkey=https://packages.cloud.google.com/yum/doc/yum-key.gpg
       https://packages.cloud.google.com/yum/doc/rpm-package-key.gpg
EOM

# If interrupted here, check if repo file exists:
# cat /etc/yum.repos.d/google-cloud-sdk.repo

# Part 2 Install Google Cloud SDK
sudo yum install google-cloud-sdk

# If interrupted, yum will handle resume automatically
Enter fullscreen mode Exit fullscreen mode

Checkpoint Verify Part B Complete

gcloud version
# Should display version information if successful
Enter fullscreen mode Exit fullscreen mode

Using Manual Installation (Any Linux)

# Step 1 Download the SDK (can be resumed if interrupted)
curl https://sdk.cloud.google.com | bash

# If download is interrupted:
# rm -rf ~/google-cloud-sdk
# Then re-run the curl command

# Step 2 Restart shell or source the path
exec -l $SHELL

# Or add to PATH manually:
# echo 'source "$HOME/google-cloud-sdk/path.bash.inc"' >> ~/.bashrc
# source ~/.bashrc
Enter fullscreen mode Exit fullscreen mode

Checkpoint Verify Part B Complete

gcloud version
# Should display version information if successful
Enter fullscreen mode Exit fullscreen mode

Windows Installation

Using Installer

  1. Download the Google Cloud SDK installer:

  2. Run the installer:

    • Double-click the downloaded .msi file
    • Follow the installation wizard
    • If interrupted, re-run the installer (it will resume)

  3. Checkpoint Verify Part B Complete

    • Open a new Command Prompt or PowerShell window
    • Run gcloud version
    • Should display version information if successful

Using Chocolatey (if installed)

# Install Google Cloud SDK
choco install gcloudsdk

# Checkpoint Verify installation
gcloud version
Enter fullscreen mode Exit fullscreen mode

Using Winget (Windows Package Manager)

# Install Google Cloud SDK
winget install Google.CloudSDK

# Checkpoint Verify installation
gcloud version
Enter fullscreen mode Exit fullscreen mode

Part C Initialize and Authenticate

Now that gcloud is installed, initialize and authenticate:

# Step 1 Initialize gcloud
gcloud init

# This will prompt you to
# - Log in with your Google account
# - Choose or create a project
# - Set default region/zone

# If interrupted during initialization:
# Simply re-run gcloud init
# It will resume from where it left off
Enter fullscreen mode Exit fullscreen mode

Alternative Manual Authentication

If gcloud init is interrupted, you can authenticate separately:

# Step 1 Authenticate
gcloud auth login

# This will open a browser for authentication
# If browser doesn't open, use gcloud auth login --no-browser

# Step 2 Set project (after authentication)
gcloud config set project YOUR_PROJECT_ID

# Step 3 Set region (optional, recommended)
gcloud config set run/region asia-southeast1
# or us-central1, europe-west1, etc.
Enter fullscreen mode Exit fullscreen mode

Checkpoint Verify Part C Complete

# Verify authentication
gcloud auth list

# Should show your authenticated account with an asterisk (*)

# Verify current configuration
gcloud config list

# Should show your project, region, etc.
Enter fullscreen mode Exit fullscreen mode

Part D Enable Required APIs

After authentication, enable the APIs needed for Cloud Run

# Enable Cloud Build API
gcloud services enable cloudbuild.googleapis.com

# If interrupted, check which APIs are enabled:
# gcloud services list --enabled

# Enable Cloud Run API
gcloud services enable run.googleapis.com

# Verify both APIs are enabled
gcloud services list --enabled | grep -E "cloudbuild|run"
Enter fullscreen mode Exit fullscreen mode

Checkpoint Verify Part D Complete

# Should show both cloudbuild and run APIs as enabled
gcloud services list --enabled | grep -E "cloudbuild|run"
Enter fullscreen mode Exit fullscreen mode

Installation Complete!

If all checkpoints passed, your Google Cloud SDK is ready. You can verify everything works:

# Full verification
gcloud version
gcloud components list
gcloud config list
gcloud auth list
Enter fullscreen mode Exit fullscreen mode

Step 2 Prepare Your Application

This application uses a multi-stage Docker build:

  1. Build stage Compiles the React application using Node.js
  2. Production stage Serves the static files using Nginx

The Dockerfile is already configured for Cloud Run with:

  • Port 8080 (Cloud Run default)
  • Nginx configuration for SPA routing
  • Optimized multi-stage build

No additional configuration needed. The application is ready to deploy.

Step 3 Deploy to Cloud Run

Method 1 Direct Deployment from Source (Recommended)

This is the easiest method - Cloud Run will build and deploy your application automatically

But it also can do that if you want to build Dockerfile on your locally first before run this command

gcloud run deploy portfolio \
  --source . \
  --platform managed \
  --region asia-southeast1 \
  --allow-unauthenticated \
  --labels dev-tutorial=devnewyear2026 \
  --port 8080
Enter fullscreen mode Exit fullscreen mode

if success it will show like this

Notes

  • Replace portfolio with your preferred service name
  • Choose a region closest to your users (e.g., us-central1, asia-southeast1, europe-west1)
  • The --labels dev-tutorial=devnewyear2026 flag is required if submitting to the Dev.to challenge
  • --allow-unauthenticated makes your service publicly accessible
  • --port 8080 matches the port exposed in your Dockerfile

Method 2 Build Docker Image First

If you prefer to build the Docker image locally or using Cloud Build:

# Build the Docker image using Cloud Build
gcloud builds submit --tag gcr.io/$(gcloud config get-value project)/portfolio

# Deploy to Cloud Run
gcloud run deploy portfolio \
  --image gcr.io/$(gcloud config get-value project)/portfolio \
  --platform managed \
  --region asia-southeast1 \
  --allow-unauthenticated \
  --labels dev-tutorial=devnewyear2026 \
  --port 8080
Enter fullscreen mode Exit fullscreen mode

Method 3 Using Cloud Build Config

You can also use the provided cloudbuild.yaml:

gcloud builds submit --config cloudbuild.yaml
Enter fullscreen mode Exit fullscreen mode

Then deploy the built image:

gcloud run deploy portfolio \
  --image gcr.io/$(gcloud config get-value project)/portfolio \
  --platform managed \
  --region asia-southeast1 \
  --allow-unauthenticated \
  --labels dev-tutorial=devnewyear2026 \
  --port 8080
Enter fullscreen mode Exit fullscreen mode

Step 4 Verify Deployment

After deployment, Cloud Run will provide you with a URL

https://portfolio-xxxxx-uc.a.run.app
Enter fullscreen mode Exit fullscreen mode

Visit the URL to verify your portfolio is live! Cloud Run automatically provides:

  • HTTPS encryption
  • A custom domain (or you can configure your own)
  • Global CDN distribution

Step 5 Update and Redeploy

To update your application after making changes

# Simply redeploy (Cloud Run will rebuild if needed)
gcloud run deploy portfolio \
  --source . \
  --platform managed \
  --region asia-southeast1 \
  --allow-unauthenticated \
  --labels dev-tutorial=devnewyear2026 \
  --port 8080
Enter fullscreen mode Exit fullscreen mode

Cost Considerations

Google Cloud Run offers a generous free tier

  • CPU First 240,000 vCPU-seconds free per month
  • Memory First 450,000 GiB-seconds free per month
  • Requests First 2 million requests free per month

For a portfolio website with moderate traffic, you should stay well within the free tier. Cloud Run only charges when requests are being processed (scales to zero).

Useful Commands 

# List all Cloud Run services
gcloud run services list

# View service details
gcloud run services describe portfolio --region asia-southeast1

# View logs
gcloud run services logs read portfolio --region asia-southeast1

# Delete service
gcloud run services delete portfolio --region asia-southeast1

# View service URL
gcloud run services describe portfolio --region asia-southeast1 --format='value(status.url)'
Enter fullscreen mode Exit fullscreen mode

Good luck with your deployment! 🚀

Top comments (0)