수업을 빼먹고 이 몰입형 포트폴리오를 만들었어요!!

Source: Dev.to

개요

저는 Amaan Syed – 웹 성능을 F1 레이스카처럼 정밀하고, 유동적이며, 공격적으로 빠르게 다루는 풀 스택 개발자입니다.
제 포트폴리오는 이 철학을 반영하여, 엄격한 엔지니어링(타입‑안전성, Docker화) 과 포뮬러 1 공기역학과 SF 미래주의가 교차하는 시각적 스타일 을 결합했습니다. 마치 유효한 레이스 텔레메트리처럼 정밀하고, 유동적이며, 역동적 으로 느껴지도록 설계되었습니다.

데스크톱(와이드 화면) 및 모바일(좁은 화면) 모두 지원
🏎️ 전체 사이트 보기 (데스크톱 권장)

구축 방법

• 프레임워크: React + Vite (번개 같은 빌드 속도)
• 애니메이션: Framer Motion (물리 기반 전환)
• 스타일링: 커스텀 CSS (Glassmorphism + Neo‑Brutalism)
• 배포: Google Cloud Run (Dockerized Nginx 컨테이너)

AeroFlow

배경은 살아있는 컴포넌트로, “Scuderia Red” 흐름선을 혼돈 베지어 곡선 으로 렌더링합니다. 선들은 화면을 가로질러 대시하고 펄스하며, 풍동 텔레메트리 데이터를 모방합니다.

Liquid Glass

UI 요소는 서리‑유리 효과와 고대비 네오‑브루탈리즘을 결합해, 미래형 헤드‑업 디스플레이 같은 모습을 제공합니다.

Immersive Micro‑Worlds

전통적인 그리드 대신 각 플랫폼에 맞는 독특한 경험을 구축했습니다:

• 웹: 브라우저 창이 Z‑공간에 떠 있는 3D “Splatter” 레이아웃.
• 모바일: 촉각적인 느낌을 주는 수직 “tear‑off” 카드 덱.
• AI: 홀로그램 파티클이 떠다니는 “Blast Door” 터미널 인터페이스.

Turbo‑Charged by Google Antigravity

• 물리 최적화: Gemini를 사용해 모바일 카드 스택의 Framer Motion 스프링에 대한 댐핑 및 강성 계수를 미세 조정.
• DevOps‑in‑a‑Box: Antigravity가 Dockerfile 과 nginx.conf 를 자동 생성해 Cloud Run에 배포하고, SPA 라우팅 로직을 자동 처리.
• 시각적 polish: AI가 “Silver Flow Button”에 콘‑그라디언트 마스크를 제안해, 일반적인 에셋 없이 완벽한 메탈릭 광택을 구현.

특히 AI 섹션의 Blast Door Terminal이 가장 자랑스럽습니다. 순수 CSS/JS 연출로 구현된 스캔라인, 홀로그램 파티클, 그리고 사용자의 여정에 완벽히 맞춰지는 기계식 문 개방 시퀀스는 평범한 “Skills” 리스트를 서사적 이벤트로 변신시킵니다.

전체 미학은 저의 열정인 F1, 스타워즈, 색채 과학, 타이포그래피 를 테마로 하고 있습니다.

Stay Hungry, Stay Foolish!