If you’re a designer or a developer, chances are you have your own personal portfolio. You need to showcase your work for potential clients or job interviews.
However, you probably already have a job, client or something keeping you busy in your free time (maybe a child or, you know, a life).
Therefore, adding another development project to your agenda with your own custom-built portfolio is not optimal as it requires a lot of work to make it work properly and is a time-sink when it comes to updating it.
I had originally developed my portfolio using a combination of Angular and Netlify’s continuous deployment from GitHub. In fact, I actually wrote a story about that too. While this was a nice environment to work from (I am a huge fan of how easy Netlify is to use and deploy instant changes), I still had to make a tonne of changes quite regularly to my codebase when I wanted to update something. Not to mention, my day job involves a lot of Angular development, so the last thing I want to do after that is to develop more things in Angular!
For these reasons, I decided to check whether I could use Notion for my portfolio.
I use Notion pretty regularly for both work and general life organisation, so it felt like it would be a natural fit for my workflow to have my detailed work experience stored there too.
You can, of course, just click ‘Share to the web’ in the top right corner and copy the URL and send it wherever you want. That’s very easy to do in Notion, and if you’re happy with that then feel free to stop reading here!
However, I wanted my portfolio to still reflect who I am a bit more. I already had a custom domain from my original portfolio which I wanted to keep, and I wanted the experience to feel slightly different to just looking at a run-of-the-mill Notion page.
Super seemed like the easier choice as it appears to be an all-in-one, seamless tool. It has some nice performance optimisations and integration options. However, it does require a monthly fee which I wasn’t interested in paying right now — so I opted for Fruition.
Fruition is more complex to initially set up, but it is completely free and has a really nice step-by-step walkthrough (as well as a handy YouTube video) to guide you along your journey.
Because their guide is so comprehensive and easy to follow, it would be a waste of time for me to sit here and repeat it in my own words, so if you’d like to also use Fruition, read their guide.
Instead, I will actually talk about some of the difficulties I ran into while integrating Notion, Fruition and Cloudflare (required for the Fruition setup — but still free).
Getting the domain to work properly
Fruition’s guide helps you get most of the way with setting up your own custom domain for Notion, however, I did run into a problem right at the end.
I kept getting this error when trying to load my website:
Mismatch between origin and baseUrl (dev).
After some Googling around the issue and few Stack Overflow pages later, I found that I had to use ‘www.michaeljfordham.com’ on line 4 of my custom Cloudflare Worker script (you’ll know what this is when you go through the Fruition steps) rather than ‘michaeljfordham.com’ as suggested. I also had to update my A record in the DNS settings of Cloudflare, so that the name was ‘www.michaeljfordham.com’ rather than ‘michaeljfordham.com’, as well as ensuring the content for that record was ‘220.127.116.11’.
After I made those changes, Cloudflare was successfully using my custom domain on my Notion portfolio.
Accessibility (and therefore styling) issues
I am an advocate for the accessible web, as you would have seen in any of my previous articles or work.
Annoyingly, the way Notion currently renders webpages is actually quite basic — essentially everything is a div.
It seems strange for a tool which lets you directly select which type of element you want to build a block with (e.g. h1, h2 etc.) would not use semantic elements when loading the page on the web.
There are also some issues with certain roles being incorrectly rendered on the page (e.g. emojis have the role of ‘image’ rather than ‘img’).
I reached out to Notion’s development team, who told me:
[We] flagged this issue with emojis to our engineering team! We are actively trying to make these use cases better…
So, hopefully, we will see these issues resolved in an update soon.
The knock-on effect of this type of rendering means you are somewhat limited to customising the styling of your Notion page. Fruition’s Cloudflare Worker script shows you how you can use your own typeface from Google Fonts, but other than that there isn’t much you can change due to it impacting all elements.
For example, I tried to update the line-height of some text as it was a little bit difficult to read in large paragraphs, but due to everything being impacted by the rule, bullet points and emojis were flying everywhere!
Of course, one benefit of Notion is that you can make some pretty cool-looking pages from their blocks already — The Notion Bar by Frances Odera Matthews is a great source of inspiration for this.
So finally, here’s the end product: my new portfolio which is based on Notion.
It’s not completely finished (is a portfolio ever done?), and there are some things I will tweak, but in all honesty, it will change a normal update of a few hours down to minutes.