Revert "feat: reduce number of font sizes used"

This reverts commit 965e6dfb26. Using variable fonts means modern browsers don't need to load different the font sizes anymore.
feat: use variable font if available
27 changed files with 250 additions and 128 deletions
--- a/.gitignore
+++ b/.gitignore
@ -7,6 +7,7 @@

 # testing
 /coverage
+/stats.html

 # production
 /build
--- a/package.json
+++ b/package.json
@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"start": "vite --host",
-		"build": "pnpm blog && tsc && vite build",
+		"build": "tsc && vite build",
 		"serve": "vite preview",
 		"blog": "node scripts/blog.js"
 	},
@ -17,7 +17,6 @@
 	"dependencies": {
 		"@emotion/css": "^11.11.2",
 		"date-fns": "^2.30.0",
-		"framer-motion": "^10.16.4",
 		"gm": "^1.25.0",
 		"imagen": "github:MKRhere/imagen",
 		"marked": "^9.1.2",
@ -33,6 +32,7 @@
 		"@types/react": "^18.2.30",
 		"@types/react-dom": "^18.2.14",
 		"@vitejs/plugin-react": "^4.1.0",
+		"rollup-plugin-visualizer": "^5.12.0",
 		"typescript": "^5.2.2",
 		"vite": "^4.5.0"
 	}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -14,9 +14,6 @@ importers:
      date-fns:
        specifier: ^2.30.0
        version: 2.30.0
-      framer-motion:
-        specifier: ^10.16.4
-        version: 10.16.4(react-dom@18.2.0)(react@18.2.0)
      gm:
        specifier: ^1.25.0
        version: 1.25.0
@ -38,7 +35,7 @@ importers:
    devDependencies:
      '@svgr/rollup':
        specifier: ^8.1.0
-        version: 8.1.0(typescript@5.2.2)
+        version: 8.1.0(rollup@3.29.4)(typescript@5.2.2)
      '@types/gm':
        specifier: ^1.25.3
        version: 1.25.3
@ -56,7 +53,10 @@ importers:
        version: 18.2.14
      '@vitejs/plugin-react':
        specifier: ^4.1.0
-        version: 4.1.0(vite@4.5.0)
+        version: 4.1.0(vite@4.5.0(@types/node@20.8.7))
+      rollup-plugin-visualizer:
+        specifier: ^5.12.0
+        version: 5.12.0(rollup@3.29.4)
      typescript:
        specifier: ^5.2.2
        version: 5.2.2
@ -718,12 +718,6 @@ packages:
  '@emotion/hash@0.9.1':
    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}

-  '@emotion/is-prop-valid@0.8.8':
-    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
-
-  '@emotion/memoize@0.7.4':
-    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
-
  '@emotion/memoize@0.8.1':
    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}

@ -1047,6 +1041,10 @@ packages:
    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
    engines: {node: '>=4'}

+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
  aproba@2.0.0:
    resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}

@ -1122,12 +1120,23 @@ packages:
    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
    engines: {node: '>=10'}

+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
  color-convert@1.9.3:
    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}

+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
  color-name@1.1.3:
    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}

+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
  color-support@1.1.3:
    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
    hasBin: true
@ -1218,6 +1227,10 @@ packages:
    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
    engines: {node: '>=0.10.0'}

+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
  delegates@1.0.0:
    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}

@ -1281,17 +1294,6 @@ packages:
  find-root@1.1.0:
    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}

-  framer-motion@10.16.4:
-    resolution: {integrity: sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==}
-    peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
  fs-minipass@2.1.0:
    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
    engines: {node: '>= 8'}
@ -1312,6 +1314,10 @@ packages:
    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
    engines: {node: '>=6.9.0'}

+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
  glob@7.2.3:
    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}

@ -1344,7 +1350,6 @@ packages:

  imagen@https://codeload.github.com/MKRhere/imagen/tar.gz/c9988aeddaf8e03a1b30293842b8a6e3e2065e62:
    resolution: {tarball: https://codeload.github.com/MKRhere/imagen/tar.gz/c9988aeddaf8e03a1b30293842b8a6e3e2065e62}
-    name: imagen
    version: 0.0.1

  import-fresh@3.3.0:
@ -1363,10 +1368,19 @@ packages:
  is-core-module@2.13.0:
    resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}

+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
  is-fullwidth-code-point@3.0.0:
    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
    engines: {node: '>=8'}

+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
  isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}

