[포트폴리오] 미니 포트폴리오 웹사이트 제작기

제작 배경

컴퓨터공학을 다중전공한 이후 여러 동아리와 팀 프로젝트,
개인 프로젝트들을 나름 열심히 해왔지만

뒤늦게 프론트엔드 개발자가 되겠다는 확실한 진로를 정하게 된 후에
해당 직무에 포트폴리오로 활용할 웹 개발 경험이 많지 않다는 것을 깨달았다.

지원서를 내기 위해서는 포트폴리오가 거의 필수이기 때문에,
어떻게든 제출을 하기 위해 노력해야 했다.

보통의 경우 진행한 프로젝트를 설명하는 형식이 대부분이지만
경험이 다소 부족한 나이기에

HTML/CSS/JS 활용능력과 웹 개발에 대한 열정을
최대한 보여주는 것이 최선일 것이라 생각되어,
조금은 빈약하더라도 나만의 웹사이트를 만들고자 마음먹게 되었다!

따라서 선택한 주제가 '나' 자신을 소개하는 웹사이트이다.

결과물

전체 코드 보기👀

https://github.com/Minkyeong-Ko/IntroWebsite

실제 웹사이트 보기👀

https://minkyeongko.netlify.app

몇 주간 정말 열심히 만들어서, 배포까지 완료했다!
엉성한 점도 많고 아쉬운 점도 많지만,

기존에 계획했던 아래의 4가지 효과를 구현하는 데에 성공했다는 점은 매우 뿌듯하다.

Screen Shots

(1) 텍스트 hover 효과

(2) 이미지 hover 효과

(3) 스크롤에 따른 3D Cube의 회전

(4) Card Flip 애니메이션

반성과 계획의 시간

반성

• 전환 효과가 매끄럽지 않은 부분이 꽤 있다.
• 원하는 기능 구현에 급급해 User의 편의를 크게 고려하지 못한 것 같아서 아쉽다.
• 비슷한 이유로 내가 원하는 감성이나 디자인을 시도해 볼 여유를 갖지 못해서 매우 매우 아쉽다.
• 오직 chrome으로, 한 기기로만 개발한 아마추어적인 실수를 한 것 같다.
• 제작에 예상보다 시간이 많이 걸렸다.

앞으로의 계획

• 반응형 웹사이트로 개편하기
• Safari, IE 등 브라우저 호환성 높이기
• 깔끔한 코드 작성법 사용하기
• 이제 HTML, CSS, Javascript 고급 단계로 퀄리티 높이기

사실 프로젝트를 하다 보면 나의 부족한 점이 계속 더 보이는 것 같지만
그만큼 더 발전할 수 있는 기회가 주어지는 것이라 생각하고,
계속해서 열심히 달려 나가야겠다. 화이팅!