Build a portfolio site with Notion and Super in less than 10 min.
How quickly¹ to make a Notion-powered site that doesn’t look like it was made in Notion
Time to update the portfolio
So, a few weeks ago, I returned from vacation to the news that I had been laid off. It’s a bummer, but luckily I have some severance to smooth out the transition. But knowing how long hiring processes usually take, I figured it was time to start updating the old portfolio.
Different iterations of my design portfolio have lived on Squarespace for nearly ten years. While I’ve been meaning to replace it for a while, I was excited about the new design features in the latest version. But when trying to update to the most recent version, I realized it wasn’t as simple as I thought it would be since they don’t have a way to migrate content from the old version to the new one.
Instead, you have to manually copy and paste all your text into a separate document, download each of your images, and rebuild the site 😡 ! If I have to extract my content manually, I might as well find a new home for it now.
Alternatives
I previously wrote about Building an Urban Planning Portfolio with Airtable and Pory, which worked out great for that use case. But for my product design case studies, I wanted more flexibility in the structure and content of each page and the overall design.
I love Notion² for its flexible and powerful documents and databases. It is excellent for managing content and creating different views based on filters and linked blocks. Notion can also publish a shared page from your doc easily, so this could have been the fastest way to create a portfolio to share.
But this isn’t ideal for a portfolio because I think it’s too apparent that it’s just a Notion page. There are a bunch of extra UI elements I don’t want people to see, such as the dead giveaway “Try Notion” badge at the top, no way of having standard navigation, and limited font and color choices. And then there’s the ugly URL.
Enter Super ⚡️
Super solved all of these issues for me. To speed things up, I started with one of the templates and replaced it with my content in Notion. Then you just have to copy and paste the shared URL into Super. This creates a new site with a prettier URL. The visual style can be customized while all content management stays in Notion. This is great because I was going to copy and paste all my content into Notion anyways as a holding area. So this saves me the hassle of copying and pasting it from Notion into another site builder’s interface.
Example setup and walkthrough
Due to NDAs and such, I can’t share my actual portfolio here. So to demonstrate how to set up a site, I’ve created a little demo page that doesn’t use any real project content, so feel free to duplicate it for the tutorial. See the live site here: https://example-portfolio.super.site/
Note: All the sample content was generated via Lexica and Chat GPT, so it looks ok at a glance, but it needs to be replaced with actual content if you want to use it yourself because they don’t make any sense.
Pros & Cons
- The free version includes basic visual customization through the UI, like fonts, colors, and settings. You can use CSS to push the look and feel of different types of Notion blocks further, but applying code (including the ability to use templates) to the live site is a paid feature. I wish it were more straightforward to customize all the different kinds of Notion blocks without having to do any CSS, but more built-in customization is on the roadmap.
- Super creates a static version of your Notion page and saves a cache to a CDN in the background. This makes the site load faster for visitors. But it also means the content updates between Notion and Super are usually pretty quick but not *instant* which is a little bit annoying when you’re making lots of tweaks and want to see them immediately. But usually, it will show up if you refresh the page in the dashboard after about 10 seconds.
- Having pages that can show different filtered views of the same core database is excellent because I can have one central place for all my project archives that I can pull from and selectively show specific projects to certain people. For now, I’m just including a few select case studies, but eventually, I’d like to bring all my disparate content from my various portfolios, blogs, and sites into one place and just have filtered views of it all.
So that’s pretty much it! I hope it helps if you’re looking for a quick and easy way to make a site from Notion that doesn’t look like it was made in Notion. Let me know if you want any help with getting either set up 😄
What’s next?
While I am still passionate about urban planning, I’ve realized my true love is building products. The common elements I’ve enjoyed in my work over the past several years were creating tools and systems that help people streamline their work, clarifying complex requirements, and finding ways of making tedious tasks feel more delightful.
In the future, I’m looking for opportunities to work on productivity tools and systems. I’m especially interested in tools for the built environment, creative collaboration, and no-code development. Feel free to reach out if you want to chat: jaynev@gmail.com
Notes
- Of course, the under 10 min estimate doesn’t include the content creation and gathering step, just the hooking it all up together and styling step.
- For full disclosure, I’m a Notion Partner, so when you sign up with my link, you also help support me and my content!
