Introduction
Traditional portfolios are often static, predictable, and easy to forget. For this challenge, I wanted to rethink what a developer portfolio could be. Instead of building another scroll-based website, I created 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 applications, interact with dynamic UI elements, and communicate with an AI-powered assistant — all within a fully responsive, multi-device environment. Built using 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, but an interactive system that demonstrates how modern UI engineering, AI integration, and thoughtful design can converge into a single cohesive product.
About Me
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 becomes a medium for storytelling rather than just logic.
With this portfolio, my goal was to express how I think as a developer — system-first, detail-driven, and experience-focused. I believe great products are not only functional; they feel alive. That belief led me to design my portfolio as an interactive operating system, where every animation, transition, and interaction follows real-world logic instead of static presentation.
I’m constantly exploring modern web technologies such as 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.
Portfolio
Experience my OS-Style Interactive Portfolio live — it’s not just a website, but a mini operating system running in the browser.
Visitors can interact with multiple device mockups (iOS, Android, and iPad), explore applications showcasing my projects and skills, and even engage with the AI-powered “Batman” assistant to learn more about my work. Every interaction is designed to feel responsive, dynamic, and immersive, transforming a traditional resume into an interactive experience.
🔗 Live Demo:
https://sayadakbar.netlify.app/
Deployment Note
While the Dev.to challenge references embedding Google Cloud Run deployments, I chose to deploy this project on Netlify. Cloud Run requires a payment method even for free-tier usage, whereas Netlify allows fully functional hosting with no payment requirement. This deployment delivers the same OS-style interactivity, multi-device support, and AI integration, ensuring the experience remains fully accessible.
⚡ Tip: For the best 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 — evolving it from a static webpage into an interactive, AI-powered digital twin.
Tech Stack
React (ESM) — Fast component rendering and state management
Tailwind CSS — Responsive layouts, smooth transitions, and theming
FontAwesome — Consistent iconography across the simulated OS
Google Gemini 3 Flash — Powers the AI assistant and real-time riddle generation
Design Decisions
Multi-Device Mockups
A component-driven architecture (DeviceMockup.tsx + deviceConfig) adapts layouts for iOS, Android, and iPad, including realistic hardware elements such as Dynamic Island, punch-hole cameras, and platform-specific buttons.
Dynamic Scaling Engine
Ensures proportional rendering across devices — from large 4K monitors to smaller laptop screens.
Contextual App Engine
Each app runs as a state-driven component, enabling seamless interaction without traditional page navigation.
Dual Themes & Dynamic Accents
Light and dark themes dynamically adjust backgrounds and GIF layers, while users can customize accent colors in real time.
Google AI Integration
Batman AI
A custom-tuned Gemini assistant designed to behave like a tactical agent. A developer “dossier” is injected into the prompt, allowing users to intelligently query the portfolio.
Neural Nexus Riddle Game
Gemini generates cyberpunk-themed riddles dynamically. Responses follow a structured JSON schema, enabling reliable frontend validation.
Development Process
Designed a component-driven system architecture
Implemented dynamic scaling and contextual state management
Integrated Gemini AI to make the portfolio interactive and responsive
Polished animations, transitions, and theming for an OS-like feel
This combination of UI engineering, AI integration, and immersive design transforms the portfolio into a living system rather than a static showcase.
What I’m Most Proud Of
OS-Style Interactivity
Reimagining a portfolio as a mini operating system enables users to explore content naturally through apps and interactions instead of scrolling pages.
AI-Powered Assistant
The Batman AI, powered by Google Gemini 3 Flash, adds meaningful interactivity by allowing visitors to ask questions and receive structured, contextual responses.
Neural Nexus Riddle Game
This feature demonstrates real-time AI content generation combined with strict frontend validation — blending creativity with engineering discipline.
High-Fidelity Multi-Device Mockups
Every device is carefully crafted, from iOS Dynamic Island to Android punch-hole cameras, creating a tangible and realistic experience.
Dynamic Theming & Customization
Real-time theme switching and accent color customization highlight advanced state management and design flexibility.
Overall, this project represents a balance of technical depth, thoughtful design, and AI experimentation — the kind of work I’m excited to build, refine, and expand upon.
Top comments (0)