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

Hello! I am Inna Campo, a Bioinformatics AI Scientist dedicated to building human-in-the-loop AI systems that prioritize clinical logic, safety, and gender equity in healthcare.

My career has been an evolution: from optimizing distributed algorithms for supercomputers during my PhD, to tracking viral outbreaks at the CDC with the GHOST platform, and scaling predictive modeling for millions of users at IBM. Today, as Principal Scientist at HARMONI Lab, I lead an independent initiative to develop multi-agent AI ecosystems and RAG pipelines centered on women’s neuroendocrine health.

With this portfolio, I wanted to express that transition with a "bio-digital" aesthetic - something that feels calm, organic and alive, yet rigorously structured.

Portfolio

(Note: If the embed above doesn’t load, you can view the live site here: innacampo.com)

How I Built It

This project is a high-performance, single-page application (SPA) portfolio that bridges the gap between scientific engineering (HPC) and human-centric Agentic AI. It features a "bio-digital" aesthetic built on a performance-first architecture. I primarily ‘vibe-coded’ this app using AI Studio and Antigravity. It was a truly magical experience; as someone whose expertise lies in bioinformatics and AI safety rather than web design, these tools bridged the gap, allowing me to build a modern, high-performance site from the ground up. I also used Gemini to navigate the rapidly evolving landscape of modern web development.

Here is the Technical Stack of the end product:

1. Core Architecture & Frontend

• Framework: React 19

• Leverages the latest concurrent rendering features for smooth UI transitions.

• Build Tool: Vite 6

• Optimized production builds with ultra-fast Hot Module Replacement (HMR).

• Language: TypeScript 5.8

• End-to-end type safety for data constants, component props, and API interfaces.

2. Visual & Aesthetic System

• "Washed Watercolor" Background:

• Engine: CSS Radial and Linear gradients layered for a diffused, organic look.

• Anti-Banding: A localized SVG fractalNoise filter (30% opacity, Soft Light blend) prevents color banding across diverse display types.

• Decorative Arc: A single, high-precision SVG Bézier curve that serves as a minimal visual anchor.

• "Bio-Digital" DNA Loader:

• Transparent, full-screen loading sequence with a sharp, clinical aesthetic (no glows).

• CSS-driven helixMove animations for zero-jank page entry.

• Styling: Tailwind CSS

• Integrated via runtime CDN for flexible, instant styling updates.

• Custom themes for Slate, Emerald, and Amber palettes.

3. Optimization & Performance

• Particle Connections: The ParticleBackground (Neural Synapses) is hard-capped at 150 particles with $O(N^2)$ math optimizations and hardware acceleration hints (will-change: transform).
• Lazy Loading: Implicit scrolling reveals and optimized asset paths ensure a fast initial payload.

4. Artificial Intelligence & Backend

• AI Engine: Google GenAI SDK

• Model: gemini-3-flash-preview

• Powering an context-aware "Inna AI" assistant with specialized personas for HPC and Public Health domains.

• Backend: Express.js 5

• A secure proxy layer for the Gemini API ensures GEMINI_API_KEY protection.

• Serves compiled assets and handles client-side routing logic.

5. Deployment

• Platform: Google Cloud Run

• Infrastructure: Containerized via Docker; deployed as a stateless, auto-scaling service.

• Contact Handling: Integrated with Formspree for reliable, serverless communication. pi/chat` endpoint for the AI chatbot.

• Implements a catch-all route (*) to support client-side routing (React Router behavior) by serving index.html for non-API requests.

What I’m Most Proud Of

I’m especially proud of the Custom AI Assistant integrated into the site. Far beyond a simple greeting bot, I engineered a specialized persona that can pivot between discussing high-performance computing (HPC) and complex public health domains, powered by a secure Express.js proxy to the Gemini API.

I am also proud of the development velocity achieved through AI Studio and Antigravity. By treating Gemini as a design and trend consultant, I was able to build a professional-grade SPA that honors my rigorous scientific background while meeting 2026’s modern web standards, proving that "vibe-coding" is a legitimate and powerful tool for specialists to cross-pollinate their expertise into new domains.

P.S. If you’re a fellow engineer, don’t forget to check the console for a little surprise!