@ -1504,6 +1518,10 @@ packages:
  once@1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}

+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
  parent-module@1.0.1:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}
@ -1581,6 +1599,10 @@ packages:
    resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
    hasBin: true

+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
  resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@ -1593,6 +1615,16 @@ packages:
    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
    hasBin: true

+  rollup-plugin-visualizer@5.12.0:
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
  rollup@3.29.4:
    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@ -1639,6 +1671,10 @@ packages:
    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
    engines: {node: '>=0.10.0'}

+  source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+
  string-split-by@1.0.0:
    resolution: {integrity: sha512-KaJKY+hfpzNyet/emP81PJA9hTVSfxNLS9SFTWxdCnnW1/zOOwiV248+EfoX7IQFcBaOp4G5YE6xTJMF+pLg6A==}

@ -1770,9 +1806,17 @@ packages:
    peerDependencies:
      react: '>=16.8.0'

+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
  wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}

+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
  yallist@2.1.2:
    resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}

@ -1786,6 +1830,14 @@ packages:
    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
    engines: {node: '>= 6'}

+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
 snapshots:

  '@ampproject/remapping@2.2.1':
@ -2598,14 +2650,6 @@ snapshots:

  '@emotion/hash@0.9.1': {}

-  '@emotion/is-prop-valid@0.8.8':
-    dependencies:
-      '@emotion/memoize': 0.7.4
-    optional: true
-
-  '@emotion/memoize@0.7.4':
-    optional: true
-
  '@emotion/memoize@0.8.1': {}

  '@emotion/serialize@1.1.2':
@ -2722,11 +2766,13 @@ snapshots:
      - encoding
      - supports-color

-  '@rollup/pluginutils@5.0.5':
+  '@rollup/pluginutils@5.0.5(rollup@3.29.4)':
    dependencies:
      '@types/estree': 1.0.3
      estree-walker: 2.0.2
      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 3.29.4

  '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.23.2)':
    dependencies:
@ -2788,7 +2834,7 @@ snapshots:
      '@babel/types': 7.23.0
      entities: 4.5.0

-  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0)':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.2.2))':
    dependencies:
      '@babel/core': 7.23.2
      '@svgr/babel-preset': 8.1.0(@babel/core@7.23.2)
@ -2798,7 +2844,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0)(typescript@5.2.2)':
+  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(typescript@5.2.2))(typescript@5.2.2)':
    dependencies:
      '@svgr/core': 8.1.0(typescript@5.2.2)
      cosmiconfig: 8.3.6(typescript@5.2.2)
@ -2807,17 +2853,17 @@ snapshots:
    transitivePeerDependencies:
      - typescript

-  '@svgr/rollup@8.1.0(typescript@5.2.2)':
+  '@svgr/rollup@8.1.0(rollup@3.29.4)(typescript@5.2.2)':
    dependencies:
      '@babel/core': 7.23.2
      '@babel/plugin-transform-react-constant-elements': 7.22.5(@babel/core@7.23.2)
      '@babel/preset-env': 7.23.2(@babel/core@7.23.2)
      '@babel/preset-react': 7.22.15(@babel/core@7.23.2)
      '@babel/preset-typescript': 7.23.2(@babel/core@7.23.2)
-      '@rollup/pluginutils': 5.0.5
+      '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
      '@svgr/core': 8.1.0(typescript@5.2.2)
-      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.2.2)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.2.2))
+      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@5.2.2))(typescript@5.2.2)
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -2874,7 +2920,7 @@ snapshots:

  '@types/scheduler@0.16.5': {}

-  '@vitejs/plugin-react@4.1.0(vite@4.5.0)':
+  '@vitejs/plugin-react@4.1.0(vite@4.5.0(@types/node@20.8.7))':
    dependencies:
      '@babel/core': 7.23.2
      '@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.23.2)
@ -2899,6 +2945,10 @@ snapshots:
    dependencies:
      color-convert: 1.9.3

+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
  aproba@2.0.0: {}

  are-we-there-yet@2.0.0:
@ -2978,12 +3028,24 @@ snapshots:

  chownr@2.0.0: {}

+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
  color-convert@1.9.3:
    dependencies:
      color-name: 1.1.3

+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
  color-name@1.1.3: {}

+  color-name@1.1.4: {}
+
  color-support@1.1.3: {}

  commander@7.2.0: {}
@ -3014,6 +3076,7 @@ snapshots:
      js-yaml: 4.1.0
      parse-json: 5.2.0
      path-type: 4.0.0
