스크랩북 프리뷰가 적용된 IDE

Source: Dev.to

새해, 새로운 당신 포트폴리오 챌린지 제출

이것은 Google AI가 주최한 새해, 새로운 당신 포트폴리오 챌린지에 대한 제출물입니다.

나에 대하여

안녕하세요, 저는 인도에 거주하는 풀스택 웹 개발자 Vamshi Duvva입니다.
제 개발자 포트폴리오가 제가 코딩 에디터 안에서 살아가는 환경을 반영했으면 했습니다. 목표는 엔지니어에게는 익숙하면서 비기술적인 리크루터에게도 접근하기 쉬운 “집”을 만드는 것이었습니다.

포트폴리오

최적의 경험을 위해 데스크톱에서 보세요.

• URL:
• 개인 포트폴리오 URL:

제작 방법

이 포트폴리오는 Next.js와 Antigravity의 도움을 받아 구축했습니다.

기술 스택

• 프레임워크: Next.js
• UI 시스템: Material UI + 커스텀 SCSS 모듈
• 에디터: Antigravity
• 배포: Google Cloud Run

디자인 결정

듀얼‑모드 인터페이스

• IDE 모드 – 완전한 기능을 갖춘 VS 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

• 스크랩북 모드 (모두를 위해) – 폴라로이드, 포스트잇, 와시‑테이프 미학을 활용한 시각적 “미리보기” 모드로, 비기술 방문자에게 개인적이고 창의적인 감성을 제공합니다.

• 테마 – 두 뷰와 모든 컴포넌트에 일관된 테마 적용.

가장 자랑스러운 점

제가 가장 자랑스러워하는 것은 “코드형 이력서” 개념입니다. 일반적인 스킬 목록 대신, 매일 사용하는 언어의 문법 안에 제 프로페셔널 아이덴티티를 녹여냈습니다.

• Career.tsx의 <Career /> 컴포넌트에 경험을 작성함으로써 코드 자체가 이야기를 전달합니다.
• package.json에 스킬을 정의함으로써 개발자들이 공감할 메타 유머 레이어를 추가했습니다.

또한 듀얼‑모드 스위치의 기술 구현도 자랑스럽습니다. 원시 코드 뷰와 스타일링된 스크랩북 뷰 사이의 전환을 매끄럽게 만들었습니다.

Antigravity

Antigravity는 이 프로젝트 전반에 걸쳐 저의 페어 프로그래머 역할을 수행하며 작업 흐름을 크게 가속화했습니다.

• 기획 → 프로덕션 – 고수준 기획 단계에서 상세 구현 단계까지 기록적인 속도로 진행했습니다.
• 클라우드 아키텍처 – Turborepo 모노레포에 필요한 복잡한 Dockerfile을 구성하는 데 도움을 주어 Cloud Run용 빌드를 최적화했습니다.
• 반복적 디자인 – IDE 컴포넌트의 UI 로직을 정교화하여 디자인의 창의적 측면에 집중할 수 있게 했습니다.