Skip to content
๐Ÿ‘” Portfolio thingy, built with Gatsby
Branch: master
Clone or download
kremalicious Merge pull request #143 from kremalicious/greenkeeper/eslint-config-pโ€ฆ

Update eslint-config-prettier to the latest version ๐Ÿš€
Latest commit ff4fa4c Jun 15, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
content remove wp-icons-template Jun 10, 2019
jest switch to @testing-library/react May 30, 2019
scripts purge Cloudflare cache upon live deployments Mar 30, 2019
src refactor Jun 10, 2019
.dockerignore Docker dev image fixes Jun 9, 2019
.editorconfig stylelint updates May 22, 2018
.eslintrc package updates May 25, 2019
.gitignore cleanup Apr 14, 2019
.prettierignore remove local vcf lib Jun 23, 2018
.stylelintrc Revert "kick out prettier-stylelint" Apr 27, 2019
.travis.yml lighthousebot setup Jun 9, 2019
Dockerfile Docker dev image fixes Jun 9, 2019
LICENSE documentation, switch to Travis May 13, 2018 documentation May 26, 2019
docker-compose.yml bump packages Jun 10, 2019
gatsby-browser.js refactor Apr 28, 2019
gatsby-config.js switch to gatsby-plugin-manifest for web manifest and favicon generation Jun 10, 2019
gatsby-node.js lighthousebot setup Jun 9, 2019
gatsby-ssr.js refactor Apr 28, 2019
jest.config.js more tests Apr 14, 2019
package.json chore(package): update eslint-config-prettier to version 5.0.0 Jun 15, 2019

๐Ÿ‘” Portfolio thingy, built with Gatsby.

๐ŸŽ‰ Features

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

โ›ต๏ธ Lighthouse score

Lighthouse scores

๐Ÿ’ One data file to rule all pages

All content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file into HTML on build time.

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

๐Ÿฑ GitHub repositories

The open source section at the bottom of the front page shows selected GitHub repositories, sourced from GitHub.

On build time, all my public repositories are fetched from GitHub, then filtered against the ones defined in content/repos.yml, sorted by the last push date, and provided via the page context of the front page.

If you want to know how, have a look at the respective components:

๐Ÿ’… 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 user's local sunset and sunrise times. Uses Cloudflare's geo location HTTP header functionality.

If a visitor has set the theme manually that selection is remembered in localStorage, and is restored on next visit.

If you want to know how, have a look at the respective components:

๐Ÿ† 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:

๐Ÿ“‡ 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 content/meta.yml.

If you want to know how, have a look at the respective component:

๐Ÿ’ซ Page transitions

Includes mechanism for transitioning between route changes with full page transitions defined with react-pose. Mechanism stolen inspired by gatsby-universal.

If you want to know how, have a look at the respective components:

๐Ÿ“ˆ 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 content/images and are automatically attached to each project based on the inclusion of the project's slug in their filenames.

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 where one main GraphQL query fragment is defined, which then gets used throughout other GraphQL queries.

๐Ÿ’Ž Importing SVG assets

All SVG assets under src/images/ will be converted to React components with the help of gatsby-plugin-svgr. Makes use of SVGR so SVG assets can be imported like so:

import { ReactComponent as Logo } from './components/svg/Logo'

return <Logo />

๐Ÿฌ Typekit component

Includes a component for adding the Typekit snippet.

If you want to know how, have a look at the respective component:

โœจ Development

You can simply use Docker & Docker Compose or install and run dependencies on your local system.

git clone
cd portfolio/

# use Docker
docker-compose up

# or go with local system
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

๐Ÿ‘ฉโ€๐Ÿ”ฌ Testing

Test suite is setup with Jest and react-testing-library.

To run all tests, including all linting tests:

npm test

All test files live beside the respective component. Testing setup, fixtures, and mocks can be found in ./jest.config.js and ./jest folder.

๐ŸŽˆ 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 content/projects.yml.

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


๐Ÿšš 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/ script, syncing the contents of the public/ folder to S3:

npm run deploy

Upon live deployment, deploy script also purges the Cloudflare cache, and pings search engines. Travis requires the following environment variables to be setup for successful deployments:


๐Ÿ› Licenses

ยฉ Copyright 2018 Matthias Kretschmann

All images and projects are plain ol' copyright, most displayed projects are subject to the copyright of their respective owners.

Don't care if you fork & play with it, but you're not allowed to publish anything from it as a whole without my written permission. Also please be aware, the combination of typography, colors & layout makes up my brand identity. So please don't just clone everything, but rather do a remix!

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

The MIT License

Full MIT license text

You canโ€™t perform that action at this time.