+    optionalDependencies:
      typescript: 5.2.2

  cross-spawn@4.0.2:
@ -3065,6 +3128,8 @@ snapshots:

  deepmerge@4.3.1: {}

+  define-lazy-prop@2.0.0: {}
+
  delegates@1.0.0: {}

  detect-libc@2.0.2: {}
@ -3139,14 +3204,6 @@ snapshots:

  find-root@1.1.0: {}

-  framer-motion@10.16.4(react-dom@18.2.0)(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      tslib: 2.6.2
-    optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
-
  fs-minipass@2.1.0:
    dependencies:
      minipass: 3.3.6
@ -3170,6 +3227,8 @@ snapshots:

  gensync@1.0.0-beta.2: {}

+  get-caller-file@2.0.5: {}
+
  glob@7.2.3:
    dependencies:
      fs.realpath: 1.0.0
@ -3236,8 +3295,14 @@ snapshots:
    dependencies:
      has: 1.0.4

+  is-docker@2.2.1: {}
+
  is-fullwidth-code-point@3.0.0: {}

+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
  isexe@2.0.0: {}

  js-tokens@4.0.0: {}
@ -3350,6 +3415,12 @@ snapshots:
    dependencies:
      wrappy: 1.0.2

+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
  parent-module@1.0.1:
    dependencies:
      callsites: 3.1.0
@ -3426,6 +3497,8 @@ snapshots:
    dependencies:
      jsesc: 0.5.0

+  require-directory@2.1.1: {}
+
  resolve-from@4.0.0: {}

  resolve@1.22.8:
@ -3438,6 +3511,15 @@ snapshots:
    dependencies:
      glob: 7.2.3

+  rollup-plugin-visualizer@5.12.0(rollup@3.29.4):
+    dependencies:
+      open: 8.4.2
+      picomatch: 2.3.1
+      source-map: 0.7.4
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 3.29.4
+
  rollup@3.29.4:
    optionalDependencies:
      fsevents: 2.3.3
@ -3487,6 +3569,8 @@ snapshots:

  source-map@0.5.7: {}

+  source-map@0.7.4: {}
+
  string-split-by@1.0.0:
    dependencies:
      parenthesis: 3.1.8
@ -3568,11 +3652,11 @@ snapshots:

  vite@4.5.0(@types/node@20.8.7):
    dependencies:
-      '@types/node': 20.8.7
      esbuild: 0.18.20
      postcss: 8.4.31
      rollup: 3.29.4
    optionalDependencies:
+      '@types/node': 20.8.7
      fsevents: 2.3.3

  webidl-conversions@3.0.1: {}
@ -3595,8 +3679,16 @@ snapshots:
      react: 18.2.0
      use-sync-external-store: 1.2.0(react@18.2.0)

+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
  wrappy@1.0.2: {}

+  y18n@5.0.8: {}
+
  yallist@2.1.2: {}

  yallist@3.1.1: {}
@ -3604,3 +3696,15 @@ snapshots:
  yallist@4.0.0: {}

  yaml@1.10.2: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.1.1
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
--- a/public/assets/logos/BlueCube.avif
+++ b/public/assets/logos/BlueCube.avif
--- a/public/assets/logos/FeathersStudio.avif
+++ b/public/assets/logos/FeathersStudio.avif
--- a/public/assets/logos/Hugosway.avif
+++ b/public/assets/logos/Hugosway.avif
--- a/public/assets/logos/Klenty.avif
+++ b/public/assets/logos/Klenty.avif
--- a/public/assets/logos/ManojExports.avif
+++ b/public/assets/logos/ManojExports.avif
--- a/public/assets/logos/NavanaTech.avif
+++ b/public/assets/logos/NavanaTech.avif
--- a/public/assets/logos/OutFocus.avif
+++ b/public/assets/logos/OutFocus.avif
--- a/public/assets/logos/StudioFlicks.avif
+++ b/public/assets/logos/StudioFlicks.avif
--- a/public/assets/logos/TheFeathers.avif
+++ b/public/assets/logos/TheFeathers.avif
--- a/public/assets/logos/Vinzas.avif
+++ b/public/assets/logos/Vinzas.avif
--- a/public/assets/logos/Zoho.avif
+++ b/public/assets/logos/Zoho.avif
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@ -159,7 +159,7 @@ const Container: React.FC<{
 			className={css`
 				padding-block-start: 15rem;
 				padding-block-end: 8rem;
-				padding-inline: calc(100vw / 8);
+				padding-inline: 10vw;
 				overflow: hidden;
 				min-height: 100vh;
 				position: relative;
--- a/src/components/Exp/Story.tsx
+++ b/src/components/Exp/Story.tsx
@ -138,15 +138,14 @@ const story = css`
 	}
 `;

-export const Story = ({ description, logo, active }: Experience) => {
+export const Story = ({ title, description, logo, active }: Experience) => {
 	return (
 		<div
 			className={cx(story, "story")}
 			id={active ? "active-story" : undefined}>
 			<div aria-hidden className="story-handle" />
 			<div className="story-content">
-				<img
-					src={`/assets/logos/` + logo}
+				<picture
 					className={cx(
 						"story-logo",
 						css`
@ -155,10 +154,18 @@ export const Story = ({ description, logo, active }: Experience) => {

 							background: rgba(40, 40, 40);
 							border-radius: 100%;
+
+							& img {
+								height: 100%;
+								border-radius: 100%;
+							}
 						`,
-					)}
-				/>
+					)}>
+					<source srcSet={`/assets/logos/` + logo + ".avif"} />
+					<img alt={title + " logo"} src={`/assets/logos/` + logo + ".png"} />
+				</picture>
 				<button
+					title="Close story"
 					className={cx(
 						"closer",
 						css`
--- a/src/components/FlickerList.tsx
+++ b/src/components/FlickerList.tsx
@ -47,12 +47,13 @@ const Flicker: React.FC<{
 					border: none;
 					color: inherit;
 					position: relative;
+					font-size: 0.9rem;
 				`}
 				ref={async el => {
 					if (!el) return;

-					await sleep(150);
-					await sleep(250 * index);
+					await sleep(500);
+					await sleep(300 * index);
 					el.style.opacity = "1";

 					await sleep(1000 + Math.random() * 1000);
@ -135,7 +136,7 @@ const FlickerList: React.FC<{
 							</Flicker>
 						</li>
 					)),
-					<li>·</li>,
+					index => <li key={index}>·</li>,
 				),
 			]}
 		</ul>
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@ -1,6 +1,5 @@
 import React from "react";
 import { css, cx } from "@emotion/css";
-import { motion } from "framer-motion";
 import RevealChildren from "./RevealChildren";
 import useMediaQuery from "../util/useMediaQuery";
 import { useNav } from "../util";
@ -89,7 +88,7 @@ const Menu: React.FC<{
 			<a
 				className={cx({ active })}
 				key={link}
-				onClick={navigate(link)}
+				onClick={e => (setShowMenu(false), navigate(link)(e))}
 				href={link}>
 				{name}
 			</a>
@ -97,9 +96,10 @@ const Menu: React.FC<{
 	});

 	return (
-		<motion.div
+		<div
 			className={cx("menu", notmobile ? desktopNav : offscreenNav)}
-			animate={{
+			style={{
+				transition: "top 300ms, opacity 300ms",
 				// if resized to mobile and back, numeric value will persist but
 				// will be ignored because desktopNav isn't absolutely positioned
 				top: notmobile ? "auto" : show ? "0" : "-100%",
@ -131,7 +131,7 @@ const Menu: React.FC<{
 						  )}
 				</RevealChildren>
 			</ul>
-		</motion.div>
+		</div>
 	);
 };

--- a/src/components/RevealChildren.tsx
+++ b/src/components/RevealChildren.tsx
@ -1,5 +1,4 @@
 import React from "react";
-import { motion } from "framer-motion";

 const RevealChildren: React.FC<{
 	type: "div" | "span" | "li";
@ -10,22 +9,18 @@ const RevealChildren: React.FC<{
 	)[];
 	show: boolean;
 }> = ({ type, children: items, show = false, ...props }) => {
-	const Comp = motion[type];
-	const opacity = show ? 1 : 0;
-	const y = show ? 0 : -2;
+	const Comp = type;

 	return (
 		<>
 			{items.map((item, i) => (
 				<Comp
 					key={i}
-					initial={{ opacity: 0, y: -2 }}
-					animate={{
-						opacity,
-						y: y * i,
-						transition: {
-							delay: i * 0.01,
-						},
+					style={{
+						opacity: show ? 1 : 0,
+						transform: `translateY(${show ? 0 : -2 * i}px)`,
+						transition: "opacity 250ms, transform 250ms",
+						transitionDelay: `${i * 0.01}s`,
 					}}
 					{...props}>
 					{item}
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@ -1,6 +1,8 @@
 import React, { useMemo } from "react";
 import { css, cx } from "@emotion/css";
-import { format, isBefore, startOfDay } from "date-fns";
+import format from "date-fns/format";
+import isBefore from "date-fns/isBefore";
+import startOfDay from "date-fns/startOfDay";

 export type TimelineUnit = {
 	title?: string;
--- a/src/index.css
+++ b/src/index.css
@ -23,6 +23,12 @@
 		sans-serif;
 }

+@supports (font-variation-settings: normal) {
+	* {
+		font-family: "Inter var", sans-serif;
+	}
+}
+
 body {
 	margin: 0;
 	color: var(--text-colour);
@ -52,6 +58,7 @@ h3,
 h4,
 h5,
 h6 {
+	font-weight: 800;
 	color: var(--primary-colour);
 }

--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,20 +1,16 @@
-import React from "react";
-
+import React, { lazy, Suspense } from "react";
 import { createRoot } from "react-dom/client";
-
 import useLocation from "wouter/use-location";

-import Home from "./pages/main/Home";
-import Exp from "./pages/main/Exp";
-import Projects from "./pages/main/Projects";
-import Contact from "./pages/main/Contact";
-import Live from "./pages/main/Live";
-
-import NotFound from "./pages/main/404";
-import BlogHome from "./pages/blog/Home";
-import { BlogPost } from "./pages/blog/components/BlogContent";
 import { normalise } from "./util";

+const Home = lazy(() => import("./pages/main/Home"));
+const Exp = lazy(() => import("./pages/main/Exp"));
+const Projects = lazy(() => import("./pages/main/Projects"));
+const Contact = lazy(() => import("./pages/main/Contact"));
+
+const NotFound = lazy(() => import("./pages/main/404"));
+
 function App() {
 	const [location, navigate] = useLocation();

@ -30,14 +26,16 @@ function App() {
 	if (normalised.startsWith("/experience/")) return <Exp />;
 	if (normalised === "/projects") return <Projects />;
 	if (normalised === "/contact") return <Contact />;
-	if (normalised === "/live") return <Live />;
-	if (normalised === "/blog") return <BlogHome />;
-	if (location.startsWith("/blog")) return <BlogPost />;
+	// if (normalised === "/live") return <Live />;
+	// if (normalised === "/blog") return <BlogHome />;
+	// if (location.startsWith("/blog")) return <BlogPost />;
 	return <NotFound />;
 }

 createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
-		<App />
+		<Suspense>
+			<App />
+		</Suspense>
 	</React.StrictMode>,
 );
--- a/src/pages/main/Home.tsx
+++ b/src/pages/main/Home.tsx
@ -17,27 +17,25 @@ const Home: React.FC = () => {
 		<Container>
 			<section>
 				<h1>MKRhere</h1>
-				<p>
-					<FlickerList
-						list={[
-							{
-								text: "Designer",
-								description:
-									"Graphic design is my passion 🤓 I have plenty of experience with Figma and Adobe Suite tools (especially Photoshop and InDesign)",
-							},
-							{
-								text: "Developer",
-								description:
-									"🧑🏻‍💻 I started developing websites in 2015, and in 2017 I joined The Devs Network, catapulting my growth as a full-time developer",
-							},
-							{
-								text: "Architect",
-								description:
-									"I have a formal degree in architecture! I'm an architect in both construction and software 😉",
-							},
-						]}
-					/>
-				</p>
+				<FlickerList
+					list={[
+						{
+							text: "Designer",
+							description:
+								"Graphic design is my passion 🤓 I have plenty of experience with Figma and Adobe Suite tools (especially Photoshop and InDesign)",
+						},
+						{
+							text: "Developer",
+							description:
+								"🧑🏻‍💻 I started developing websites in 2015, and in 2017 I joined The Devs Network, catapulting my growth as a full-time developer",
+						},
+						{
+							text: "Architect",
+							description:
+								"I have a formal degree in architecture! I'm an architect in both construction and software 😉",
+						},
+					]}
+				/>
 			</section>
 			<section
 				className={cx(
--- a/src/pages/main/Projects.tsx
+++ b/src/pages/main/Projects.tsx
@ -107,7 +107,7 @@ const Exp: React.FC = () => {
 			<div
 				className={css`
 					display: grid;
-					grid-template-columns: repeat(auto-fit, 20rem);
+					grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
 					gap: 1rem;
 					width: 100%;
 				`}>
--- a/src/pages/main/data/experience.tsx
+++ b/src/pages/main/data/experience.tsx
@ -31,7 +31,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "TheFeathers.png",
+		logo: "TheFeathers",
 	},
 	{
 		title: "StudioFlicks",
@ -57,7 +57,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "StudioFlicks.png",
+		logo: "StudioFlicks",
 	},
 	{
 		title: "Vinzas",
@ -91,7 +91,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "Vinzas.png",
+		logo: "Vinzas",
 	},
 	{
 		title: "Blue Cube",
@ -123,7 +123,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "BlueCube.png",
+		logo: "BlueCube",
 	},
 	{
 		title: "OutFocus Magazine",
@ -153,7 +153,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "OutFocus.png",
+		logo: "OutFocus",
 	},
 	{
 		title: "Zoho",
@ -183,7 +183,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "Zoho.png",
+		logo: "Zoho",
 	},
 	{
 		title: "Manoj Exports",
@ -210,7 +210,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "ManojExports.png",
+		logo: "ManojExports",
 	},
 	{
 		title: "Klenty",
@ -243,7 +243,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "Klenty.png",
+		logo: "Klenty",
 	},
 	{
 		title: "Hugo's Way",
@ -274,7 +274,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "Hugosway.png",
+		logo: "Hugosway",
 	},
 	{
 		title: "Navana Tech",
@ -304,7 +304,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "NavanaTech.png",
+		logo: "NavanaTech",
 	},
 	{
 		title: "Feathers Studio",
@ -332,7 +332,7 @@ export const experience = [
 				</p>
 			</>
 		),
-		logo: "FeathersStudio.png",
+		logo: "FeathersStudio",
 	},
 ].reverse();

--- a/src/util/index.ts
+++ b/src/util/index.ts
@ -3,12 +3,20 @@ import useLocation from "wouter/use-location";

 export const sleep = (t: number) => new Promise(r => setTimeout(r, t));

-export function* intersperse<T, U>(xs: T[], delim: U): Generator<T | U> {
+export function* intersperse<T, U>(
+	xs: T[],
+	delim: (index: number) => U,
+): Generator<T | U> {
 	let first = true;
+	let i = 0;
 	for (const x of xs) {
-		if (!first) yield delim;
+		if (!first) {
+			yield delim(i);
+			i++;
+		}
 		first = false;
 		yield x;
+		i++;
 	}
 }

--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import { resolve } from "path";
 import react from "@vitejs/plugin-react";
 import svgr from "@svgr/rollup";
+import { visualizer as visualiser } from "rollup-plugin-visualizer";

 // https://vitejs.dev/config/
 export default defineConfig({
@ -11,12 +12,12 @@ export default defineConfig({
 		Object.assign(svgr({ ref: true, svgo: false }), {
 			enforce: "pre",
 		} as const),
+		visualiser(),
 	],
 	build: {
 		rollupOptions: {
 			input: {
 				main: resolve(__dirname, "index.html"),
-				blog: resolve(__dirname, "blog.html"),
 			},
 		},
 	},
Author	SHA1	Message	Date
Muthu Kumar	48ca3dd5cf	Revert "feat: reduce number of font sizes used" This reverts commit `965e6dfb26`. Using variable fonts means modern browsers don't need to load different the font sizes anymore.	3 months ago
Muthu Kumar	f9bc6d31de	feat: use variable font if available	3 months ago
Muthu Kumar	965e6dfb26	feat: reduce number of font sizes used	3 months ago
Muthu Kumar	cc4346019e	feat: convert to avif for smaller image sizes	3 months ago
Muthu Kumar	a618071ff3	feat: enable stats	3 months ago
Muthu Kumar	655ec3d525	chore: import individual date-fns	3 months ago
Muthu Kumar	d05acf18da	feat: DROP TABLE framer-motion;	3 months ago
Muthu Kumar	4e41f3df3f	feat: lazy-loading and standards compliance	3 months ago
Muthu Kumar	9a309536d2	fix: project unit overflow on small screens	3 months ago
Muthu Kumar	7647391545	fix: close offscreen menu if same page is selected	3 months ago
Muthu Kumar	8ca6c69af4	feat: add PUNCH to FlickerList	3 months ago