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

디자인은 원페이지 구조로 가볍게 시작했습니다. 상단 히어로에 소개 한 줄과 CTA 두 개를 배치했고, 배경 이미지는 가독성을 위해 오버레이를 깔았습니다. 실제 작업 화면은 아래 사진처럼 VS Code에서 구성 요소를 쪼개 관리했어요. 제품 전체 사진 - 확대샷 - 그 외 사진

성능과 접근성은 CSS 변수·반응형으로 해결

다크·라이트 테마를 CSS 변수로 관리하니 유지보수가 편했습니다. 모바일 퍼스트로 그리드를 짜서 작은 화면에서도 웹사이트 흐름이 끊기지 않았고, 버튼 대비와 포커스 스타일을 살려 키보드 탐색도 자연스럽게 됐습니다. 코드 편집 화면을 보면 토큰화와 미디어 쿼리로 깔끔하게 나뉜 걸 확인할 수 있어요.

깃허브로 배포·이력 추적까지 한 번에

깃허브 저장소를 만들고 main 브랜치에 푸시한 뒤 Pages로 배포했습니다. 중요한 건 커밋 메시지를 일관되게 남기는 습관이더군요. feat fix docs 같은 접두어를 쓰니 변경 이력이 읽기 쉬웠습니다. github Actions를 붙여 빌드 검증도 했고, 오류는 콘솔에서 바로 잡았습니다. 작업 중엔 스크립트 최적화로 불필요한 이벤트를 줄여 웹사이트 로딩을 가볍게 유지했습니다.

실사용 소감은 명확합니다. 빌더로 초안을 빠르게 만들고, 필요 부분만 직접 코딩해 다듬는 하이브리드 방식이 가장 현실적이었습니다. 포트폴리오 업데이트는 깃허브에 이미지와 설명을 추가하고 커밋만 하면 웹사이트가 바로 반영돼 편했습니다. 주의할 점은 이미지 최적화와 메타 태그 챙기기, 그리고 연락처 폼의 개인정보 체크박스입니다. 이 세 가지만 제대로 잡으면 면접관이 원하는 정보가 한 번에 보입니다. 포트폴리오, 깃허브, github 링크를 상단과 하단에 중복 배치해 이동 경로도 줄였습니다. 커밋 이력은 꾸준함을 보여주는 지표라 주말에도 짧게라도 남겨두니 효과가 컸습니다.

웹사이트는 결국 나를 설명하는 간판이라고 느꼈습니다. 디자인은 단정하게, 내용은 역할과 성과 위주로, 배포는 깃허브 Pages로 가볍게. 이 조합으로 비용 없이 빠르게 시작했고, 유지와 확장이 쉬웠습니다. 실무 포지션을 준비하신 분들께 같은 흐름을 추천드립니다.

#해시태그 #웹사이트 #나만의포트폴리오웹사이트만들기 #포트폴리오웹사이트 #깃허브Pages배포 #github포트폴리오 #프론트엔드포트폴리오 #원페이지웹사이트 #반응형웹포트폴리오 #커밋전략 #개발자개인사이트