DEV Community

Cover image for Minimalism Defying Gravity: My Entry for the Google AI Portfolio Challenge 🚀
Rohith V
Rohith V

Posted on

Minimalism Defying Gravity: My Entry for the Google AI Portfolio Challenge 🚀

#devchallenge #googleaichallenge #portfolio #gemini

New Year, New You Portfolio Challenge Submission

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

About Me

Senior Application Engineer @ Oracle | Java & Spring Boot Enthusiast

I am a Senior Application Engineer at Oracle with over 4 years of experience building scalable enterprise solutions and optimizing UI performance for thousands of customers. My work ranges from architecting Agentic AI tools to leading complex cloud migrations.

Beyond the corporate world, I am passionate about competitive programming and data structures. I love breaking down complex algorithmic challenges and sharing my learnings with the community. You might have seen my articles on Dev.to and Medium, where I help over 1,200 followers master Java and problem-solving.

Tech Stack: Java, Spring Boot, JavaScript, SQL Writing about: Data Structures, Algorithms, and System Design

Portfolio

How I Built It

Portfolio Minimal

A Minimal, Fresh, and Clean personal portfolio website built with React, Vite, Tailwind CSS, and Antigravity. It features a dual-interface design: a stunning standard scroll view and a geeky Terminal Mode for CLI enthusiasts.

✨ Features

  • Dual View Modes:
    • Standard: Clean typography, smooth scrolling, and responsive layout.
    • Terminal Mode: A simulated MacBook terminal environment. Type commands like /experience or /help to navigate.
  • Smart Navigation:
    • ChatBot: An AI-style assistant that scrolls you to sections (e.g., "Show me your skills").
    • Smooth Scroll: Polished scroll interactions.
  • Theming:
    • Dark/Light Toggle: Seamless switching between light (fresh) and dark (sleek) themes.
  • Modern Tech Stack:
    • React + Vite: Chosen for lightning-fast HMR and component-based architecture.
    • Tailwind CSS: Utility-first styling for consistent design tokens and dark mode support.
    • Framer Motion: Smooth, spring-physics based animations for entrance effects and interactions.
    • Lucide React: Clean, lightweight SVG icons that match the minimal aesthetic.

? Design Philosophy

The goal was to build a portfolio that stands out by doing less.

  • Minimalism: We stripped away heavy backgrounds and complex layouts in favor of whitespace, typography, and content.
  • Freshness: The "Standard" view is designed to feel like a breath of fresh air—smooth scrolling, pill-shaped interactions, and subtle motion.
  • Geek Mode: For the developers and CLI lovers, we included a Terminal Mode and ChatBot. It's a nod to our roots—sometimes the command line is just faster (and cooler) than a GUI.

? Layout & Sections

  • Hero: Minimal introduction with resume download and social links.
  • Experience: Time-line style work history.
  • Highlights: "Most Proud Of" section with card layouts.
  • Skills: Technical stack showcase.

- Contact: Pill-shaped interactive contact links.

? Getting Started

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn

1. Fork & Clone

To make this project your own, fork the repository to your GitHub account:

  1. Click the Fork button at the top right of this page.

  2. Clone your forked repository:

    git clone https://github.com/YOUR_USERNAME/portfolio-minimal.git
cd portfolio-minimal

2. Install Dependencies

Install the required packages:

npm install
Enter fullscreen mode Exit fullscreen mode

3. Run Locally

Start the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:5173 (or the port shown in your terminal) to view it in the browser.

4. Build for Production

To create an optimized build for deployment:

npm run build
Enter fullscreen mode Exit fullscreen mode

? Terminal Commands (MacBook View)

Switch to Terminal Mode by clicking the Laptop Icon in the navbar.

  • /help - List all commands
  • /experience - View work history
  • /skill - List technical skills
  • /proud - View highlights
  • /contact - Show contact info
  • exit - Return to standard view ### ? License Distribute freely. Credit is appreciated! MIT License.

What I'm Most Proud Of

