Building a Modern Digital Garden with Google AI: My New Year, New You Portfolio

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

About me

Hi, I’m Emmanuel Uchenna - a software engineer, technical writer, and digital health advocate who is passionate about building technology that empowers people.

My journey in tech began over five years ago, fueled by a curiosity about how lines of code could translate into meaningful human experiences. Today, I specialize in crafting clean, scalable user interfaces using React, Next.js, and the broader modern web ecosystem. But for me, code is just one part of the equation. I also love translating complex technical ideas into clear, engaging content through articles, documentation, and whitepapers.

Beyond the terminal, I am deeply invested in the intersection of technology and healthcare. As a digital health advocate, I explore how software can be used to enhance patient outcomes and increase the accessibility of health information.

My goal with this portfolio was simple yet ambitious: to create a platform that is fast, accessible, and truly reflects my current skillset and style. I wanted a space that didn't just list my projects but demonstrated my philosophy of "premium simplicity" - a belief that the most effective digital experiences are those that get out of the user's way while providing delight through subtle interactions and solid performance.

Portfolio

(Note: The above embed links to my portfolio deployed on Google Cloud Run. You can also visit the live site at eunit.me)

How I built it

Building a portfolio in 2025 is an interesting challenge. The tools available to us have undergone significant evolution. For this project, I decided to lean heavily into the Google AI ecosystem to see how much it could accelerate my workflow without compromising on quality. The results were genuinely surprising, transforming what could have been a week-long slog into an inspired sprint.

The tech stack

I chose a stack that emphasizes performance, scalability, and developer experience:

• Core Framework: Next.js (App Router) for a robust, server-side rendered foundation. The file-based routing and React Server Components allowed me to keep the application fast and SEO-friendly.
• Styling: Tailwind CSS. I adopted a utility-first approach to implement a strict design system. This made handling responsive layouts and adopting dark mode incredibly seamless.
• Database: PostgreSQL. I needed a reliable relational database to manage dynamic content, such as tracking blog post views and managing newsletter subscriptions.
• Deployment: Google Cloud Run. I wanted a serverless, containerized deployment that could scale to zero when not in use but handle traffic spikes if a post went viral.

The Deployment Pipeline: From Local to Global

One of the requirements for this challenge was deploying to Google Cloud Run, and honestly, it was one of the smoothest parts of the process. I didn't want to "throw code over the wall"; I wanted a reproducible, containerized pipeline.

I created a Dockerfile that leverages a multi-stage build directly for Next.js. This keeps the final image lightweight, only around 80MB, by stripping out development dependencies and unused files.

# ... standard Next.js multi-stage build ...
CMD ["node", "server.js"]

Deploying was as simple as running a single command with the Gemini CLI helper to push the container to Google Artifact Registry and creating a simpler Cloud Run service. Now, whenever I push to my main branch, a seamless CI/CD pipeline builds the container and updates the revision. This "git-push-to-deploy" workflow gives me the confidence to ship small, iterative updates frequently.

Leveraging Google AI tools

This wasn't just a standard build; it was an AI-assisted development process. Here is a deep dive into how I used Google's tools to bring this vision to life:

1. Google's Antigravity (The AI-first IDE)

Antigravity was the centerpiece of my development environment. It acted as my pair programmer throughout the entire process, fundamentally changing how I wrote code. Instead of constantly context-switching between my editor and a browser to look up documentation or debug errors, I stayed in the flow.

Refactoring with confidence One of the most complex tasks was refactoring my custom UI components to be more reusable. For instance, I had multiple ad-hoc modal implementations scattered across the codebase—ReviewModal, DriverProfileModal, and others. I used Antigravity to analyze these disparate files. It suggested a unified Modal architecture using framer-motion for smooth entry and exit animations. It didn't just give me a snippet; it walked me through the implementation plan, ensuring I correctly handled prop drilling and accessibility (ARIA labels).

