포트폴리오

크리에이티브하고 인터랙티브한 개인 포트폴리오 웹사이트를 만들어본다.단순한 이력서 페이지가 아닌, 기술과 감성을 함께 보여주는 웹사이트를 지향한다.Vite + React + TypeScriptTailwindCSS (수동 세팅)Zustand (상태 관리)styled-com

지난 글에서는 프로젝트를 어떤 방향으로 구성할지, 그리고 기술 스택(Vite + React + TailwindCSS)을 어떻게 세팅했는지 정리했다. 이번 글에서는 본격적으로 첫 번째 섹션인 헤더(Header) 구성 과정을 다뤄본다.처음부터 쉬울 줄 알았던 헤더 정렬이

이번 글에서는 About(자기소개) 섹션을 구성하는 과정을 공유한다. 단순히 텍스트와 사진을 배치하는 것처럼 보여도, Tailwind CSS를 처음 써보는 입장에서는 다양한 삽질과 고민이 있었다.About 섹션에는 기본적으로 다음과 같은 정보를 담기로 했다:이름 (큰

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

기본적인 소개 섹션을 마무리한 뒤, 이제는 내가 사용할 수 있는 기술들을 명확히 보여주는 기술스택(Tech Stack) 섹션을 구성했다. 이 파트는 시각적인 구성과 깔끔한 정렬이 중요했기 때문에 카드형 레이아웃과 아이콘까지 적용해봤다.프론트엔드 기술과 협업 도구를 구분

이번 글에서는 내가 진행한 프로젝트를 소개하는 "프로젝트 섹션"의 카드에 hover 미리보기 영상과 클릭 시 전체 영상 재생 모달 기능을 어떻게 구현했는지 기록한다. 이번 기능은 기존의 정적인 카드 구성에서 한 단계 나아가, 사용자와의 인터랙션이 강화된 동적인 UI를

이번에는 포트폴리오 사이트 내 Career 섹션을 구현한 과정을 정리했다. 단순히 텍스트를 나열하는 것보다, 시간 흐름에 따라 중앙선을 기준으로 좌우 번갈아 등장하는 타임라인 형식을 채택했고, 스크롤 시 등장 애니메이션을 넣어 더욱 직관적이고 시각적으로 흥미롭게 구성했

포트폴리오 사이트를 마무리하면서 가장 마지막에 추가한 두 가지 기능이 있다.바로 연락처(Contact) 섹션과 네비게이션 메뉴의 스크롤 라우팅 처리다. 이 포스트에서는 어떻게 이 두 기능을 구현했는지, 그리고 왜 이렇게 구성했는지를 정리했다.대부분의 포트폴리오 사이트가

최근에 제작한 포트폴리오 웹사이트를 실제 이력서 제출용으로 사용하기 위해 Vercel로 배포했다. 배포 자체는 어렵지 않았지만, 배포 이후에 이미지와 비디오가 로드되지 않는 문제가 발생했고, 이 글에서는 그 과정을 정리하고 해결 방법을 공유한다.정적 사이트 배포에 최적