Behind the scenes of my website
After several months of designing, coding, and writing, I have finally published my website.
UI/UX Design, Frontend Development, Content Creation, DevOps
Me
Design system, Website, Portfolio, Blog, Newsletter
Recursion
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'34import { Hero, H1, P, Button, Tile } from '../elements'5import Typewriter from './typewriter'67const Landing = () => {8 const { t } = useTranslation('components/landing')910 return (11 <Hero>12 <Tile as="header">13 <H1 $decorative aria-label={t('aria')}>14 <Typewriter15 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}3132export 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.
I recently updated my website to a new technological stack with TypeScript and Next.js. I touched every part of my website, so there is much to write about. I'll update this project soon. Stay tuned!