mmop는 make my own portfolio의 약자로, 나만의 포트폴리오를 만드는 포트폴리오 웹 제작 서비스입니다.
구글 로그인을 통해 손쉽게 회원가입이 가능하며, 로그인 후 사용자는 사용자만의 포트폴리오 주소(https://mmop.vercel.app/id/아이디)를 가질 수 있습니다.
사용자는 설정에서 자신을 소개하는 글을 작성할 수 있고, 프로필 사진, 배경 컬러, 로고, 포트폴리오 이름, 서브 타이틀, 스킬, 연락처 등을 수정해 포트폴리오를 커스텀 할 수 있습니다. 개발자의 경우 깃허브 주소를 등록하면, 포트폴리오 최상단에 깃허브 컨트리뷰션도 보이게 할 수 있습니다.
My Projects 섹션에서는 모든 글이 프로젝트 기간 최신순으로 정렬되고, 프로젝트 타입(business/side)과 최근 4년간의 년도로 필터링 해서 볼 수 있습니다.
-
💻 Development Environment : nextjs, typescript, next-auth, sanity, swr, jest, testing-library, tailwind
-
🚀 Deployment : Vercel
-
📅 Period : 5/23 ~ 6/16 - Version 1.0.0
-
🔔 Modules
- date-fns, nanoid, next-auth, react-color, react-date-range, react-github-calendar, react-hook-form, react-multi-carousel, react-spinners, swr, jest, testing-library, typescript, dotenv
- 구글 계정을 이용하여 별도의 회원가입 없이 쉽게 서비스 이용이 가능합니다.
- 로그인하면 자동으로 이름과 이메일, 프로필 사진이 저장되고, 이를 기반으로 기본적인 포트폴리오가 생성됩니다.
- 포트폴리오는 상단 헤더의 My Portfolio→ 버튼을 클릭해 확인할 수 있습니다.
- 제목, 부제, 소개, 로고, 배경색을 원하는 대로 설정할 수 있습니다. 사용자가 정한 제목, 부제, 로고를 가지고 포트폴리오 페이지의 메타데이터를 동적으로 설정합니다.
- 또한 프로젝트 소개란의 배경을 원하는 그라데이션 색상을 지정할 수 있습니다.
- 이름, 연락처, 프로필 이미지, 스킬, 깃허브 주소를 수정해 포트폴리오를 커스텀 할 수 있습니다.
- Setting에서 변경한 내용을 바탕으로 포트폴리오가 기본 정보가 수정됩니다.
- 사용자 기본 정보에서 깃허브 주소를 작성한 경우 포트폴리오 상단에 깃허브 잔디를 표시해줍니다.
- 만약 사용자가 유효하지 않는 주소를 작성했거나, 사용자가 private 계정일 경우 아래와 같이 볼 수 없음을 표기합니다.
- 아예 깃허브 주소를 작성하지 않은 사용자는 다음과 같은 기본 UI가 보여집니다.
- 등록된 프로젝트가 하나도 없으면서, 로그인한 사용자가 본인 포트폴리오을 보고 있을 경우, 다음과 같이 Start now 버튼이 보여집니다.
- 본인 포트폴리오가 아니거나 로그인 하지 않은 경우, 아래와 같이 보여집니다.
- 다시 돌아와, Start Now 버튼을 누르면 아래와 같이 프로젝트를 등록할 수 있는 페이지로 이동이 됩니다.
- Period 입력창을 누르면 아래와 같이 기간을 선택할 수 있는 캘린더가 뜹니다.
- Acievements는 하단의 Add achievement 버튼을 통해 새 입력창을 생성할 수 있고 우측 X 버튼으로 다시 제거할 수도 있습니다.
- 프로젝트 이미지는 원하는 만큼 선택해 추가할 수 있습니다.
- 스킬은 입력 창에 작성후 엔터를 누르면 하단에 태그가 생성되며, 태그를 다시 클릭하면 등록된 스킬을 제거할 수 있습니다.
- 프로젝트를 저장하면 포트폴리오 페이지에서 다음과 같이 프로젝트를 볼 수 있게 됩니다. (만약 Setting에서 깃허브 주소를 등록한 경우 My Projects가 아닌 My {dev} Projects로 제목이 보여집니다.)
- 이미지는 캐러셀로 보여집니다.
- 최근 4년과 프로젝트 타입에 따라 필터링 할 수 있습니다. 만약, 해당하는 프로젝트가 없을 경우 아래와 같이 표기됩니다.
-
모바일 사이즈에도 깨지지 않게 처리했습니다.
