일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- NVIDIA DLI워크숍
- pc
- Dit
- DEEPLEARNINGINSTITUTE
- Python
- DEEP LEARNING INSTITUTE
- nvidia
- 컴퓨터네트워크
- it
- 파이썬
- ICT이노베이션스퀘어 인공지능 교육
- 대학수업
- 딥러닝
- Ai
- ICT
- 네트워크
- DLI워크숍
- Stem
- IOT
- front-end
- Back-End
- Developer
- DeepLearning
- 컴퓨터
- AI프로그래밍
- 컴퓨터수업
- Network
- 운영체제
- 컴퓨터운영체제
- NVIDIADLI워크숍
- Today
- Total
Coding Story
개인 포트폴리오 제작하기 본문
1. 메인화면
- 상단 메뉴에 자기소개, 진행한 프로젝트, 자격증, 대회, 수상경력, 교육, 활동, 스택, 교육, 문의 메뉴를 구성하여 텍스트 클릭시 해당 메뉴로
이동할 수 있도록 구현하였다.
- 좌측의 영어 이름을 클릭하면 메인화면(자기소개) 로 이동하도록 구현하였다.
2. 프로젝트
- 이때까지 진행했던 프로젝트들을 년도순대로 정렬하여 표시하도록 구현하였다.
- 위에서부터 아래로 년도 순으로 정리가 되어있으며 프로젝트명, 프로젝트에 간단한 소개, 개발 참여도와 진행률을 표시하고,
해당 프로젝트의 활동자료로 이동할 수 있도록 버튼을 구현하였다.
- 프로젝트들 간의 개발언어, 활용 부품, 활용 기자재 등을 입력하여 간단하게 알 수 있도록 구현하였다.
3. 보유 자격증
- 현재 내가 보유하고 있는 자격증, 수료 내역을 알 수 있도록 구현하였다.
- 위에서 아래로 취득한 순서대로 구현하였다.
4. 각종 경진대회 참여
- 상위에서 하위 순으로 경진대회를 참여년도별로 정리하였다.
- 세부사항에는 "[팀명] - 작품명"식으로 입력하여 정리하였고, 해시태그(#)에는 각종 경진대회의 주요 태그를 입력해놓았으며, 회색박스에는
주요 사용 부품을 정리하여놓았다.
5. 수상 내역
- 각종 경진대회에 참여하여 수상한 내역을 알 수 있도록 구현하였다.
- 상위에서 하위로 년도별 수상 내역을 정리하여 구현하였으며, 좌측부터 우측 순으로 "대회명, 세부사항, 수상명"으로 구현하였다.
- 'OTHER AWARDS'를 클릭하면 더 많은 수상 내역 (우측 이미지)을 확인할 수 있도록 구현하였다.
- 'OTHER AWARDS' 페이지에서는 이전 페이지로 돌아갈 수 있는 버튼을 구현해놓았으며, 이때까지 수상했던 내역들을 확인할 수 있도록
웹페이지를 제작(구현)하였다.
6. 교육 수료 내역
- 이때까지 참여했던 교육과 수료한 교육을 정렬하여 구현하였다.
- 상위에서 하위로 년도별 교육 참여 및 수료 현황을 정리하였으며, 수료한 교육을 바탕으로 정리되었다.
- 기업에서 증빙자료를 요청할 경우 별도로 제공할 준비가 되어있음.
7. 활동 내역
- 이때까지의 내가 활동했던 내역들을 확인할 수 있도록 구현하였다.
- 참고자료를 통해 내가 한 활동들이 어떤 활동인지 알 수 있도록 URL(링크)를 첨부하였다.
8. 나의 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 |
---|