Intelligent debugging During the build, I encountered a tricky TypeScript error with a Chakra UI Text component regarding polymorphic props (as prop conflicts). Usually, this would send me down a generic Stack Overflow rabbit hole. Instead, I asked Antigravity. It analyzed my specific component usage, explained why the type inference was failing, and offered a precise fix that satisfied the TypeScript compiler without using any.

Proactive optimization Antigravity was like having a senior engineer looking over my shoulder. It proactively suggested checks for image optimization, reminding me to use the sizes prop on my next/image components to prevent layout shifts (CLS) and improve LCP scores.

2. AI Studio & Gemini Models

While Antigravity handled the code, AI Studio dealt with the creative direction. I used it as my "Editor-in-Chief" to brainstorm the content strategy and structure of the site.

Content generation and refinement I fed the model my previous bio and project descriptions and asked it to help me refine the tone to be more professional yet approachable. The "New Year, New You" theme resonated with me, so I utilized Gemini to help draft sections of the site that needed fresh text, particularly for my new "Health" section. It helped me articulate my dual passion for engineering and digital health in a way that felt cohesive rather than disjointed.

Idea generation When I was stuck on how to present my "Research" papers, I used AI Studio to generate layout ideas. It suggested a card-based layout with abstract summaries, which I then implemented in code. It essentially bridged the gap between a vague idea and a concrete design specification.

3. Gemini CLI

For repetitive tasks and automation, the Gemini CLI was a lifesaver. I used it to quickly scaffold standard boilerplate code for new pages and components. It sped up the "boring" parts of development so I could focus on the creative aspects, like the micro-interactions and layout adjustments.

Design decisions

The "Premium Simplicity" aesthetic I opted for a strict black-and-white (B&W) aesthetic. I believe that constraints breed creativity. By removing color as a primary tool for hierarchy, I was forced to rely on spacing, typography, and contrast to guide the user's eye. This resulted in a design that feels premium, modern, and uncluttered. It helps the actual content, my articles and projects, stand out without visual noise.

Component-driven architecture I prioritized a component-driven architecture to ensure maintainability and flexibility. Every piece of the UI, from the ProjectList to the BlogCard, is a self-contained component. This modularity means that if I want to update the design of my cards next year, I only have to change it in one place.

Typography as interface In a black-and-white design, typography does the heavy lifting. I chose a variable font that allows for subtle weight transitions on hover, creating a tactile feel without the need for color shifts. It’s accessible, performant, and sharp on high-DPI displays. I also ensured that all interactive elements have sufficient contrast ratios (meeting WCAG AAA standards), proving that "stylish" doesn't have to mean "unreadable."

What I'm most proud of

There are a few aspects of this project that I am particularly proud of, as they represent significant personal and technical growth.

1. The "Health" section Integrating my work in digital health into my developer portfolio was a big step. It’s a dedicated space for articles covering health and well-being topics, bridging the gap between my technical skills and my advocacy work. For a long time, I kept these two worlds separate; my GitHub profile showed one person, while my community work showed another.

Merging them here makes the portfolio feel uniquely mine and tells a more complete story of who I am.

2. Performance & accessibility I didn't want just a pretty site; I wanted a fast one. With the help of Antigravity's suggestions, I optimized my images, refined my script loading strategies (for things like analytics), and minimized layout shifts. Achieving high Lighthouse scores was a key milestone. It proves that you don't have to sacrifice performance for a modern aesthetic.

3. The seamless AI workflow Honesty, I am most proud of how effectively I integrated AI into the loop. Using Antigravity and Gemini felt less like using a tool and more like working with a collaborator who knows my codebase inside out. It allowed me to be more ambitious with my features, such as adding dynamic view counters and complex animations, and more confident in my code quality. It shifted my role from "writer of code" to "architect of solutions."

Wrapping Up

This challenge was the perfect excuse to finally ship the v3 of my portfolio. It represents not just a visual refresh, but a "backend" refresh of my own skills and workflows. By embracing AI-first development with Google's tools, I've built something that sets the tone for my work in 2026.