simple site that displays projects

This reverts commit 359018746c.

jsconfig.json

@@ -9,7 +9,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+        "allowImportingTsExtensions": true
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
 	//

package-lock.json

@@ -7,13 +7,18 @@
 		"": {
 			"name": "deprived-main-website",
 			"version": "0.0.1",
+			"dependencies": {
+				"svelte-media-queries": "^1.6.2"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/adapter-static": "^3.0.1",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
+				"@zerodevx/svelte-img": "^2.1.0",
 				"svelte": "^4.2.7",
 				"svelte-check": "^3.6.0",
+				"svelte-highlight": "^7.6.0",
 				"typescript": "^5.0.0",
 				"vite": "^5.0.3"
 			}
@@ -43,6 +48,28 @@
 			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
 			"dev": true
 		},
+		"node_modules/@rollup/pluginutils": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+			"integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+			"dev": true,
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"estree-walker": "^2.0.2",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.1.1.tgz",
@@ -228,6 +255,122 @@
 				"vite": "^5.0.0"
 			}
 		},
+		"node_modules/@types/estree": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+			"dev": true
+		},
+		"node_modules/@zerodevx/svelte-img": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@zerodevx/svelte-img/-/svelte-img-2.1.0.tgz",
+			"integrity": "sha512-ktOcv5svIm8qQQ7sBnSST1zaA5mJpTp+MbzaMeDNBEw4hulwzSD0VRPtq/pvYsjacA1OAw+JIN/qmBl7doh7HA==",
+			"dev": true,
+			"dependencies": {
+				"vite-imagetools": "5.0.8"
+			},
+			"peerDependencies": {
+				"svelte": "^3.55.1 || ^4.0.0"
+			}
+		},
+		"node_modules/b4a": {
+			"version": "1.6.6",
+			"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.6.tgz",
+			"integrity": "sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==",
+			"dev": true
+		},
+		"node_modules/bare-events": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.0.tgz",
+			"integrity": "sha512-Yyyqff4PIFfSuthCZqLlPISTWHmnQxoPuAvkmgzsJEmG3CesdIv6Xweayl0JkCZJSB2yYIdJyEz97tpxNhgjbg==",
+			"dev": true,
+			"optional": true
+		},
+		"node_modules/bare-fs": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.2.0.tgz",
+			"integrity": "sha512-+VhW202E9eTVGkX7p+TNXtZC4RTzj9JfJW7PtfIbZ7mIQ/QT9uOafQTx7lx2n9ERmWsXvLHF4hStAFn4gl2mQw==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"bare-events": "^2.0.0",
+				"bare-os": "^2.0.0",
+				"bare-path": "^2.0.0",
+				"streamx": "^2.13.0"
+			}
+		},
+		"node_modules/bare-os": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.2.0.tgz",
+			"integrity": "sha512-hD0rOPfYWOMpVirTACt4/nK8mC55La12K5fY1ij8HAdfQakD62M+H4o4tpfKzVGLgRDTuk3vjA4GqGXXCeFbag==",
+			"dev": true,
+			"optional": true
+		},
+		"node_modules/bare-path": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.0.tgz",
+			"integrity": "sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"bare-os": "^2.1.0"
+			}
+		},
+		"node_modules/base64-js": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+			"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/bl": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+			"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+			"dev": true,
+			"dependencies": {
+				"buffer": "^5.5.0",
+				"inherits": "^2.0.4",
+				"readable-stream": "^3.4.0"
+			}
+		},
+		"node_modules/buffer": {
+			"version": "5.7.1",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+			"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.1.13"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -375,18 +518,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/chokidar/node_modules/picomatch": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
-			"engines": {
-				"node": ">=8.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/jonschlinkert"
-			}
-		},
 		"node_modules/chokidar/node_modules/readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -411,6 +542,53 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/chownr": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+			"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+			"dev": true
+		},
+		"node_modules/color": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+			"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+			"dev": true,
+			"dependencies": {
+				"color-convert": "^2.0.1",
+				"color-string": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=12.5.0"
+			}
+		},
+		"node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true
+		},
+		"node_modules/color-string": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+			"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+			"dev": true,
+			"dependencies": {
+				"color-name": "^1.0.0",
+				"simple-swizzle": "^0.2.2"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -434,6 +612,30 @@
 			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
 			"dev": true
 		},
+		"node_modules/decompress-response": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+			"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+			"dev": true,
+			"dependencies": {
+				"mimic-response": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/deep-extend": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+			"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+			"dev": true,
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -443,6 +645,45 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/detect-libc": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+			"integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/end-of-stream": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+			"integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+			"dev": true,
+			"dependencies": {
+				"once": "^1.4.0"
+			}
+		},
+		"node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true
+		},
+		"node_modules/expand-template": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+			"integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/fast-fifo": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+			"integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+			"dev": true
+		},
 		"node_modules/fast-glob": {
 			"version": "3.3.2",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -591,18 +832,6 @@
 				"node": ">=8.6"
 			}
 		},
-		"node_modules/fast-glob/node_modules/picomatch": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
-			"engines": {
-				"node": ">=8.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/jonschlinkert"
-			}
-		},
 		"node_modules/fast-glob/node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -668,6 +897,59 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/fs-constants": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+			"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+			"dev": true
+		},
+		"node_modules/github-from-package": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+			"integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+			"dev": true
+		},
+		"node_modules/highlight.js": {
+			"version": "11.9.0",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+			"integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/ieee754": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+			"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/imagetools-core": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/imagetools-core/-/imagetools-core-4.1.0.tgz",
+			"integrity": "sha512-GDMgj3zhQ3g6Ga3yWBSmdJC7mM8UePgHiZsVQZ8sUWgAk2UzRyGlFV5qdv0topv63vE86KaK6MmAbjVUVibOzA==",
+			"dev": true,
+			"dependencies": {
+				"sharp": "^0.32.4"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -724,6 +1006,24 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true
+		},
+		"node_modules/ini": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+			"dev": true
+		},
+		"node_modules/is-arrayish": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+			"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+			"dev": true
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -733,6 +1033,18 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+			"dev": true,
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/magic-string": {
 			"version": "0.30.7",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
@@ -751,12 +1063,183 @@
 			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
 			"dev": true
 		},
