Building your portfolio in Notion

Sad that you don’t know about web development? Find it confusing to use Webflow or WordPress to build your website? Still struggling to build your digital portfolio? Then you have landed at the perfect place!! 😉

Rama Krushna Behera
UX Planet
Published in
7 min readDec 22, 2020

--

This article is a step-by-step process to building your portfolio in Notion. There are many possible layouts for your portfolio in Notion. For this article, I made the layout as close as possible to my personal website. Feel free to explore and experiment. Want to discuss or have any queries? Reach out to me at ramakrushna.design@gmail.com

Disclaimer: Since Notion is not a website building platform, there are certain limitations in the website designs that you can make such as limited font choices, default dark mode, custom domains, etc. Some of these limitations can be overcomed by using 3rd party applications. However, with what’s available at hand now, we can make wonders.

Warm Up!! 🥶

Source: notion.so

What is Notion?

Notion is an all-in-one workspace application that provides components such as databases, kanban boards, wikis, calendars, and reminders. Users can connect these components to create their own systems for knowledge management, note-taking, data management, project management, among others. The best part — it’s free to use.

Dissecting a portfolio

You are free to add anything to your personal website but you should have these 4 sections at the minimum in your portfolio — introductory section, about you, your works & case studies, and contact information.

Let’s get started!! 🎉🎉

Portfolio site as of December 2020 (ramakrushna.com)

What you see above is my personal website as of Dec. 2020. As mentioned earlier, we will be creating the Notionfolio(portfolio made in Notion) similar to that of my personal website. The whole process is divided into the following 4 parts for easier understanding:

  1. Home Page
  2. Case Study Page
  3. About Page
  4. Linking the Pages and Getting the URL

What each section talks about is pretty much explanatory from the section name itself. 🙃

I — Home Page

The home page of the website has three sections — The introductory section, the Works section, and the contact section. Before beginning, we need to set up the workspace.

  • Visit notion.so, create your free account, get started with a free personal space, and delete all existing templates
  • Rename your workspace to whatever you like(this step is optional btw!!)
  • Make the page full-width

Your workspace is ready! Let’s start building. 🥳

a. Introductory Section

This section has a brief introduction about you — who you are, what you want to do, and what you do.

  • Begin with changing the page name and adding your photo/emoji
  • Select H2 block and put a one-liner about you
  • Select Text block and write a short description about you. Create a partition and give some spacing.
  • Create a Callout block and share your current job status — working at …., looking for …., etc.

b. Works Section

Well, the section name says it all! This section showcases all of your selected works.

  • Begin by creating a Heading (H1 block) saying “My Works/ My Projects”
  • Create a Gallery-Inline block and name it whatever you like.
  • Add properties in one of the cards (The changes will be reflected in the others as well)
  • Change the gallery properties to the following ⬇⬇
  • Add images and other details to properties of the cards
  • Click on Add and add the number of cards you need

c. Contact Section

This is where people who interested in connecting with you get your contact details. Some of the steps involved in building this section are similar to the ones discussed earlier, feel free to skip them. ⏭

  • Start with creating a Heading (H1 block) saying “Contacts”. Select Text block and write a short description about what you like to discuss and talk about. Create a partition and give some spacing.
  • Select H2 block and put your email-id
  • You can add your social media links by creating Callout blocks, stack the blocks side by side, and add links of your social media handles to the text (Protip: You can use social media icons instead of emojis for a better experience)
  • Link your email-id by selecting your email text, hitting the link button, and typing “mailto:email-id”

Hurray! You just completed your first page. 🥂

II— Case Study Page

This is where you have detailed case studies of your selected works. For this page, you can take either of the two approaches or a combination of both.

a. Approach 1

If you have published your case study on Medium, you might want to redirect the viewers to that page instead of showing the case study in the Notionfolio.

  • To do this, add a new property to the card named “Note”, and put a note to click the medium link to view the case study

OR

b. Approach 2

If you haven’t published your case study on Medium, you can show the case study in the Notionfolio. Use the different blocks that are available to build your case study in Medium.

However, if you want you can combine both of these approaches and showcase your case study.

III — About Page

The about page has information about you. What you want to add and how much detailed you want it to be, totally depends on you.

  • Start by creating a new page, renaming it, and adding your emoji (a short liner too, if you want)
  • Create an Image block and add your photograph
  • Select H1 block and put your full name. Using Text blocks, put information about yourself (Use different text styles and colors that fits you)
  • Copy and Paste the contact details from the Home Page

95+% of your portfolio is ready. Exciting!! ✨✨

IV — Linking the Pages and Getting the URL

What’s a digital portfolio without a URL? — Nothing! In this section, we will connect the different pages and get the final URL of the portfolio site.

  • Hit the Menu in the top Share and Publish to Web on the top right and Allow Share to Web. Disable “Allow Duplicating” if you don’t want others to duplicate your site. Click Copy Link and there you have the link to the About Page.
  • Go to Home Page and Paste the link in the introductory section. Click Link to Page
  • Hit Enter and write Resume in the next line and add the link to your resume to that text.
  • Follow step-1 and you have the link to your portfolio site

— — — — — Congrats!! You made it.🎊🎊

Wrap Up 💝

This was one layout that I made for this article, you can create your own too — all you have to do is explore and experiment. You can supercharge your notionfolio using a third-party application such as super.so and Frutionsite.

Here’s the link to my Notionfolio: https://www.notion.so/Hey-I-m-Rama-Krushna-53ebad1b8bb04bd491108cac9c293be9

That’s a wrap; I hope you found it insightful. If you have any questions, feel free to reach out to me on Linkedin, Twitter, Instagram, or Website.

Found it helpful? Don’t keep this to yourself, share it with people who might find it helpful. You can hold that clap button for a few seconds to give a maximum of 50 Claps.

--

--

⁕ Design Systems & Motion Design @Razorpay ⁕ New Media Art @algorhythm_lab ⁕ Explores & Experiments with stuffs