From 6870faad5dbd90e9bf7798472d142958ab028a10 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 15 Jul 2018 00:26:35 +0200 Subject: [PATCH] readme updates --- README.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 47887a0..b133765 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- +

👔 Portfolio thingy, built with Gatsby. @@ -23,6 +23,7 @@ - [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) @@ -33,9 +34,7 @@ ## Features -The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single Page App built with [Gatsby](https://www.gatsbyjs.org). - -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](https://www.gatsbyjs.org/features/). +The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single Page App built with [Gatsby v2](https://www.gatsbyjs.org). ### One data file to rule all pages @@ -69,8 +68,6 @@ Site sends usage statistics to my own [Matomo](https://matomo.org) installation. 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](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image) plugin, working in tandem with [gatsby-plugin-sharp](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp) and [gatsby-transformer-sharp](https://github.com/gatsbyjs/gatsby/tree/master/packages/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](https://github.com/w3c/IntersectionObserver) to make lazy loading work properly in Safari. @@ -85,6 +82,14 @@ All SVG assets under `src/images/` will be converted to React components before 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 + +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 ```bash