포트폴리오 정리

디렉토리 구조

├── app
│   ├── aboutme
│   │   └── page.tsx
│   ├── archive
│   │   └── page.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.module.css
│   ├── page.tsx
│   ├── project
│   │   ├── [id]
│   │   │   ├── Project.tsx
│   │   │   └── page.tsx
│   │   └── page.tsx
│   └── stack
│       └── page.tsx
├── components
│   ├── Footer.tsx
│   └── common
│       ├── Header.tsx
│       ├── SideBar.tsx
│       ├── aboutme
│       │   ├── AboutMe.tsx
│       │   ├── ContentsBox.tsx
│       │   └── style
│       │       └── aboutMe.module.css
│       ├── archive
│       │   ├── Archive.tsx
│       │   ├── ArchiveBox.tsx
│       │   └── styles
│       │       └── archive.module.css
│       ├── project
│       │   ├── Project.tsx
│       │   ├── ProjectBox.tsx
│       │   └── style
│       │       ├── project.module.css
│       │       └── projectBox.module.css
│       ├── stack
│       │   ├── Stack.tsx
│       │   ├── StackBox.tsx
│       │   └── style
│       │       ├── stack.module.css
│       │       └── stackBox.module.css
│       └── style
│           └── header.module.css
└── function
    ├── getAboutMe.ts
    ├── getArchiveValue.ts
    ├── getCategory.ts
    ├── getProject.ts
    ├── getProjectDetailValue.ts
    └── getStackValue.ts

Util 함수

포트폴리오 사이트는 API 연동이 진행되지 않기 때문에 동적 데이터를 만들어서 사용 했습니다.
해당 데이터는 사용되는곳이 아닌 데이터가 어떤 데이터인지 알 수 없게 하기위해 Util 함수로 분리 했습니다.

getAboutMe

포트폴리오 사이트에 나의 장점을 어필 할 수 있는 데이터를 불러오는 함수 입니다.

getArchiveValue

나의 기록물들을 보여줄 수 있는 링크들을 불러오는 함수입니다.

getCategory

전체 메뉴의 카테고리의 값을 가져오는 함수

getProject

Project의 Value값을 가져오는 함수

getProjectDetailValue

Project의 상세페이지의 값을 가져오는 함수

getStackValue

Stack에 관련된 값을 가져오는 함수

반응형 UI

포트폴리오는 전체적으로 모바일과 PC가 되는 반응형 UI를 가지고 있습니다. 공통적인 Layout을 가지고있기 때문에 중복코드를 줄이기위해 Layout Component를 만들었고 Props를 받아서 해당하는 Category에 맞는 조건부 스타일링을 구현했습니다.

기초적인 글자크기를 Global CSS에 설정했고 그외에는 반응형 해상도별 Font-Size를 설정했습니다.

GitHub.io 배포

따로 AWS를 쓰지않고 GitHub.io에 배포 했습니다. 링크는 여기있습니다.
메인페이지의 사진 및 글귀는 변경될 예정입니다!