Coding Story

개인 포트폴리오 제작하기 본문

IT/HTML, CSS

개인 포트폴리오 제작하기

always7767 2023. 11. 26. 02:14

1. 메인화면

포트폴리오 웹사이트 메인화면

- 상단 메뉴에 자기소개, 진행한 프로젝트, 자격증, 대회, 수상경력, 교육, 활동, 스택, 교육, 문의 메뉴를 구성하여 텍스트 클릭시 해당 메뉴로
   이동할 수 있도록 구현하였다.
- 좌측의 영어 이름을 클릭하면 메인화면(자기소개) 로 이동하도록 구현하였다.

2. 프로젝트

프로젝트 페이지

- 이때까지 진행했던 프로젝트들을 년도순대로 정렬하여 표시하도록 구현하였다.
- 위에서부터 아래로 년도 순으로 정리가 되어있으며 프로젝트명, 프로젝트에 간단한 소개, 개발 참여도와 진행률을 표시하고, 
   해당 프로젝트의 활동자료로 이동할 수 있도록 버튼을 구현하였다.
- 프로젝트들 간의 개발언어, 활용 부품, 활용 기자재 등을 입력하여 간단하게 알 수 있도록 구현하였다.

3. 보유 자격증

보유 자격증 페이지

- 현재 내가 보유하고 있는 자격증, 수료 내역을 알 수 있도록 구현하였다.
- 위에서 아래로 취득한 순서대로 구현하였다.

4. 각종 경진대회 참여

경진대회 참여 이력 페이지

- 상위에서 하위 순으로 경진대회를 참여년도별로 정리하였다.
- 세부사항에는 "[팀명] - 작품명"식으로 입력하여 정리하였고, 해시태그(#)에는 각종 경진대회의 주요 태그를 입력해놓았으며, 회색박스에는
   주요 사용 부품을 정리하여놓았다.

5. 수상 내역

수상 내역 페이지

- 각종 경진대회에 참여하여 수상한 내역을 알 수 있도록 구현하였다.
- 상위에서 하위로 년도별 수상 내역을 정리하여 구현하였으며, 좌측부터 우측 순으로 "대회명, 세부사항, 수상명"으로 구현하였다.
- 'OTHER AWARDS'를 클릭하면 더 많은 수상 내역 (우측 이미지)을 확인할 수 있도록 구현하였다.
- 'OTHER AWARDS' 페이지에서는 이전 페이지로 돌아갈 수 있는 버튼을 구현해놓았으며, 이때까지 수상했던 내역들을 확인할 수 있도록
  웹페이지를 제작(구현)하였다.

6. 교육 수료 내역

교육수료 내역 페이지

- 이때까지 참여했던 교육과 수료한 교육을 정렬하여 구현하였다.
- 상위에서 하위로 년도별 교육 참여 및 수료 현황을 정리하였으며, 수료한 교육을 바탕으로 정리되었다.
- 기업에서 증빙자료를 요청할 경우 별도로 제공할 준비가 되어있음.

7. 활동 내역

활동 내역 페이지

- 이때까지의 내가 활동했던 내역들을 확인할 수 있도록 구현하였다.
- 참고자료를 통해 내가 한 활동들이 어떤 활동인지 알 수 있도록 URL(링크)를 첨부하였다.

8. 나의 IT 기술 스택

나의 IT 기술 스택 페이지

- 프로그래밍 언어별 기술 스택을 알 수 있도록 구현하였다.
- 기술 구분, 로고, 활용 수준, 실력으로 구분하여 정리하였다.

9.  나의 공부 기관

공부 기관 페이지

- IT 기술 습득을 위해 내가 거쳐온 학교와 동아리를 정리하여 구현하였다.
- 이미지를 클릭시 해당 학교 홈페이지로 이동할 수 있게 구현하였다.

10. 아웃트로

아웃트로 페이지

- 나를 소개하는 문구를 입력하였다.
- 나의 포지션, 이름, 나이를 기재하였으며, 나의 이메일을 클릭시 이메일을 발송할 수 있는 프로그램으로 이동하고, 휴대폰 번호를 클릭할 경우 휴대폰
   번호로 연락을 하게 되며, 웹사이트는 나의 웹사이트를 한 눈에 알 수 있는 웹사이트로 이동하도록 구현하였다.
- 'GITHUB, INSTAGRAM, PORTFOLIO 2, BLOG, SNS' 를 개별 텍스트로 입력하여 텍스트 클릭시 해당 사이트로 이동하게 구현하였다.
- COPYRIGHT를 써서 2차 무단복제, 전제를 금하도록 구현하였다. 

11. 기타
- 나의 포트폴리오 웹사이트 기본 틀은 Kije Park님이 제작하신 틀을 활용하였다. (URL : 
https://devsnote.com/post?post_no=2102 )
- 기존 틀에서는 White, Dark 버전을 눌러 배경, 텍스트 색상의 변경이 가능했지만 요즘 거의 대부분이 Google의 크롬을 사용하는데 
   Google의 크롬은 색상 변환이 적용되지 않을 뿐만 아니라 모바일에서도 White 배경만 가능해서 White, Dark 버튼을 없애고 
   배경을 Dark로 하고, 텍스트 색상을 White 및 Yellow로 변경하여 구현하였다.
- 나의 포트폴리오 웹사이트는 수시로 업데이트 될 것이다. ( https://seuljaehyuk.github.io/portfolio/lab.html )

'IT > HTML, CSS' 카테고리의 다른 글

포트폴리오 업데이트 (2025.05.14)  (0) 2025.05.15
Comments