feat: added skeleton as ui toolkit

package.json

@@ -12,6 +12,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
+		"@skeletonlabs/skeleton": "^1.10.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -25,7 +26,11 @@
 		"svelte-check": "^3.4.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
+		"vite": "^4.4.2",
+		"postcss": "^8.4.24",
+		"postcss-load-config": "^4.0.1",
+		"autoprefixer": "^10.4.14",
+		"tailwindcss": "^3.3.2"
 	},
 	"type": "module"
 }

pnpm-lock.yaml

@@ -1,10 +1,13 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
 devDependencies:
+  '@skeletonlabs/skeleton':
+    specifier: ^1.10.0
+    version: 1.10.0(svelte@4.1.0)
   '@sveltejs/adapter-auto':
     specifier: ^2.0.0
     version: 2.1.0(@sveltejs/kit@1.22.3)
@@ -17,6 +20,9 @@ devDependencies:
   '@typescript-eslint/parser':
     specifier: ^5.45.0
     version: 5.62.0(eslint@8.45.0)(typescript@5.1.6)
+  autoprefixer:
+    specifier: ^10.4.14
+    version: 10.4.14(postcss@8.4.26)
   eslint:
     specifier: ^8.28.0
     version: 8.45.0
@@ -26,6 +32,12 @@ devDependencies:
   eslint-plugin-svelte:
     specifier: ^2.30.0
     version: 2.32.2(eslint@8.45.0)(svelte@4.1.0)
+  postcss:
+    specifier: ^8.4.24
+    version: 8.4.26
+  postcss-load-config:
+    specifier: ^4.0.1
+    version: 4.0.1(postcss@8.4.26)
   prettier:
     specifier: ^2.8.0
     version: 2.8.8
@@ -37,7 +49,10 @@ devDependencies:
     version: 4.1.0
   svelte-check:
     specifier: ^3.4.3
-    version: 3.4.6(postcss@8.4.26)(svelte@4.1.0)
+    version: 3.4.6(postcss-load-config@4.0.1)(postcss@8.4.26)(svelte@4.1.0)
+  tailwindcss:
+    specifier: ^3.3.2
+    version: 3.3.3
   tslib:
     specifier: ^2.4.1
     version: 2.6.0
@@ -55,6 +70,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
     engines: {node: '>=6.0.0'}
@@ -377,6 +397,15 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@skeletonlabs/skeleton@1.10.0(svelte@4.1.0):
+    resolution: {integrity: sha512-6Cy1dzF6b2tMGxjFe60WOulN53tfvWMH+SDYoPMzNsRoa20vjlBMjLInWPJGn4dMuSJMiDrR9apniv16m0c9Rg==}
+    peerDependencies:
+      svelte: ^3.56.0 || ^4.0.0
+    dependencies:
+      esm-env: 1.0.0
+      svelte: 4.1.0
+    dev: true
+
   /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.3):
     resolution: {integrity: sha512-o2pZCfATFtA/Gw/BB0Xm7k4EYaekXxaPGER3xGSY3FvzFJGTlJlZjBseaXwYSM94lZ0HniOjTokN3cWaLX6fow==}
     peerDependencies:
@@ -634,6 +663,10 @@ packages:
       color-convert: 2.0.1
     dev: true
 
+  /any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+    dev: true
+
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -642,6 +675,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    dev: true
+
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -657,6 +694,22 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /autoprefixer@10.4.14(postcss@8.4.26):
+    resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.21.9
+      caniuse-lite: 1.0.30001517
+      fraction.js: 4.2.0
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.26
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /axobject-query@3.2.1:
     resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
     dependencies:
@@ -686,6 +739,17 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /browserslist@4.21.9:
+    resolution: {integrity: sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001517
+      electron-to-chromium: 1.4.471
+      node-releases: 2.0.13
+      update-browserslist-db: 1.0.11(browserslist@4.21.9)
+    dev: true
+
   /buffer-crc32@0.2.13:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
@@ -702,6 +766,15 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /caniuse-lite@1.0.30001517:
+    resolution: {integrity: sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==}
+    dev: true
+
   /chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -746,6 +819,11 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+    dev: true
+
   /concat-map@0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     dev: true
@@ -813,6 +891,10 @@ packages:
     resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==}
     dev: true
 
