Why have a flat Resume when you can have an OS? š Dive into BDK-OS
Source: Dev.to
New Year, New You Portfolio Challenge Submission
This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI.
About Me
I am a passionate Full Stack Developer with over 2āÆ+āÆyears of industrial experience and a deepāseated love for building highāperformance, creative web applications. My journey in tech is driven by the challenge of transforming complex problems into elegant, interactive digital experiences.
My Portfolio Expression
With this portfolio, BDKāOS, I wanted to showcase more than just a list of skills. By reimagining my professional profile as a fully functional, browserābased operating system, I demonstrate:
- Technical Versatility ā Managing complex global states, terminal logic, and game engines.
- Design Sensibility ā A commitment to highāend aesthetics like glassmorphism and neonāretro UI.
- UserāCentric Innovation ā Turning a āReadāonlyā resume into an āInteractiveā experience where visitors can explore my bio, run my code, and even play a game.
I am always looking for new challenges and opportunities to contribute to cuttingāedge projects. Letās build something amazing together!
Portfolio
(The portfolio itself is the BDKāOS interactive site.)
How I Built It
Building BDKāOS was an exercise in merging retro computing aesthetics with ultraāmodern web performance. My goal was to create a portfolio that felt like a ālivingā workspace rather than a static page.
The Tech Stack
- Framework ā Next.jsāÆ16.1 (App Router) for highāperformance serverāside rendering and static generation.
- UI/Styling ā Tailwind CSS for a utilityāfirst, highly customizable design system.
- Animations ā Framer Motion to power fluid window transitions, dragging mechanics, and the āProgressbar95ā game engine.
- Icons ā Lucide React for a consistent, minimalist icon language.
- Deployment ā Docker with a multiāstage build, optimized for production using Next.js standalone output.
Design Decisions
- The āOSā Concept ā A windowed desktop interface (BDKāOS) lets visitors interact with projects, bio, and a terminal as if exploring my digital brain.
- Glassmorphism & Neon ā Heavy backdrop blurs (
backdrop-blur-md), semiātransparent blacks (bg-black/80), and neon blue accents create a highāend, premium feel. - Interactive Terminal ā Features a simulated file system (
bio.txt,projects.md), commandāhistory navigation (arrow keys), and integration with the window manager to launch apps like the game.
Development Process
I followed a componentāfirst architecture, building a custom WindowManagerContext to handle the state of all open, minimized, and maximized windows globally. This enabled features such as focus tracking (bringing the lastāclicked window to the front) and oneāclick maximizing.
Google AI Tools Used
The project was built with assistance from Google Antigravity (powered by Gemini models). AI helped with:
- Architecture Design ā Global state management for the windowing system and terminal logic.
- Complex Logic ā Collision detection and spawning algorithms for the āProgressbar95ā terminal game.
- Creative Assets ā Generating the custom BDKāOS favicon using Geminiās image generation.
- DevOps Optimization ā Crafting a productionāready Dockerfile and configuring Next.js standalone output for seamless deployment.
- SEO & Metadata ā Automating OpenGraph tags and professional descriptions to improve discoverability.
What Iām Most Proud Of
Breathing New Life into a Classic
The Progressbar95 game integration is the feature Iām most excited about.
- Technical Achievement ā Built a realātime game engine inside a React component, using Framer Motion for highāperformance animations, falling segments, and collision detection between the ācatcherā and dropping bars.
- Easter Egg Feel ā Serves as a tribute to classic OS design while demonstrating my ability to create fun, engaging user experiences.
The Custom Window Management System
Instead of a standard layout library, I built a custom Window Manager from the ground up.
- Depth and Focus ā Dynamic Zāindex system that tracks the active window and automatically brings it to the front, mimicking a real OS.
- Desktop Workflow ā Dragāandādrop mechanics, window minimizing to a taskbar, and fullāscreen maximize toggle, all powered by
WindowManagerContext.
The Command Line Soul
The terminal is more than a static text box; it integrates with my data.
- Simulated file system reads from actual project data (
projects.ts) and biography. - Command history (up/down arrows) and unique commands (e.g.,
gameto launch other UI parts) create a cohesive experience for developerāminded visitors.