Behind the scenes of my website

Problem

“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.

Sketches

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.

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

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.

Colors

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.

Typography

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.

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.

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

JSX
1import React from "react"
2import { useTranslation } from "react-i18next"
3
4import { Hero, H1, P, Button, Tile } from "../elements"
5import Typewriter from "./typewriter"
6
7const Landing = () => {
8  const { t } = useTranslation("components/landing")
9
10  return (
11    <Hero>
12      <Tile as="header">
13        <H1 $decorative aria-label={t("aria")}>
14          <Typewriter
15            strings={[
16              t("typewriter.design"),
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  )
30}
31
32export default Landing

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

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.

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

Gatsby

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.

Testing

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.

GitHub

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.

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