In late 2022, I decided to create a personal portfolio website with a blog section to write topics I’m interested in and to share them with the rest of the world. I chose to build it using React as I was learning the technology and saw it as a chance to further improve my skills.

First draft and feedback

After defining the basic requirements for sections and content I want to have on my website, I began my portfolio website project by focusing on the content, which I deemed the most important aspect.

I’m using Craft as my note-taking and writing tool, so I decided to create the first draft of my portfolio in Craft. I was able to quickly create something looking similar to the real website and share it with other people to collect feedback.

This is how it looked like

All the content was structured similarly to a website, so I had the homepage and additional pages like projects, about me, visual design, etc. I used this draft to collect feedback. First I showed it to some colleagues and friends, then I found out ADP List.

ADP List is a community platform that offers an option to choose from many available mentors and book free sessions with them. In general, people offer portfolio reviews, career advice, and similar. I thought it was a cool opportunity to get in touch with some people who are my potential users - design and hiring managers and experienced designers all over the world.

I scheduled a couple of sessions and I must say it was an amazing experience. I was able to learn a lot and my mentors were amazing. They prepared in advance and took a look at my portfolio so they were able to give amazing feedback on my portfolio.

Design

After I implemented changes and applied some pieces of advice from mentoring sessions I was ready to jump to Figma and start designing my website interface.

Here I had a couple of requirements as well:

• I wanted my website to have light and dark modes - since I'm a big fan of dark mode and I appreciate when products automatically switch theme based on my system preference
• I liked how my draft in Craft looked and the feedback was good as well, so I wanted to make a similar structure
  • The home page should have a little bit of info about me, a picture of myself, projects, and testimonials
  • About me page should have simple text that describes me and what I like to do in both my professional and private life covered with a couple of pictures
  • Visual design archive page should have a gallery to showcase some out-of-the-context visual design work from the past

Defining typography and colors

As a crucial component of my portfolio website would be writing blogs and case studies, I carefully selected a suitable typography. After research, I chose Inter as it is optimized for computer screens and well-suited for user interfaces.

It was a relatively simple website and I decided to go with a couple of colors - one shade of gray would be used for headings, a slightly lighter one for paragraphs and I needed additional color for buttons and links.

I experimented with color combinations to ensure sufficient contrast and finally selected my colors after testing with headings, paragraphs, and links.

Working on layout and blog post structure

As I mentioned above I wanted a simple structure of the pages with content that I already wrote before, so I designed the homepage and tested it in both light and dark themes.

The next step was the blog post page, so I started playing around with the heading and paragraph text sizes, container width, spacing and ended up with the following design.

I’ve decided that I will use a similar structure for case studies except that I had at the beginning of each case study, the hero section with a simple overview, but the rest was pretty much the same as the blog post page, so I’ve reused all styles from there.

Development

Here I again started by putting some requirements on the paper. I needed to decide on technology - if I want to go with some framework, how should I manage content like blog posts and case studies, etc?

I was researching and I found a great example of a blog and the way it’s built. It was the blog of Josh W. Comeau, which is a great tutor and he writes a lot of React tutorials and under-the-hood explanations.

He was using Next.js framework and MDX to write content. He also wrote a great article

So basically, Next.js is React framework and it provides great features in terms of SEO and performance. MDX is markdown with JSX, which enables you to write markdown with the addition of React components. I immediately liked this tech stack and I also got recommendations for Next.js from a couple of my friends working as software developers.

After choosing the tech-stack, I dove into Next.js documentation to grasp its main concepts. Instead of going into details, I'll describe the outcome and how it enabled me to manage my content.

I chose to use markdown for my website because I'm already familiar with it from daily use. MDX made the process even easier by allowing me to write markdown with the addition of React components. Publishing MDX pages is simple and the workflow looks like this:

1. Write a post in any markdown-compatible app (I use Craft).
2. Export the markdown code, move it to the relevant folder in my project, and update image paths.
3. Commit the changes and push to master. Vercel then automatically triggers a build, publishing the post.

What I learned

While building my website, I learned several important lessons, including:

1. Quality takes time: Some features may seem easy to implement, but can actually be difficult and time-consuming to do it properly.
2. Personal projects are great for experimenting: They offer the freedom to explore and try things that wouldn't be possible on a real project.
3. Implementing a theme switcher was challenging: I wanted it to be seamless and remember user preferences, but it took a significant amount of time to make it perfect, which is a great example of a thing that would probably be traded off in a real project, but I was able to take time and solve all the issues.