DEV Community

Cover image for Building My Developer Portfolio with Next.js, shadcn/ui & Google Cloud Run 🚀
Azeez Roheem
Azeez Roheem

Posted on

Building My Developer Portfolio with Next.js, shadcn/ui & Google Cloud Run 🚀

#devchallenge #googleaichallenge #career #gemini

New Year, New You Portfolio Challenge Submission

Hey there! 👋

I'm Azeez Roheem, a full-stack JavaScript developer with 5+ years of experience building scalable ecommerce systems and impact-driven digital products. When I saw the "New Year, New You" Portfolio Challenge by Google AI, I knew it was the perfect opportunity to finally revamp my portfolio website.

💡 Why I Joined This Challenge

My old portfolio was outdated and didn't reflect my current skills or the work I've been doing. I'd been putting off updating it for months (we've all been there, right? 😅).

When I discovered this challenge, I thought: "What better motivation than a deadline, prizes, and the chance to learn something new?"

I wanted to:

  • Give my portfolio a fresh, modern look
  • Explore deploying to Google Cloud for the first time
  • Push myself to learn new tools and workflows

🖥️ Live Portfolio

Live URL: https://developer-portfolio-jgtmqruaaq-uc.a.run.app/

🛠️ Tech Stack

Category Technology
Framework Next.js 14 (App Router)
Language TypeScript
Styling Tailwind CSS
Components shadcn/ui (customized)
Animations Framer Motion
Deployment Google Cloud Run
Container Docker (multi-stage build)

🎨 Design Approach

I wanted something that stands out from typical developer portfolios. I went with an editorial meets modern aesthetic:

  • Playfair Display serif font for elegant headlines
  • JetBrains Mono for code elements
  • Warm cream background with vibrant orange accents
  • Subtle grain texture for depth
  • Animated code window in the hero section
  • Smooth scroll-triggered animations with Framer Motion

🚧 The Interesting Challenge: First Time with Google Cloud!

This was my first time deploying anything to Google Cloud, and honestly, it was both exciting and a bit nerve-wracking!

What I Learned Along the Way

1. Setting up the Google Cloud CLI
I had to install the gcloud CLI and authenticate. Simple enough, but it was new territory for me.

gcloud auth login
gcloud config set project personal-portfolio-486121
Enter fullscreen mode Exit fullscreen mode

2. Docker Multi-Stage Builds
I learned how to optimize my Docker image using multi-stage builds to keep the final image small:

# Stage 1: Dependencies
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

# Stage 2: Build
FROM node:20-alpine AS builder
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

# Stage 3: Production (minimal image)
FROM node:20-alpine AS runner
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
CMD ["node", "server.js"]
Enter fullscreen mode Exit fullscreen mode

3. Cloud Build + Cloud Run Deployment
The actual deployment was surprisingly straightforward once everything was set up:

# Build the container
gcloud builds submit --tag gcr.io/$PROJECT_ID/developer-portfolio

# Deploy to Cloud Run
gcloud run deploy developer-portfolio \
  --image gcr.io/$PROJECT_ID/developer-portfolio \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated
Enter fullscreen mode Exit fullscreen mode

Within minutes, my portfolio was live with a real URL! 🎉

The "Aha!" Moment

Seeing my portfolio deployed and accessible from anywhere was incredibly satisfying. Google Cloud Run handles all the scaling automatically — if my portfolio suddenly gets a lot of traffic (fingers crossed! 🤞), it'll scale up. If no one's visiting, it scales down to zero. Pretty neat for a portfolio site!

🤖 Exploring AI in the Process

While building this portfolio, I also explored using AI as a development companion. It helped me:

  • Generate boilerplate code faster
  • Debug deployment issues
  • Refine my design approach
  • Write cleaner, more maintainable components

It's amazing how AI tools can accelerate the development process when you're learning new platforms like Google Cloud.

✨ Key Features

Animated Hero Section

A floating code window that "types out" my developer profile:

const developer = {
  name: "Azeez Roheem",
  stack: ["React", "Next.js", "Node"],
  focus: "Scalable Solutions",
  available: true,
};
Enter fullscreen mode Exit fullscreen mode

Interactive Project Cards

Hover effects that reveal project details with smooth transitions.

Scroll-Triggered Animations

Using Framer Motion's whileInView for elegant reveal effects as you scroll.

Fully Responsive

Mobile-first design that looks great on any device.

📁 My Projects Showcased

1. NanoCrafts - Software Consulting Agency
My technology consulting firm delivering end-to-end digital transformation services.
🔗 nanocrafts.xyz

2. Teeq - Ecommerce Dashboard
Full-stack e-commerce solution with product management and inventory tracking.
🔗 teeq.vercel.app

🎓 Key Takeaways

  1. Google Cloud Run is beginner-friendly — Even as a first-timer, I got my app deployed without major issues
  2. Docker knowledge pays off — Understanding containers made the deployment process much smoother
  3. AI accelerates learning — Using AI tools helped me quickly understand new concepts and debug issues
  4. Challenges create motivation — Sometimes you just need a deadline to finally update that portfolio!

🔗 Connect With Me

🙏 Thanks for Reading!

This challenge pushed me out of my comfort zone and taught me something new. If you've been putting off updating your portfolio (like I was), take this as your sign to just start!

Drop a ❤️ if you found this helpful, or leave a comment — I'd love to hear about your experience with the challenge!

Happy coding! 🚀

Built with Next.js, shadcn/ui, Tailwind CSS, and deployed on Google Cloud Run for the Google AI "New Year, New You" Portfolio Challenge 2026

Top comments (0)