포트폴리오 사이트를 만들며

 군에 입대하기 전, 남는 시간을 이용해 html / css 강의를 들으며 개인 페이지를 만들었던 적이 있습니다. 당시 학교 선배의 NAS 서버에 얹혀서 돌렸었는데, 선배도 입대를 하게되어 페이지를 올려놓았던 서버가 공중분해 되었습니다.

 

 

개인 페이지를 만들고 있습니다. (https://usage.tistory.com/28?category=829845)

 

개인 페이지를 만들고 있습니다.

 

 

 기능이라고 해봐야 학력과 진행했던 프로젝트, 간단한 이력등을 적어놓은 간단한 사이트였는데, 나중에 보니 일종의 이력서 내지는 포트폴리오가 될 수 있다는 생각에 제대로 리뉴얼해보자는 생각이 들었습니다.

 

 마침 든든한 선배가 놀고 계시다는 소식에 함께 할 생각 없냐고 꼬셔서... 함께하게 되었습니다.

 

걸렸구나!

 

 

 그렇게 포트폴리오를 만드는 프로젝트를 결성하고 (모여서 각자 코딩하는) 이왕 만들어보는거 새로운 프레임워크 공부도 할겸 리액트를 써보는게 어떻냐는 선배의 제안에 살짝 망설여졌지만, 모르는 부분은 친절히 알려주기로 합의를 보고 사용하기로 결정하였습니다.

 

 

 

 가장 먼저 했던건 학생 지원 사업으로 받았던 인텔리제이 IDE를 갱신하고, 웹스톰을 켜서 우선 꼭 들어가야 할 내용부터 만들기 시작했습니다. 이름, 나이, 학력, 사용할 수 있는 기술, 진행했던 프로젝트등... 전체적인 윤곽을 잡아놓고 html 부터 코딩에 들어갑니다.

 

 

우선은 평소 스타일대로 코딩하기

 

 

 

요소를 적당한 곳에 배치한다거나, 어울리는 색을 쓴다거나 하는 일은 진성 공돌이인 저에겐 너무나 어려운 일이었기 때문에... 리액트 기본 프로젝트의 색을 그대로 이용하였습니다. 검은 배경에 푸른 글씨, 깔끔합니다.

 

 

사진이라 안 보이지만 타이핑 애니메이션도 넣어주었습니다

 

 

 

view more 버튼을 누르면 다음 화면으로 이동하게 됩니다. 부드럽게 스크롤 되도록 해놨어요.

 

 

 

간단한 소개

 

 

 

 

아직 이렇다 할 이력이 없어서 간단히만 적었습니다. 대외활동으로 빈 자리가 조금은 채워질 수 있길...!

 

 

 

 

사용해봤던 기술들

 

 

 

조금 다듬어야 할 필요가 있어보이는 기술 섹션입니다. 그리드라던지, 크기라던지 수정해야 할 곳이 많네요. 그리고 너무 어두운 색으로만 배경을 칠해서 이번 섹션에서는 색상의 변화를 주었습니다.

 

 

 

 

진행했던 프로젝트들

 

 

 

 17년과 19년 사이에 있는 2년의 공백이 참 크게 느껴지네요. 좀 더 다양하게 진행해봐야 할 필요를 느꼈습니다.

 

 

 여기까지 늘 짜던 방식대로 사이트를 만들었고, 이제부턴 리액트스럽게 코드들을 변환해야겠죠? 어느정도 공부가 필요하기에 시간을 두고 바꿔나가려고 합니다. 그 외에도 flex를 사용했는데 구버젼 브라우저와의 호환성, 일정 크기 이하로 내려가면 감당하지 못하는 반쪽짜리 반응형 등 고려해야 할 요소가 아직 산적해있네요. 차근차근 해나가야겠습니다.

 

 

 멋진 포트폴리오 사이트를 위해!

 

 

 

포트폴리오 깃허브 주소: https://github.com/kyr9389/portfolio

kyr9389/portfolio