From Resume to Operating System: Designing an AI-Powered Interactive Digital Twin
Traditional portfolios are static, predictable, and forgettable. For this challenge, I wanted to completely rethink what a developer portfolio could be. Instead of another website with sections and scroll, I built an OS-style interactive portfolio — a living “Digital Twin” of my technical identity.
This project simulates a real operating system interface where visitors can explore apps, interact with dynamic UI elements, and even communicate with an AI-powered assistant — all inside a fully responsive, multi-device environment. Powered by React, Tailwind CSS, and Google Gemini AI, the portfolio blends high-fidelity UI design, complex state-driven architecture, and real-time artificial intelligence to transform a resume into an immersive experience.
The result is not just a portfolio — it’s an interactive system that demonstrates how modern UI engineering, AI integration, and thoughtful design can converge into a single cohesive product.
I’m Sayad Akbar, a full-stack developer passionate about building experiences, not just applications. I enjoy working at the intersection of UI engineering, system design, and artificial intelligence, where code feels less like logic and more like storytelling.
With this portfolio, my goal was to express how I think as a developer — system-first, detail-driven, and experience-obsessed. I believe great products aren’t just functional; they feel alive. That belief led me to design my portfolio as an interactive operating system, where every animation, transition, and interaction reflects real-world logic rather than static presentation.
I’m constantly exploring modern web technologies like React, Tailwind CSS, and AI-powered systems to push beyond traditional boundaries. This project represents my mindset for the new year: build boldly, experiment deeply, and turn ideas into immersive digital experiences.
Experience my OS-Style Interactive Portfolio live — it’s not just a website; it’s a mini operating system in your browser.
Interact with multiple device mockups (iOS, Android, iPad), explore apps that showcase my projects and skills, and even interrogate the AI-powered “Batman” assistant for insights about my work. Every animation, transition, and interaction is designed to feel dynamic, responsive, and immersive, turning a traditional resume into an interactive experience.
Try it yourself below:
<iframe
src=”https://sayadakbar.netlify.app/“
width=”100%”
height=”800″
style=”border: none; border-radius: 12px;”
title=”OS-Style Interactive Portfolio”
Note on Deployment: While the Dev.to challenge mentions embedding Google Cloud Run deployments, I opted to deploy my portfolio on Netlify instead. This decision was due to Cloud Run requiring a payment method for free-tier usage, whereas Netlify allows fully functional hosting without any payment requirements. The Netlify deployment provides the same interactive OS-style experience, full multi-device support, and AI integration, making it fully accessible for anyone to explore directly in the browser
⚡ Tip: For the full experience, use a desktop or large tablet viewport to see dynamic scaling and all AI features in action.
dev label: dev
How I Built It
This portfolio was designed to push the boundaries of what a resume can be — from a static webpage to an interactive, AI-powered digital twin. Here’s how I brought it to life:
Tech Stack
React (ESM) – For lightning-fast component rendering and state management.
Tailwind CSS – To build responsive, high-fidelity layouts and smooth transitions.
FontAwesome – For consistent and scalable icons across all device mockups.
Google Gemini 3 Flash – To power the intelligent “Batman AI” assistant and generate dynamic riddles in the Neural Nexus game.
Design Decisions
Multi-Device Mockups – Using DeviceMockup.tsx and a deviceConfig object, the UI adapts to iOS, Android, and iPad, including realistic hardware features like Dynamic Island, Punch-hole cameras, and platform-specific buttons.
Dynamic Scaling Engine – Ensures devices render proportionally on any screen size, from 4K monitors to laptops.
Contextual App Engine – Each “app” inside the portfolio is a state-driven component, enabling interactive content without traditional page navigation.
Dual-Theme & Dynamic Accents – Backgrounds, GIF layers, and accent colors adjust automatically between light and dark modes, while allowing users to customize brand colors in real-time.
Google AI Integration
Batman AI – A custom-tuned Gemini assistant that behaves like a tactical agent. By injecting a developer “Dossier” into the prompt, users can query the portfolio intelligently.
Neural Nexus Riddle Game – Uses Gemini to generate cyberpunk-themed riddles on the fly. The frontend validates answers programmatically via responseSchema JSON.
Development Process
Designed component-driven architecture for devices, apps, and interactive elements.
Built dynamic scaling logic and contextual state management in React.
Integrated Gemini AI SDK to make the portfolio “alive” and responsive to user queries.
Polished animations, transitions, and theming for an immersive OS-like experience.
This combination of UI engineering, AI integration, and immersive design makes the portfolio more than a showcase — it’s a living, interactive representation of my skills.
What I’m Most Proud Of
There are several elements of this portfolio that I’m particularly proud of:
- OS-Style Interactivity
Turning a traditional portfolio into a mini operating system was a bold move. Users can explore apps, navigate through content, and experience realistic device mockups with dynamic scaling, all without leaving the main interface.
- AI-Powered Assistant (Batman AI)
Integrating Google Gemini 3 Flash to create a tactical AI assistant adds a unique layer of interactivity. It’s not just a gimmick — users can ask questions about my work, projects, or skills and get structured, meaningful responses.
- Neural Nexus Riddle Game
Building a dynamic, cyberpunk-themed riddle game was a challenge, but it demonstrates how AI can generate content in real-time while maintaining frontend validation through JSON schemas. It’s a fun, gamified way to showcase problem-solving and AI integration.
- High-Fidelity Multi-Device Mockups
From iOS’s Dynamic Island to Android punch-hole cameras, each device is faithfully represented, with realistic buttons, scaling, and transitions. This attention to detail transforms the portfolio from a static showcase into a tangible, interactive experience.
- Dynamic Theming & Customization
Users can switch between light and dark modes and adjust the accent color, which propagates across buttons, glows, and shadows. This demonstrates advanced state management and design flexibility.
Overall, this project is a blend of technical depth, design polish, and AI experimentation — the kind of work I’m excited to show and continue building upon.