+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+    dev: true
+
   /dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -820,6 +902,10 @@ packages:
       path-type: 4.0.0
     dev: true
 
+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+    dev: true
+
   /doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -827,6 +913,10 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /electron-to-chromium@1.4.471:
+    resolution: {integrity: sha512-GpmGRC1vTl60w/k6YpQ18pSiqnmr0j3un//5TV1idPi6aheNfkT1Ye71tMEabWyNDO6sBMgAR+95Eb0eUUr1tA==}
+    dev: true
+
   /es6-promise@3.3.1:
     resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
     dev: true
@@ -861,6 +951,11 @@ packages:
       '@esbuild/win32-x64': 0.18.14
     dev: true
 
+  /escalade@3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1081,6 +1176,10 @@ packages:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: true
 
+  /fraction.js@4.2.0:
+    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+    dev: true
+
   /fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
@@ -1093,6 +1192,10 @@ packages:
     dev: true
     optional: true
 
+  /function-bind@1.1.1:
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+    dev: true
+
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -1107,6 +1210,17 @@ packages:
       is-glob: 4.0.3
     dev: true
 
+  /glob@7.1.6:
+    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     dependencies:
@@ -1150,6 +1264,13 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /has@1.0.3:
+    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: 1.1.1
+    dev: true
+
   /ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
@@ -1190,6 +1311,12 @@ packages:
       binary-extensions: 2.2.0
     dev: true
 
+  /is-core-module@2.12.1:
+    resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==}
+    dependencies:
+      has: 1.0.3
+    dev: true
+
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1222,6 +1349,11 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /jiti@1.19.1:
+    resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==}
+    hasBin: true
+    dev: true
+
   /js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -1259,6 +1391,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: true
+
   /locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
     dev: true
@@ -1354,6 +1490,14 @@ packages:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
+  /mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+    dev: true
+
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1368,11 +1512,30 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /node-releases@2.0.13:
+    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
+    dev: true
+
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+    dev: true
+
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -1427,6 +1590,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -1449,6 +1616,38 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /postcss-import@15.1.0(postcss@8.4.26):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.26
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.2
+    dev: true
+
+  /postcss-js@4.0.1(postcss@8.4.26):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.26
+    dev: true
+
   /postcss-load-config@3.1.4(postcss@8.4.26):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -1466,6 +1665,33 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /postcss-load-config@4.0.1(postcss@8.4.26):
+    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.1.0
+      postcss: 8.4.26
+      yaml: 2.3.1
+    dev: true
+
+  /postcss-nested@6.0.1(postcss@8.4.26):
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.26
+      postcss-selector-parser: 6.0.13
+    dev: true
+
   /postcss-safe-parser@6.0.0(postcss@8.4.26):
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
     engines: {node: '>=12.0'}
@@ -1492,6 +1718,10 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: true
+
   /postcss@8.4.26:
     resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1531,6 +1761,12 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: true
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -1543,6 +1779,15 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /resolve@1.22.2:
+    resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.12.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -1669,6 +1914,20 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /sucrase@3.34.0:
+    resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      commander: 4.1.1
+      glob: 7.1.6
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+    dev: true
+
   /supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -1676,7 +1935,12 @@ packages:
       has-flag: 4.0.0
     dev: true
 
-  /svelte-check@3.4.6(postcss@8.4.26)(svelte@4.1.0):
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /svelte-check@3.4.6(postcss-load-config@4.0.1)(postcss@8.4.26)(svelte@4.1.0):
     resolution: {integrity: sha512-OBlY8866Zh1zHQTkBMPS6psPi7o2umTUyj6JWm4SacnIHXpWFm658pG32m3dKvKFL49V4ntAkfFHKo4ztH07og==}
     hasBin: true
     peerDependencies:
@@ -1689,7 +1953,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 4.1.0
-      svelte-preprocess: 5.0.4(postcss@8.4.26)(svelte@4.1.0)(typescript@5.1.6)
+      svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.26)(svelte@4.1.0)(typescript@5.1.6)
       typescript: 5.1.6
     transitivePeerDependencies:
       - '@babel/core'
@@ -1729,7 +1993,7 @@ packages:
       svelte: 4.1.0
     dev: true
 
