IDE styled with scrapbook preview

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

Hi, I’m Vamshi Duvva, a Full Stack Web Developer based in India.
I wanted my developer portfolio to reflect the environment I live in within my code editors. My goal was to create a home that feels familiar to engineers while remaining accessible to non‑technical recruiters.

Portfolio

View on desktop for the best experience.

• URL:
• Personal portfolio URL:

How I Built It

I built this portfolio with Next.js and the help of Antigravity.

Tech Stack

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

Design Decisions

Dual‑Mode Interface

• IDE Mode – a fully functional VS Code clone

  • File Explorer: navigation simulates opening real files
  • Terminal: simulates a real terminal with basic commands

• Resume‑as‑Code

  // package.json
  {
    "dependencies": {
      "react": "^18.0.0",
      "node": "^16.0.0",
      "typescript": "^5.0.0"
    }
  }

  // Career.tsx
  export const Career = () => (
    <>
      {/* more  components */}
    </>
  );

  # contact.py
  class Contact:
      def __init__(self, email, phone):
          self.email = email
          self.phone = phone

• 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.

• Theming – consistent themes across both views and all 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 <Career /> component in Career.tsx lets 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 – moved from high‑level planning to detailed implementation in record time.
• Cloud Architecture – helped configure the complex Dockerfile required for a Turborepo monorepo, optimizing the build for Cloud Run.
• Iterative Design – refined the UI logic for the IDE components, allowing me to focus on the creative aspects of the design.