🖥 나만의 포트폴리오 웹사이트 만들기

Part 1: 프로젝트 초기 세팅

😎 목표

크리에이티브하고 인터랙티브한 개인 포트폴리오 웹사이트를 만들어본다.
단순한 이력서 페이지가 아닌, 기술과 감성을 함께 보여주는 웹사이트를 지향한다.

🔧 사용 기술

• Vite + React + TypeScript

• TailwindCSS (수동 세팅)

• Zustand (상태 관리)

• styled-components

• Framer Motion (애니메이션)

• GitHub 커밋 메시지 컨벤션 적용 ([feat], [fix], [chore], ...)

1️⃣ 프로젝트 생성

Vite 공식 템플릿으로 프로젝트를 시작했다.

npm create vite@latest my-portfolio -- --template react-ts
cd my-portfolio

2️⃣ Tailwind 수동 설정

Tailwind 관련 패키지를 설치한다:

npm install -D tailwindcss@latest postcss autoprefixer

그 후 설정 파일을 직접 만들었다:

/*tailwind.config.js*/

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        neon: "#00ffff",
      },
    },
  },
  plugins: [],
};

/* postcss.config.js */

import tailwindcss from '@tailwindcss/postcss'
import autoprefixer from 'autoprefixer'

export default {
  plugins: [tailwindcss, autoprefixer],
}

3️⃣ index.css 구성

Tailwind 지시어는 반드시 파일 최상단에 위치해야 한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

/* custom CSS */
:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.87);
  background-color: #0f0f0f;
}

4️⃣ 커밋 컨벤션 설정

개인 커밋 컨벤션은 아래와 같이 정했다:

타입 설명
[feat] 기능 추가
[fix] 버그 수정
[style] 스타일, 포맷 수정
[chore] 설정, 환경 구성
[docs] 문서 (README 등) 수정

첫 커밋은 이렇게 남겼다:

git commit -m "[chore] Configure Vite + Tailwind + PostCSS setup"

✅ 마무리

이제부터는 섹션을 하나씩 만들어가며 개발을 진행할 예정:

• Header: 이름, 직무, 슬로건

• About: 소개

• Skills: 기술 스택

• Projects: 프로젝트 소개

• Contact: 연락처, GitHub, Velog

👨‍💻 다음 글에서는 Header 섹션을 만들고 스타일을 적용하는 과정을 다룰 예정
계속해서 이 포트폴리오가 성장해가는 과정을 기록해보자!