Source code for the portfolio site. GraphCMS, GitHub API v4, and Qiita Api v2 on Next.js.
You can create your portfolio site with a GraphCMS endpoint, a GitHub personal access token, and a Qiita token.
- Node.js v14.15.0
- Yarn above v1.x.x
You can clone this repository with follow command.
git clone ...
cd portfolio
yarn
You can also debug with the following commands.
yarn dev
For production build, execute the following command.
yarn build
yarn start
The following environment variables must be added to the .env file.
QIITA_ACCESS_TOKEN="your Qiita access token"
GITHUB_PERSONAL_ACCESS_TOKEN="your GitHub personal access token"
GRAPHCMS_API="your Graphcms API endpoint"
NEXT_PUBLIC_GTM_ID="your GTM ID"
NEXT_PUBLIC_FORMSPREE_ENDPOINT="your Formspree endpoint"
With the following schema, you can create a similar portfolio site.
Simple profile items.
field | type | unique | required | Title |
---|---|---|---|---|
title | Single line text | ✅ | ||
detail | Single line text |
Register your badge of qualification.
field | type | unique | required | Title |
---|---|---|---|---|
image | Asset picker | ✅ | ||
title | Single line text | ✅ | ✅ | ✅ |
width | Number | |||
height | Number |
- width : width of image
- height : height of image
Register your work history.
field | type | unique | required | Title |
---|---|---|---|---|
title | Single line text | ✅ | ✅ | |
startYMD | Date | ✅ | ||
endYMD | Date | |||
detail | Markdown |
- endYMD : If it's ongoing, make it with a future date.
Register qualifications you have.
field | type | unique | required | Title |
---|---|---|---|---|
name | Single line text | ✅ | ✅ | ✅ |
YYMM | Date | |||
Badge | Reference |
- Badge : Link to badge schema.
Register your skills.
field | type | unique | required | Title |
---|---|---|---|---|
name | Single line text | ✅ | ✅ | ✅ |
star | Float |
- star : Rate your skills on a 5-point scale. Set also "Limit input range" ... between 1-5.
Grouping skills.
field | type | unique | required | Title |
---|---|---|---|---|
category | Single line text | ✅ | ✅ | ✅ |
Skills | Referense | |||
orderID | Number |
- Skills : Link to skill schema. Check also "Allow multiple Skills per SkillList".
- Qiita API v2 ドキュメント - Qiita:Developer
- GitHub の GraphQL API - GitHub Docs
- Explorer - GitHub Docs
- Queries | GraphCMS
This project is licensed under the MIT License.
See the LICENSE file for details.