+		"node_modules/mimic-response": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+			"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/mkdirp-classic": {
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+			"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+			"dev": true
+		},
+		"node_modules/napi-build-utils": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+			"integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+			"dev": true
+		},
+		"node_modules/node-abi": {
+			"version": "3.56.0",
+			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.56.0.tgz",
+			"integrity": "sha512-fZjdhDOeRcaS+rcpve7XuwHBmktS1nS1gzgghwKUQQ8nTy2FdSDr6ZT8k6YhvlJeHmmQMYiT/IH9hfco5zeW2Q==",
+			"dev": true,
+			"dependencies": {
+				"semver": "^7.3.5"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/node-addon-api": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+			"integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
+			"dev": true
+		},
+		"node_modules/once": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+			"dev": true,
+			"dependencies": {
+				"wrappy": "1"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
 			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
 			"dev": true
 		},
+		"node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/prebuild-install": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+			"integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+			"dev": true,
+			"dependencies": {
+				"detect-libc": "^2.0.0",
+				"expand-template": "^2.0.3",
+				"github-from-package": "0.0.0",
+				"minimist": "^1.2.3",
+				"mkdirp-classic": "^0.5.3",
+				"napi-build-utils": "^1.0.1",
+				"node-abi": "^3.3.0",
+				"pump": "^3.0.0",
+				"rc": "^1.2.7",
+				"simple-get": "^4.0.0",
+				"tar-fs": "^2.0.0",
+				"tunnel-agent": "^0.6.0"
+			},
+			"bin": {
+				"prebuild-install": "bin.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/prebuild-install/node_modules/tar-fs": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+			"integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+			"dev": true,
+			"dependencies": {
+				"chownr": "^1.1.1",
+				"mkdirp-classic": "^0.5.2",
+				"pump": "^3.0.0",
+				"tar-stream": "^2.1.4"
+			}
+		},
+		"node_modules/prebuild-install/node_modules/tar-stream": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+			"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+			"dev": true,
+			"dependencies": {
+				"bl": "^4.0.3",
+				"end-of-stream": "^1.4.1",
+				"fs-constants": "^1.0.0",
+				"inherits": "^2.0.3",
+				"readable-stream": "^3.1.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/pump": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+			"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+			"dev": true,
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
+		"node_modules/queue-tick": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+			"integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
+			"dev": true
+		},
+		"node_modules/rc": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+			"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+			"dev": true,
+			"dependencies": {
+				"deep-extend": "^0.6.0",
+				"ini": "~1.3.0",
+				"minimist": "^1.2.0",
+				"strip-json-comments": "~2.0.1"
+			},
+			"bin": {
+				"rc": "cli.js"
+			}
+		},
+		"node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/sade": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -778,6 +1261,149 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/semver": {
+			"version": "7.6.0",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+			"integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^6.0.0"
+			},
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/sharp": {
+			"version": "0.32.6",
+			"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+			"integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
+			"dev": true,
+			"hasInstallScript": true,
+			"dependencies": {
+				"color": "^4.2.3",
+				"detect-libc": "^2.0.2",
+				"node-addon-api": "^6.1.0",
+				"prebuild-install": "^7.1.1",
+				"semver": "^7.5.4",
+				"simple-get": "^4.0.1",
+				"tar-fs": "^3.0.4",
+				"tunnel-agent": "^0.6.0"
+			},
+			"engines": {
+				"node": ">=14.15.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/simple-concat": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+			"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/simple-get": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+			"integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"dependencies": {
+				"decompress-response": "^6.0.0",
+				"once": "^1.3.1",
+				"simple-concat": "^1.0.0"
+			}
+		},
+		"node_modules/simple-swizzle": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+			"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+			"dev": true,
+			"dependencies": {
+				"is-arrayish": "^0.3.1"
+			}
+		},
+		"node_modules/streamx": {
+			"version": "2.16.1",
+			"resolved": "https://registry.npmjs.org/streamx/-/streamx-2.16.1.tgz",
+			"integrity": "sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==",
+			"dev": true,
+			"dependencies": {
+				"fast-fifo": "^1.1.0",
+				"queue-tick": "^1.0.1"
+			},
+			"optionalDependencies": {
+				"bare-events": "^2.2.0"
+			}
+		},
+		"node_modules/string_decoder": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+			"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+			"dev": true,
+			"dependencies": {
+				"safe-buffer": "~5.2.0"
+			}
+		},
+		"node_modules/strip-json-comments": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+			"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/svelte": {
 			"version": "4.2.10",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.10.tgz",
@@ -925,12 +1551,6 @@
 				"wrappy": "1"
 			}
 		},
-		"node_modules/svelte-check/node_modules/inherits": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"dev": true
-		},
 		"node_modules/svelte-check/node_modules/min-indent": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -952,15 +1572,6 @@
 				"node": "*"
 			}
 		},
-		"node_modules/svelte-check/node_modules/minimist": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/svelte-check/node_modules/mkdirp": {
 			"version": "0.5.6",
 			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -993,15 +1604,6 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
-		"node_modules/svelte-check/node_modules/once": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-			"dev": true,
-			"dependencies": {
-				"wrappy": "1"
-			}
-		},
 		"node_modules/svelte-check/node_modules/path-is-absolute": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -1166,11 +1768,14 @@
 				}
 			}
 		},
-		"node_modules/svelte-check/node_modules/wrappy": {
+		"node_modules/svelte-highlight": {
-			"version": "1.0.2",
+			"version": "7.6.0",
-			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-7.6.0.tgz",
-			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+			"integrity": "sha512-J9X1d07iMIKZMAqNAhlkjLX/FS+7R2lPrqVul7i+EleVZIOYvBhtx7ES62bc661a70nKNOS05yr9JAvyQPPOIA==",
-			"dev": true
+			"dev": true,
+			"dependencies": {
+				"highlight.js": "11.9.0"
+			}
 		},
 		"node_modules/svelte-hmr": {
 			"version": "0.15.3",
@@ -1184,6 +1789,11 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-media-queries": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/svelte-media-queries/-/svelte-media-queries-1.6.2.tgz",
+			"integrity": "sha512-SMz6od/vIeZEGlc4P0HKJK4G0fZotuwFhCSpBQaPqh75h6sL6sNf+4+IjbegFKXbP7b+SOfyzVOIMXTr8jynkA=="
+		},
 		"node_modules/svelte/node_modules/@ampproject/remapping": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -1226,12 +1836,6 @@
 			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
 			"dev": true
 		},
-		"node_modules/svelte/node_modules/@types/estree": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-			"dev": true
-		},
 		"node_modules/svelte/node_modules/acorn": {
 			"version": "8.11.3",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1347,6 +1951,43 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/tar-fs": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
+			"integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+			"dev": true,
+			"dependencies": {
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
+			},
+			"optionalDependencies": {
+				"bare-fs": "^2.1.1",
+				"bare-path": "^2.1.0"
+			}
+		},
+		"node_modules/tar-stream": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+			"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+			"dev": true,
+			"dependencies": {
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
+			}
+		},
+		"node_modules/tunnel-agent": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+			"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+			"dev": true,
+			"dependencies": {
+				"safe-buffer": "^5.0.1"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/typescript": {
 			"version": "5.3.3",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
@@ -1360,6 +2001,12 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"dev": true
+		},
 		"node_modules/vite": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.1.2.tgz",
@@ -1415,6 +2062,19 @@
 				}
 			}
 		},
+		"node_modules/vite-imagetools": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-5.0.8.tgz",
+			"integrity": "sha512-oFNfc58iLz1lHFsIKQy+wp0RNcZjiaDeHYTexYowpf4RYx9tZ97eWEcw8lQ1jDT8AnOso6XZi5iGjLNAeTR9Tw==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.2",
+				"imagetools-core": "^4.0.5"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/vite/node_modules/@esbuild/aix-ppc64": {
 			"version": "0.19.12",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@@ -1952,12 +2612,6 @@
 				"win32"
 			]
 		},
