Javascript is required
6 min read

The Engineering Behind My Portfolio Website

The Engineering Behind My Portfolio Website Image

I created my first personal website in 2017 when I launched my first smartphone game. I use Google Analytics in this game, and it is, therefore necessary to provide a link to a privacy policy website from inside the game. I used WordPress and a free theme as I had nearly no frontend knowledge at that time:

First website iterationSee the first version in the web archive

End of 2017 I then released a new version based on the open-source static site generator Hugo using the HTML5 Up Prologue theme. The idea was to have a unique design and better control over the layout:

Second website iterationSee the second version in the web archive

As I specialized more as a frontend developer I wanted to create my own portfolio website with its own styling. The inspiration came from Ali Spittel's blog post "Building a Kickass Portfolio".

Some of the main reasons which encouraged me to do the refactoring:

  • Show my creativity and make a website that is a true expression of myself
  • Design as much as possible myself without using pre-designed templates
  • Make the site as fast and accessible as possible
  • Provide a foundation to make the website easily extendable and adjustable
  • Make the website fully responsive

The result can be seen at

Final website

The basic implementation took about 40 hours of work. I did not draft my sites before moving to code but just started coding and experimented with different designs.

Website Generator

I decided to use Gatsby.js due to several reasons:

  • I love using React and its rich ecosystem of libraries, components, etc.
  • It uses GraphQL, which I wanted to gain some more practical experience with.
  • Very good documentation, plugins & starters.
  • Can be easily combined with several APIs, CMS, and more.

The following graphic from the official website showcases how Gatsby works:

How Gatsby.js works

As a starter, I used the fantastic Gatsby Starter Kit, which provided an ideal bare-bone application for my website.


I use Netlify to host my website, an all-in-one platform for automating modern web projects.

It can be used for free if you have a public GitHub project. I decided to provide my website code open-source on GitHub as I wanted to demonstrate my skills to everybody interested in it.

Styled Components

I like the idea of Styled Components and how it nicely integrates into a React component.

Styled Components utilizes tagged template literals to style your components. It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component that has your styles attached to it.

Take a look at the following component of my website:

1import React from 'react'
2import PropTypes from 'prop-types'
3import styled from 'styled-components'
5const StyledArticle = styled.article`
6  max-width: 600px;
7  margin: 0 auto 30px;
9  background: white;
10  border-radius: 10px;
11  padding: 2rem;
12  min-width: ${(props) => (props.narrow ? '50%' : '100%')};
15const Article = ({ children }) => <StyledArticle>{children}</StyledArticle>
17Article.propTypes = {
18  children: PropTypes.node.isRequired,
21export default Article

In this example I use the <article> HTML tag but use it as StyledArticle which attaches my CSS styles. It is even possible to apply styles based on props which are passed to the component as you can see in this line:

min-width: ${props => (props.narrow ? '50%' : '100%')};

Responsive Images

Delivering images in the optimal size for the correct devices is crucial for a good website. It ensures that your site loads quickly and does not slow down when you use many pictures on the website.

The "gatsby-image" plugin is a fantastic solution for this requirement. It automatically resizes your images so your site won't load huge images on a mobile device. Additionally, it lazy loads the images and provides a nice blur effect while the images are loaded:

Gatsby Image Blur Effect


I wanted a typography design and used Typography.js, which is also recommended by the Gatsby documentation.

My configuration file looks this way:

1import Typography from 'typography'
2import CodePlugin from 'typography-plugin-code'
3import theme from 'typography-theme-alton'
5theme.overrideThemeStyles = ({ rhythm }, options) => ({
6  a: {
7    color: '#FC1A20',
8    textDecoration: 'none',
9  },
11  'a:hover': {
12    color: '#FC1A20',
13    textDecoration: 'underline',
14  },
16  html: {
17    boxSizing: 'border-box',
18    background: '#424242',
19  },
22theme.plugins = [new CodePlugin()]
24const typography = new Typography(theme)
26export default typography

In the next image, you can see the difference between my landing page with (upper image) and without (lower image) Typography.js:

Typography comparison


I enjoy writing articles in Markdown and wanted to use Markdown files as a source for my blog.

The Gatsby Starter Kit already includes some excellent features for this requirement:

  • Posts pages are automatically created from markdown files
  • Categories are automatically created for blog posts
  • Web pages are automatically created from markdown pages files

The relevant folder structure in the code looks this way:

2  └── src
3      ├── content
4      │   ├── posts
5      │   │   ├── 2018-05-11___my-first-vs-code-extension
6      │   │   |   ├── jasmine-test-selector.png
7      │   │   │   └──
8      │   │   ├── 2018-05-12___my-first-npm-package
9      │   │   |   ├── github-traffic-cli.png
10      │   │   │   └──
11      |   |
12      |   |   ...

Using my Gatsby configuration, it automatically creates a blog post page for each of the folders, e.g

Continuous Integration

I use Travis CI to deploy & test my website each time I push to my git master branch.

Here is an excerpt of my .travis.yml file:

2  - npm run lint
3  - npm run test:e2e:ci
4  - npm run build
7  provider: script
8  script: "curl -X POST -d ''"
9  skip_cleanup: true
10  on:
11    branch: master

So on each push to master, it runs the TS linter, E2E test and builds the application. If all scripts succeed, a deployment on Netlify is triggered via webhook.

I therefore disabled auto-publishing in Netlify, which usually triggers a deployment each time a git push was detected on the configured branch.

In my case, I want to trigger a deployment if the tests and the build were successful.

Netlify Dashboard

Netlify also automatically builds a preview with a unique URL. Previews are perfect for testing and collaboration as a staging environment for every PR or branch. So I can even preview my new build before I manually deploy it.

E2E Tests

For my E2E tests, I use as I heard a lot of good stuff about it.

I created a set of tests that test the most critical function of my application.

For example, the E2E test of my home page:

1import config from '../../src/content/meta/config'
3describe('Home Page Test', () => {
4  beforeEach(() => {