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 express more than just a list of skills. I wanted to showcase my ability to blend utility with creativity.
By reimagining my professional profile as a fully functional, browser-based operating system, I hope to 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
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 the 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 - I chose a windowed desktop interface (BDK-OS) to showcase my versatility. It allows visitors to interact with my projects, bio, and a terminal as if they are exploring my digital brain.
- Glassmorphism & Neon - To make the "Retro" feel "Futuristic," I used heavy backdrop blurs (backdrop-blur-md), semi transparent blacks (bg-black/80), and neon blue accents. This creates a high end, premium feel.
- Interactive Terminal - The terminal isn't just for show, It features a simulated file system (bio.txt, projects.md), command history navigation (using Arrow keys), and integration with the window manager to launch apps like the game.
Development Process
I followed a component first architecture. I built a custom WindowManagerContext to handle the state of all open, minimized, and maximized windows globally. This allowed for features like "focus tracking" (bringing the last clicked window to the front) and "one click maximizing."
Google AI Tools Used
This project was built with the assistance of Google Antigravity (powered by Gemini models). Specifically, I used AI to,
- Architecture Design - Designing the global state management for the windowing system and terminal logic.
- Complex Logic - Developing the collision detection and spawning algorithms for the "Progressbar95" terminal game.
- Creative Assets - Generating the custom BDK-OS Favicon using Gemini’s integrated image generation capabilities.
- DevOps Optimization - Crafting a production ready Dockerfile and configuring Next.js standalone output for seamless deployment.
- SEO & Metadata - Automating the generation of OpenGraph tags and professional descriptions to improve the portfolio's discoverability.
What I'm Most Proud Of
Breathing New Life into a Classic
The feature I am most excited about is the Progressbar95 game integration. I took the core concept of the classic retro game and reimagined it as a fully playable experience within my portfolio.
- Technical Achievement - Building a real time game engine inside a React component. I used Framer Motion to handle high performance animations for falling segments and collision detection between the "catcher" and the dropping bars.
- The "Easter Egg" Feel - While optional, this feature serves as a tribute to the legacy of OS design that inspired the rest of the site. It's more than just a game; it's a demonstration of how I can apply technical logic to create fun, engaging user experiences.
The Custom Window Management System
Rather than using a standard layout library, I built a custom Window Manager from the ground up.
- Depth and Focus - I implemented a dynamic Z index system that tracks which window the user is interacting with, automatically bringing it to the "front" (just like a real OS).
- Desktop Workflow: Integrating drag and drop mechanics, window minimizing to the taskbar, and a full screen maximize toggle. Achieving this level of desktop native feel in a web browser using WindowManagerContext was a significant technical milestone for me.
The Command Line Soul
I am particularly proud of the Terminal's integration with my data.
- It's not a static text box it has a simulated file system that reads from my actual project data (projects.ts) and biography.
- Implementing Command History (using up/down arrows) and unique commands like game to launch other parts of the UI creates a cohesive experience for developer minded visitors.
Top comments (0)