Back to Explore
#React 18#TypeScript#Vite 5 Tailwind CSS v3#CSS 변수 (HSL)

데이터 분석가 포트폴리오-본문 영역

데이터 분석가 포트폴리오-본문 영역입니다.

데이터 분석가 포트폴리오-본문 영역

Project Prompts1

Public

About Me (라이트 섹션) bg-white 배경, 다크 텍스트 소개 텍스트 2단락 (text-sm, muted-foreground) max-w-2xl 제한 Experience 타임라인 (다크 섹션) 대제목: "EXPERIENCE" (clamp(2.5rem,5vw,4.5rem), font-extrabold) 세로 타임라인 라인: w-[0.5px] bg-white/10 각 항목 구조: [원형 번호 마커] ── [연도 라벨] [직무 제목 + 설명] 번호 마커: 36x36 원형, 현재 직무만 accent 색상 채움 연도: text-[11px] uppercase tracking-[0.25em] 현재 직무: "Current" 알약형 뱃지 (accent 배경) 제목: 현재=font-semibold text-white, 과거=font-normal text-white/50 설명: text-[13.5px] leading-[1.9] 데이터: 01 / 2022–2024 / Product Manager 02 / 2024–2025 / Business Analyst 03 / 2025–Present / AI Product Manager (Current) Project Case Study (다크 섹션) 대제목: "PROJECT" (white) + "CASE STUDY" (white/30) 카드형 레이아웃 (rounded-2xl, border-white/[0.08], bg-white/[0.03]) 헤더: 프로젝트 번호 + 포커스 라벨 + 제목 + 태그 칩들 본문: Problem → Data → Analysis & Modeling → Insight → Business Impact 각 섹션: 라벨(accent 컬러, uppercase) + 서브라벨(white/30) + 내용 불릿 리스트: accent 컬러 dot Project 02 - 대시보드 카드 (다크 섹션) 2컬럼 그리드 (md:grid-cols-2) 각 카드: 상단 이미지 (h-48, hover시 scale-105) + 하단 텍스트 툴 뱃지 (Tableau / Power BI) 제목 (text-lg, font-bold, white) 설명 (text-sm, white/50)