One Page Portfolio using NextJS, chakra-ui, and TypeScript
Based from this Next.js starter template using chakra-ui as the component library within a Next.js app with TypeScript.
The app uses 🔗getStaticProps
to pull data from three different services and populate an index of displayable information:
- Pinned repositories from your Github Profile using Github's graphQL API
- A Notion page for Profile and Notion table of Projects, using Notion's API.
- Any tech blog posts posted from a Dev.to profile, using the DEV API.
Clone this repository:
git clone git@github.com:sebastosh/portfolio.git
cd into directory and install node modules:
cd portfolio
yarn install
Define the following .env.local
variables:
DEV_TOKEN=<dev-token>
GITHUB_ACCESS_TOKEN=<github-accesstoken>
NOTION_TOKEN=<notion-api-accesstoken>
NOTION_PAGE_ID=<notion-profile-page-id>
NOTION_PROJECTS_ID=<notion-projects-table-id>
Start up your local dev server:
yarn dev