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

웹사이트 골격 먼저, 내용은 압축해서

처음 한 일은 콘텐츠 기획입니다. 소개, 프로젝트, 연락처 섹션을 꼭 넣고, 각 프로젝트는 역할과 사용 기술, 결과 링크를 명확히 적었습니다. 디자인은 밝은 색과 굵은 글꼴을 기반으로 미니멀하게 정리했어요. 아래는 완성된 랜딩 섹션 모습입니다.

웹사이트 빌더+코드 편집 혼합 사용

템플릿으로 뼈대를 잡고 세밀한 효과는 HTML, CSS, JavaScript로 다듬었습니다. 프로젝트 카드를 가볍게 만들고 접근성 라벨을 추가하니 체감 성능이 좋아졌습니다. 실제 사용하며 느낀 점은 1) 반응형 세팅을 초기에 끝내면 수정이 적다 2) 이미지 최적화만 해도 로딩이 확 줄어든다 3) 깃허브 Actions로 자동 배포하면 유지가 편하다는 것. 아래는 프로젝트 리스트 섹션 상세입니다.

portfolio 핵심: 깃허브와 배포, 폼 주의

코드는 깃허브에 공개 저장소로 관리하고, GitHub Pages로 무료 배포했습니다. 커스텀 도메인을 연결해 웹사이트 신뢰도도 높였고요. 연락 폼은 스팸 방지를 위해 캡차와 서버리스 함수 검증을 넣었습니다. 폼 UI는 단순하지만 필수 동의 체크와 에러 메시지를 명확히 했습니다. 아래는 폼 화면입니다.

실사용 결과, 웹사이트는 면접 전 링크 공유용으로 제일 효과가 컸습니다. 포트폴리오 흐름이 깔끔해져 질문도 구체적으로 바뀌었고, 수정도 깃으로 바로 반영돼 부담이 적었습니다. 만들기 난이도는 낮추고 완성도는 높이고 싶다면, 템플릿+경량 코드 조합과 깃허브 배포를 권합니다. portfolio를 계속 업데이트할 계획이며, 새 프로젝트가 생길 때마다 웹사이트에 바로 추가하고 있습니다. 깃허브 이슈로 개선 항목을 적어두니 관리가 쉬웠습니다.

#웹사이트 #나만의포트폴리오웹사이트만들기 #포트폴리오 #만들기 #portfolio #깃허브 #포트폴리오웹사이트템플릿 #개발자포트폴리오 #GithubPages배포 #포트폴리오연락폼