DJ-folio 시동 걸기

✨DJ learning WEB·2023년 1월 27일
0

Portfolio 제작기

목록 보기
1/1

동기

바야흐로 설연휴였다. 빡센 코딩은 하고 싶지 않았고 아무것도 하지 않고 보내기엔 귀한 시간이다. 뭘할지 고민하다가 최근 유행(?)처럼 번지는 포트폴리오 웹페이지 제작을 하기로 결심했다.

기존에 노션에 생성한 포트폴리오가 있음에도 자체 제작하려는 이유는?
1) Oopy를 한번 써봤더니 커스텀의 매력을 알게 됨(무료체험 해본 뒤 👋)
2) 주변/유명한 개발자들이 직접 개발한 포트폴리오 or 블로그 페이지를 볼 때마다 부러웠음 (나는 유행을 따르는 자😎)
3) 리액트 프로젝트에 yarn 기반으로 연습 삼아 작업해보고 싶었음
4) 심심해서 chatGPT한테 TS 환경에서 React로 포폴 웹페이지 만들어달랬더니 10초만에 뚝-딱 하길래 충격 먹음 (Human으로써 가만히 있을 수 없다.)

계획

  1. 기술 스택: TS, React, yarn, Tailwind CSS
  • TS & React: 지난 3개월 간 연마해 온 나의 도구이기 때문에 pick.
  • yarn: npm 충분히 많이 써봤고 많이 느린거 알아서 yarn은 얼마나 다른가 직접 체감해보기 위해 pick.
  • Tailwind: MUI, Bulma, emotion/styled, styled-components, 생 CSS, BootStrap 등등 JS·TS + (React) 기반에서 스타일링을 다양하게 해봤는데, tailwind를 한번도 안 써봐서 + BootStrap보다 세련돼보여서
  1. 나의 컨셉 잡기 (로고, 문구 등에 나의 철학 담기)
  • 활용 툴: Figma - 포샵 & 일러 쓸 줄 모르는 내게 가장 유용한 디자인 작업 툴
  1. 내용 채우기
  • 상단 우측 메뉴 - 나에 대한 정보 | 진행한 프로젝트s | 연락처
  1. 본문1(About Me): 작고소중한 내사진 | 연락처 | 희망 직무 | 교육 | 경력 | 깃헙 벨로그 링크
  2. 본문2(Recent Work): 프로젝트 1 | 프로젝트 2 | 프로젝트 3 | 프로젝트 4 (뭔일이 있든 최대 4개만)
  3. 본문3(Contact): 번호 | 이멜 | 깃헙 | 링크드인(나중에..)
  1. 배포
  • 활용 툴: Vercel - GitHub pages, Netlify 그만 쓰고 요즘꺼 써보자!

게시판, 댓글, 챗봇 등 방문자와 소통할 수 있는 기능을 넣을지 말지 고민 中.

정적으로 내용을 그때그때 고칠지 / 게시판 형식으로 풀스택으로 할지 고민 중. 근데 굳이?

실행

  1. 개발 환경 구축 ✔
    다양한 variation이 있었지만 결국 흐르는 강물을 거꾸로 거슬러 오르듯(?) CRA로 편하게 했다.. (´。_。`) 다음 갠플 때는 꼭 다른 방식으로 구축해보리라 다짐.

  2. 나의 컨셉 잡기 ✔
    찬찬히 나에 대해 생각해보며 키워드 도출. 지인들과 연락하며 영감 얻기.
    피그마로 이리끼적 저리끼적 끝에 뭔가 나옴.
    로고도 맘에 안들어서 그림 그려주는 AI 두개(이름을 까먹었다) 체험해보았더랜다.
    결론은 아무리 그래도 내가 만든 로고가 가장 내 의도에 부합하다고 판단.

결과

요맨큼 했다 요오오오맨큼

  • 숨은 영감 찾기

  • 로고 작업

  • UI 요맨큼 작업

yarn으로 작업하니까 npm보다 확실히 빠른 것 같다(아직 내 앱이 안 무거워서 그런거겠지..^^;). 딱히 차이점도 없어서 적응하기 빨랐고 진작 써볼 걸 그랬다.

Tailwind도 진.작. 써볼걸 그랬다. 디자인 너무 트렌디하고.. 내 취향이고.. BootStrap이랑 사용 방식은 비슷하니 적응도 빨리 했다. config 파일 하나로 컨트롤되는 것도 편하고.

앞으로 할 일

  • GitHub 레포 생성
  • 메뉴 Routing
  • 본문 내용 채우기
  • 제발 css는 후순위로 흐즈..
profile
피가 되고 살이 될 나의 지식

1개의 댓글

comment-user-thumbnail
2023년 2월 21일

인터넷 서핑하다 방문하게 됐는데 색알못이 보기에도 색감 너무 예뻐요!!!
다음 포스팅도 기다릴게요😊

답글 달기