Collage of mockups with my website

Behind the scenes of my website

After several months of designing, coding, and writing, I've finally published my website.




UI/UX Design, Frontend Development, Content Creation, DevOps


Design system, Website, Portfolio, Blog, Newsletter


“The shoemaker’s son always goes barefoot.” Or maybe “the web developer is offline.” Even though I started learning frontend development a while ago, I’ve never coded a website for myself. I’ve been feeling impostor syndrome and thought, I’m not good enough. But, this way, I could delay it ad infinitum. I’ve decided to change that. I’ve wanted my corner on the Internet - where I can express myself and share my findings.


It’s easier to start with pen and paper.

Keeping that in mind, I’ve started generating ideas. I’ve made rough sketches of all pages.

Different section sketches of my website

It’s not Da Vinci-level sketching skills, but they were handy before making wireframes.


Wireframes should be a middle ground between sketches and higher-fidelity designs and prototypes. Not worrying too much about fonts and colors, I’ve made a lot of wireframes.

Wireframes of the landing section

Wireframes of the porfolio page

Wireframes of about page

Wireframes of the blog page


I’ve spent more time searching for colors than I would like to admit. But, after many hours of experimenting (and accessibility testing), I’ve agreed with myself. The color palette should be minimalistic and simple. It should consist of grays and whites. And, of course, with a blue accent. There is not much thought behind it - I just like blue.

Color palettes of my website


I wanted this site to be typography-oriented, so I spent another chunk of time looking for typefaces. My goal was to contrast modern sans-serif font with a more classic serif. I also needed a font for code snippets.

Montserrat - font for headings

Lora - font for body text

Fira Code - font for code snippets

Design System

Having essentials and some content, I started to create a design system. I wanted it to be flexible, consistent, and easily scalable. I made abstract design primitives (elements) like buttons and headings.

Design primitives - buttons

I used them in many different contexts to build more concrete components like this one - landing section of home page.

1import React from "react"
2import { useTranslation } from "react-i18next"
4import { Hero, H1, P, Button, Tile } from "../elements"
5import Typewriter from "./typewriter"
7const Landing = () => {
8 const { t } = useTranslation("components/landing")
10 return (
11 <Hero>
12 <Tile as="header">
13 <H1 $decorative aria-label={t("aria")}>
14 <Typewriter
15 strings={[
16 t(""),
17 t("typewriter.code"),
18 t("typewriter.write"),
19 t("typewriter.create"),
20 ]}
21 ></Typewriter>
22 </H1>
23 <P $type="lead">{t("description")}</P>
24 <Button as="a" $type="primary" $grow href="#say-hello">
25 {t("cta")}
26 </Button>
27 </Tile>
28 </Hero>
29 )
32export default Landing

With design primitives, components, and sections, I created responsive templates for every page.

Templates of home and portfolio pages

My design is not finished and is more like a process. I constantly develop it. Therefore, you can play “spot the difference” between this showcase and the current version of my website.

Templates of about and blog pages

I found that flexibility is desirable during the whole process. Same as breaks - it gives a new perspective. New ideas were occurring at different stages of the process and unexpected moments. Like the idea for the progress bar - I found it surfing the web. Yes, I stole it, and I’m not ashamed of that!

The only art I’ll ever study is stuff that I can steal from.

David Bowie


To implement my website, I used Static Site Generator - Gatsby. Pages are built and optimized in the generation process, even before the user requests them. Websites created with this approach are usually more efficient than traditional solutions like WordPress.

But if pages are prebuilt, how to know which theme the user chose? Implementing the theme-switching feature was an unexpected challenge for me. But, after reading about Gatsby’s build process and testing, I managed to make it work smoothly.

Switching themes on my website


Besides manual testing, I wrote automated tests. I used Jest for component testing. To test integration between components and more complex user behavior, I used Cypress with cypress-axe. Those tests cover different website aspects - accessibility, internationalization, SEO, and more.


I’ll try to add content and features to my website regularly, so long-term maintenance was the aim from the start. I enabled continuous integration with Github actions to minimize the number of bugs and gain more confidence in my project. Every change in the codebase triggers a series of checks and tests.

Graph of tasks in continuous integration

I use Conventional Commits to format messages and GitHub Flow as a branching strategy.

At the time of writing, I’m using JavaScript in the project. But, I may move to Typescript for additional type checking. I’ll try to keep the description of this project up to date.

Check also

A newsletter that sparks curiosity💡

Subscribe to my newsletter and get a monthly dose of:

  • Front-end, web development, and design news, examples, inspiration
  • Science theories and skepticism
  • My favorite resources, ideas, tools, and other interesting links
I’m not a Nigerian prince to offer you opportunities. I don’t send spam. Unsubscribe anytime.