-  /svelte-preprocess@5.0.4(postcss@8.4.26)(svelte@4.1.0)(typescript@5.1.6):
+  /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.26)(svelte@4.1.0)(typescript@5.1.6):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -1771,6 +2035,7 @@ packages:
       detect-indent: 6.1.0
       magic-string: 0.27.0
       postcss: 8.4.26
+      postcss-load-config: 4.0.1(postcss@8.4.26)
       sorcery: 0.11.0
       strip-indent: 3.0.0
       svelte: 4.1.0
@@ -1796,10 +2061,54 @@ packages:
       periscopic: 3.1.0
     dev: true
 
+  /tailwindcss@3.3.3:
+    resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.5.3
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.0
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.19.1
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.26
+      postcss-import: 15.1.0(postcss@8.4.26)
+      postcss-js: 4.0.1(postcss@8.4.26)
+      postcss-load-config: 4.0.1(postcss@8.4.26)
+      postcss-nested: 6.0.1(postcss@8.4.26)
+      postcss-selector-parser: 6.0.13
+      resolve: 1.22.2
+      sucrase: 3.34.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: true
+
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+    dev: true
+
+  /thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+    dev: true
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -1812,6 +2121,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+    dev: true
+
   /tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
@@ -1855,6 +2168,17 @@ packages:
       busboy: 1.6.0
     dev: true
 
+  /update-browserslist-db@1.0.11(browserslist@4.21.9):
+    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.9
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -1932,6 +2256,11 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /yaml@2.3.1:
+    resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==}
+    engines: {node: '>= 14'}
+    dev: true
+
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}

postcss.config.cjs

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+	plugins: [
+		tailwindcss(),
+		autoprefixer
+	]
+};
+
+module.exports = config;

src/app.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
   <meta charset="utf-8" />
   <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
@@ -14,6 +14,6 @@
 	%sveltekit.head%
 </head>
 <body data-sveltekit-preload-data="hover">
-  <div style="display: contents">%sveltekit.body%</div>
+  <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
 </body>
 </html>

src/app.postcss

@@ -0,0 +1,4 @@
+html,
+body {
+  @apply h-full overflow-hidden
+}

src/components/Footer.svelte

@@ -1,17 +0,0 @@
-<!-- Footer.svelte -->
-<footer>
-  <p>&copy; {new Date().getFullYear()} hellob.art. All rights reserved.</p>
-  <p>Contact: bart@vanderbraak.nl</p>
-</footer>
-
-<style>
-  footer {
-    background-color: #f0f0f0;
-    padding: 1rem;
-    text-align: center;
-  }
-
-  p {
-    margin: 0.5rem 0;
-  }
-</style>

