Skip to content

Source code for the portfolio site. GraphCMS, GitHub API v4, and Qiita Api v2 on Next.js.

License

Notifications You must be signed in to change notification settings

sakelog/portfolio

Repository files navigation

portfolio

Source code for the portfolio site. GraphCMS, GitHub API v4, and Qiita Api v2 on Next.js.

README 日本語版

screenshot_portfolio

code_size issue license

Feature

You can create your portfolio site with a GraphCMS endpoint, a GitHub personal access token, and a Qiita token.

Requirement

  • Node.js v14.15.0
  • Yarn above v1.x.x

Usage

You can clone this repository with follow command.

git clone ...
cd portfolio
yarn

About debug

You can also debug with the following commands.

yarn dev

If you make a production build

For production build, execute the following command.

yarn build
yarn start

.env file

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"

GraphCMS Schema

With the following schema, you can create a similar portfolio site.

aboutMe

Simple profile items.

field type unique required Title
title Single line text
detail Single line text

badge

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

carreer

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.

qualification

Register qualifications you have.

field type unique required Title
name Single line text
YYMM Date
Badge Reference
  • Badge : Link to badge schema.

skill

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.

skillList

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".

Reference

Author

License

This project is licensed under the MIT License.

See the LICENSE file for details.