DEV Community

Aymane Mimouni
Aymane Mimouni

Posted on

A portfolio for developers with a blog powered by Notion

Image description

Demo: https://aymaneMx.com (my portfolio)
Github: https://github.com/aymaneMx/nuxt-portfolio-dev

Features:

  • 🥰 minimal and clean portfolio
  • 🌗 the dark/light mode (Auto detect the system color-mode)
  • 📱 responsive (tablet & mobile friendly)
  • ⚙️ render articles from Notion 🚀
  • ⭐ fetches your Github pinned projects with most stars
  • 💫 Eslint & Prettier configured
  • 📈 google analytics integration
  • ⚡ generate sitemap (visit /sitemap.xml)
  • 🚀 one-click deployment to netlify

Deploy your own version:

  1. clone the projects from Github, setup Netlify to deploy on each merge to the main branch, I highly recommend this method!

  2. for the lazy people out there, you can use Netlify deploy button

but first, check out the prerequisites.

Prerequisites

  1. create Notion account
  2. duplicate this template by clicking on duplicate button located at the top of the page.
  3. make your notion table public (by clicking on share button located at the top of the page)
  4. grab the table id from the table link: eg:
link: https://aymanemx.notion.site/aymanemx/ceef6f1a895a46b2a0e4a87b41405547?v=8427738adccd4b2a8c28156be3757156
id: ceef6f1a895a46b2a0e4a87b41405547
Enter fullscreen mode Exit fullscreen mode
  1. do the same thing for about page id (we gonna use it as an env variable NOTION_ABOUT_PAGE_ID)
  2. get your Google analytics id (this one is optional)
  3. now you can click to the deploy button and fill the Netlify form

Image description

Credits:

Top comments (1)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Netlify deployments are super simple.