+ 
-
+
👔 Portfolio thingy, built with Gatsby. @@ -16,61 +16,61 @@ ## Table of Contents -- [Features](#features) - - [Lighthouse score](#lighthouse-score) - - [One data file to rule all pages](#one-data-file-to-rule-all-pages) - - [Theme switcher](#theme-switcher) - - [SEO component](#seo-component) - - [Client-side vCard creation](#client-side-vcard-creation) - - [Matomo (formerly Piwik) analytics tracking](#matomo-formerly-piwik-analytics-tracking) - - [Project images](#project-images) - - [Importing SVG assets](#importing-svg-assets) - - [Typekit component](#typekit-component) -- [Development](#development) - - [Linting](#linting) - - [Add a new project](#add-a-new-project) -- [Deployment](#deployment) -- [Licenses](#licenses) +- [🎉 Features](#features) + - [⛵️ Lighthouse score](#lighthouse-score) + - [💍 One data file to rule all pages](#one-data-file-to-rule-all-pages) + - [💅 Theme switcher](#theme-switcher) + - [🏆 SEO component](#seo-component) + - [📇 Client-side vCard creation](#client-side-vcard-creation) + - [📈 Matomo (formerly Piwik) analytics tracking](#matomo-formerly-piwik-analytics-tracking) + - [🖼 Project images](#project-images) + - [💎 Importing SVG assets](#importing-svg-assets) + - [🍬 Typekit component](#typekit-component) +- [✨ Development](#development) + - [🔮 Linting](#linting) + - [🎈 Add a new project](#add-a-new-project) +- [🚚 Deployment](#deployment) +- [🏛 Licenses](#licenses) --- -## Features +## 🎉 Features The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single Page App built with [Gatsby v2](https://www.gatsbyjs.org). -### Lighthouse score +### ⛵️ Lighthouse score [](https://travis-ci.com/kremalicious/portfolio) -### One data file to rule all pages +### 💍 One data file to rule all pages All content is powered by one YAML file, [`data/projects.yml`](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`](src/templates/Project.jsx) template. -### Theme switcher +### 💅 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`](src/components/molecules/ThemeSwitch.jsx) -### SEO component +### 🏆 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`](src/components/atoms/SEO.jsx) -### Client-side vCard creation +### 📇 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`](src/components/atoms/Vcard.jsx) -### Matomo (formerly Piwik) analytics tracking +### 📈 Matomo (formerly Piwik) analytics tracking Site sends usage statistics to my own [Matomo](https://matomo.org) installation. To make this work in Gatsby, I created and open sourced a plugin, [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo), which is in use on this site. -### Project images +### 🖼 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. @@ -80,7 +80,7 @@ All together, Gatsby automatically generates all required image sizes for delive All project images use one single component defined in [`src/components/atoms/ProjectImage.jsx`](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 +### 💎 Importing SVG assets All SVG assets under `src/images/` will be converted to React components before every build. Makes use of `SVGR` so SVG assets can be imported like so: @@ -90,13 +90,13 @@ import Logo from './components/svg/Logo' That's done with a simple bash script under [`src/scripts/svg.sh`](src/scripts/svg.sh) -### Typekit component +### 🍬 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`](src/components/atoms/Typekit.jsx) -## Development +## ✨ Development ```bash git clone git@github.com:kremalicious/portfolio.git @@ -106,7 +106,7 @@ npm i npm start ``` -### Linting +### 🔮 Linting ESlint, Prettier, and Stylelint are setup for all linting purposes: @@ -121,7 +121,7 @@ npm run format npm run format:css ``` -### Add a new project +### 🎈 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: @@ -140,7 +140,7 @@ portfolio-SLUG-03.png ... ``` -## Deployment +## 🚚 Deployment Automatic deployments are triggered upon successful tests & builds on Travis: @@ -155,7 +155,7 @@ 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 +## 🏛 Licenses All images and projects are plain ol' copyright: diff --git a/src/images/github-header.png b/src/images/github-header.png new file mode 100644 index 0000000..98a9a46 Binary files /dev/null and b/src/images/github-header.png differ