Changed fonts

Updated page contents
Improved styles
Changed print width to 90!!!
Updated deps
Added save content reveal e.g. for emails

.prettierrc.json

@@ -4,5 +4,6 @@
   "singleQuote": true,
   "proseWrap": "always",
   "endOfLine": "lf",
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "printWidth": 90
 }

README.md

@@ -3,8 +3,8 @@
   <b>Marvin Heilemann</b>
 </h1>
 
-A beautiful Portfolio page made by me for me based on the awesome static site
-generator [Gatsby](https://www.gatsbyjs.org/).
+A beautiful Portfolio page made by me for me based on the awesome static site generator
+[Gatsby](https://www.gatsbyjs.org/).
 
 - [Development](#development)
 - [Building](#building)
@@ -31,8 +31,7 @@ npm start
 ```
 
 This will create a
-[Gatsby development server](https://www.gatsbyjs.org/docs/gatsby-cli/#develop)
-with
+[Gatsby development server](https://www.gatsbyjs.org/docs/gatsby-cli/#develop) with
 [hot module replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)
 at: `http://localhost:8000`
 
@@ -42,9 +41,8 @@ Depending on what you want to build, there a different processes.
 
 ### NGINX
 
-A production like build
-[NGINX docker container](https://hub.docker.com/_/nginx). This will also be used
-for auditing the website so make sure you have
+A production like build [NGINX docker container](https://hub.docker.com/_/nginx). This
+will also be used for auditing the website so make sure you have
 [docker installed](https://docs.docker.com/install/) on your computer.
 
 ```shell
@@ -59,8 +57,8 @@ The website is now accessible on: `https://marvin.lcl`
 ### Now by Zeit
 
 [Now by Zeit](https://zeit.co/home) provides its own
-[production like server](https://zeit.co/docs/now-cli#commands/dev) to test
-things locally before pushing it in the cloud.
+[production like server](https://zeit.co/docs/now-cli#commands/dev) to test things locally
+before pushing it in the cloud.
 
 ```shell
 npm run serve
@@ -70,21 +68,20 @@ The website is now accessible on: `http://localhost:59235`
 
 ## Auditing
 
-To audit our site and see if it matches accessibility, SEO and performance
-requirements, we use [Axe](https://www.deque.com/axe/) and
-[Lighthouse](https://github.com/GoogleChrome/lighthouse/). Axe is more specific
-than Lighthouse but Lighthouse provides a good overview.
+To audit our site and see if it matches accessibility, SEO and performance requirements,
+we use [Axe](https://www.deque.com/axe/) and
+[Lighthouse](https://github.com/GoogleChrome/lighthouse/). Axe is more specific than
+Lighthouse but Lighthouse provides a good overview.
 
 ```shell
 npm run audit
 ```
 
 ## Linting
 
-For linting I use [Stylelint](https://stylelint.io/),
-[ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) (as the
-formatter). There are also official VS Code plugins for those, please install
-them before contributing. To run the linter, run this:
+For linting I use [Stylelint](https://stylelint.io/), [ESLint](https://eslint.org/) and
+[Prettier](https://prettier.io/) (as the formatter). There are also official VS Code
+plugins for those, please install them before contributing. To run the linter, run this:
 
 ```shell
 npm run lint
@@ -96,13 +93,12 @@ I'm using [Now by Zeit](https://zeit.co/home) to deploy my site.
 
 ### Automatically
 
-Pushing to the development branch will automatically create a new sub-domain and
-a build. So it's easy to view the changes in the production environment before
-pushing it to master.
+Pushing to the development branch will automatically create a new sub-domain and a build.
+So it's easy to view the changes in the production environment before pushing it to
+master.
 
-Pushing to master will create a build and directly upload it to the main domain.
-Please be sure to create one on the development branch first and test/lint the
-code.
+Pushing to master will create a build and directly upload it to the main domain. Please be
+sure to create one on the development branch first and test/lint the code.
 
 ### Manually
 

TODO.md

@@ -22,30 +22,35 @@
     - [x] Test
   - [x] Everything pushed to master -> marvin.digital
   - [x] Everything pushed to development -> dev.marvin.digital
-- [ ] Setup GitHub workflow to deploy with notification and version alias
+- [x] ~~Setup GitHub workflow to deploy with notification and version alias~~
 - [x] replace React with [Preact][1] (check if it works when finished)
 - [x] add version to GraphQL data not as file...
 - [x] remove "build brotli from source" with a already finished build
 - [x] always use latest NGINX image
 - [x] test prod build locally with SSL and brotli compression
 - [x] weird lighter background underneath the footer (backdrop-filter issue)
-- [x] setup siteUrl as env var to pass to build process so lighthouse will get
-      the correct canonical url
+- [x] setup siteUrl as env var to pass to build process so lighthouse will get the correct
+      canonical url
 - [x] remove bundle analyzer from prod builds in NOW
 - [x] setup scss linter
 - [x] setup smacss to apply css sort order
 - [x] fix issue with node env version in prod build
 - [x] use gatsby images everywhere (homepage for file savings)
-- [ ] fix issue with header on prod build
+- [x] weird background colors on imprint bottom section
+- [x] fix issue with header on prod build
 - [ ] MDX pages are not using remark images plugin
-- [ ] add scroll to top
-- [ ] check description, keywords and title on all pages
+- [ ] update mobile navigation
+- [x] add scroll to top
+- [x] check description, keywords and title on all pages
 - [ ] add md table of contents
+- [ ] use [auto-changelog](https://github.com/CookPete/auto-changelog) for the changelog
+      page
+- [ ] image opening on big vertical images is broken, add max height and width + scrolling
+      with mouse move
 - [ ] new image for start: me while coding
 - [ ] new image for start: me while writing
 - [x] put scss theme stuff in own mixin for compat.
-- [x] Add footer with: version, social-media, imprint, changelog, copyright
-      notice
+- [x] Add footer with: version, social-media, imprint, changelog, copyright notice
 - [x] test react helmet async
 - [x] add "increase version" by script
 - [x] add bundle analyzer
@@ -65,7 +70,7 @@
   - https://developer.riotgames.com/apis
 - [x] add classes to tags https://github.com/gatsbyjs/gatsby/issues/17824
 - [ ] use Inter variable Font: https://rsms.me/inter/var-test.html
-- [ ] set font feature settings (numbers, dates, etc.):
+- [x] set font feature settings (numbers, dates, etc.):
   - https://rsms.me/inter/#features
 - [ ] Upload all writings
   - [ ] Grammatical corrections

gatsby-config.js

@@ -243,10 +243,10 @@ module.exports = {
         production: true,
         disable: !isAudit, // only run when doing production builds to perform audits
         openAnalyzer: false,
-        reportFilename: `${__dirname}/reports/v${transformVersion(
-          getVersion(),
-          ['major', 'minor']
-        )}.0/treemap.html`,
+        reportFilename: `${__dirname}/reports/v${transformVersion(getVersion(), [
+          'major',
+          'minor',
+        ])}.0/treemap.html`,
       },
     },
   ],

metadata.js

@@ -23,8 +23,7 @@ module.exports = {
     {
       name: 'Setup',
       // link: '/about/setup', // NOTE: Maybe use Notion API later?
-      link:
-        'https://www.notion.so/marvins/Setup-9ad349afe68942ae807dc31c9afccd7d',
+      link: 'https://www.notion.so/marvins/Setup-9ad349afe68942ae807dc31c9afccd7d',
       external: true,
     },
     {