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

About Me

Most AI engineers stop at 96% accuracy on test data. I keep going until the system retrains itself when performance drifts.

While much of the industry is racing to build ChatGPT wrappers, I focus on AI systems that survive contact with reality. These systems detect their own failures, recover at 3 AM, and operate on edge devices, not just cloud servers with unlimited resources.

I'm Angira Ronan. For three years, I've been building AI systems that survive reality. Self-healing vision models. Automated recruitment pipelines. IoT solutions delivering 30% efficiency gains. My job? Taking the impossibly complex and making it effortlessly simple.

Great engineering isn't just about making things work. It's about making them work beautifully.

Because if I can't make my own portfolio compelling, why would you trust me with your production systems?

Portfolio

Here is my Portfolio Link

How I Built It

Tech Stack

The portfolio is built on a modern React stack. I used Vite for blazing-fast development and builds.

TypeScript provides type safety throughout the codebase. Tailwind CSS handles utility-first styling, keeping everything clean and maintainable.

For the component library, I leveraged shadcn/ui components. I customized them extensively to match my design vision.

Animation & Interaction

Framer Motion powers all the sophisticated animations you see. This includes the floating bubble backgrounds in the Hero section and the staggered card reveals.

The typing effect that cycles through my professional roles uses custom React hooks. I implemented useTypingAnimation and useCountAnimation hooks that trigger only when elements enter the viewport.

typescript
useEffect(() => {
const role = roles[currentRole];
const timeout = setTimeout(() => {
if (!isDeleting && displayText.length < role.length) {
setDisplayText(role.slice(0, displayText.length + 1));
} else if (!isDeleting) {
setTimeout(() => setIsDeleting(true), 2000);
} else if (displayText.length > 0) {
setDisplayText(displayText.slice(0, -1));
} else {
setIsDeleting(false);
setCurrentRole((prev) => (prev + 1) % roles.length);
}
}, isDeleting ? 50 : 100);
return () => clearTimeout(timeout);
}, [displayText, isDeleting, currentRole]);

These hooks use intersection observers for optimal performance. They ensure animations run only when users can actually see them.

Design System

I established a comprehensive design token system in CSS. Semantic variables for colours ensure consistent theming across light and dark modes.

The colour palette features a vibrant purple-to-pink gradient accent. This creates visual cohesion throughout the site.

For typography, I paired Space Grotesk display font with Inter. This combination creates a modern, professional hierarchy.

Backend & Infrastructure

The project runs on Google Cloud Run. This provides full backend infrastructure for potential future features like contact form submissions or analytics.

The architecture is designed to be easily extensible. I can add new features without major refactoring.

AI-Assisted Development

I used Google's AI tools throughout the development process. Gemini helped with code generation and debugging complex animation logic.

The Google AI Studio also assisted in refining the design system. It suggested optimizations for performance-critical animations.

This allowed me to iterate quickly on component architecture. The development process was significantly faster than traditional methods.

What I’m Most Proud Of

The Skills Section Animation System

I'm particularly proud of the sophisticated typing and counting animation system in the Skills section.

Each technology name types out character-by-character with variable speeds (50-80ms). A blinking cursor accompanies the typing effect.

Proficiency percentages count up from 0% using easeOutExpo easing. This creates that satisfying deceleration effect.

Users can even replay animations by clicking individual skills. This adds an interactive element that engages visitors.

Dark & Light Mode Excellence

Dark mode features luminous gradients and glowing text shadows.

Light mode uses softer tones with refined contrast for comfortable reading.

I calibrated contrast ratios specifically for each theme, ensuring content pops in dark mode and stays crisp in light mode.

Users can switch between them instantly—both feel intentional, not like one mode was an afterthought.

Dynamic Projects Showcase

The Projects section features an innovative card system with floating, rotating display. Cards dynamically shift positions, creating an engaging 3D carousel effect.

Each project card uses distinct gradient backgrounds (blue, orange, green) that maintain visibility in dark mode. The cards tilt and scale on hover, adding depth perception.

The technology badges at the top of each card use semi-transparent overlays. This ensures they remain readable against varied gradient backgrounds.

The rotating animation uses transform3d for hardware acceleration. This ensures smooth 60fps performance even with multiple cards animating simultaneously.

Users can navigate through projects intuitively. The cards respond to mouse movement and clicks, creating an immersive browsing experience.

Final Verdict

This portfolio proves a simple point: you don't choose between technical excellence and beautiful design. You deliver both, or you're not done yet.

Every line of code here has a job. Every animation earns its place. That's not perfectionism—it's professionalism. It's how production systems should be built.