src/components/Nav.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-  export let routes: { url: string; label: string }[];
-</script>
-
-<nav>
-  <ul>
-    {#each routes as route}
-      <li><a href={route.url}>{route.label}</a></li>
-    {/each}
-  </ul>
-</nav>
-
-<style>
-  nav {
-    background-color: #007bff;
-    padding: 1rem;
-  }
-
-  ul {
-    list-style: none;
-    display: flex;
-    justify-content: space-around;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    margin: 0;
-  }
-
-  a {
-    color: #fff;
-    text-decoration: none;
-    font-size: 1.2rem;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    transition: background-color 0.2s ease-in-out;
-  }
-
-  a:hover {
-    background-color: #0056b3;
-  }
-</style>

src/lib/components/Footer.svelte

@@ -0,0 +1,30 @@
+<script>
+	import GitHub from './icons/GitHub.svelte';
+	import Svelte from './icons/Svelte.svelte';
+	import Vercel from './icons/Vercel.svelte';
+</script>
+
+<footer class="text-right px-4 py-2">
+	<p>
+		<a href="https://svelte.dev/" target="_blank" rel="noopener noreferrer">
+			Made with <Svelte />
+		</a>
+		|
+		<a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">
+			Hosted on <Vercel />
+		</a>
+		|
+		<a href="https://github.com/bartvdbraak/hellob.art" target="_blank" rel="noopener noreferrer">
+			Source code at <GitHub />
+		</a>
+	</p>
+	<p>
+		Licensed under GPLv3 &mdash; &copy; {new Date().getFullYear()} hellob.art &mdash; Bart van der Braak
+	</p>
+</footer>
+
+<style>
+	:global(.inline-svg) {
+		display: inline;
+	}
+</style>

src/lib/components/Header.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { AppBar } from "@skeletonlabs/skeleton";
+	import GitHub from "./icons/GitHub.svelte";
+</script>
+
+<AppBar>
+  <svelte:fragment slot="lead">
+    <img src="./icon.svg" alt="Logo" srcset="" class="pr-2" />
+    <code class="code">hellob.art</code>
+  </svelte:fragment>
+  <svelte:fragment slot="trail">
+    <a
+      href="https://github.com/bartvdbraak/hellob.art"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="btn-icon variant-primary"><GitHub /></a
+    >
+  </svelte:fragment>
+</AppBar>

src/lib/components/Navigation.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	$: classesActive = (href: string) => (href === $page.url.pathname ? '!bg-primary-500' : '');
+
+	export let routes: { url: string; label: string }[];
+</script>
+
+<nav class="list-nav m-5">
+	<ul>
+		{#each routes as route}
+			<li>
+				<a class="{classesActive(route.url)}" href={route.url}>{route.label}</a>
+			</li>
+		{/each}
+	</ul>
+</nav>

src/lib/components/icons/GitHub.svelte

@@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>

src/lib/components/icons/Svelte.svelte

@@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"></path></svg>

src/lib/components/icons/Vercel.svelte

@@ -0,0 +1 @@
+<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 19h18l-9 -15z"></path></svg>

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.svelte

@@ -1,18 +1,33 @@
-<script>
+<script lang="ts">
-  import Footer from '../components/Footer.svelte';
+	import '../theme.postcss';
-  import Nav from '../components/Nav.svelte';
+	import '@skeletonlabs/skeleton/styles/skeleton.css';
+	import '../app.postcss';
+	import { AppShell } from '@skeletonlabs/skeleton';
+	import Footer from '../lib/components/Footer.svelte';
+	import Navigation from '../lib/components/Navigation.svelte';
+	import Header from '$lib/components/Header.svelte';
 
-  export let routes = [
+	export let routes = [
-    { url: "/", label: "Home" },
+		{ url: '/', label: 'Home' },
-    { url: "/projects", label: "Projects" },
+		{ url: '/projects', label: 'Projects' },
-    { url: "/about", label: "About" },
+		{ url: '/tools', label: 'Tools' },
-    // { url: "/blog", label: "Blog" },
+		{ url: '/blog', label: 'Blog' }
-    { url: "/contact", label: "Contact" }
+	];
-  ]
 </script>
 
-<main>
+<AppShell>
-  <Nav {routes} />
+	<svelte:fragment slot="header">
-  <slot />
+		<Header />
-  <Footer />
+	</svelte:fragment>
-</main>
+	<svelte:fragment slot="sidebarLeft">
+		<Navigation {routes} />
+	</svelte:fragment>
+	<!-- Router Slot -->
+	<div class="container p-10 mx-auto">
+		<slot />
+	</div>
+	<!-- ---- / ---- -->
+	<svelte:fragment slot="pageFooter">
+		<Footer />
+	</svelte:fragment>
+</AppShell>

src/routes/+page.svelte

@@ -1,16 +1,60 @@
+<!-- About.svelte -->
 <script>
-	import { calculateAge } from "$lib/calculate-age";
+	import { calculateAge } from '$lib/calculate-age';
-
-  export let age = calculateAge('1994-10-18');
-  export let location = "Zaandam, Netherlands";
-  export let loves = "cats and whiskey";
-  export let passion = "solving problems with code and automation";
 </script>
 
-<main>
+<main class="container mx-auto px-4 py-8 text-left">
-  <h1>Hello, I'm Bart van der Braak!</h1>
+	<h2 class="text-3xl font-bold mb-4">About Me</h2>
-  <p>I'm {age} years old</p>
+
-  <p>I'm located in {location}.</p>
+	<p class="text-lg leading-relaxed mb-8">
-  <p>I love {loves}.</p>
+		Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge("1994-10-18")}
-  <p>I'm passionate about {passion}.</p>
+		years old, I've already gathered a wealth of experience and expertise in the world of
-</main>
+		technology. From programming in Python, Javascript, and Bash to utilizing cutting-edge
+		technologies like Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and
+		innovative solutions. My journey in the tech industry began during my Information Sciences
+		studies, where I fell in love with data-driven projects and statistical learning. This passion
+		led me to explore languages like Python and LaTeX, enabling me to bring ideas to life through
+		powerful data management and visualization.
+	</p>
+
+	<h2 class="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		My career took off when I joined Triple as a DevOps Engineer. At Triple, I've embraced the world
+		of Azure and Azure DevOps, mastering the intricacies of cloud architecture and deployment.
+		Holding certifications like AZ-104 and CKA has further solidified my expertise, empowering me to
+		build and manage robust, scalable, and secure cloud environments. My proficiency in
+		containerization and Kubernetes has allowed me to take application development to new heights,
+		ensuring seamless and efficient deployment at scale.
+	</p>
+
+	<h2 class="text-3xl font-bold mb-4">Solving Problems with Code and Automation</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		As a DevOps engineer, I thrive on solving complex challenges with the power of code and
+		automation. My passion for streamlining workflows led me to create internal tooling using APIs,
+		boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side
+		projects that push my boundaries, expanding my skill set, and exploring new technologies. I
+		strongly believe that innovation and continuous learning are key drivers of success in the
+		ever-evolving tech landscape.
+	</p>
+
+	<h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2>
+
+	<p class="text-lg leading-relaxed mb-8">
+		When I'm not busy crafting technological solutions, you'll often find me indulging in two of my
+		favorite passions: cats and whiskey. There's something special about the companionship of cats,
+		and their playful antics never fail to bring joy to my day. As for whiskey, I appreciate the
+		intricate flavors and the artistry behind its production. I find both interests to be a
+		delightful way to unwind and recharge my creative energies.
+	</p>
+
+	<h2 class="text-3xl font-bold mb-4">Let's Connect</h2>
+
+	<p class="text-lg leading-relaxed">
+		I'm always eager to collaborate on exciting projects and explore new opportunities. Whether it's
+		discussing data-driven ideas, cloud architecture, or just sharing cute cat pictures, I'd love to
+		connect with like-minded individuals. Feel free to reach out to me through the provided contact
+		information. Let's work together to create something extraordinary!
+	</p>
+</main>

src/routes/about/+page.svelte

@@ -1,19 +0,0 @@
-<!-- About.svelte -->
-<script>
-  export let proficientLanguages = ["Python", "Javascript", "Bash"];
-  export let proficientTechnologies = ["Terraform", "Bicep"];
-  export let workPlace = "Triple, Alkmaar";
-  export let workRole = "DevOps engineer";
-  export let azureExperience = "Azure and Azure DevOps";
-  export let containerSkills = "containers and Kubernetes";
-  export let certifications = ["AZ-104", "CKA"];
-</script>
-
-<main>
-  <h1>About Me</h1>
-  <p>I'm a {workRole} at {workPlace}.</p>
-  <p>I'm proficient in languages like {proficientLanguages.join(", ")} and technologies such as {proficientTechnologies.join(", ")}.</p>
-  <p>I have extensive experience with {azureExperience}.</p>
-  <p>I'm keen on utilizing {containerSkills}.</p>
-  <p>Certifications I've obtained: {certifications.join(", ")}.</p>
-</main>

src/routes/blog/+page.svelte

@@ -0,0 +1,4 @@
+<main class="text-center">
+	<h2 class="h2">Blog Posts</h2>
+</main>
+

src/routes/contact/+page.svelte

@@ -1,29 +0,0 @@
-<main>
-  <h1>Get in Touch!</h1>
-  <p>If you want to chat about cats, whiskey, or anything else, don't hesitate to reach out:</p>
-  <a href="mailto:bart@vanderbraak.nl" class="contact-email">bart@vanderbraak.nl</a>
-  <p>Looking forward to hearing from you!</p>
-</main>
-
-<style>
-  main {
-    text-align: center;
-    padding: 1rem;
-  }
-
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .contact-email {
-    font-size: 1.2rem;
-    text-decoration: none;
-    color: #007bff;
-    transition: color 0.2s ease-in-out;
-  }
-
-  .contact-email:hover {
-    color: #0056b3;
-  }
-</style>

src/routes/projects/+page.svelte

@@ -1,67 +1,71 @@
-<main>
+<main class="text-center">
-  <h1>My Projects</h1>
+	<h2 class="h2">My Projects</h2>
 
-  <div class="project">
+	<div class="project">
-    <h2>Triple Ticket Dashboard</h2>
+		<h2>Triple Ticket Dashboard</h2>
-    <p>Dec 2021 - Present</p>
+		<p>Dec 2021 - Present</p>
-    <p>The Ticket Dashboard consolidates tickets from various sources into a centralized view.</p>
+		<p>The Ticket Dashboard consolidates tickets from various sources into a centralized view.</p>
-  </div>
+	</div>
 
-  <div class="project">
+	<div class="project">
-    <h2>Triple Videowall</h2>
+		<h2>Triple Videowall</h2>
-    <p>May 2022 - Sep 2022</p>
+		<p>May 2022 - Sep 2022</p>
-    <p>An internal application to control an impressive 6x5 monitor setup with a user-friendly frontend built on Next.js and a powerful backend developed in Golang.</p>
+		<p>
-  </div>
+			An internal application to control an impressive 6x5 monitor setup with a user-friendly
+			frontend built on Next.js and a powerful backend developed in Golang.
+		</p>
+	</div>
 
-  <div class="project">
+	<div class="project">
-    <h2>Zaantje</h2>
+		<h2>Zaantje</h2>
-    <p>Jan 2020 - Jan 2021</p>
+		<p>Jan 2020 - Jan 2021</p>
-    <p>A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you on a virtual tour of Zaandam, showcasing locations of famous music videos.</p>
+		<p>
-  </div>
+			A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you on a virtual tour of
+			Zaandam, showcasing locations of famous music videos.
+		</p>
+	</div>
 
-  <h2>Open Source Contributions</h2>
+	<h2>Open Source Contributions</h2>
-  
-  <div class="contribution">
-    <h3>microsoft/terraform-provider-azuredevops</h3>
-    <p>Terraform Azure DevOps provider</p>
-  </div>
 
-  <div class="contribution">
+	<div class="contribution">
-    <h3>iKenndac/Tofu</h3>
+		<h3>microsoft/terraform-provider-azuredevops</h3>
-    <p>An easy-to-use two-factor authentication app for iOS</p>
+		<p>Terraform Azure DevOps provider</p>
-  </div>
+	</div>
 
-  <div class="contribution">
+	<div class="contribution">
-    <h3>bartvdbraak/SlayerWeightCalculator</h3>
+		<h3>iKenndac/Tofu</h3>
-    <p>A calculator for RuneScape slayer geeks that need to know percentages. (archived)</p>
+		<p>An easy-to-use two-factor authentication app for iOS</p>
-  </div>
+	</div>
+
+	<div class="contribution">
+		<h3>bartvdbraak/SlayerWeightCalculator</h3>
+		<p>A calculator for RuneScape slayer geeks that need to know percentages. (archived)</p>
+	</div>
 </main>
 
 <style>
-  main {
-    text-align: center;
-    padding: 1rem;
-  }
 
-  h1 {
+	h1 {
-    font-size: 2.5rem;
+		font-size: 2.5rem;
-    margin-bottom: 1rem;
+		margin-bottom: 1rem;
-  }
+	}
 
-  h2 {
+	h2 {
-    font-size: 2rem;
+		font-size: 2rem;
-    margin-top: 2rem;
+		margin-top: 2rem;
-  }
+	}
 
-  .project, .contribution {
+	.project,
-    margin: 1rem auto;
+	.contribution {
-    padding: 1rem;
+		margin: 1rem auto;
-    max-width: 500px;
+		padding: 1rem;
-    border: 2px solid #007bff;
+		max-width: 500px;
-    border-radius: 10px;
+		border: 2px solid #007bff;
-  }
+		border-radius: 10px;
+	}
 
-  .project p, .contribution p {
+	.project p,
-    margin: 0.5rem 0;
+	.contribution p {
-  }
+		margin: 0.5rem 0;
+	}
 </style>

src/routes/tools/+page.svelte

@@ -0,0 +1,4 @@
+<main class="text-center">
+  <h2 class="h2">My Tools</h2>
+</main>
+

src/theme.postcss

@@ -0,0 +1,98 @@
+
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 4px;
+	--theme-rounded-container: 12px;
+	--theme-border-base: 2px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #67a1ba */
+	--color-primary-50: 232 241 245; /* ⬅ #e8f1f5 */
+	--color-primary-100: 225 236 241; /* ⬅ #e1ecf1 */
+	--color-primary-200: 217 232 238; /* ⬅ #d9e8ee */
+	--color-primary-300: 194 217 227; /* ⬅ #c2d9e3 */
+	--color-primary-400: 149 189 207; /* ⬅ #95bdcf */
+	--color-primary-500: 103 161 186; /* ⬅ #67a1ba */
+	--color-primary-600: 93 145 167; /* ⬅ #5d91a7 */
+	--color-primary-700: 77 121 140; /* ⬅ #4d798c */
+	--color-primary-800: 62 97 112; /* ⬅ #3e6170 */
+	--color-primary-900: 50 79 91; /* ⬅ #324f5b */
+	/* secondary | #4F46E5 */
+	--color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */
+	--color-secondary-100: 220 218 250; /* ⬅ #dcdafa */
+	--color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */
+	--color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */
+	--color-secondary-400: 132 126 237; /* ⬅ #847eed */
+	--color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */
+	--color-secondary-600: 71 63 206; /* ⬅ #473fce */
+	--color-secondary-700: 59 53 172; /* ⬅ #3b35ac */
+	--color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */
+	--color-secondary-900: 39 34 112; /* ⬅ #272270 */
+	/* tertiary | #0EA5E9 */
+	--color-tertiary-50: 219 242 252; /* ⬅ #dbf2fc */
+	--color-tertiary-100: 207 237 251; /* ⬅ #cfedfb */
+	--color-tertiary-200: 195 233 250; /* ⬅ #c3e9fa */
+	--color-tertiary-300: 159 219 246; /* ⬅ #9fdbf6 */
+	--color-tertiary-400: 86 192 240; /* ⬅ #56c0f0 */
+	--color-tertiary-500: 14 165 233; /* ⬅ #0EA5E9 */
+	--color-tertiary-600: 13 149 210; /* ⬅ #0d95d2 */
+	--color-tertiary-700: 11 124 175; /* ⬅ #0b7caf */
+	--color-tertiary-800: 8 99 140; /* ⬅ #08638c */
+	--color-tertiary-900: 7 81 114; /* ⬅ #075172 */
+	/* success | #84cc16 */
+	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
+	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
+	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
+	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
+	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
+	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
+	--color-success-600: 119 184 20; /* ⬅ #77b814 */
+	--color-success-700: 99 153 17; /* ⬅ #639911 */
+	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
+	--color-success-900: 65 100 11; /* ⬅ #41640b */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
+	/* error | #d31922 */
+	--color-error-50: 248 221 222; /* ⬅ #f8ddde */
+	--color-error-100: 246 209 211; /* ⬅ #f6d1d3 */
+	--color-error-200: 244 198 200; /* ⬅ #f4c6c8 */
+	--color-error-300: 237 163 167; /* ⬅ #eda3a7 */
+	--color-error-400: 224 94 100; /* ⬅ #e05e64 */
+	--color-error-500: 211 25 34; /* ⬅ #d31922 */
+	--color-error-600: 190 23 31; /* ⬅ #be171f */
+	--color-error-700: 158 19 26; /* ⬅ #9e131a */
+	--color-error-800: 127 15 20; /* ⬅ #7f0f14 */
+	--color-error-900: 103 12 17; /* ⬅ #670c11 */
+	/* surface | #063142 */
+	--color-surface-50: 218 224 227; /* ⬅ #dae0e3 */
+	--color-surface-100: 205 214 217; /* ⬅ #cdd6d9 */
+	--color-surface-200: 193 204 208; /* ⬅ #c1ccd0 */
+	--color-surface-300: 155 173 179; /* ⬅ #9badb3 */
+	--color-surface-400: 81 111 123; /* ⬅ #516f7b */
+	--color-surface-500: 6 49 66; /* ⬅ #063142 */
+	--color-surface-600: 5 44 59; /* ⬅ #052c3b */
+	--color-surface-700: 5 37 50; /* ⬅ #052532 */
+	--color-surface-800: 4 29 40; /* ⬅ #041d28 */
+	--color-surface-900: 3 24 32; /* ⬅ #031820 */
+	
+}

svelte.config.js

@@ -3,14 +3,9 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	preprocess: [vitePreprocess({})],
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
 
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter()
 	}
 };

tailwind.config.cjs

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	darkMode: 'class',
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		require('path').join(require.resolve(
+			'@skeletonlabs/skeleton'),
+			'../**/*.{html,js,svelte,ts}'
+		)
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()
+	]
+}