Chrome OS-Inspired Portfolio: Where Beauty Meets Functionality

Source: Dev.to

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

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

What You’re About to Experience

This isn’t a typical portfolio. It’s 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 a Google Docs‑style interface
• ✉️ 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: Open multiple apps, drag them around, and toggle dark mode for an oddly satisfying experience.

The Tech Stack

Frontend Magic

├── React 18 + TypeScript
├── Vite (lightning‑fast builds)
├── Pure CSS (no frameworks)
└── Lucide React (beautiful icons)

AI Superpowers

├── Antigravity (AI pair programmer)
└── Gemini 3 Pro (the brain)

Deployment

├── Docker (multi‑stage builds)
├── Nginx (serving with style)
├── Google Cloud Run (serverless)
└── Cloud Build (auto‑deploy from GitHub)

Development Phases

Phase 1 – The Foundation

Goal: Build a window‑management system.
Result: A React Context‑based architecture with z‑index management, drag handlers, and state persistence.

Phase 2 – The Apps

Created five complete applications:

1. Files – glassmorphic cards
2. Browser – tab management
3. Terminal – command history
4. Docs – Google‑style toolbar
5. Mail – form validation

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

Phase 3 – The Polish

Issue: Dark‑mode text was hard to read.
Solution: Adopted a blue‑tinted glassmorphic design with proper contrast ratios, resulting in the “Who am I?” card in the Files app.

Phase 4 – The Tour System

Integrated Driver.js with event‑driven panel management, producing a complete tour loop that automatically closes panels.

Phase 5 – Mobile Strategy

Implemented mobile detection that shows a polite blocking screen, preserving the desktop‑OS experience on larger devices.

Phase 6 – Cloud Deployment

Provided a Dockerfile, Nginx config, and Cloud Run setup with CI/CD.
Workflow: GitHub Push → Cloud Build → Container Registry → Cloud Run → Live!

Working with Antigravity & Gemini

Never gets tired – suggests best practices instantly.
Catches bugs – before they happen.
Explains concepts – clearly and concisely.
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 proposed an entire design system:

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

That’s design thinking powered by AI.

Functional Highlights

• Open 5 apps simultaneously
• Drag, minimize, restore, and maximize windows
• Toggle dark mode mid‑session
• Guided tour onboarding
• Contact via the Mail app

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

The UI glows in dark mode like a Chrome OS dream!

Additional behaviors:

• Auto‑starts on first visit
• Intelligent panel closing
• Full loop: Login → Desktop → Logout
• Skips on mobile devices
• Restartable from Quick Settings
• Drag‑and‑drop positioning, z‑index stacking, focus management
• Minimize/maximize animations, state persistence

Zero downtime, automatic scaling, HTTPS by default—all configured with AI assistance.

Takeaway

This project demonstrates 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

Enjoy exploring the Chrome OS‑inspired portfolio!