https://github.com/sagargajare/notion-portfolio
Create your personalized portfolio website using Notion and deploy it with Next.js on Vercel. Showcase your work, projects, and achievements with ease.
https://github.com/sagargajare/notion-portfolio
nextjs notion open-source personal-website portfolio reactjs template website
Last synced: 13 days ago
JSON representation
Create your personalized portfolio website using Notion and deploy it with Next.js on Vercel. Showcase your work, projects, and achievements with ease.
- Host: GitHub
- URL: https://github.com/sagargajare/notion-portfolio
- Owner: Sagargajare
- Created: 2022-10-19T12:24:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-02T02:04:56.000Z (over 1 year ago)
- Last Synced: 2025-03-27T14:55:21.827Z (about 1 month ago)
- Topics: nextjs, notion, open-source, personal-website, portfolio, reactjs, template, website
- Language: CSS
- Homepage: http://sagargajare.in/
- Size: 476 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notion Portfolio
### Get your own portfolio using this template
1. Duplicate the Notion Template:
Start by duplicating the Notion template provided here. This template is where you will organize and design the content for your portfolio.
2. Deploy to Vercel:
Deploy your Notion portfolio to Vercel with a single click using the button below:
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FSagargajare%2Fnotion-portfolio&env=NOTION_PAGE_ID&envDescription=Provide%20Notion%20public%20page%20id&project-name=notionized-portfolio&repository-name=notionized-portfolio&demo-title=Notionized%20Portfolio%20by%20Saga&demo-description=Notionized%20portfolio%20built%20using%20Nextjs%20and%20Notion&demo-url=http%3A%2F%2Fsagargajare.in%2F)
This will take you to Vercel's interface, where you can customize your deployment settings, including your project name and environment variables. You'll need to provide your Notion public page ID as an environment variable for your portfolio to be linked to your Notion template.
3. Leave a Star:
If you find this project helpful and appreciate the effort put into creating it, please consider leaving a star on the [GitHub repository](https://github.com/Sagargajare/notion-portfolio). Your support and feedback are valuable in improving this template for others.
## Local Setup
This guide will walk you through the process of setting up a Notion Portfolio project locally. Follow these steps to get your development environment up and running.
## Clone the Repository
Start by cloning the project repository from GitHub. Open your terminal and run the following command:
```shell
git clone https://github.com/Sagargajare/notion-portfolio
```
This will create a local copy of the project on your machine.
## Install Dependencies
Change your current directory to the project folder:
```shell
cd notion-portfolio
```
Then, use `yarn` to install the project dependencies:
```shell
yarn install
```
This command will download and install all the required packages and dependencies.
## Configure Environment Variables
In the root directory of the project, you'll find a `.env.example` file. Duplicate this file and rename it to `.env`. Open the newly created `.env` file in a text editor.
### Obtain Notion Page ID
To configure the Notion integration, you need to obtain your Notion Page ID. Here's how to do it:
1. Duplicate the Notion template from the following URL to your Notion workspace:
[Notion Template](https://saga-web3.notion.site/gm-b29098a2e49048e781ae0b2f3c92bb75)
2. Publish the Notion page by clicking "Share" in the top right corner of your Notion page. Make sure it's publicly accessible.
3. After publishing, you will have a public URL like `https://www.notion.so/Your-Page-Title-1234567890abcdef`. The string of numbers and letters at the end is your Notion Page ID.
### Update Environment Variable
In your `.env` file, add the following line and replace `YOUR_NOTION_PAGE_ID` with the Notion Page ID obtained from the previous step:
```shell
NOTION_PAGE_ID=YOUR_NOTION_PAGE_ID
```
Save the `.env` file.
## Run the Development Server
With all the configurations in place, you can now start the development server:
```shell
yarn run dev
```
This command will build and run the project locally. You can access the development version of your Next.js application by opening your web browser and navigating to [http://localhost:3000](http://localhost:3000).
You are now set up and ready to start working on your Portfolio project! Enjoy your development journey.
# Connect
Feel free to connect with me on the following platforms:
[](https://twitter.com/SagarGajare20)
[](https://www.linkedin.com/in/sagar-gajare/)
I look forward to connecting with you!