How I Built My Notion-Based Portfolio Site

nextjs

I built this site using Next.js and Notion to showcase the projects I;ve been working on, my blog posts and to bookmark links to information I find useful.

Technologies Used:

• Frontend: React.js with Next.js framework.
• CMS: Notion
• Styling: CSS modules
• Deployment: Vercel

Some Key Features

The site has various sections:

Notion-Based Blog:

The blog section is integrated with Notion, and uses the Notion API to fetch and display your blog posts directly from my Notion workspace

With this approach, I can write, edit, and publish blog posts within Notion and have them automatically reflected on the website.

Because I use it daily, storing my posts on Notion made publishing easier. At first, I used the local file system as my CMS but writing Markdown in VScode, and redeploying the site to GitHub every time I wanted to publish became strenuous. With NextJS, I can automatically rebuild my site every 10 minutes using ISR.

Bookmarks (Reading Lists)

Whenever I find some cool articles, resources, or just random stuff I wanna share, I add them to my reading list database on Notion which is displayed on this site.

Project Showcase

The projects section provides a comprehensive display of some of the projects and tools I've built in the past. Each project has a brief description, its key features, and the technology used