-		"node_modules/vite/node_modules/@types/estree": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-			"dev": true
-		},
 		"node_modules/vite/node_modules/esbuild": {
 			"version": "0.19.12",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
@@ -2110,6 +2764,18 @@
 					"optional": true
 				}
 			}
+		},
+		"node_modules/wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+			"dev": true
+		},
+		"node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+			"dev": true
 		}
 	}
 }

package.json

@@ -14,10 +14,15 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@zerodevx/svelte-img": "^2.1.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"svelte-highlight": "^7.6.0",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"svelte-media-queries": "^1.6.2"
+	}
 }

src/app.html

@@ -12,7 +12,6 @@
 		%sveltekit.head%
 
 	</head>
-	<body data-sveltekit-preload-data="hover">
+
-		<div style="display: contents">%sveltekit.body%</div>
+	<div style="display: contents">%sveltekit.body%</div>
-	</body>
 </html>

src/comps/Utils/HorizonalStack.svelte

@@ -0,0 +1,10 @@
+<div class="flex-start">
+    <slot></slot>
+</div>
+
+<style>
+    .flex-start{
+        display: flex;
+        justify-items: start;
+    }
+</style>

src/comps/Utils/VerticalStack.svelte

@@ -0,0 +1,4 @@
+<!-- Just used for ease of read -->
+<div>
+    <slot></slot>
+</div>