Confused meme
Building the portfolio was one thing; deploying it was an entirely different beast. My goal was ambitious: a single codebase deployed simultaneously to GitHub Pages (for visibility) and Google Cloud Run (for the challenge).

Here is the breakdown of how everything broke, and the specific engineering decisions I made to fix it.

  1. The Authentication Wall
    The Error: Error: Key is already in use.
    What broke: I was confident I had SSH keys set up, but when I tried to add my existing key to my GitHub account, I hit a brick wall. It turned out the key on my machine was already linked to an old, forgotten GitHub account. Since GitHub treats SSH keys as unique fingerprints, it wouldn't allow me to reuse the same key for my new identity. The Fix: instead of trying to recover the old account, I generated a brand new Ed25519 key specifically for this profile. I then configured my local SSH agent to recognize this new identity, effectively separating my past "ghost" account from my current work. The Lesson: In the world of git, keys are strict identities, not just reusable passwords. You can't be two people at once with the same fingerprint.

  2. The "Missing" Homepage
    The Error: My live site rendered my README.md instead of my React app. What broke: My project wasn't at the root of the repository; it was nested inside a /portfolio-minimal folder. GitHub Pages defaults to serving the root directory. The Fix: I moved away from the standard "Deploy from Branch" method and wrote a custom GitHub Actions workflow. I configured the upload-pages-artifact step to target my specific subdirectory (path: './portfolio-minimal'), essentially telling the build server exactly where to look.

  3. The "Raw Code" Trap
    The Error: 404 Not Found: /src/main.jsx What broke: Once the folder was found, the browser tried to load my source code directly. Browsers can't read React (.jsx) or TypeScript; they need standard JavaScript. The Fix: I updated my CI/CD pipeline to include a Build Step. I added a job to install Node.js dependencies and run npm run build inside the action. This compiled my raw React code into a static dist folder, which is what actually gets shipped to the user.

  4. The Path Mismatch (The 404 Nightmare)
    The Error: The site loaded, but was a blank white screen. The console screamed 404 for every CSS and JS asset. What broke: My repository name was Tryouts, so GitHub hosted the site at username.github.io/Tryouts/. However, Vite (my bundler) assumed the site was at the root (/), so it looked for assets in the wrong place. The Fix: I reconfigured vite.config.js to set the base path to /Tryouts/. This aligned my asset requests with the actual URL structure.

  5. The Cloud Build Context
    The Error: Dockerfile: no such file or directory What broke: Moving to Google Cloud Run, the build failed immediately. The Cloud Build trigger runs from the repository root, but my Dockerfile was hidden inside the subdirectory. The Fix: I modified the cloudbuild.yaml to include dir: portfolio-minimal in the build step. This forced the builder to "change directory" into my project folder before attempting to read the Docker instructions.

  6. The Port Collision
    The Error: The user-provided container failed to start... PORT=8080 What broke: Cloud Run acts as a reverse proxy sending traffic to port 8080. My Nginx container was listening on the standard web port 80. The signals were crossing, and the container crashed. The Fix: I updated my Nginx configuration (nginx.conf) and Dockerfile to explicitly listen and EXPOSE port 8080, aligning my container's internal networking with Google's infrastructure requirements.

  7. The Dual-Environment Dilemma (The Final Boss)
    The Error: Fixing the path for GitHub Pages (/Tryouts/) broke the site on Cloud Run (which runs at the root /). I couldn't have hardcoded paths for both. What broke: One static configuration cannot serve two different deployment environments. The Fix: I implemented conditional logic in my build process.

In vite.config.js, I added a check for an environment variable called BASE_PATH.

In my Dockerfile, I injected ENV BASE_PATH=/.

Result: When building for GitHub, it defaults to /Tryouts/. When building for Docker/Cloud Run, it dynamically switches to /.

💡 The Big Takeaway
This project wasn't just about writing React components; it was a crash course in DevOps. I learned that code doesn't live in a vacuum—it lives in environments, and mastering those environments is just as important as mastering the syntax.

My Github Repo : https://github.com/Rohithv07/Tryouts

Top comments (0)