DEV Community

Aymane Mimouni
Aymane Mimouni

Posted on

A portfolio for developers with a blog powered by Notion

Image description

Demo: (my portfolio)


  • ๐Ÿฅฐ 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.


  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:
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


Top comments (1)

andrewbaisden profile image
Andrew Baisden

Netlify deployments are super simple.