DEV Community

Cover image for My New Year, New You Portfolio
Tammy Inoma-Batubo
Tammy Inoma-Batubo

Posted on

My New Year, New You Portfolio

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

I am a Software Engineer with over 6 years of experience, passionate about the intersection of high-performance engineering and cinematic web design. My goal with this portfolio was to create more than just a resume—I wanted an "interactive system" that feels alive, intelligent, and precisely engineered.

Portfolio

How I Built It

This project was built with a focused, high-performance tech stack:

  • Core: Next.js 14, TypeScript, and Tailwind CSS.
  • 3D Engine: Three.js with @react-three/fiber and @react-three/drei for the interactive global scene.
  • Motion: GSAP and Framer Motion for smooth, hardware-accelerated transitions.
  • The Core AI: I integrated Google Gemini 2.0 Flash (via the new @google/genai SDK) to power the "Portfolio Core AI." Using Gemini allowed me to create a highly responsive, context-aware assistant with a professional, system-themed persona. I also utilized Google Nano Banana to generate and refine the high-fidelity AI assistant interface, ensuring a consistent and premium visual identity.
  • Development Partner: The entire architecture, from Three.js optimizations to the hybrid AI backend, was developed in collaboration with Google Antigravity, which served as my primary AI pairing partner for rapid prototyping, debugging, and system engineering.
  • Resilience: I implemented a hybrid backend that automatically falls back to OpenAI if there's any uplink interference, ensuring the system is always online.

Design Decisions

I opted for a "Tactical System" aesthetic—inspired by high-end gaming HUDs and cinematic interfaces. This meant deep blacks, vibrant accent colors, and subtle micro-animations that provide constant user feedback.

What I'm Most Proud Of

I'm most proud of the Intelligence-Performance Balance.

  1. The AI Core: Seamlessly integrating Gemini into the UI feels like having a real-time guide. It's not just a chatbot; it's the brain of the portfolio.
  2. Performance Engineering: Despite the heavy 3D and motion elements, the site remains incredibly fast. I implemented custom Three.js optimizations (pixel ratio capping, high-performance power preference) and strict CSS critical-path management to ensure a premium experience even on low-CPU devices.
  3. Adaptive Motion: The site respects user preferences by automatically simplifying animations if "Reduced Motion" is enabled, without losing its futuristic character.

Top comments (0)