👔 Portfolio thingy, built with Gatsby.

matthiaskretschmann.com

Table of Contents

• 🎉 Features
  • ⛵️ Lighthouse score
  • 💍 One data file to rule all pages
  • 💅 Theme switcher
  • 🏆 SEO component
  • 📇 Client-side vCard creation
  • 💫 Page transitions
  • 📈 Matomo (formerly Piwik) analytics tracking
  • 🖼 Project images
  • 💎 Importing SVG assets
  • 🍬 Typekit component
• ✨ Development
  • 🔮 Linting
  • 🎈 Add a new project
• 🚚 Deployment
• 🏛 Licenses

---

🎉 Features

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

⛵️ Lighthouse score

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

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

💫 Page transitions

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

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

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/molecules/ProjectImage.jsx. In there, 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'

<Logo />

🍬 Typekit component

Includes a component for adding the Typekit snippet.

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

✨ Development

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

git clone git@github.com:kremalicious/portfolio.git
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

🎈 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