matthiaskretschmann.com

👔 Portfolio thingy, built with Gatsby.

Table of Contents

• Features
  • One data file to rule all pages
  • Theme switcher
  • SEO component
  • Client-side vCard creation
  • Matomo (formerly Piwik) analytics tracking
  • Project images
  • Importing SVG assets
• Development
  • Linting
  • Add a new project
• Deployment
• Licenses

---

Features

The whole portfolio is a React-based Single Page App built with Gatsby.

Despite being built with React, and despite all the project images making it a very image-heavy portfolio, Gatsby makes the final site super fast. So fast, it's almost unreal and feels like magic. And makes it work without JavaScript by server-side rendering all routes. And so much more.

One data file to rule all pages

All content is powered by one YAML file, data/projects.yml where all the portfolio's projects are defined. The project description itself is transformed from Markdown.

Gatsby automatically creates pages from each item in that file utilizing the src/templates/Project.jsx template.

Theme switcher

Includes a theme switcher which allows user to toggle between a light and a dark theme. Switching between them also happens automatically based on time of day.

If you want to know how, have a look at the respective component under src/components/molecules/ThemeSwitch.jsx

SEO component

Includes a SEO component which automatically switches all required meta tags for search engines, Twitter Cards, and Facebook OpenGraph tags based on the browsed route/page.

If you want to know how, have a look at the respective component under src/components/atoms/SEO.jsx

Client-side vCard creation

The Add to addressbook link in the footer automatically creates a downloadable vCard file on the client-side, based on data defined in data/meta.yml.

If you want to know how, have a look at the respective component under src/components/atoms/Vcard.jsx

Matomo (formerly Piwik) analytics tracking

Site sends usage statistics to my own Matomo installation. To make this work in Gatsby, I created and open sourced a plugin, gatsby-plugin-matomo, which is in use on this site.

Project images

All project images live under src/images and are automatically attached to each project based on the inclusion of the project's slug in their filenames.

(TODO: automatically add the inital image to each project node, so it doesn't have to be defined in the projects.yml file.)

All project images make use of the excellent gatsby-image plugin, working in tandem with gatsby-plugin-sharp and gatsby-transformer-sharp.

All together, Gatsby automatically generates all required image sizes for delivering responsible, responsive images to visitors, including lazy loading of all images. Also includes the intersection-observer polyfill to make lazy loading work properly in Safari.

All project images use one single component defined in src/components/atoms/ProjectImage.jsx. In there, one main GraphQL query fragment is defined, which then gets used throughout other GraphQL queries.

Importing SVG assets

Makes use of gatsby-plugin-svgr so SVG assets can be imported like so:

import { ReactComponent as Logo } from '../images/logo.svg'

Development

git clone git@github.com:kremalicious/portfolio.git
cd portfolio/

npm i
npm start

Linting

ESlint, Prettier, and Stylelint are setup for all linting purposes:

npm run lint

To automatically format all code files:

npm run format
npm run format:css

Add a new project

To add a new project, run the following command. This adds a new item to the top of the projects.yml file, creating the title & slug from the argument:

npm run new -- "Hello"

Then continue modifying the new entry in data/projects.yml.

Finally, add as many images as needed with the file name format and put into src/images/:

portfolio-SLUG-01.png
portfolio-SLUG-02.png
portfolio-SLUG-03.png
...

Deployment

Automatic deployments are triggered upon successful tests & builds on Travis:

• push to master initiates a live deployment
• any Pull Request, and subsequent pushes to it, initiates a beta deployment

The deploy command simply calls the scripts/deploy.sh script, syncing the contents of the public/ folder to S3:

npm run deploy

The deploymeng script can be used locally too, the branch checks are only happening for Travis builds, allowing to deploy any branch from local machine.

Licenses

All images and projects are plain ol' copyright:

© Copyright 2018 Matthias Kretschmann

Most displayed projects are subject to the copyright of their respective owners.

All the rest, like all code and documentation, is under:

The MIT License

Full MIT license text