Community

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

← Go back
[프론트엔드] 뱅글뱅글 턴테이블이 돌아가는 포트폴리오 웹사이트
by bami
#portfolio
2년 전
20,424
16

beomseokchoi.com

자기소개:

  • 안녕하세요. 노마드코더에서 공부하며 개발자 취업을 준비하고 있는 bami 입니다. 올해부터 본격적으로 취업 지원을 해보고자 리액트도 공부할 겸 포트폴리오 사이트를 한번 만들어 보았습니다

개발과정:

  • 프로젝트들은 모바일 app icon 처럼 만들어서 클릭하면 모달창을 띄워 스크린샷과 링크 및 세부정보를 볼 수 있도록 했습니다. 모달창 디자인이 아직 후집니다.. 나중에는 스크린샷 대신에 동작영상이나 gif으로 교체할 예정입니다.

  • 사실 아직 이렇다 할 프로젝트를 한 것이 별로 없어서 studies 메뉴를 만들어 노마드코드에서 수료했던 챌린지도 한번 쭉 넣어 봤습니다. 링크를 타면 졸업과제를 볼 수 있는데 일단 제 졸업과제들 상태(?ㅋㅋ)부터 좀 체크해야할 것 같아서 지금은 비워놓았습니다

  • 제일 만족스러웠던 부분은 Route Transition입니다. azzerad.com 이라는 아트 스튜디오의 웹사이트에서 이걸 처음보고 너무 멋지다고 생각해서 꼭 제 포트폴리오 사이트에 적용해보고 싶었거든요. 나중에는 이 사이트처럼 요소별로 딜레이를 각각 다 다르게 줘서 더 세련되게 만들고 싶네요.

  • 홈 화면은 어떻게 채울까 고민을 많이 하다가 턴테이블을 모티브로한 간단한 애니메이션을 오디오와 함께 넣어해보기로 했습니다. 홈화면으로 연결되면 바늘이 LP판 쪽으로 떨어지면서 짧은 오디오를 재생하게 되고 유저는 컨트롤러를 통해 간단한 조작을 할 수 있습니다. (오디오는 아직 준비중이에요ㅠㅠ)

  • Contact 에는 emailjs를 이용해 바로 저에게 이메일을 보낼 수 있는 Form을 만들어 봤습니다. 간단했지만 처음 해보는거라 신기하고 재밌었네요.

앞으로의 계획:

  • 일단은 이렇게 완성되었지만 코드는 아직 개선해야될 부분들이 많네요ㅠㅠ 조금씩 고쳐나가보도록 하겠습니다. 또 포트폴리오 웹사이트를 만들면서 아직은 내가 보여줄 수 있는 것들이 많이 부족하구나 생각이 들었어요 아직 프로젝트도 더 많이 해봐야겠고, 챌린지도 더 많이 해봐야겠구요. 갈 길이 멀지만 그래도 항상 재밌게 공부하고 있습니다. 이 포트폴리오를 차근차근 채워가면서 언젠가는 멋진 주니어 개발자로 취뽀할 수 있기를 바라며... 노마드 여러분 모두 해피코딩되세요~

16 comments