src/comps/timeline/timeline.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import TimelineItem from "./timelineItem.svelte";
+
+</script>
+
+<ul>
+    {#each {length: 3} as _, i}
+    <li>
+        <TimelineItem title="Item {i}"/>
+    </li>
+    {/each}
+</ul>

src/comps/timeline/timelineItem.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import HorizonalStack from "../Utils/HorizonalStack.svelte";
+    import Img from '@zerodevx/svelte-img'
+    import VerticalStack from "../Utils/VerticalStack.svelte";
+
+    // Set these when using the component
+    export let date: string = "null";
+    export let imagePath: string = "null";
+    export let title: string = "null";
+    export let desc: string = "null";
+</script>
+
+<div>
+    <title>{title}</title>
+    <HorizonalStack>
+        {#if imagePath !== "null"}
+            <Img src={imagePath}/>
+        {/if}
+        <VerticalStack>
+            
+        </VerticalStack>
+    </HorizonalStack>
+</div>
+
+<style>
+
+</style>

src/lib/IO/Button.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { ButtonType } from "$lib/IO/ButtonType.ts";
+    import { onMount } from "svelte";
+
+    export let href : string = "#";
+    export let type : ButtonType = ButtonType.Primary;
+    let cssName : string;
+
+    const buttonTypeColors = {
+        [ButtonType.Primary]: '--primary',
+        [ButtonType.Secondary]: '--secondary',
+        [ButtonType.Accent]: '--accent',
+    };
+
+    onMount(() => {
+        cssName = buttonTypeColors[type];
+    });
+</script>
+
+<a href={href} class="button" style="--button-color: var({cssName});">
+    <div class="content">
+        <slot name="content">
+            Click Me!
+        </slot>
+    </div>
+</a>
+
+<style>
+    .button {
+        white-space: nowrap;
+        border-radius: 6px;
+        border: none;
+        background-color: var(--button-color);
+        text-decoration: none;
+
+        transition: transform 100ms ease-in-out;
+        transform: translate(0, 0);
+
+        display: flex;
+        justify-content: center;
+        font-size: 1.5em;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
+        padding: 0.8em 4em;
+    }
+
+    .button:hover {
+        transition: transform 100ms ease-in-out;
+        transform: translate(0, -5px);
+
+        cursor: pointer;
+
+        filter: brightness(130%);
+    }
+
+    .content {
+        width: 100%;
+        height: 100%;
+
+        color: var(--text1);
+
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
+</style>

src/lib/IO/ButtonType.ts

@@ -0,0 +1,5 @@
+export enum ButtonType {
+    Primary,
+    Secondary,
+    Accent
+}

src/lib/index.js

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

src/lib/posts/NewsCard.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    export let post_url : string = '404';
+    export let thumbnail_url : string = '/favicon.png';
+    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
+    export let title : string = '<title>';
+    export let summary : string = '<summary>';
+    export let creation_date : string = '<date>';
+
+    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
+</script>
+
+<div class="news-card">
+    <a href=/post/{post_url}>
+        <div class="thumbnail">
+            <img src={thumbnail_url} alt={thumbnail_alt}/>
+        </div>
+        <div class="content">
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+            <p id="date">
+                {human_creation_date.getDate()}
+                {monthNames[human_creation_date.getMonth()]}
+                {human_creation_date.getFullYear()}
+            </p>
+        </div>
+    </a>
+</div>
+
+<style>
+    a {
+        text-decoration: none;
+
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+    }
+
+    .thumbnail > img {
+        object-fit: cover;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+
+        width: 150px;
+        height: auto;
+    }
+
+    .content {
+        flex-shrink: 2;
+
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    #title {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text3);
+    }
+
+    #date {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text4);
+    }
+
+</style>

src/lib/posts/NewsVerticalCard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    export let post_url : string = '404';
+    export let thumbnail_url : string = '/favicon.png';
+    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
+    export let title : string = '<title>';
+    export let summary : string = '<summary>';
+    export let creation_date : string = '<date>';
+
+    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
+</script>
+
+<div class="news-card">
+    <a href={post_url}>
+        <div class="thumbnail">
+            <img src={thumbnail_url} alt={thumbnail_alt}/>
+        </div>
+        <div class="content">
+            <p id="date">
+                {human_creation_date.getDate()}
+                {monthNames[human_creation_date.getMonth()]}
+                {human_creation_date.getFullYear()}
+            </p>
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+        </div>
+    </a>
+</div>
+
+<style>
+    .news-card {
+        flex: 0 0 300px;
+    }
+
+    a {
+        min-width: 100%;
+        text-decoration: none;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    .thumbnail > img {
+        object-fit: cover;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+
+        min-width: 100%;
+        aspect-ratio: 16 / 9;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    #title {
+        font-size: 22px;
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text3);
+    }
+
+    #date {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text4);
+    }
+</style>

src/lib/posts/ShowcaseNewsCard.svelte

@@ -0,0 +1,78 @@
+<script>
+    export let post_url = '404';
+    export let thumbnail_url = '/favicon.png';
+    export let thumbnail_alt = 'Picture describting the deprived devs logo';
+    export let title = '<title>';
+    export let summary = '<summary>';
+    export let creation_date = 1710006969;
+
+    const monthNames = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
+</script>
+
+<div class="news-card">
+    <a href=/post/{post_url} >
+        <div title={thumbnail_alt} class="thumbnail" style="background-image: url({thumbnail_url});">
+        </div>
+        <div class="content">
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+            <p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
+        </div>
+    </a>
+</div>
+
+<style>
+    a {
+        text-decoration: none;
+    }
+
+    .news-card {
+        display: inline-flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .news-card h3 {
+        color: var(--text1);
+        margin: 0px;
+        font-size: 22px;
+    }
+
+    .thumbnail {
+        aspect-ratio: 16 / 9;
+        background-size: cover;
+        background-position: center;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+        margin-bottom: 15px;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+
+        gap: 10px;
+    }
+
+    #title {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text1);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #date {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text4);
+    }
+</style>

src/routes/+layout.server.ts

@@ -0,0 +1,19 @@
+/*
+    * Provides post summaries to all pages. That means every page can access summaries
+    * for all posts on the website.
+*/
+
+import { type Post, posts } from './posts/posts_data';
+
+export function load() {
+    let summaries : Post[] = [];
+
+    // Sort by newest news first
+    posts.sort((a, b) => b.creation_date - a.creation_date);
+
+    posts.forEach((post) => {
+        summaries.push(post);
+    });
+
+    return { summaries };
+}

src/routes/+layout.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+    import { fly } from 'svelte/transition';
+    import MediaQuery from 'svelte-media-queries';
+
+    const footerCollapseThreshold : string = '1000px';
+    const headerCollapseThreshold : string = '1000px';
+    let footerCollapse : boolean;
+    let headerCollapse : boolean;
+
+    let navbarHidden : boolean = true;
+
+    function resetNavBar() {
+        navbarHidden = true;
+    }
+</script>
+
+<!-- Detect mobile -->
+<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
+<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
+
+<!-- Nav bar -->
+<header>
+    <div class="nav-bar">
+        {#if !headerCollapse}
+            <div class="desktop">
+                <a href="/" class="nav-head">
+                    <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
+                    <h3 id="logo-text">The Deprived Devs</h3>
+                </a>
+                <div class="nav-spacer" />
+                <a href="/">Home</a>
+                <a href="/games">Games</a>
+                <a href="/posts">Blog</a>
+                <a href="/about">About</a>
+            </div>
+        {:else}
+            <div class="collapsed">
+                    <a on:click={resetNavBar} href="/" class="nav-head">
+                        <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
+                        <h3 id="logo-text">The Deprived Devs</h3>
+                    </a>
+                    <div class="nav-spacer" />
+                    <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
+                        <img src="/images/icons/hamburger_menu.svg" alt="Toggle Navigation Bar" />
+                    </button>
+            </div>
+            {#if !navbarHidden}
+                <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
+                    <a on:click={resetNavBar} href="/">Home</a>
+                    <a on:click={resetNavBar} href="/games">Games</a>
+                    <a on:click={resetNavBar} href="/posts">Blog</a>
+                    <a on:click={resetNavBar} href="/about">About</a>
+                </div>
+            {/if}
+        {/if}
+    </div>
+</header>
+
+<!-- Page content -->
+<slot />
+
+<!-- About footer -->
+<footer>
+    <div class="about-container">
+        <div class="credits">
+            <span>© 2023-2024</span>
+            <br>
+            <span>Benjamin Dreyer</span>
+            <br>
+            <span>Oliver Schwenger</span>
+            <br>
+            <span>Sylvester Junge</span>
+            <br>
+            <span>Zhentao Wei</span>
+            <br>
+            <br>
+            <span>Website <a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website" target="_blank">source code</a></span>
+        </div>
+        <div>
+            <h3>About Us</h3>
+            <a href="/about">About</a>
+        </div>
+        <div class="contact">
+            <h3>Contact</h3>
+            <a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
+                <img src="/images/icons/discord.svg" alt="Discord"/>
+                <span>Discord</span>
+            </a>
+        </div>
+    </div>
+</footer>
+
+
+<style>
+    /* Nav bar. */
+    header {
+        display: flex;
+        justify-content: center;
+    }
+
+    header a {
+        text-decoration: none;
+    }
+
+    .nav-bar {
+        width: 100%;
+        max-width: 1400px;
+    }
+
+    .desktop {
+        width: 100%;
+        display: flex;
+        gap: 30px;
+    }
+
+    .collapsed {
+        width: 100%;
+        display: flex;
+    }
+
+    #toggle-nav {
+        background: transparent;
+        border: none;
+    }
+
+
+    .nav-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        align-items: center;
+    }
+
+    .nav-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    #logo-link {
+        width: 64px;
+        aspect-ratio: 1 / 1;
+    }
+
+    #logo-text {
+        font-size: 24px;
+        color: var(--text2);
+        font-family: var(--title-font);
+        margin: 0;
+
+        min-width: 200px;
+    }
+
+    .nav-spacer {
+        width: 100%;
+    }
+
+    header a {
+        display: flex;
+        align-items: center;
+
+        font-size: 22px;
+        font-family: var(--title-font);
+        color: var(--text2);
+    }
+
+    /* Footer. */
+    footer {
+        margin-top: 50px;
+        padding: 25px 0;
+        background-color: var(--background1);
+
+        height: 100%;
+
+        display: flex;
+        justify-content: center;
+    }
+
+    .about-container {
+        width: 80%;
+        height: 100%;
+
+        color: var(--text2);
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+    }
+
+    .about-container > div {
+        align-items: center;
+        text-align: center;
+    }
+
+    .credits {
+        line-height: 2;
+    }
+
+    .contact {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .social {
+        display: flex;
+        align-content: center;
+        gap: 10px;
+    }
+
+    .social > img {
+        width: 24px;
+    }
+
+    footer h3 {
+        margin-top: 0px;
+        color: var(--text2);
+    }
+
+    footer a {
+        color: var(--text2);
+        text-decoration-line: underline;
+    }
+
+    a:hover {
+        filter: brightness(130%);
+    }
+</style>
+
+{#if footerCollapse}
+    <style>
+        .about-container {
+            flex-direction: column;
+            justify-content: center !important;
+            gap: 25px;
+        }
+    </style>
+{/if}
+
+{#if headerCollapse}
+    <style>
+
+    </style>
+{/if}

src/routes/+page.svelte

@@ -1,17 +1,156 @@
+<script lang="ts">
+    import MediaQuery from 'svelte-media-queries';
+    import NewsCard from '$lib/posts/NewsCard.svelte';
+    import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
+    import Button from '$lib/IO/Button.svelte';
+    import { ButtonType } from '$lib/IO/ButtonType.ts';
+    import Timeline from '../comps/timeline/timeline.svelte';
+
+    export let data; // <- contains post data
+
+    $: most_recent_post = data.summaries[0];
+
+    const mobileThreshold : string = '1000px';
+    let mobile : boolean;
+    const post_show_count : number = 3;
+</script>
+
+<!-- Detect mobile -->
+<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
+
 <div class="main-title">
     <h1>The Deprived Devs</h1>
 </div>
 
 
+<section id="news-section">
+    <header id="news-header">
+        <h1>Recent News</h1>
+    </header>
+    <div class="news-container">
+        <!-- The newest blog post being showcased -->
+        <div class="showcase">
+            <ShowcaseNewsCard
+                thumbnail_url={most_recent_post.cover_img}
+                thumbnail_alt={most_recent_post.cover_alt}
+                post_url={most_recent_post.url}
+                title={most_recent_post.title}
+                summary={most_recent_post.summary}
+                creation_date={most_recent_post.creation_date}
+            />
+        </div>
+
+        <div class="news-list">
+            {#each data.summaries.slice(1, post_show_count) as summary}
+                <NewsCard
+                    thumbnail_url={summary.cover_img}
+                    thumbnail_alt={summary.cover_alt}
+                    post_url={summary.url}
+                    title={summary.title}
+                    summary={summary.summary}
+                    creation_date={summary.creation_date}
+                />
+            {/each}
+        </div>
+    </div>
+    <footer id="news-footer">
+        <div class="dummy"/>
+        <div id="more-posts">
+            <Button href="/posts" type={ButtonType.Primary}>
+                <span slot="content">More News</span>
+            </Button>
+        </div>
+    </footer>
+</section>
+
+<Timeline/>
+
 <style>
+    #news-section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        transition-duration: 500ms;
+        transition-property: width;
+        width: 80%;
+        max-width: 1400px;
+        margin-inline: auto;
+    }
+
+    #news-header {
+        font-size: min(8vw, 36px);
+        margin-right: auto;
+    }
+
+    .news-container {
+        display: flex;
+        flex-direction: row;
+        gap: 25px;
+
+        width: 100%;
+        align-items: left;
+    }
+
+    .news-list {
+        display: flex;
+        flex-direction: column;
+
+        gap: 20px;
+    }
+
+    #news-footer {
+        width: 100%;
+        display: flex;
+
+        margin-top: 25px;
+    }
+
+    .dummy {
+        width: 100%;
+    }
+
+    #more-posts {
+        flex-grow: 1;
+        min-width: 10em;
+    }
+
     .main-title {
-        font-family: "CozetteVector";
+        color: var(--text1);
         margin: 0 auto;
         width: 80%;
         text-align: center;
     }
 
     .main-title > h1 {
-        font-size: 4.5vw; /* Change if title changes */
+        font-size: 9vw; /* Change if title changes */
+    }
+
+    .main-title {
+        font-family: var(--title-font);
+        color: var(--text1);
     }
 </style>
