나만의 포트폴리오 웹사이트 만들기 (5) - 프로젝트 섹션 구성기

이번 글에서는 내가 진행한 프로젝트를 소개하는 "프로젝트 섹션"을 어떻게 구성했는지 기록한다. 이번 섹션에서는 실제 서비스에 가까운 느낌을 주기 위해 썸네일, 프로젝트 설명, 기술 스택 등을 카드를 통해 정리했다.

💡 프로젝트 개요

CHOP! 은 온라인 게임 아이템 현금 거래를 중개하는 서비스다. 기존의 복잡한 거래 방식을 개선하고, 사용자 간 안전한 직거래를 돕기 위해 기획했다. 해당 프로젝트는 PWA(Progressive Web App) 로 개발되어 모바일에서도 앱처럼 동작할 수 있게 구성했다.

🧱 프로젝트 카드 구성

카드는 다음과 같은 정보들로 구성했다:

• 썸네일 이미지 (CHOP! 로고)

• 프로젝트명 (크게)

• 프로젝트 설명 (한두 문단)

• 사용 기술 태그 (Vite, React 등)

🧩 Tailwind로 구현한 카드 예시

<div className="rounded-xl overflow-hidden shadow-md bg-white hover:shadow-lg transform hover:-translate-y-1 hover:scale-105 transition-all duration-200">
  <img src={chopLogo} alt="CHOP!" className="w-full h-40 object-contain bg-white p-6" />
  <div className="px-6 py-4">
    <h3 className="text-2xl font-bold text-gray-800 mb-2">CHOP!</h3>
    <p className="text-gray-600 text-sm">
      온라인 게임 아이템 현금 거래 중개 서비스입니다. 사용자 간의 직거래를 PWA 기반으로 안전하고 간편하게 만들었습니다.
    </p>
  </div>
  <div className="px-6 pb-4">
    <span className="inline-block bg-indigo-100 text-indigo-600 text-xs px-2 py-1 rounded-full mr-2">PWA</span>
    <span className="inline-block bg-indigo-100 text-indigo-600 text-xs px-2 py-1 rounded-full mr-2">React</span>
    <span className="inline-block bg-indigo-100 text-indigo-600 text-xs px-2 py-1 rounded-full mr-2">TypeScript</span>
    <span className="inline-block bg-indigo-100 text-indigo-600 text-xs px-2 py-1 rounded-full">Tailwind CSS</span>
  </div>
</div>

✅ 구현 포인트

• hover:-translate-y-1과 hover:scale-105 를 통해 카드에 부드러운 상승+확대 애니메이션 적용

• object-contain으로 로고 이미지 비율 유지

• 반응형 대응을 위해 grid-cols-1 md:grid-cols-2 같은 Tailwind 유틸리티 활용 가능

✍️ 마무리

이번 프로젝트 카드 구성은 시각적인 정보 전달에 중점을 뒀고, Tailwind의 유틸리티 클래스 덕분에 애니메이션이나 스타일 적용이 빠르고 효율적이었다.