DEV Community

Cover image for IDE styled portfolio with scrapbook preview
Vamshi Duvva
Vamshi Duvva

Posted on

IDE styled portfolio with scrapbook preview

#devchallenge #googleaichallenge #portfolio #gemini

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

Hi, I'm Vamshi Duvva, a Full Stack Web Developer based in India.
I thought it would be cool if my developer portfolio reflects the environment I live in my code editors. My goal was to create a home that feels familiar to engineers while remaining accessible to non-technical recruiters.

Portfolio

View in desktop for the best the best experience.
URL : https://portfolio-1072569385334.us-central1.run.app
personal portfolio URL : https://portfolio.hell3ringer.com


How I Built It
I built this portfolio as a Next.js with the help of Antigravity.

Tech Stack

  • Framework: Next.js
  • UI System: Material UI + Custom SCSS modules
  • Editor : Antigravity
  • Deployment: Google Cloud Run

Design Decisions

I implemented a Dual-Mode Interface:

  1. IDE Mode: A fully functional VS Code clone.
    • File Explorer: Navigation simulates opening real files.
    • Terminal: Simulating a real terminal with basic commands.
    • Resume-as-Code:
      • package.json -> Lists my skills as dependencies.
      • Career.tsx -> Displays work history as React tsx file. components.
      • contact.py -> A Python class for contact methods.
  2. Scrapbook Mode (For Everyone): A visual "preview" mode featuring polaroids, sticky notes, and washi tape aesthetics, offering a personal and creative touch for non-technical visitors.
  3. Theming : Incorporated themes across both the view and all the components.

What I'm Most Proud Of

I am most proud of the "Resume as Code" concept. Instead of a standard list of skills, I embedded my professional identity into the syntax of the languages I use daily.

  • Writing my experience as a <Job> component in Career.tsx makes the code itself tell a story.
  • Defining my skills in package.json adds a layer of "meta" humor that developers appreciate. I'm also proud of the technical implementation of the Dual-Mode Switch, ensuring a seamless transition between the raw code view and the stylized scrapbook view.

Antigravity

Antigravity served as my pair programmer throughout this project, accelerating my workflow significantly.

  • Planning to Production: We moved from high-level planning to detailed implementation in record time.
  • Cloud Architecture: Antigravity helped configure the complex Dockerfile required for a Turborepo monorepo, ensuring the build was optimized for Cloud Run.
  • Iterative Design: It helped refine the UI logic for the IDE components, allowing me to focus on the creative aspects of the design.

Top comments (0)