🗂️ Folio

개발자만을 위한 포트폴리오 제작 사이트 👉 클릭

예시를 확인해보세요! 👉 클릭

🔨 Stack

• Frontend :

• Backend :

• Database:

• CI/CD :

• Server:

📖 Description

오직 개발자만을 위한 포트폴리오 제작 사이트입니다. 개발자에게 필요한 정보만 간추려 스킬 스택, 프로젝트 경험을 포함한 간결한 포트폴리오를 제작해보세요.

⭐ Main Feature

포트폴리오 생성 / 수정

포트폴리오 결과물

포트폴리오 내보내기를 통해 링크가 클립보드에 복사됩니다. 프로젝트 명세 작성 시 첨부한 md 파일은 자세히 보기 버튼을 통해 확인할 수 있습니다.

결과물은 다음 링크에서 확인해보세요. 👉 클릭

회원가입 및 로그인

JWT 토큰을 이용하였습니다. 비밀번호는 단방향 암호화로 구현하였습니다.

아이디 찾기, 비밀번호 찾기

회원가입 시 입력한 이메일로 아이디를 찾고, 임시 비밀번호를 발급하도록 구현하였습니다.

개인정보 수정

반응형 UI

모바일 환경을 고려하였습니다.

💻 Getting Started

Installation

npm install

Develpe Mode

npm run dev

Production Mode

npm run build
npm run start

📁 Project Structure

📁 /src
├── 📁 app
├── 📁 components : 하단에서 설명.
│   ├── 📁 atoms
│   ├── 📁 molecules
│   ├── 📁 organisms
│   └── 📁 templates
├── 📁 utils : 미들웨어
├── 📁 styles : css등
├── 📁 store : for redux
└── 📁 types : for Typescript type 정의

컴포넌트 구조를 모듈화하려고 노력했습니다.

• 📁 atoms : button, input, p를 감싸는 기본적 컴포넌트
• 📁 molecules : atoms에 속한 컴포넌트를 여러개 조합한 컴포넌트
• 📁 organisms : molecules와 atoms를 혼합해서 만든 컴포넌트. ex) 회원가입 양식, 푸터
• 📁 templates : 페이지 스켈레톤. 어디에 atoms, molecules, organisms 배치할 지를 결정