Next.js 16, React 19 및 Tailwind v4로 포트폴리오를 구축했습니다 – 배운 점

Source: Dev.to

동기

이 글에서는 Next.js 16, React 19, Tailwind CSS v4 그리고 고성능 애니메이션을 위한 GSAP를 사용해 최신 스택으로 새 포트폴리오를 어떻게 만들었는지 단계별로 설명합니다.

기술 스택

• 프레임워크: Next.js 16 (App Router)
• UI 라이브러리: React 19
• 스타일링: Tailwind CSS v4 (Alpha/Beta)
• 애니메이션: GSAP (GreenSock)
• 상태 관리: React Context API
• 언어: TypeScript

주요 기능 및 “멋진 점”

1. 동적 색상 테마 (다크 모드 그 이상!)

// contexts/ThemeContext.tsx
export type ColorTheme = 
  'cyan-blue-purple' | 
  'green-emerald-teal' | 
  'pink-rose-purple' | 
  /* ... */;

const themeConfigs = {
  'cyan-blue-purple': {
    primary: 'from-cyan-400 via-blue-500 to-purple-600',
    // ... define complex gradients
  },
  // ... other themes
};

2. 확장 가능한 프로젝트 데이터 아키텍처

• data/enhancedProjects.ts – 진실의 원천 역할을 합니다.
• projectMapper.ts – 이미지 경로를 동적으로 처리하고 screenshot-*.png 파일을 자동으로 해결합니다.
• ProjectCard.tsx – 데이터에 맞게 조정되는 재사용 가능한 컴포넌트입니다.

새로운 프로젝트를 추가하는 것은 JSON 객체를 하나 추가하는 것만큼 간단합니다—UI 코드를 수정할 필요가 없습니다.

3. 부드러운 GSAP 애니메이션

(구현 세부 사항은 간략히 생략했습니다.)

데모

aarish.dev

의견을 알려 주세요!