Coding this portfolio

With so many platforms out there, why coding my own portfolio?

First of all, I love a good challenge. Second, I love Notion. So when I realized that having a great-looking Notion portfolio was accomplishable, I dived right into it.

Worst case scenario? It wouldn’t work and I’d just quit the idea.

Never before would I have thought I’d someday have a Github account. But there I was, learning there was something such as forking a repository.

First things first

I did not do it all by myself. I actually came across these instructions and decided to give it a try.

It became clear pretty soon that I’d have to learn many things in order to make this portfolio happen.

Forking the repository was easy enough. Making the first ajustments was no trouble either, but once I reached the “run npm” instruction, no amount of Google research made it clear what I was supposed to do, so I asked for the help of a developer friend.

It turns out it is not that hard. Install git, clone to repository to a local folder, install npm, and run npm dev to see the changes your making in the code.

Not hard, but it was all completely new for me.

Once that was done, it was time to get my hands into that CSS.

Editing CSS was no easy task

Part of the code was done. I was supposed to make just the necessary adjustments so the website could look a little bit more like myself.

That turned out being a huge task. My biggest challenges were:

figuring out how to make a top navigation using Notion page-links

.notion-block-1d5135377202482baa394b77811dac05 .notion-page-icon {
  display: none;
}

.index-page .notion-block-1d5135377202482baa394b77811dac05 {
  position: fixed;
  margin: -325px 315px;
  font-size: 14px;
  z-index: 9999;
}

@media only screen and (max-width: 900px) {
.index-page .notion-block-1d5135377202482baa394b77811dac05 {
    position: fixed;
    margin: -325px 305px;
    z-index: 9999;
    background: none;
    backdrop-filter: none;
    padding: 0 12px;
  }
}

@media only screen and (max-width: 640px) {
.index-page .notion-block-1d5135377202482baa394b77811dac05 {
    display: none;
  }
}

figuring out how to make the gallery items look and behave how I wanted them to

.notion-gallery-grid {
  border-top: 0px solid var(--bg-color-1);
  padding-top: 1em;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 3vmin;
  gap: 5vmin;
}

.notion-gallery-grid .notion-page-icon {
  display: none;
}

.notion-gallery-grid .notion-page-title-text {
  font-size: 2em;
  font-weight: 400;
  white-space: unset;
}

.notion-gallery-grid .notion-collection-card-property {
  white-space: unset;
  text-overflow: unset;
}

.notion-gallery-grid .notion-property-text {
  font-size: 16px;
}

@media only screen and (max-width: 920px) {
  .notion-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}

@media only screen and (max-width: 400px) {
  .notion-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10vmin;
    gap: 10vmin;
  }
}

.notion-gallery .notion-page-link:hover {
  background: none !important;
  color: var(--fg-color);
}

having only the page title and subtitle show up above the fold on the index page

.index-page h1.notion-title {
  display: block;
  margin: 4em 0 0 !important;
}

Planning a responsive website

Notion itself solves most of the problems I’d face regarding responsiveness.

One of the biggest issues I had was with the top navigation. I don’t have the skills or even know if it’d be possible to come up with a hamburger menu on a Notion-based website.

The solution? Setting where each link would be (x and y margins) on all 3 versions.

For screens smaller than 640px, I decided to hide the links altogether. This made it for no essential information to be available only on those pages, otherwise people accessing the website on mobile phones would be left without it.

The impact of having both light and dark modes

Accent colors must work well with light/dark modes

Icons must be visible in light/dark modes

Any hover effect must look good on light/dark modes

Takeaways

I know I am not an engineer and that my code is far from perfect, but having built this portfolio gave me a great sense of accomplishment.

I learned so much during this process and I am always thinking of ways to improve the site.

I am now eager to find other websites to build.