개인 웹페이지

메타버스 실습 과제로 자기소개 포트폴리오를 만들어 보는 시간을 가졌다.
자기소개 사이트

자기소개 포트폴리오라기에는 조금 도전에 가까웠던거 같다. 원래 기억하고 있는 HTML, CSS, JS를 이용해서 진행하였지만 문법과 기술면에서 기억이 안나는 부분이 꽤 있었고 이 부분은 AI를 써서 진행하였다. 대부분의 디자인 적인 요소나 들어가는 기술 등은 예전에 웹 사이트를 구현해본 적이 있어서 바로바로 떠올랐던 것 같다. 그럼 아래 들어간 기술들을 하나씩 살펴보자..

Tob-bar
top-bar 부분은 로고 top-bar-nav, top-bar-btn으로 나누었고 로고는 폰트를 바꾸고 nav부분은 #id를 이용해서 누르면 해당 부분으로 이동하게 해두었고 hover도 넣어두었다. btn부분은 누르면 해당 깃허브로 이동하게 해두었다.

Header
헤더부분은 자기소개를 하는 부분으로 기존 템플릿에서 내가 만들고 싶은대로 디자인을 바꾸었고 망곰이는 내가 야구 두산 팬이고 귀여워서 넣었다. 텍스트는 js 텍스트 슬라이스를 구현하였고 document.addEventListner("DOMContentLoaded",() => js 문법을 써서 getElementById를 써서 해당 html을 가져와서 폰트가 1씩 증가해서 글자가 나열됬다가 다시 없어지게 하는 것을 반복이 되게 만들었다. 이 부분은 폰트 증감은 직접 찾아서 했지만 루프 부분은 ai의 도움을 받았다.

about-Info
다음은 내 프로필을 정보를 입력해 두었다. 사진은 두산 철웅이 썼고 내사진은 다음에 기회가 된다면 넣고 display:flex 쓰고 가운데 정렬 해주었고 css작업이 많이 들어갔다.

idol-section
다음은 내가 개인적으로 좋아하는 아이돌 NMIXX를 스와이퍼로 구현해놓았다. 사진은 총 6장을 html에 img에 넣었고 js에서 900속도로 자동으로 사진이 넘어가게끔 만들어 놓았다. 그리고 swiper-button-next, prev를 써서 화살표를 눌렀을 때도 넘어가게 만들어 놓았다.

experience-section
다음은 내가 지금까지 경험해 온 것중에 가장 인상깊은 3가지를 골라 넣은 것이다. 이제 고등학교 때 아두이노 동아리 들어가서 원격 조종되는 로보트를 여러명이서 협업해서 작품을 만든 적이 있었고 군제대하고 나서 친구들끼리 코드클럽이라는 활동을 했었는데 초등학교 6학년을 상대로 스크래치앱을 통해 알고리즘을 학습시키고 함께 게임도 진행했었다. 그리고 마지막은 개인적으로 예전에 HTML, CSS , JS 교육을 받고 처음으로 개인적인 웹사이트를 구현해 볼 때 만든 것이다. 퀄리티가 많이 떨어지긴 하지만 이번에 포폴을 만들 때 도움이 많이 되었다. 다음에는 더 좋아지지 않을까 생각이 든다.

footer와 topbtn
footer 부분은 간단하게 전화번호, 밸로그 이메일, 지역 등 contact와 관련된 내용을 넣었다. topbtn은 오른쪽 아래 화살표 눌렀을 때 smooth하게 올라게 js에 약간의 애니메이션을 넣었다.