7.6 KiB
👔 Portfolio thingy, built with Gatsby.
Table of Contents
🎉 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
masterinitiates 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