🎨 포트폴리오 웹사이트

프로젝트 한줄 소개: TailwindCSS의 유틸리티 클래스를 적극 활용하여, 생산성을 극대화하고 다크 모드 및 반응형 웹을 완벽하게 지원하는 포트폴리오 웹사이트입니다.

🛠 Tech Stack

• Frontend: HTML5, CSS3, TailwindCSS

📌 Project Overview

본 프로젝트는 불필요한 CSS 코드 작성을 최소화하고 개발 생산성을 높이기 위해 TailwindCSS를 도입하여 제작한 개인 포트폴리오 웹사이트입니다. 단순한 정적 페이지를 넘어, 디바이스 크기에 맞게 유연하게 변하는 반응형 레이아웃과 다크 모드를 지원합니다. 또한 애니메이션을 더해 사용자에게 생동감 있는 UI/UX를 제공하는 데 초점을 맞추었습니다.

💡 Key Features

1. 트렌디한 UI/UX 및 테마 지원

• 다크 모드: TailwindCSS의 dark:를 활용하여 사용자의 시스템 설정 또는 토글 버튼에 따라 자연스럽게 전환되는 다크 모드 환경 구축.

• 동적 UI 적용: 상태 변화(Hover, Focus 등)에 따른 트랜지션(Transition)과 커스텀 애니메이션 효과를 부여하여 화면에 생동감 부여.

2. 모바일 퍼스트 반응형 웹

• 완벽한 기기 대응: TailwindCSS가 제공하는 Breakpoints (sm, md, lg, xl)를 활용하여 모바일, 태블릿, 데스크탑 등 어떠한 화면 크기에서도 깨짐 없이 최적화된 레이아웃을 제공.

🚀 Engineering Focus

1. Flexbox & Grid 기반의 체계적인 레이아웃 설계

• 복잡한 컴포넌트들을 화면에 직관적이고 깔끔하게 배치하기 위해 Flexbox와 CSS Grid를 상황에 맞게 혼용.

• 1차원적인 정렬(Nav 바, 버튼 그룹 등)에는 Flexbox를, 2차원적인 카드 리스트나 전체 페이지 골격 설계에는 Grid를 사용하여 유지보수가 용이한 구조 확립.

2. 유틸리티 클래스 기반 디자인 시스템 적용

• 외부 CSS 파일을 분리하며 오가던 컨텍스트 스위칭 비용을 줄이고, HTML 태그 내에서 직관적으로 스타일(Typography, Colors, Spacing, Borders 등)을 제어.

• 클래스 네이밍에 대한 피로도를 없애고, 구조와 스타일을 한눈에 파악할 수 있도록 코드 가독성 향상.