Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
[프론트엔트/백엔드] 그리니한 심플 포트폴리오 (Vanilla JS)
#portfolio
3년 전
6,939
2

포트폴리오 URL

https://hyunah-kim-clou.github.io/HyunF8F8FF.github.io/

이미지

undefined

undefined

자기소개

안녕하세요. 프론트엔드와 백엔드 등 이것저것 만져보고 있는 그리니한 개발자입니다.

대학에서 컴퓨터공학을 전공하고 있고, 이제 졸업을 앞둔 취준생입니다. 마침 포트폴리오 챌린지를 한다길래 이번 기회에 만들어보았는데요.

아직 수정하고, 보완해야할 점이 보여 부끄럽네요. 그래도 원하는 분위기대로 잘 만든 것 같아 굉장히 뿌듯합니다.

서비스 소개

전반적인 스타일은 간단하고, 심플하게 구성했어요. 

아무래도 포트폴리오를 통해 저를 나타내는 것이라 어떤 인상을 주면 좋을지, 테마를 결정하는데 고민을 많이 했습니다.

그 결과, 제가 많이 사용하는 그리드노트와 제가 되고 싶은 편안하면서도 깔끔한 느낌을 주기 위해 녹색을 메인 색으로 잡았어요.

개발 과정

항상 색 조합이 가장 어렵네요. 잘 어울리는지, 어떤 식으로 사용할 지 결정하는 게 참 어렵더군요. 처음에는 주황색&모카커피를 모티브로 디자인했어요. 근데 마음에 안들어서 유튜브에서 다른 포트폴리오들을 찾아봤어요. 

거기서 본인의 책상을 통해 자신의 아이덴티티를 드러내는 포트폴리오를 보고, 아예 테마를 바꿔서 제게 친숙한 물건인 그리드 노트를 배경으로 했습니다. 덕분에 초기보다 뭔가 꽉차고, 깔끔한 인상을 줄 수 있었습니다.

JSON 파일에서 같은 배열의 데이터를 다르게 처리해야 했어요. 그래서 만약 http로 데이터가 시작되면 웹사이트로 연결하는 a태그를 주고, 아니면 span태그를 주었습니다.

앞으로 계획

JS를 더 배워서 스크롤을 내리면 동적으로 각 프로젝트에 대한 설명을 깔끔하게 보여줄 겁니다. 또 상단에 버튼을 추가해서 한 눈에 프로젝트를 확인할 수도 있게요.

추가적으로 안드로이드 앱 프로젝트, 바닐라JS나 React를 활용한 프로젝트를 올릴 계획입니다. 프로젝트마다 테마 꽃이나 나무를 주어 조금 더 아름답게 꾸밀겁니다.

깃허브 바닥에 널부러진 포트폴리오였는데, 덕분에 깔끔하게 새단장할 수 있었네요. 이게 바로 커뮤니티의 힘일까요!! 이런 기회 주셔서 감사합니닷ㅎㅎ 유튜브보면서 항상 활력을 얻어가요. 유용한 정보도요. 항상 감사합니다.

2 comments