Chrome OS-Inspired Portfolio: Where Beauty Meets Functionality

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

About Me

Hey there! I'm Depa Panjie, a Software Quality Assurance Engineer with 7+ years of breaking things professionally (and then fixing them).

Picture this: You're a QA Engineer who's tired of boring, static portfolios. You think, "What if my portfolio was an entire operating system?"

Crazy? Maybe. Awesome? Absolutely.

So I teamed up with Antigravity (powered by Gemini 3 Pro) and said: "Let's build Chrome OS... but make it a portfolio."

What happened next was pure magic.

Portfolio

Note: The embedded preview below has limited screen size. For the full desktop experience with draggable windows, multiple apps, and all interactive features, please click the Live Demo link below to open it in a new tab! The portfolio is optimized for screens wider than 768px.

• Live Demo: https://depapp-726779073670.asia-southeast2.run.app

What You're About to Experience

This isn't your typical portfolio. This is a fully functional Chrome OS-inspired desktop that runs entirely in your browser:

• 🪟 Drag, minimize, maximize windows like a real OS
• 📁 Files App - Explore my bio with a stunning glassmorphic design
• 🌐 Browser App - Browse my projects in a Chrome-style browser with tabs
• 💻 Terminal App - See my tech stack in an interactive CLI
• 📄 Docs App - View my resume in Google Docs style
• ✉️ Mail App - Contact me through a Gmail-inspired interface
• 🌓 Dark Mode - Smooth theme switching with Material You colors
• 🎯 Interactive Tour - Guided onboarding that feels like a game tutorial
• 📱 Smart Mobile Detection - Beautiful blocking screen for mobile users

Pro tip: Try opening multiple apps, dragging them around, and toggling dark mode. It's oddly satisfying.

How I Built It

The Dream Team

• Me: "I want a Chrome OS portfolio"
• Antigravity + Gemini 3 Pro: "Say no more, fam"

The Tech Stack

Frontend Magic:
├── React 18 + TypeScript (Type safety? Yes please!)
├── Vite (Lightning-fast builds ⚡)
├── Pure CSS (No frameworks, just vibes)
└── Lucide React (Beautiful icons)

AI Superpowers:
├── Antigravity (The AI pair programmer)
└── Gemini 3 Pro (The brain)

Deployment:
├── Docker (Multi-stage builds)
├── Nginx (Serving with style)
├── Google Cloud Run (Serverless magic)
└── Cloud Build (Auto-deploy from GitHub)

The AI-Assisted Development Process

Phase 1: The Foundation

Me: "Let's build a window management system"

Gemini: "Here's a React Context-based architecture with z-index management, drag handlers, and state persistence"

Result: A fully functional window manager in one session!

Phase 2: The Apps

We built 5 complete applications:

• Files app with glassmorphic cards
• Browser with tab management
• Terminal with command history
• Docs with Google-style toolbar
• Mail with form validation

Each app was crafted with Gemini suggesting optimal patterns and best practices.

Phase 3: The Polish

Me: "The dark mode text is hard to read"

Gemini: "Let's use a blue-tinted glassmorphic design with proper contrast ratios"

Result: That stunning "Who am I?" card you see in the Files app!

Phase 4: The Tour System

Me: "Users need guidance"

Gemini: "Let's integrate Driver.js with event-driven panel management"

Result: A complete tour loop that even closes panels automatically!

Phase 5: Mobile Strategy

Me: "Mobile responsive is hard for a desktop OS"

Gemini: "Let's detect mobile and show a beautiful blocking screen instead"

Result: A polite, well-designed message that maintains the desktop experience integrity!

Phase 6: Cloud Deployment

Me: "How do we deploy this?"

Gemini: "Here's a Dockerfile, nginx config, and Cloud Run setup with CI/CD"

Result: Push to GitHub → Auto-deploy to Cloud Run!

The AI Advantage

Working with Antigravity and Gemini was like having a senior developer who:

• Never gets tired
• Suggests best practices instantly
• Catches bugs before they happen
• Explains complex concepts clearly
• Iterates at the speed of thought

Real Example:

When I said "the Files app needs better dark mode colors," Gemini didn't just change colors, it suggested an entire design system with:

• Glassmorphic backgrounds
• Proper contrast ratios
• Backdrop blur effects
• Consistent spacing
• Accessible color combinations

That's not just coding that's design thinking powered by AI!

What I'm Most Proud Of

1. The "It Just Works" Factor

Everything is functional. Not "looks functional", actually functional. You can:

• Open 5 apps simultaneously
• Drag them anywhere
• Minimize and restore them
• Toggle dark mode mid-session
• Take a guided tour
• Contact me through the mail app

2. The Glassmorphic Design

That "Who am I?" card in the Files app? Pure art:

background: rgba(138, 180, 248, 0.08);
border: 2px solid rgba(138, 180, 248, 0.2);
backdrop-filter: blur(10px);

It glows in dark mode like a Chrome OS dream!

3. The Smart Tour System

The Driver.js integration is chef's kiss:

• Auto-starts on first visit
• Closes panels intelligently
• Completes a full loop (Login → Desktop → Logout)
• Skips on mobile devices
• Can be restarted from Quick Settings

4. The Window Manager

Built from scratch with:

• Drag and drop positioning
• Z-index stacking
• Focus management
• Minimize/maximize animations
• State persistence

5. The Deployment Pipeline

GitHub Push → Cloud Build → Container Registry → Cloud Run → Live!

Zero downtime. Automatic scaling. HTTPS by default. All configured with AI assistance!

6. The AI Collaboration

This project proves that AI isn't replacing developers, it's supercharging them. Gemini helped me:

• Write cleaner code
• Make better design decisions
• Catch edge cases early
• Optimize performance
• Deploy professionally