DEVIN DOWN

"왜?"에서 시작해서 "아하!"로 끝내는 개발자: 사용자 경험과 기술 구현 사이의 균형점을 찾아가는 중

Next.js 기반의 모던한 포트폴리오

🔍 데모

• 포트폴리오 바로가기

🎯 소개

<Hello, World!의 그 월드가 이렇게 거대할 줄이야!>
사용자 경험을 설계하던 시선으로 이제는 코드를 바라보는 프론트엔드 개발자 DEVIN입니다!
문제를 발견하고 해결책을 구상하는 과정에서 시작해, 이제는 직접 그 해답을 만들어가고 있어요.
스터디 플랫폼부터 이력서 서비스까지, 사용자의 실제 니즈를 기술로 풀어내며
의미 있는 변화를 만들어가는 것이 저의 목표입니다.

DEVIN 다운 것?

• 🔍 "이게 왜 필요할까?"에서 시작해 "이렇게 하면 좋겠다"로 끝맺는 문제 해결러
• 🏗️ 서비스 설계부터 구현까지, 사용자 경험을 디자인하는 아키텍트
• ⚡ "그냥 되는" 코드가 아닌 "잘 돌아가는" 코드를 고민하는 성능 덕후
• 🎯 복잡한 문제를 단순하게 풀어내는 미니멀리스트
• 🌱 매일 조금씩 성장하는 주니어 개발자

✨ 프로젝트 특징

Core Features

• 🚀 SSR/SSG 하이브리드 렌더링으로 초기 로딩 시간 최적화
• 📊 PSI 성능/접근성/SEO 지표 95+ 달성
• 🎯 사용자 행동 기반 컴포넌트 최적화
• 📱 모든 디바이스에서 일관된 반응형 경험 제공

UI/UX Development

• 🎨 shadcn/ui 기반 확장 가능한 디자인 시스템 구축
  • 일관된 디자인 토큰 관리
  • 재사용 가능한 컴포넌트 설계
• 🌊 사용자 행동 기반 인터랙션 적용
  • 스크롤 프로그레스 인디케이터
  • 자연스러운 페이지 전환
  • 미세한 피드백 애니메이션
• 🌓 시스템 설정 연동 다크모드
• 🧩 아토믹 디자인 패턴 적용

Web Standards & Performance

• ♿ WCAG 2.1 가이드라인 준수
• 🔍 구조화된 데이터로 SEO 최적화
• 🛡️ TypeScript 엄격 모드 적용

🛠️ 기술 스택

Core

• Next.js 14
  • App Router 및 Server Components 활용
  • 동적 라우팅으로 프로젝트 상세 페이지 구현
• React 19
  • Suspense를 활용한 로딩 처리
  • 커스텀 훅으로 재사용 로직 관리
• TypeScript
  • 타입 안정성 확보
  • 개발 생산성 향상
• Tailwind CSS
  • 일관된 디자인 토큰 관리
  • 다크모드 대응 용이

주요 라이브러리

• UI/UX
  • shadcn/ui: 접근성과 커스터마이징 용이성
  • framer-motion: 부드러운 인터랙션 구현
  • next-themes: 시스템 테마 연동

🌐 모던 브라우저 지원

⚠️ Internet Explorer는 지원하지 않습니다