+
+{#if mobile}
+    <style>
+        #news-section {
+            transition-duration: 500ms;
+            transition-property: width;
+            width: 90% !important;
+        }
+        .news-container {
+            flex-direction: column !important;
+        }
+
+        .dummy {
+            width: 0% !important;
+        }
+
+        /* #more-posts { */
+        /*     flex-grow: 1 !important; */
+        /* } */
+
+    </style>
+{/if}
+

src/routes/games/+page.svelte

@@ -0,0 +1 @@
+WIP

src/routes/post/+layout.svelte

@@ -0,0 +1,92 @@
+<!-- Layout for posts -->
+<script lang="ts">
+    import { type BlogData } from './+layout';
+
+    export let data : BlogData
+
+    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+    function humanDate(date : Date) : string {
+        return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
+    }
+</script>
+
+<article>
+    <div class="body">
+        <header>
+            <img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} />
+            <h3 id="title">{data.post.title}</h3>
+            <div class="dates">
+                <span class="date">Created {humanDate(new Date(+data.post.creation_date * 1000))}</span>
+                <span class="date">Last Modified {humanDate(new Date(+data.post.modification_date * 1000))}</span>
+            </div>
+        </header>
+        <div class="content">
+            <slot />
+        </div>
+    </div>
+</article>
+
+
+<style>
+    article {
+        margin-top: 25px;
+        margin-inline: auto;
+        max-width: 1000px;
+
+        /* background: var(--background1); */
+    }
+
+    header {
+        display: flex;
+        flex-direction: column;
+
+        margin-bottom: 50px;
+    }
+
+    #blog-cover-img {
+        aspect-ratio: 16 / 9;
+        max-width: 100%;
+
+        border-radius: 0.5rem;
+    }
+
+    #title {
+        font-family: var(--title-font);
+        font-size: 36px;
+        margin: 0;
+    }
+
+    .dates {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .date {
+        color: var(--text3);
+    }
+
+    .body {
+        margin-inline: auto;
+        max-width: 1200px;
+        padding: 25px;
+    }
+
+    .content {
+        line-height: 2;
+        font-size: 18px;
+        text-rendering: optimizeLegibility;
+    }
+
+    /* CSS for posts - child rooutes. */
+    img {
+        width: 100%;
+    }
+
+    :global(a) {
+        color: var(--text1);
+        text-decoration-line: underline;
+    }
+</style>

src/routes/post/+layout.ts

@@ -0,0 +1,17 @@
+import { posts, type Post } from '../posts/posts_data';
+
+export interface BlogData {
+    summaries: Post[],
+    post: Post
+}
+
+export async function load({ url, parent }) : Promise<BlogData> {
+    const { summaries } = await parent();
+    const websiteUrl = url.pathname.split('/');
+    const windowUrl = websiteUrl.pop() || websiteUrl.pop(); // Handle trailing /
+
+    return {
+        summaries: summaries,
+        post: posts.filter((post) => post.url == windowUrl)[0],
+    };
+}

src/routes/post/+page.server.js

@@ -1 +0,0 @@
-

src/routes/post/Post.svelte

@@ -0,0 +1,10 @@
+<div class="post-container">
+    <div class="post-header">
+        <slot name="title" />
+        <slot name="creation-date" />
+        <slot name="modification-date" />
+
+        <!-- the post content goes in this slot -->
+        <slot />
+    </div>
+</div>

src/routes/post/folder-icons/+page.svelte

@@ -0,0 +1,2 @@
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+

src/routes/post/git-bisecting/+page.svelte

@@ -0,0 +1,66 @@
+<script>
+    import Highlight from "svelte-highlight";
+    import { shell } from "svelte-highlight/languages";
+    import obsidian from "svelte-highlight/styles/obsidian";
+</script>
+
+<svelte:head>
+    {@html obsidian}
+</svelte:head>
+
+<p>
+Finding the specific commit that introduced a bug in your code can be frustrating,
+especially in big projects with a lot of commits. Git bisecting is a method
+used to quickly find which commit is the culprit. Git bisect works by you specifying
+a so called 'bad' commit where you know the bug occurs and a commit where you know the
+bug doesn't occur. Afterwards git will binary search it's way to find the commit
+introducing the bug.
+</p>
+<p>
+Suppose we've the following git history:
+</p>
+
+<img src="/images/posts/git-bisecting/bisect_problem.png" alt="Showing a git history, where on the left there is a 'good' commit with a couple of commits between the current commit on the right"/>
+<p>
+It could potentially contain many more commits between the known 'good' commit and the
+current one. Somewhere in the commits 1, 2, 3, 4 or the current one, a bug was
+introduced. One way to find the specific commit that introduced the bug, could
+be to check each commit starting from commit 1 then 2 then 3 ... and so on.
+This is known as a linear search, and would take very long if there are a lot
+of commits between the bad and the current.
+</p>
+<p>
+Instead git bisect comes to the rescue. Git bisect performs a
+<a href="https://en.wikipedia.org/wiki/Binary_search_algorithm" target="_blank">binary search</a>,
+which is much faster.
+To use git bisect, you must tell git to start bisecting:
+</p>
+<Highlight language={shell} code="$ git bisect start" />
+<p>
+Afterwards we mark the 'bad' commit - any commit we know the bug occurs in. In this example
+the current commit that we know is bad have the commit hash <code>c26cf8a</code>, so
+we mark the commit bad:
+</p>
+<Highlight language={shell} code="$ git bisect bad c26cf8a" />
+<p>
+After that we mark a previous commit that we know the bug doesn't occur in. In this
+example it's the 'good' commit (se picture above), which has a commit hash of <code>b34ec52</code>
+</p>
+<Highlight language={shell} code="$ git bisect good b34ec52" />
+<p>
+Now git will automatically checkout a commit somewhere in between the good and bad commit.
+Your job is now to re-build your project and test if the bug occurs. If the bug
+<b>doesn't</b> occur you report it to git:
+</p>
+<Highlight language={shell} code="$ git bisect good" />
+<p>
+However if it does occur you mark it bad:
+</p>
+<Highlight language={shell} code="$ git bisect bad" />
+<p>
+You continue to do this until git has tracked down the first bad commit, ie. the
+commit that introduced the bug.
+</p>
+
+<h2>Resources</h2>
+Git bisect man page: <a href="https://git-scm.com/docs/git-bisect">https://git-scm.com/docs/git-bisect</a>

src/routes/posts/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import { type Post } from './posts_data';
+    import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';
+
+    export let data; // <- contains post data
+
+    let search : string;
+    $: regex = search ? new RegExp(search, 'i') : null;
+    $: matches = (item : Post) =>
+        regex ? regex.test(item.title) || regex.test(item.summary) : true;
+    $: matched_posts = data.summaries.filter(matches);
+</script>
+
+<div class="head">
+    <header>
+        <h1>Blog Posts</h1>
+        <input id="search" placeholder="Search Blog Posts" bind:value={search} />
+    </header>
+</div>
+
+<div class="list">
+    {#if matched_posts.length == 0}
+        <span>No Matches</span>
+    {/if}
+    {#each matched_posts as summary}
+        <NewsVerticalCard
+            post_url="/post/{summary.url}"
+            title={summary.title}
+            summary={summary.summary}
+            creation_date={summary.creation_date.toString()}
+        />
+    {/each}
+</div>
+
+<style>
+    h1 {
+        font-size: 48px;
+        font-family: var(--title-font);
+    }
+    .head {
+        width: 100%;
+        background-color: var(--primary);
+    }
+
+    header {
+        display: flex;
+        flex-wrap: wrap;
+
+        align-content: center;
+        justify-content: space-around;
+
+        padding: 0 0 20px 0;
+        margin-bottom: 25px;
+    }
+
+    #search {
+        height: 40px;
+
+        align-self: center;
+        border: none;
+        border-radius: 10px;
+        font-size: 18px;
+        line-height: 2;
+        padding: 0.5rem 0.8rem;
+        margin-top: 0px;
+
+        background-color: var(--background);
+        color: var(--text1);
+    }
+
+    .list {
+        max-width: 1500px;
+        margin-inline: auto;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 25px;
+
+        justify-content: center;
+    }
+
+</style>

src/routes/posts/posts_data.ts

@@ -0,0 +1,53 @@
+// TODO: document members
+export type Post = {
+    // Required
+    url : string,
+    cover_img : string,
+    cover_alt : string,
+    title: string,
+    summary : string,
+    creation_date : number
+    modification_date: number,
+
+    // Optional
+    // TODO: author?
+}
+
+export const posts : Post[] = [
+    {
+        url: 'git-bisecting',
+        cover_img: '/images/posts/git-bisecting/thumbnail.png',
+        cover_alt: 'Photo of a bug',
+        title: 'Tracking down bugs in your code — using git bisect',
+        summary: 'Track down which specific change introduced a bug using the binary search tool provided by git.',
+        creation_date: 1709907213,
+        modification_date: 1709907213,
+    },
+    {
+        url: 'folder-icons',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Image of folder icons being used in the editor',
+        title: 'Amazing Icons for Folders in Unity!',
+        summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
+        creation_date: 1708382491,
+        modification_date: 1708382491,
+    },
+    {
+        url: 'lorem',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
+        title: 'Lorem Ipsum !!',
+        summary: 'This is a nice exploanation on lorem ipsum latin',
+        creation_date: 1708382491,
+        modification_date: 1708382491,
+    },
+    {
+        url: 'lorem1',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
+        title: 'Idk some arcticle bruh!',
+        summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
+        creation_date: 1708558377,
+        modification_date: 1708558377,
+    },
+];

src/routes/sveske/+page.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import ProjectEntry from "./lib/ProjectEntry.svelte";
+</script>
+
+<div class="content">
+    <h1>Benjamin's portfolie for Informatik</h1>
+    <p>
+    Forneden kan ses en række projekter som er blevet lavet i Informatik C og efterfølgende Informatik B.
+    </p>
+    <div class="projects">
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/appLab/thumb.png"}
+            thumbnail_alt={"App Lab"}
+            download={"/portfolios/sveske/appLab/applab_rapport.pdf"}
+            title={"1.G - App Lab: Idle spil i browseren"}
+            summary={"Vi udviklede et idle spil i App Lab. Brugte JavaScript til at programmere spillet."}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/teachable_machine/thumb.png"}
+            thumbnail_alt={"Teachable Machine"}
+            download={"/portfolios/sveske/teachable_machine/teachable_machine_rapport.pdf"}
+            title={"1.G - Teachable Machine: Håndtegns detektor"}
+            summary={"I dette projekt udarbejde vi en teachable machine model til at detektere forskellige håndtegn"}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/firebase/thumb.png"}
+            thumbnail_alt={"Firebase"}
+            download={"/portfolios/sveske/firebase/firebase_rapport.pdf"}
+            title={"1.G - Firebase: Netværk scoreboard i Unity"}
+            summary={"Med brug af Firebase udviklede vi et scoreboard som synkronisere med en Firebase Data Store. Scoreboardet blev implementeret i et tidligere spil udviklet i Teknologi"}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/the_red_paper/thumb.png"}
+            thumbnail_alt={"The Red Paper"}
+            download={"/portfolios/sveske/the_red_paper/the_red_paper_rapport.pdf"}
+            title={"2.G - HTML: Hjemmeside udviklet ud fra gestalt lovene"}
+            summary={"Udviklede en klon af \"Den Blå Avis\", som forsøger at demonstrere en række af de forskellige gestaltlove"}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/makeymakey/thumb.png"}
+            thumbnail_alt={"MakyeMakey"}
+            download={"/portfolios/sveske/makeymakey/makeymakey_rapport.pdf"}
+            title={"2.G - MakeyMakey: Installation som spiller Minecraft lyde i en af skolens gange"}
+            summary={"Skulle lave en interresant installation til en lokation på skolen. Vi udviklede en sensor, som detekterede når en person gik ind på en af skolens gange med makeymakey'en og spillede grotte lyde fra Minecraft"}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/hmi/thumb.png"}
+            thumbnail_alt={"HMI"}
+            download={"/portfolios/sveske/hmi/hmi_rapport.pdf"}
+            title={"3.G - Human Machine Interface: Enhed som kan signalere brugeren hvis en person er på vej ind på brugerens værelse"}
+            summary={"Brugte M5 mikrokontrolleren til at forbinde en IR bevægelsessensor. Sensoren sender beskeder over netværket til et armbånd som er bundet om brugerens håndled"}
+        />
+        <ProjectEntry
+            thumbnail_url={"/portfolios/sveske/prolog/thumb.png"}
+            thumbnail_alt={"Prolog"}
+            download={"/portfolios/sveske/prolog/prolog_rapport.pdf"}
+            title={"3.G - Prolog: Rejseekspertsystem"}
+            summary={"Brugte prolog programmeringsproget til at lave et ekspertsystem. Specifikt kan det give anbefalinger til rejsedestinationer ud fra en række faktorer som temperatur, økonomi, aktiviter osv."}
+        />
+    </div>
+</div>
+
+<style>
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .projects {
+        margin-top: 25px;
+        display: flex;
+        flex-direction: column;
+        gap: 25px;
+
+        max-width: 1000px;
+    }
+</style>
+

src/routes/sveske/lib/ProjectEntry.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    export let download : string = '404';
+    export let thumbnail_url : string = '/favicon.png';
+    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
+    export let title : string = '<title>';
+    export let summary : string = '<summary>';
+
+</script>
+
+<div class="news-card">
+    <a href={download}>
+        <div class="thumbnail">
+            <img src={thumbnail_url} alt={thumbnail_alt}/>
+        </div>
+        <div class="content">
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+        </div>
+    </a>
+</div>
+
+<style>
+    a {
+        text-decoration: none;
+
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+    }
+
+    .thumbnail > img {
+        object-fit: cover;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+
+        width: 150px;
+        height: auto;
+    }
+
+    .content {
+        flex-shrink: 2;
+
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    #title {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text3);
+    }
+</style>

src/routes/zhen/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
+</script>
+
+<TopAnimatedBackground/>

src/routes/zhen/Comps/TopAnimatedBackground.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { Vector2 } from "./../Utils/Vector2";
+    import TopNameTextPlate from "./TopNameTextPlate.svelte";
+    //import { throttle } from "./../Utils/Throttle";
+
+    // Params
+    let mouseMoveScale: number = 0.25;
+    let targetTextLenght: number = 100;
+
+    // Site variables
+    let mousePos: Vector2;
+
+    // Element binded variables
+    let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
+
+    let windowWidth = 0;
+    let windowHeight = 0;
+
+    let screenCenter: Vector2;
+
+    let StartPageAnimated: Element | null;
+    let windowRef: Window;
+
+    function onMouseMoved(event: MouseEvent) {
+        mousePos = new Vector2(event.clientX, event.clientY);
+
+        updateAnimation(mousePos);
+    }
+
+    function updateAnimation(mousePos: Vector2) {
+        let mouseRelativePos = mousePos.Sub(screenCenter);
+        mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
+
+        //console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
+    }
+
+    onMount(() => {
+        windowRef = window;
+
+        const updateDimensions = () => {
+            windowWidth = windowRef.innerWidth;
+            windowHeight = windowRef.innerHeight;
+
+            screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
+
+            //console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
+        };
+
+        updateDimensions(); // On first pass
+
+        windowRef.addEventListener("resize", updateDimensions);
+
+        const RevertToOrigin = () => {
+            if(navigator.userAgent.search(/gecko/i)>0 && StartPageAnimated !== null){
+                StartPageAnimated.classList.add('FirefoxSmoothTranition');
+            }
+            updateAnimation(new Vector2(windowWidth/2, windowHeight/2));
+        };
+        document.documentElement.addEventListener('mouseleave', RevertToOrigin)
+
+        const RemoveFirefoxSmoothTranition = () => {
+            if(navigator.userAgent.search(/gecko/i)>0 && StartPageAnimated !== null){
+                StartPageAnimated.classList.remove('FirefoxSmoothTranition');
+            }
+        };
+        document.documentElement.addEventListener('mouseenter', RemoveFirefoxSmoothTranition)
+
+        return () => {
+            windowRef.removeEventListener("resize", updateDimensions);
+        };
+
+    });
+
+    const programmingLanguages: string[] = [
+        "C++",
+        "C#",
+        "ARDUINO",
+        "PYTHON",
+        "JAVA",
+        "JAVASCRIPT",
+        "TYPESCRIPT",
+        "HTML",
+        "CSS"
+    ];
+
+    function getRandomInt(max: number) {
+        return Math.floor(Math.random() * max);
+    }
+
+    function GrabRandomString(){
+        let outString: string = "";
+        while (outString.length < targetTextLenght) {
+            outString += programmingLanguages[getRandomInt(programmingLanguages.length)] + " ";
+        }
+
+        return outString; // At about target size
+    }
+
+</script>
+
+<svelte:window on:mousemove={onMouseMoved} />
+
+<div class="StartPageContainer">
+    <div class="TopOverlay">
+        <TopNameTextPlate/>
+    </div>
+
+    <div
+        class="StartPageAnimated"
+        id="StartPageAnimated"
+        bind:this={StartPageAnimated}
+        style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
+    >
+        {#each {length: 100} as _, i}
+
+            <span
+            class="rotate45 SkillsText"
+            >
+                {GrabRandomString()}
+            </span
+        >
+        {/each}
+    </div>
+</div>
+
+<div id="DummyDiv" class="FirefoxSmoothTranition"/>
+
+<style>
+    .StartPageContainer {
+        height: 40vh;
+
+        background-color: burlywood;
+        overflow: hidden;
+        position: relative;
+
+        justify-content: center;
+        align-items: center;
+        display: flex;
+
+        padding: 0;
+    }
+
+    .StartPageAnimated {
+        /* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */
+        background-color: #131313;
+        position: absolute;
+        height: 150vh;
+        width: 150vw;
+
+        padding: 0;
+
+        transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
+        -moz-transition: none;
+
+        justify-content: center;
+        vertical-align: middle;
+        display: flex;
+    }
+
+    .FirefoxSmoothTranition{
+        transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
+        -moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
+    }
+
+    .SkillsText{
+        font-family: 'CozetteVector';
+
+        text-align: start;
+        font-size: x-large;
+        display: flex; 
+        justify-content: center; 
+        align-items: center;
+        white-space:nowrap; 
+
+        width: 2rem;
+
+        color: rgb(66, 66, 66);
+    }
+
+    .TopOverlay {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+
+        padding: 0;
+    }
+
+    .rotate45 {
+        transform: rotate(-45deg); /* Rotate the element by 45 degrees */
+    }
+</style>

src/routes/zhen/Comps/TopNameTextPlate.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte'
+</script>
+
+<div class="container">
+    <div style="flex-grow: 1;" />
+    <div class="TextContainer">
+        <span class="NamePlateText"  >
+            Zhentao Wei
+            <br/>
+            <p class="NickNameText">Alex</p>
+        </span>
+    </div>
+    <div style="flex-grow: 2;" />
+</div>
+
+<style>
+    .container{
+        width: 100%;
+        height: 100%;
+
+        align-items: center;
+        vertical-align: middle;
+        display: flex;
+    }
+
+    .TextContainer{
+        align-items: center;
+        vertical-align: middle;
+        display: flex;
+
+        /* background-color: aliceblue; */
+        background-color: rgba(45, 45, 45, 0.645);
+        padding: 0.75rem 1rem;
+        border-radius: 20px;
+
+        backdrop-filter: blur(1px);
+    }
+
+    .NamePlateText{
+        /* font-family: 'CozetteVector'; */
+        text-align: left;
+        font-size: 5rem;
+        color: rgb(225, 225, 225);
+
+        border-left: 0.5rem solid rgb(88, 198, 82);
+        padding-left: 1rem;
+    }
+
+    .NickNameText{
+        font-size: 2rem;
+        margin: 0;
+        margin-top: -1rem;
+        
+        color: rgb(99, 99, 99);
+    }
+</style>

src/routes/zhen/Utils/Throttle.js

@@ -0,0 +1,21 @@
+export function throttle(callback, wait) {
+    let timeoutId = null;
+    let lastExecutedTime = 0;
+  
+    return function (...args) {
+      const currentTime = Date.now();
+  
+      const execute = () => {
+        lastExecutedTime = currentTime;
+        callback.apply(this, args);
+      };
+  
+      if (currentTime - lastExecutedTime >= wait) {
+        execute();
+      } else {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
+      }
+    };
+  }
+  

src/routes/zhen/Utils/Vector2.ts

@@ -0,0 +1,21 @@
+export class Vector2 {
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+
+    Add(vec2: Vector2){
+        return new Vector2(this.x + vec2.x, this.y + vec2.y);
+    }
+
+    Sub(vec2: Vector2){
+        return new Vector2(this.x - vec2.x, this.y - vec2.y);
+    }
+
+    Scale(mult: number){
+        return new Vector2(this.x * mult, this.y * mult);;
+    }
+}

static/images/icons/discord.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   fill="#000000"
+   width="800.02313"
+   height="609.78137"
+   viewBox="0 0 24.000694 18.293441"
+   role="img"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     d="m 20.317481,1.5163647 a 19.791,19.791 0 0 0 -4.885,-1.51500001 0.074,0.074 0 0 0 -0.079,0.037 c -0.21,0.375 -0.444,0.864 -0.608,1.25000001 a 18.27,18.27 0 0 0 -5.4870004,0 12.64,12.64 0 0 0 -0.617,-1.25000001 0.077,0.077 0 0 0 -0.079,-0.037 19.736,19.736 0 0 0 -4.885,1.51500001 0.07,0.07 0 0 0 -0.032,0.027 c -3.11199997,4.649 -3.96499997,9.1830003 -3.54599997,13.6600003 a 0.082,0.082 0 0 0 0.031,0.057 19.9,19.9 0 0 0 5.99299997,3.03 0.078,0.078 0 0 0 0.084,-0.028 14.09,14.09 0 0 0 1.226,-1.994 0.076,0.076 0 0 0 -0.041,-0.106 13.107,13.107 0 0 1 -1.872,-0.892 0.077,0.077 0 0 1 -0.008,-0.128 10.2,10.2 0 0 0 0.372,-0.292 0.074,0.074 0 0 1 0.077,-0.01 c 3.928,1.793 8.1800004,1.793 12.0620004,0 a 0.074,0.074 0 0 1 0.078,0.01 c 0.12,0.098 0.246,0.198 0.373,0.292 a 0.077,0.077 0 0 1 -0.006,0.127 12.299,12.299 0 0 1 -1.873,0.892 0.077,0.077 0 0 0 -0.041,0.107 c 0.36,0.698 0.772,1.362 1.225,1.993 a 0.076,0.076 0 0 0 0.084,0.028 19.839,19.839 0 0 0 6.002,-3.03 0.077,0.077 0 0 0 0.032,-0.054 c 0.5,-5.177 -0.838,-9.6740003 -3.549,-13.6600003 a 0.061,0.061 0 0 0 -0.031,-0.03 z M 8.0204806,12.476365 c -1.183,0 -2.157,-1.085 -2.157,-2.419 0,-1.3330003 0.956,-2.4190003 2.157,-2.4190003 1.21,0 2.1760004,1.096 2.1570004,2.4200003 0,1.333 -0.9560004,2.418 -2.1570004,2.418 z m 7.9750004,0 c -1.183,0 -2.157,-1.085 -2.157,-2.419 0,-1.3330003 0.955,-2.4190003 2.157,-2.4190003 1.21,0 2.176,1.096 2.157,2.4200003 0,1.333 -0.946,2.418 -2.157,2.418 z"
+     id="path1"
+     style="fill:#fdfdfd;fill-opacity:1" />
+</svg>

static/images/icons/hamburger_menu.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="20"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 28 20"
+   width="28"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><path
+     d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
+     id="path1"
+     style="fill:#ffffff;fill-opacity:1" /></svg>

static/stylesheets/global.css

@@ -6,7 +6,28 @@
     url("/fonts/CozetteVector.ttf") format("truetype");
 }
 
-body {
+html {
-    color: var(--text);
+    background: var(--background1);
-    background-color: var(--background);
+}
+
+body {
+    font-family: var(--main-font);
+    color: var(--text1); /* Default to primary text color. */
+    background-color: var(--background);
+    margin: 0;
+}
+
+a, a:link a:visited {
+    color: var(--text1);
+    text-decoration: none;
+}
+
+code {
+    font-weight: 400;
+    font-size: 0.9rem;
+    line-height: 1.3;
+    letter-spacing: .32px;
+    border-radius: .25rem;
+    padding: 0 .5rem;
+    background-color: #333333;
 }

static/stylesheets/main-theme.css

@@ -1,7 +1,13 @@
 :root {
-    --text: #ece4ee;
+    --title-font: 'CozetteVector';
-    --background: #120c13;
+    --main-font: 'Segoe UI';
-    --primary: #ff8552;
+    --text1: #fff; /* Primary text. */
-    --secondary: #6c6b44;
+    --text2: #cac9c6; /* Secondary text. */
-    --accent: #7da16a;
+    --text3: #b0afad; /* Third text color. */
+    --text4: #868584; /* Fourth text color. */
+    --background: #232222;
+    --background1: #1b1a1a;
+    --primary: #227c9d;
+    --secondary: #ffcb77;
+    --accent: #17c3b2;
 }

svelte.config.js

@@ -1,7 +1,9 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
+    preprocess: vitePreprocess(),
 	kit: {
         prerender: {
             handleHttpError: 'fail'

vite.config.js

@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { imagetools } from '@zerodevx/svelte-img/vite' // https://zerodevx.github.io/svelte-img/
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit(), imagetools()]
 });