코드 그 이상: 2026년에 돋보이는 포트폴리오 만들기
Source: Dev.to
Submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
안녕하세요, 저는 Peluola David Adeoluwa (PDA) 라고 합니다. 서아프리카 나이지리아에 기반을 둔 프론트엔드 아키텍트이자 Web3 크리에이티브 전략가입니다. 현재 Miva Open University에서 소프트웨어 엔지니어링을 전공하고 있습니다. 저는 창의적 디자인과 최신 기술, 특히 Web3와 AI가 만나는 지점에 깊은 열정을 가지고 있습니다.
제 여정은 파이썬 자동화에서 시작해 고품질 디지털 경험을 만드는 쪽으로 발전했습니다. 저는 단순히 코드를 작성하는 것이 아니라 시각적 이야기를 구성합니다. 이번 포트폴리오에서는 일반적인 “썸네일 격자”를 탈피해 디지털 스크랩북처럼 촉각적이고 유동적이며 개인적인 느낌을 주고 싶었습니다. 기술적 정밀함과 예술적 영혼이 만나는 교차점을 표현하고자, 모션과 타이포그래피를 사용해 스킬 목록을 나열하는 대신 이야기를 전달하려 합니다.
Portfolio
(프로젝트를 보여주는 콘텐츠가 여기 들어갑니다.)
How I Built It
이 포트폴리오는 “Design‑First” 마인드셋으로 구축했으며, React 19, Tailwind CSS, 그리고 Framer Motion을 활용해 애니메이션을 구현했습니다.
The Design System
-
저는 “Glassmorphism 2.0” 라는 특정 미학을 사용했습니다—깊은 밤하늘 배경 (
#050505)에 고블러(blur) 유리 카드 (backdrop-blur-xl), 깊이를 위한 거친 노이즈 텍스처, 그리고 헤드라인에 Instrument Serif, 본문에 Inter를 적용한 세련된 타이포그래피를 결합했습니다. -
Google AI Integration: 저는 Google Gemini을 “Elite Creative Architect” 페어 프로그래머로 활용했습니다. 기본 코드 스니펫을 요청하는 대신, Gemini에게 엄격한 디자인 시스템(8 px 규칙, “Singularity Blue” 같은 특정 색상 헥스값, 모션 가이드라인)을 제공했습니다. Gemini은 다음을 도와줬습니다:
- Hero 섹션의 패럴랙스 효과를 위한 복잡한 Framer‑Motion 변형 설계.
- 메인 뷰와 오버레이 간의 원활한 상태 관리를 보장하는 “Vault” 아카이브 모달 로직 생성.
- 반응형 레이아웃 다듬기.
What I’m Most Proud Of
- “Vibe” & 마이크로‑인터랙션: 커스텀 커서 물리 효과와 환경에 반응하는 떠다니는 “Available Now” 배지는 사이트에 생동감을 부여합니다.
- Hero 섹션: 전경 프로필 카드와 대비되는 “P D A” 배경 글자의 패럴랙스 효과가 즉각적인 깊이감을 만들어냅니다.
- Vault (Archive): 모달 오버레이가 오래된 프로젝트를 위한 “Vault” 역할을 하여 메인 경험은 깔끔하게 유지하면서도 역사를 보존합니다(예: Inboxx에서 최신 작업인 BCCS Hub로의 전환).
- 세부 사항에 대한 집착: 커스텀 SEO 메타 태그부터 네비게이션 버튼의 정확한 위치 지정까지.