The latest articles on DEV Community by Tammy Inoma-Batubo (@tammy_inomabatubo_1a2f0f). https://dev.to/tammy_inomabatubo_1a2f0f https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3721639%2F3d5945a8-6f6c-41d6-aae1-9dac10977cba.jpg https://dev.to/tammy_inomabatubo_1a2f0f en Tammy Inoma-Batubo Tue, 20 Jan 2026 14:35:10 +0000 https://dev.to/tammy_inomabatubo_1a2f0f/my-new-year-new-you-portfolio-kam https://dev.to/tammy_inomabatubo_1a2f0f/my-new-year-new-you-portfolio-kam <p><em>This is a submission for the <a href="https://dev.to/challenges/new-year-new-you-google-ai-2025-12-31">New Year, New You Portfolio Challenge Presented by Google AI</a></em></p> <h2> About Me </h2> <p>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.</p> <h2> Portfolio </h2> <p> </p> <div class="ltag__cloud-run"> <iframe height="600px" src="https://portfoliov3-rmezn4lyua-bq.a.run.app/"> </iframe> </div> <h2> How I Built It </h2> <p>This project was built with a focused, high-performance tech stack:</p> <ul> <li> <strong>Core</strong>: Next.js 14, TypeScript, and Tailwind CSS.</li> <li> <strong>3D Engine</strong>: Three.js with <code>@react-three/fiber</code> and <code>@react-three/drei</code> for the interactive global scene.</li> <li> <strong>Motion</strong>: GSAP and Framer Motion for smooth, hardware-accelerated transitions.</li> <li> <strong>The Core AI</strong>: I integrated <strong>Google Gemini 2.0 Flash</strong> (via the new <code>@google/genai</code> 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 <strong>Google Nano Banana</strong> to generate and refine the high-fidelity AI assistant interface, ensuring a consistent and premium visual identity.</li> <li> <strong>Development Partner</strong>: The entire architecture, from Three.js optimizations to the hybrid AI backend, was developed in collaboration with <strong>Google Antigravity</strong>, which served as my primary AI pairing partner for rapid prototyping, debugging, and system engineering.</li> <li> <strong>Resilience</strong>: I implemented a hybrid backend that automatically falls back to OpenAI if there's any uplink interference, ensuring the system is always online.</li> </ul> <h3> Design Decisions </h3> <p>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.</p> <h2> What I'm Most Proud Of </h2> <p>I'm most proud of the <strong>Intelligence-Performance Balance</strong>. </p> <ol> <li> <strong>The AI Core</strong>: 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.</li> <li> <strong>Performance Engineering</strong>: 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.</li> <li> <strong>Adaptive Motion</strong>: The site respects user preferences by automatically simplifying animations if "Reduced Motion" is enabled, without losing its futuristic character.</li> </ol> devchallenge googleaichallenge portfolio gemini