Update my age component to be more fancy

Also updated About page and credits
As well as some css

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marvin-digital",
-  "version": "3.15.2",
+  "version": "3.15.3",
   "private": true,
   "description": "Portfolio of and by Marvin Heilemann (@muuvmuuv)",
   "repository": "git@github.com:muuvmuuv/portfolio.git",

src/components/MyAge.jsx

@@ -1,26 +1,33 @@
 import React, { useState, useEffect } from 'react'
+import dayjs from 'dayjs'
 
 import { getElapsedTime } from '../utils/helper'
 
 const MyAge = () => {
-  const [state, setState] = useState(null)
+  const dob = dayjs('1996-06-13 18:32:13')
+  const dobI18N = dob.format('LLLL')
+  const dobISO = dob.format('YYYY-MM-DD')
+  const age = getElapsedTime(dobISO).years
 
-  const age = getElapsedTime('1996-06-13').years
+  const getAgeString = () => {
+    const { years, months, days, hours, minutes, seconds } = getElapsedTime(dobISO)
+    return `
+Born at ${dobI18N}; ${years} years, ${months} months, ${days} days,
+${hours} hours, ${minutes} minutes and ${seconds} seconds ago
+    `
+  }
+
+  const [state, setState] = useState(getAgeString())
 
   useEffect(() => {
     const id = setInterval(() => {
-      const { years, months, days, hours, minutes, seconds } = getElapsedTime(
-        '1996-06-13'
-      )
-      const ageString = `${years} years, ${months} months, ${days} days, ${hours} hours, ${minutes} minutes and ${seconds} seconds`
-      setState(ageString)
+      setState(getAgeString())
     }, 1000)
-
     return () => clearInterval(id)
   })
 
   return (
-    <i aria-label={state} data-position="top" className="tooltip">
+    <i aria-label={state} data-position="top" className="tooltip my-age">
       {age} years old
     </i>
   )

src/pages/about.mdx

@@ -3,8 +3,10 @@ title: 'About Me'
 ---
 
 import { Link } from '../elements/Link.jsx'
+import Img from 'gatsby-image'
 import MyAge from '../components/MyAge.jsx'
 import { getElapsedTime } from '../utils/helper'
+
 export const quitedSmoking = getElapsedTime('2017-02-16')
 
 ## Hey!
@@ -17,6 +19,8 @@ export const quitedSmoking = getElapsedTime('2017-02-16')
   </Link>.
 </p>
 
+<img src="/me.gif" className="bd-img me-gif" alt="Me as a GIF" />
+
 ### I am...
 
 very dedicated and determined, but often also lazy (who can blame you). In a team I really

src/pages/credits.mdx

@@ -23,6 +23,8 @@ export const packageJson = () => {
 - [RSMS](https://twitter.com/rsms) for the awesome font [Inter](https://rsms.me/inter/)
 - JetBrains for [JetBrains Mono](https://www.jetbrains.com/lp/mono/)
 - [Deepl](https://www.deepl.com/translator) for their awesome free translater
+- [Microtip](https://github.com/ghosh/microtip/blob/master/microtip.css) for the awesome
+  CSS only tooltip
 
 ## Packages used
 

src/styles/app.scss

@@ -46,6 +46,7 @@
 @import 'components/icon';
 @import 'components/language';
 @import 'components/logo';
+@import 'components/my-age';
 @import 'components/overlay';
 @import 'components/portfolio';
 @import 'components/quote';
@@ -78,6 +79,7 @@
 // ------------------------------
 // Pages
 
+@import 'pages/about';
 @import 'pages/error';
 @import 'pages/home';
 @import 'pages/index';

src/styles/components/_button.scss

@@ -8,3 +8,21 @@ button {
     display: inline-block;
   }
 }
+
+.btn {
+  display: inline-block;
+  position: relative;
+  padding: 10px 18px;
+  transition: color 200ms ease-in-out;
+  color: var(--text-color-normal);
+  font-size: var(--text-sm);
+  font-weight: var(--font-bold);
+  letter-spacing: 2px;
+  text-transform: uppercase;
+
+  @include border-left-right();
+
+  &:hover {
+    color: var(--text-color-richer);
+  }
+}

src/styles/components/_my-age.scss

@@ -0,0 +1,8 @@
+.my-age {
+  &::after {
+    width: 210px;
+    height: auto;
+    text-align: left;
+    white-space: normal !important;
+  }
+}

src/styles/components/_portfolio.scss

@@ -22,16 +22,17 @@
     }
 
     h2 {
-      margin-bottom: var(--spacing-sm);
+      margin-bottom: var(--spacing-md);
       color: var(--text-color-highlight);
       font-family: var(--font-serif);
       font-size: var(--text-xl);
       font-weight: var(--font-bold);
     }
 
     h3 {
-      margin-bottom: var(--spacing-sm);
+      margin-bottom: var(--spacing-lg);
       color: var(--text-color-richer);
+      line-height: 1.4;
     }
   }
 

src/styles/components/_tooltip.scss

@@ -33,6 +33,7 @@ $tooltip-offset: 7px;
     color: var(--color-dark);
     font-family: var(--font-sans);
     font-size: var(--text-xs);
+    font-style: normal;
     white-space: nowrap;
   }