포트폴리오 페이지 제작의 막바지에 다다랐다. 글로는 쓰진 않았지만 그간 contact 페이지에 canvas로 애니메이션을 추가하고 resume 페이지도 추가하고 임시로 해놨던 내용도 작성하여 다시 채워넣었다. 이제 마지막으로 localhost 주소에서 벗어날 차례이다. 배포 방법 선정 배포 방법으로는 몇 가지 선택지가 있다. 가장 원초적인 방법으론 집에서 남는 PC로 서버를 돌리는 방법이 있고, 많이들 사용하는 github page를 사용할 수 있지만, 나는 vercel을 사용하기로 하였다. 가장 큰 이유는 개인 프로젝트 수준에서 무료로 이용할 수 있으며 github repo를 그대로 가져와 사용할 수 있다는 점이다. 부차적인 이유로는 Next.js를 사용해 제작하다보니 시작부터 끝까지 vercel을 사..
Intro 구현할 때 뒤로 밀어두었던 타이핑 효과를 추가하였다. # 계획 1. 오픈 소스 이용 1.1 react-type-animation 가장 먼저 고려하였던건 'react-type-animation'이다. https://www.npmjs.com/package/react-type-animation react-type-animation Customizable React typing animation component based on typical.. Latest version: 3.1.0, last published: 2 months ago. Start using react-type-animation in your project by running `npm i react-type-animation`. T..
# 계획 이랄게 없다. Contact이랑 Navigation은 딱히 아이디어가 안떠오르므로 그냥 깔끔하게 만들고 마무리하기로 했다. # Contact page 너무 간단한가... 싶긴 한데... 아이디어가 없.... 그래도 마지막까지 이걸 읽어보실 분들을 위해 Scroll Down 을 다 내리면 Scroll Down이 Thank you for watching으로 바뀌도록 해놓았다. export default function ContactComponent() { return ( Contact {images.email} E-MAIL swcho8220@gmail.com {images.github} GitHub https://github.com/dev-wann {images.blog} Blog https://d..
# 계획 프로젝트 파트의 컨셉은 폴더이다. 폴더를 한 장씩 넘겨가며 각 프로젝트 내용을 하나씩 보여줄 생각이다. 글로 설명하기 어려우니 최종 결과를 먼저 보여주자면, 이런 식으로 동작하게 된다. # 구현 TSX & CSS 먼저, 폴더의 전체적인 구조는 다음과 같다. // tsx PROJECTS Seungwan Cho Double click to close the folder {images.spine} {images.spine} 맨 앞 장인 하늘색 frontCover, 각 프로젝트 내용이 되는 Page, 맨 뒷장인 backCover, 그리고 넘어가는 페이지 아래에 회색 책등을 나타내는 'spine*' class div들로 구성된다. 코드를 처음 보며 의아할 점은, frontCover 및 page의 하위 d..
# 계획 About part에 포함하고자 하는 내용은 다음과 같다. 내 사진 컨셉과 이어지는 내 소개 커리어: 회사와 했던 일 간단히 설명 스킬 셋: 무슨 기술을 쓸 줄 아는지 학력 그런데, 2번이 나머지 항목과 좀 동떨어진다. 그렇다고 다양한 저걸 위한 파트를 하나 더 만들자니 지면이 아까운 느낌이다. 그래서 2번은 팝업 형식으로 따로 빼서 구현하기로 하였다. 간단한 도식은 다음과 같다. # 구현 - 레이아웃 화면은 크게 상단과 하단 두 부분으로 구성된다. 상단 소개문구와 사진은 flex, 하단 설명 파트는 grid를 이용해 구현하였고 내부적으로 flex, grid를 중첩하여 레이아웃을 구성하였다. 레이아웃 구성하는 부분은 딱히 특이사항이 없어 이런 형태로 구현하였다. - 팝업 소개글 아래 버튼을 누르..
# 목표 Intro 파트는 왜 굳이 이런 컨셉을 했는지 설명하는 페이지이다. 따라서 내가 왜 welcome page에 혜성 애니메이션까지 넣어가면서 이 페이지를 준비했는지를 내가 어떤 사람인지와 연결시켜서 설명하는 것이 목적이다. 따라서 3가지 이유를 들어 내가 왜 혜성과 연결되는지를 설명할 것이다. # 요구사항 1. 첫 화면은 welcome 화면과 자연스레 이어지도록 검은 화면에 제목 텍스트가 서서히 등장하도록 할 것 2. 3가지 요소를 스크롤에 따라 순차적으로 보여줄 것 아래 그림과 같이 스크롤에 따라 하나씩 콘텐트가 올라왔으면 한다. # 설계 요구사항 1. 일단은 그냥 텍스트만 넣고 본다. 추후 적당한 폰트를 찾으면 welcome page의 타이핑 효과 넣을 때 같이 넣을 생각이다. 요구사항 2. ..
