-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1831747
commit a1da934
Showing
1 changed file
with
84 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,97 @@ | ||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). | ||
# 🗂️ Folio | ||
|
||
## Getting Started | ||
|
||
First, run the development server: | ||
<img src="https://github.com/user-attachments/assets/4ac774a1-74d7-47fb-b7f3-c3ae603fbc67" width="600" /> | ||
|
||
```bash | ||
npm run dev | ||
# or | ||
yarn dev | ||
# or | ||
pnpm dev | ||
# or | ||
bun dev | ||
``` | ||
> 개발자만을 위한 포트폴리오 제작 사이트 👉 [클릭](http://yrpark.duckdns.org/) | ||
> 예시를 확인해보세요! 👉 [클릭](http://yrpark.duckdns.org/test/3) | ||
## 🔨 Stack | ||
- **Frontend** : <img alt="Next.js" src ="https://img.shields.io/badge/Next.js-000000.svg?&style=for-the-badge&logo=Next.js&logoColor=white"/> | ||
<img alt="TypeScript" src ="https://img.shields.io/badge/TypeScript-3178C6.svg?&style=for-the-badge&logo=TypeScript&logoColor=white"/> | ||
|
||
- **Backend** : <img alt="Express" src ="https://img.shields.io/badge/Express-000000.svg?&style=for-the-badge&logo=Express&logoColor=white"/> | ||
<img alt="Node.js" src ="https://img.shields.io/badge/Node.js-5FA04E.svg?&style=for-the-badge&logo=Node.js&logoColor=white"/> | ||
- **Database**: <img alt="MariaDB" src ="https://img.shields.io/badge/MariaDB-003545.svg?&style=for-the-badge&logo=MariaDB&logoColor=white"/> | ||
|
||
- **CI/CD** : <img alt="Docker" src ="https://img.shields.io/badge/Docker-2496ED.svg?&style=for-the-badge&logo=Docker&logoColor=white"/> | ||
<img alt="GithubActions" src ="https://img.shields.io/badge/githubactions-2088FF.svg?&style=for-the-badge&logo=githubactions&logoColor=white"/> | ||
|
||
- **Server**: <img alt="RaspberryPi" src ="https://img.shields.io/badge/raspberrypi-A22846.svg?&style=for-the-badge&logo=raspberrypi&logoColor=white"/> | ||
<img alt="Apache" src ="https://img.shields.io/badge/apache-D22128.svg?&style=for-the-badge&logo=apache&logoColor=white"/> | ||
|
||
Open [http://yrpark.duckdns.org:3000](http://yrpark.duckdns.org:3000) with your browser to see the result. | ||
|
||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. | ||
## 📖 Description | ||
|
||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. | ||
오직 개발자만을 위한 포트폴리오 제작 사이트입니다. 개발자에게 필요한 정보만 간추려 스킬 스택, 프로젝트 경험을 포함한 간결한 포트폴리오를 제작해보세요. | ||
|
||
## Learn More | ||
## ⭐ Main Feature | ||
### 포트폴리오 생성 / 수정 | ||
<img src="https://github.com/user-attachments/assets/2051a6e6-acda-4752-9621-8597b90506d9" width="600" /> | ||
<img src="https://github.com/user-attachments/assets/a87e1984-e7af-491b-8ec0-e495de570165" width="600" /> | ||
|
||
To learn more about Next.js, take a look at the following resources: | ||
### 포트폴리오 결과물 | ||
포트폴리오 내보내기를 통해 링크가 클립보드에 복사됩니다. 프로젝트 명세 작성 시 첨부한 md 파일은 자세히 보기 버튼을 통해 확인할 수 있습니다. | ||
|
||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. | ||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. | ||
결과물은 다음 링크에서 확인해보세요. 👉 [클릭](http://yrpark.duckdns.org/test/3) | ||
<img src="https://github.com/user-attachments/assets/913fd259-6cec-40d0-b1d0-d61528372fc5" width="600" /> | ||
<img src="https://github.com/user-attachments/assets/f98d8c0a-d52a-4fcf-9e3a-ff7aceba337a" width="600" /> | ||
|
||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! | ||
### 회원가입 및 로그인 | ||
<img src="https://github.com/user-attachments/assets/f3977220-0535-47b6-a858-aa82cd755ff5" width="600" /> | ||
|
||
## Deploy on Vercel | ||
JWT 토큰을 이용하였습니다. 비밀번호는 단방향 암호화로 구현하였습니다. | ||
|
||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. | ||
### 아이디 찾기, 비밀번호 찾기 | ||
회원가입 시 입력한 이메일로 아이디를 찾고, 임시 비밀번호를 발급하도록 구현하였습니다. | ||
<img src="https://github.com/user-attachments/assets/4bc60607-8f39-4502-b2c2-8684e514432c" width="400" /> | ||
|
||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. | ||
### 개인정보 수정 | ||
<img src="https://github.com/user-attachments/assets/6a067a92-ab56-4f49-af95-1bcd56c506f1" width="600" /> | ||
|
||
### 반응형 UI | ||
<img src="https://github.com/user-attachments/assets/74997e37-ac3e-4897-acf0-02040d8988f0" width="200" /> | ||
<img src="https://github.com/user-attachments/assets/97c91bbd-da07-42fe-9378-68183279a8dc" width="200" /> | ||
<img src="https://github.com/user-attachments/assets/ebf9d0dc-4eae-499d-975a-7662e468d835" width="200" /> | ||
|
||
|
||
|
||
## 💻 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 배치할 지를 결정 |