DEV Community

Cover image for I made a notion themed portfolio ๐Ÿ˜
Paul
Paul

Posted on

4 2 1 1

I made a notion themed portfolio ๐Ÿ˜

I created this simple notion portfolio page template using basic html, css, and JS, and you can extend this as well

Features

  • Search
  • Easily add your own content using json and markdown
  • Tailwind css, for rapid development.

Live site

You can view the live site here: Notion portfolio landing page

Screenshot

Notion themed portfolio

How to use

  1. download the portfolio from: https://awesome-landingpages.vercel.app/?search=notion
  • inside data.json make the following changes
{
    "name": "Paul's portfolio",
    "icon": "./assets/images/home/paul.png",

    "pages": [
        {
            "icon": "./assets/images/home/paul.png", // icon can be image, a bootstrap icon class or an emoji
            "name": "About", // name of the page
            "link": "/about", // should be unique
            "content": "content/about.md" // this has to be a path to your md or your html content
        },
        {
            "icon": "๐Ÿ“–",
            "name": "Blogs",
            "link": "/blogs",
            "content": "content/blog.html"
        },
        {
            "icon": "bi bi-suitcase-lg-fill",
            "name": "Work Experience",
            "link": "/experience",
            "content": "content/projects.html"
        },
    ]

}
Enter fullscreen mode Exit fullscreen mode

That's it, you have your own notion themed portfolio

Follow

twitter
github

Source code:

Source code for Traveler App landing page Github

Top comments (0)

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!