Skip to content

✨ DEVIN DOWN - 프론트엔드 포트폴리오 | Next.js, TypeScript, Tailwind

Notifications You must be signed in to change notification settings

gr22nist/devin-down

Folders and files

NameName
Last commit message
Last commit date
Nov 15, 2024
Nov 20, 2024
Nov 17, 2024
Nov 15, 2024
Nov 15, 2024
Nov 17, 2024
Nov 15, 2024
Nov 15, 2024
Nov 7, 2024
Nov 7, 2024
Nov 18, 2024
Nov 7, 2024
Nov 16, 2024
Nov 7, 2024
Nov 15, 2024
Nov 15, 2024
Nov 7, 2024
Nov 7, 2024
Nov 7, 2024

Repository files navigation

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

주요 라이브러리

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

🌐 모던 브라우저 지원

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