diff --git a/package-lock.json b/package-lock.json
index 31082da..89c8a31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,21 +7,35 @@
 		"": {
 			"name": "website",
 			"version": "0.0.1",
+			"dependencies": {
+				"@fontsource/comfortaa": "^5.0.17"
+			},
 			"devDependencies": {
-				"@fontsource/comfortaa": "^5.0.16",
 				"@neoconfetti/svelte": "^1.0.0",
 				"@sveltejs/adapter-static": "^2.0.3",
 				"@sveltejs/kit": "^1.20.4",
 				"@types/cookie": "^0.5.1",
+				"@types/dateformat": "^5.0.1",
+				"@types/prismjs": "^1.26.2",
 				"@typescript-eslint/eslint-plugin": "^6.0.0",
 				"@typescript-eslint/parser": "^6.0.0",
+				"dateformat": "^5.0.3",
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.5.0",
 				"eslint-plugin-svelte": "^2.30.0",
+				"image-transmutation": "^0.1.3",
+				"mdsvex": "^0.11.0",
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.10.1",
+				"reading-time": "^1.5.0",
+				"rehype-autolink-headings": "^7.0.0",
+				"rehype-external-links": "^3.0.0",
+				"rehype-slug": "^6.0.0",
+				"sass": "^1.69.4",
+				"striptags": "^3.2.0",
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
+				"svelte-sitemap": "^2.6.0",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
 				"vite": "^4.4.2",
@@ -468,10 +482,9 @@
 			}
 		},
 		"node_modules/@fontsource/comfortaa": {
-			"version": "5.0.16",
-			"resolved": "https://registry.npmjs.org/@fontsource/comfortaa/-/comfortaa-5.0.16.tgz",
-			"integrity": "sha512-cMLfF68WhM2SRxrjvg/Ixeq53xk9LaLv1A/yWz3VuXoOMPx04NYhUlJnKDDqk1rMsjxEFyK3/MWGWlqynb0vpA==",
-			"dev": true
+			"version": "5.0.17",
+			"resolved": "https://registry.npmjs.org/@fontsource/comfortaa/-/comfortaa-5.0.17.tgz",
+			"integrity": "sha512-k4YVmoMoTva1bD3VzRH60oJTMMnbqH8AL0mJO+D6rOeO/Y6jFMOQvvwkR4Mi6zqTMzQSIzb5J/uiq5RgSp/ISw=="
 		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.13",
@@ -607,6 +620,54 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/@oozcitak/dom": {
+			"version": "1.15.10",
+			"resolved": "https://registry.npmjs.org/@oozcitak/dom/-/dom-1.15.10.tgz",
+			"integrity": "sha512-0JT29/LaxVgRcGKvHmSrUTEvZ8BXvZhGl2LASRUgHqDTC1M5g1pLmVv56IYNyt3bG2CUjDkc67wnyZC14pbQrQ==",
+			"dev": true,
+			"dependencies": {
+				"@oozcitak/infra": "1.0.8",
+				"@oozcitak/url": "1.0.4",
+				"@oozcitak/util": "8.3.8"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
+		"node_modules/@oozcitak/infra": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/@oozcitak/infra/-/infra-1.0.8.tgz",
+			"integrity": "sha512-JRAUc9VR6IGHOL7OGF+yrvs0LO8SlqGnPAMqyzOuFZPSZSXI7Xf2O9+awQPSMXgIWGtgUf/dA6Hs6X6ySEaWTg==",
+			"dev": true,
+			"dependencies": {
+				"@oozcitak/util": "8.3.8"
+			},
+			"engines": {
+				"node": ">=6.0"
+			}
+		},
+		"node_modules/@oozcitak/url": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@oozcitak/url/-/url-1.0.4.tgz",
+			"integrity": "sha512-kDcD8y+y3FCSOvnBI6HJgl00viO/nGbQoCINmQ0h98OhnGITrWR3bOGfwYCthgcrV8AnTJz8MzslTQbC3SOAmw==",
+			"dev": true,
+			"dependencies": {
+				"@oozcitak/infra": "1.0.8",
+				"@oozcitak/util": "8.3.8"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
+		"node_modules/@oozcitak/util": {
+			"version": "8.3.8",
+			"resolved": "https://registry.npmjs.org/@oozcitak/util/-/util-8.3.8.tgz",
+			"integrity": "sha512-T8TbSnGsxo6TDBJx/Sgv/BlVJL3tshxZP7Aq5R1mSnM5OcHY2dQaxLMu2+E8u3gN0MLOzdjurqN4ZRVuzQycOQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.23",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
@@ -720,12 +781,27 @@
 			"integrity": "sha512-SLg07AS9z1Ab2LU+QxzU8RCmzsja80ywjf/t5oqw+4NSH20gIGlhLOrBDm1L3PBWzPa4+wkgFQVZAjE6Ioj2ug==",
 			"dev": true
 		},
+		"node_modules/@types/dateformat": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@types/dateformat/-/dateformat-5.0.1.tgz",
+			"integrity": "sha512-mdFQYNj44kRls3iZTgW0vkMOyko70KRsxkjD6qjSdfkVZLXlIFU6w9mYd62zv2uZBYyKbYkr9Mh0EVulIvyZ3g==",
+			"dev": true
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.3.tgz",
 			"integrity": "sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==",
 			"dev": true
 		},
+		"node_modules/@types/hast": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.2.tgz",
+			"integrity": "sha512-B5hZHgHsXvfCoO3xgNJvBnX7N8p86TqQeGKXcokW4XXi+qY4vxxPSFYofytvVmpFxzPv7oxDQzjg5Un5m2/xiw==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.14",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
@@ -741,6 +817,12 @@
 				"undici-types": "~5.25.1"
 			}
 		},
+		"node_modules/@types/prismjs": {
+			"version": "1.26.2",
+			"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.2.tgz",
+			"integrity": "sha512-/r7Cp7iUIk7gts26mHXD66geUC+2Fo26TZYjQK6Nr4LDfi6lmdRmMqM0oPwfiMhUwoBAOFe8GstKi2pf6hZvwA==",
+			"dev": true
+		},
 		"node_modules/@types/pug": {
 			"version": "2.0.8",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.8.tgz",
@@ -753,6 +835,12 @@
 			"integrity": "sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==",
 			"dev": true
 		},
+		"node_modules/@types/unist": {
+			"version": "2.0.9",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.9.tgz",
+			"integrity": "sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==",
+			"dev": true
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "6.8.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.8.0.tgz",
@@ -942,6 +1030,12 @@
 				"url": "https://opencollective.com/typescript-eslint"
 			}
 		},
+		"node_modules/@ungap/structured-clone": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+			"dev": true
+		},
 		"node_modules/@vitest/expect": {
 			"version": "0.32.4",
 			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.32.4.tgz",
@@ -1162,12 +1256,48 @@
 				"dequal": "^2.0.3"
 			}
 		},
+		"node_modules/b4a": {
+			"version": "1.6.4",
+			"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+			"integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==",
+			"dev": true
+		},
+		"node_modules/bail": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+			"integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 			"dev": true
 		},
+		"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/binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1177,6 +1307,17 @@
 				"node": ">=8"
 			}
 		},
+		"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/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1199,6 +1340,30 @@
 				"node": ">=8"
 			}
 		},
+		"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/buffer-crc32": {
 			"version": "0.2.13",
 			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -1311,6 +1476,12 @@
 				"node": ">= 6"
 			}
 		},
+		"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/code-red": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -1324,6 +1495,19 @@
 				"periscopic": "^3.1.0"
 			}
 		},
+		"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",
@@ -1342,6 +1526,16 @@
 			"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/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1396,6 +1590,15 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/dateformat": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-5.0.3.tgz",
+			"integrity": "sha512-Kvr6HmPXUMerlLcLF+Pwq3K7apHpYmGDVqrxcDasBg86UcKeTSNWbEzU8bwdXnxnR44FtMhJAxI4Bov6Y/KUfA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.20"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1413,6 +1616,21 @@
 				}
 			}
 		},
+		"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-eql": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
@@ -1425,6 +1643,15 @@
 				"node": ">=6"
 			}
 		},
+		"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/deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1458,12 +1685,34 @@
 				"node": ">=8"
 			}
 		},
+		"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/devalue": {
 			"version": "4.3.2",
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.2.tgz",
 			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
 			"dev": true
 		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"dev": true,
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/diff-sequences": {
 			"version": "29.6.3",
 			"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
@@ -1497,6 +1746,15 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"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/es6-promise": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@@ -1680,6 +1938,15 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/esm": {
+			"version": "3.2.25",
+			"resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+			"integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/esm-env": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
@@ -1703,6 +1970,19 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/esprima": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+			"dev": true,
+			"bin": {
+				"esparse": "bin/esparse.js",
+				"esvalidate": "bin/esvalidate.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/esquery": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
@@ -1754,12 +2034,33 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"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/extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+			"dev": true
+		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
 			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
 			"dev": true
 		},
+		"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.1",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -1869,6 +2170,12 @@
 			"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
 			"dev": true
 		},
+		"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/fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1898,6 +2205,18 @@
 				"node": "*"
 			}
 		},
+		"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/github-slugger": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
+			"integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
+			"dev": true
+		},
 		"node_modules/glob": {
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -1998,6 +2317,65 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/hast-util-heading-rank": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+			"integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-is-element": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+			"integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-string": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
+			"integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"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/ignore": {
 			"version": "5.2.4",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2007,6 +2385,27 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/image-transmutation": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/image-transmutation/-/image-transmutation-0.1.3.tgz",
+			"integrity": "sha512-eGO1T2ed0iS2v75atisKR+hmuCFvslssUW6P0+B6mqYIJ44Ey3+LRzRQyF1ezhPZyU17jRCYEwERqSeJp1W8+A==",
+			"dev": true,
+			"dependencies": {
+				"esm": "^3.2.25",
+				"glob": "^7.1.6",
+				"minimist": "^1.2.5",
+				"sharp": "^0.32.1"
+			},
+			"bin": {
+				"image-transmutation": "bin/image-transmutation"
+			}
+		},
+		"node_modules/immutable": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+			"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+			"dev": true
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2048,6 +2447,30 @@
 			"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-absolute-url": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz",
+			"integrity": "sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"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/is-binary-path": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2099,6 +2522,18 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/is-plain-obj": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+			"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/is-reference": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
@@ -2274,6 +2709,21 @@
 			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
 			"dev": true
 		},
+		"node_modules/mdsvex": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.11.0.tgz",
+			"integrity": "sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.3",
+				"prism-svelte": "^0.4.7",
+				"prismjs": "^1.17.1",
+				"vfile-message": "^2.0.4"
+			},
+			"peerDependencies": {
+				"svelte": ">=3 <5"
+			}
+		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2296,10 +2746,22 @@
 				"node": ">=8.6"
 			}
 		},
-		"node_modules/min-indent": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+		"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/min-indent": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
 			"dev": true,
 			"engines": {
 				"node": ">=4"
@@ -2338,6 +2800,12 @@
 				"mkdirp": "bin/cmd.js"
 			}
 		},
+		"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/mlly": {
 			"version": "1.4.2",
 			"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
@@ -2392,12 +2860,36 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"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/natural-compare": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
 			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
 			"dev": true
 		},
+		"node_modules/node-abi": {
+			"version": "3.51.0",
+			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.51.0.tgz",
+			"integrity": "sha512-SQkEP4hmNWjlniS5zdnfIXTk1x7Ome85RDzHlTbBtzE97Gfwz/Ipw4v/Ryk20DWIy3yCNVLVlGKApCnmvYoJbA==",
+			"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/normalize-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -2712,6 +3204,60 @@
 				"node": ">=4"
 			}
 		},
+		"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/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -2772,6 +3318,31 @@
 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 			}
 		},
+		"node_modules/prism-svelte": {
+			"version": "0.4.7",
+			"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
+			"integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
+			"dev": true
+		},
+		"node_modules/prismjs": {
+			"version": "1.29.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+			"dev": true,
+			"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/punycode": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -2801,12 +3372,56 @@
 				}
 			]
 		},
+		"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/rc/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/react-is": {
 			"version": "18.2.0",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
 			"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
 			"dev": true
 		},
+		"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/readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -2819,6 +3434,65 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/reading-time": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+			"integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==",
+			"dev": true
+		},
+		"node_modules/rehype-autolink-headings": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.0.0.tgz",
+			"integrity": "sha512-DLskejGYHQP9v7vUW85BeYIclgfMQ1IwAMx+0lm8Sr3cME2NThgy2OdTfosmuBA68fqP5o4FK+dknpUMFvlxYQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"hast-util-heading-rank": "^3.0.0",
+				"hast-util-is-element": "^3.0.0",
+				"unified": "^11.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/rehype-external-links": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-3.0.0.tgz",
+			"integrity": "sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"hast-util-is-element": "^3.0.0",
+				"is-absolute-url": "^4.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/rehype-slug": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
+			"integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"github-slugger": "^2.0.0",
+				"hast-util-heading-rank": "^3.0.0",
+				"hast-util-to-string": "^3.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2904,6 +3578,26 @@
 				"node": ">=6"
 			}
 		},
+		"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/sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -2928,6 +3622,23 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.69.4",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.4.tgz",
+			"integrity": "sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==",
+			"dev": true,
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.5.4",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -2949,6 +3660,29 @@
 			"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
 			"dev": true
 		},
+		"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/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2976,6 +3710,60 @@
 			"integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
 			"dev": true
 		},
+		"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/sirv": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
@@ -3023,6 +3811,22 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/sprintf-js": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+			"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+			"dev": true
+		},
 		"node_modules/stackback": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -3035,6 +3839,25 @@
 			"integrity": "sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==",
 			"dev": true
 		},
+		"node_modules/streamx": {
+			"version": "2.15.1",
+			"resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.1.tgz",
+			"integrity": "sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==",
+			"dev": true,
+			"dependencies": {
+				"fast-fifo": "^1.1.0",
+				"queue-tick": "^1.0.1"
+			}
+		},
+		"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-ansi": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -3083,6 +3906,12 @@
 				"url": "https://github.com/sponsors/antfu"
 			}
 		},
+		"node_modules/striptags": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/striptags/-/striptags-3.2.0.tgz",
+			"integrity": "sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==",
+			"dev": true
+		},
 		"node_modules/supports-color": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3254,6 +4083,45 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/svelte-sitemap": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/svelte-sitemap/-/svelte-sitemap-2.6.0.tgz",
+			"integrity": "sha512-WcwsuIeo8iJFG9a5cgvXwXEGoyjk6Zowb6JmL5BbwfnFXMzakGa1+mQjthw5Ni3UV/gGbE0PgJvc7Ygir3LmFg==",
+			"dev": true,
+			"dependencies": {
+				"fast-glob": "^3.2.12",
+				"minimist": "^1.2.8",
+				"xmlbuilder2": "^3.0.2"
+			},
+			"bin": {
+				"svelte-sitemap": "index.js"
+			},
+			"engines": {
+				"node": ">= 14.17.0"
+			}
+		},
+		"node_modules/tar-fs": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+			"integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+			"dev": true,
+			"dependencies": {
+				"mkdirp-classic": "^0.5.2",
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
+			}
+		},
+		"node_modules/tar-stream": {
+			"version": "3.1.6",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
+			"integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
+			"dev": true,
+			"dependencies": {
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3315,6 +4183,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/trough": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
+			"integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/ts-api-utils": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -3333,6 +4211,18 @@
 			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
 			"dev": true
 		},
+		"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/type-check": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3403,6 +4293,104 @@
 			"integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==",
 			"dev": true
 		},
+		"node_modules/unified": {
+			"version": "11.0.3",
+			"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.3.tgz",
+			"integrity": "sha512-jlCV402P+YDcFcB2VcN/n8JasOddqIiaxv118wNBoZXEhOn+lYG7BR4Bfg2BwxvlK58dwbuH2w7GX2esAjL6Mg==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"bail": "^2.0.0",
+				"devlop": "^1.0.0",
+				"extend": "^3.0.0",
+				"is-plain-obj": "^4.0.0",
+				"trough": "^2.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unified/node_modules/@types/unist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz",
+			"integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==",
+			"dev": true
+		},
+		"node_modules/unist-util-is": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+			"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-is/node_modules/@types/unist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz",
+			"integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==",
+			"dev": true
+		},
+		"node_modules/unist-util-stringify-position": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+			"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+			"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents/node_modules/@types/unist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz",
+			"integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==",
+			"dev": true
+		},
+		"node_modules/unist-util-visit/node_modules/@types/unist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz",
+			"integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==",
+			"dev": true
+		},
 		"node_modules/uri-js": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3418,6 +4406,68 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"node_modules/vfile": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+			"integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-message": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile/node_modules/@types/unist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.1.tgz",
+			"integrity": "sha512-ue/hDUpPjC85m+PM9OQDMZr3LywT+CT6mPsQq8OJtCLiERkGRcQUFvu9XASF5XWqyZFXbf15lvb3JFJ4dRLWPg==",
+			"dev": true
+		},
+		"node_modules/vfile/node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile/node_modules/vfile-message": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+			"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vite": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
@@ -3624,6 +4674,43 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
 		},
+		"node_modules/xmlbuilder2": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/xmlbuilder2/-/xmlbuilder2-3.1.1.tgz",
+			"integrity": "sha512-WCSfbfZnQDdLQLiMdGUQpMxxckeQ4oZNMNhLVkcekTu7xhD4tuUDyAPoY8CwXvBYE6LwBHd6QW2WZXlOWr1vCw==",
+			"dev": true,
+			"dependencies": {
+				"@oozcitak/dom": "1.15.10",
+				"@oozcitak/infra": "1.0.8",
+				"@oozcitak/util": "8.3.8",
+				"js-yaml": "3.14.1"
+			},
+			"engines": {
+				"node": ">=12.0"
+			}
+		},
+		"node_modules/xmlbuilder2/node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dev": true,
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
+		"node_modules/xmlbuilder2/node_modules/js-yaml": {
+			"version": "3.14.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+			"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+			"dev": true,
+			"dependencies": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 318493d..b6b4b89 100644
--- a/package.json
+++ b/package.json
@@ -9,27 +9,43 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --plugin-search-dir . --write .",
+		"optimize-images": "image-transmutation --run --sourceFolder './build/images' --targetFolder './build/images' --inputFormats 'jpg' --inputFormats 'jpeg' --inputFormats 'png' --outputFormats 'png' --outputFormats 'webp' --outputFormats 'avif'",
+		"postbuild": "npm run optimize-images && svelte-sitemap --domain https://languagexchange.net/"
 	},
 	"devDependencies": {
-		"@fontsource/comfortaa": "^5.0.16",
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@types/cookie": "^0.5.1",
+		"@types/dateformat": "^5.0.1",
+		"@types/prismjs": "^1.26.2",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
+		"dateformat": "^5.0.3",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"image-transmutation": "^0.1.3",
+		"mdsvex": "^0.11.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
+		"reading-time": "^1.5.0",
+		"rehype-autolink-headings": "^7.0.0",
+		"rehype-external-links": "^3.0.0",
+		"rehype-slug": "^6.0.0",
+		"sass": "^1.69.4",
+		"striptags": "^3.2.0",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-sitemap": "^2.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2",
 		"vitest": "^0.32.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@fontsource/comfortaa": "^5.0.17"
+	}
 }
diff --git a/src/app.html b/src/app.html
index 6769ed5..99366b9 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,11 +2,53 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<!-- Favicon -->
+		<!-- TODO: Increase favicons r-->
+		<!--
+		<link
+			rel="apple-touch-icon"
+			sizes="180x180"
+			href="%sveltekit.assets%/favicons/apple-touch-icon.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="32x32"
+			href="%sveltekit.assets%/favicons/favicon-32x32.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="16x16"
+			href="%sveltekit.assets%/favicons/favicon-16x16.png"
+		/>
+		<link rel="manifest" href="%sveltekit.assets%/favicons/site.webmanifest" />
+		<link
+			rel="mask-icon"
+			href="%sveltekit.assets%/favicons/safari-pinned-tab.svg"
+			color="#0ca4a5"
+		/>
+		<link rel="shortcut icon" href="%sveltekit.assets%/favicons/favicon.ico" />
+		-->
+		<link rel="icon" href="%sveltekit.assets%/favicons/favicon.png" />
+		<!-- Tell browser this site is responsive -->
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<!-- Tell browser this site supports light and dark mode -->
+		<meta name="color-scheme" content="light dark" />
+		<!-- Color for browser url bar in mobile/Safari -->
+		<meta name="theme-color" media="(prefers-color-scheme: light)" content="#b28cf2" />
+		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#4612A1" />
+		<!-- Disable Google FLOC -->
+		<meta http-equiv="Permissions-Policy" content="interest-cohort=()" />
+		<script>
+			// Calling this here so that it loads as quickly as possible
+			// Avoiding a flash of light mode in case dark mode is used
+			const theme = localStorage.getItem('theme-preference') || 'auto';
+			document.firstElementChild?.setAttribute('data-theme', theme);
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+		<div id="svelte-root">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
new file mode 100644
index 0000000..f0bb660
--- /dev/null
+++ b/src/lib/components/atoms/Button.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { HttpRegex } from '$lib/utils/regex';
+
+	export let color: 'primary' | 'secondary' = 'primary';
+	export let style: 'solid' | 'understated' | 'clear' = 'solid';
+	export let size: 'small' | 'medium' | 'large' = 'medium';
+	export let href: string | undefined = undefined;
+
+	export let additionalClass: string | undefined = undefined;
+
+	const isExternalLink = !!href && HttpRegex.test(href);
+	export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self';
+	export let rel = isExternalLink ? 'noopener noreferrer' : undefined;
+
+	$: tag = href ? 'a' : 'button';
+	$: linkProps = {
+		href,
+		target,
+		rel
+	};
+</script>
+
+<svelte:element
+	this={tag}
+	{...linkProps}
+	class={['button', `style--${style}`, `size--${size}`, `color--${color}`, additionalClass].join(
+		' '
+	)}
+	data-sveltekit-preload-data
+	on:click
+	{...$$restProps}
+>
+	{#if $$slots['icon']}
+		<div class="icon">
+			<slot name="icon" />
+		</div>
+	{/if}
+	<slot />
+</svelte:element>
+
+<style lang="scss">
+	.button {
+		--main-color: red;
+		--light-color: blue;
+		--contrast-color: green;
+
+		-webkit-appearance: none;
+		appearance: none;
+		cursor: pointer;
+		text-decoration: none;
+		transition: all 0.2s ease-in-out;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 5px;
+
+		border: none;
+		border-radius: 20px;
+		font-weight: 700;
+
+		.icon {
+			width: 24px;
+			height: 24px;
+		}
+
+		&.color {
+			&--primary {
+				--main-color: var(--color--primary-rgb);
+				--light-color: var(--color--primary-tint-rgb);
+				--contrast-color: var(--color--primary-contrast);
+			}
+			&--secondary {
+				--main-color: var(--color--secondary-rgb);
+				--light-color: var(--color--secondary-tint-rgb);
+				--contrast-color: var(--color--secondary-contrast);
+			}
+		}
+
+		&.style {
+			&--solid {
+				background-color: rgb(var(--main-color));
+				color: var(--contrast-color);
+
+				&:hover {
+					box-shadow: 0px 0px 1px 7px rgba(var(--main-color), 0.3);
+				}
+			}
+			&--understated {
+				background-color: rgb(var(--light-color));
+				color: rgb(var(--main-color));
+
+				&:hover {
+					box-shadow: 0px 0px 1px 7px rgba(var(--main-color), 0.3);
+				}
+			}
+			&--clear {
+				background-color: transparent;
+				color: rgb(var(--main-color));
+
+				&:hover {
+					background-color: rgb(var(--light-color));
+				}
+			}
+		}
+
+		&.size {
+			&--small {
+				padding: 5px 10px;
+				font-size: 0.75rem;
+
+				.icon {
+					width: 20px;
+					height: 20px;
+				}
+			}
+			&--medium {
+				padding: 10px 20px;
+				font-size: 1rem;
+			}
+			&--large {
+				padding: 15px 30px;
+				font-size: 1.15rem;
+
+				.icon {
+					width: 28px;
+					height: 28px;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/atoms/Card.svelte b/src/lib/components/atoms/Card.svelte
new file mode 100644
index 0000000..ce347af
--- /dev/null
+++ b/src/lib/components/atoms/Card.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { HttpRegex } from '$lib/utils/regex';
+
+	export let additionalClass: string | undefined = undefined;
+
+	export let href: string | undefined = undefined;
+	const isExternalLink = !!href && HttpRegex.test(href);
+	export let target: '_self' | '_blank' = isExternalLink ? '_blank' : '_self';
+	export let rel = isExternalLink ? 'noopener noreferrer' : undefined;
+
+	$: tag = href ? 'a' : 'article';
+	$: linkProps = {
+		href,
+		target,
+		rel
+	};
+</script>
+
+<svelte:element
+	this={tag}
+	class="card {additionalClass}"
+	{...linkProps}
+	data-sveltekit-preload-data
+	{...$$restProps}
+>
+	{#if $$slots.image}
+		<div class="image">
+			<slot name="image" />
+		</div>
+	{/if}
+	<div class="body">
+		<div class="content">
+			<slot name="content" />
+		</div>
+		{#if $$slots.footer}
+			<div class="footer">
+				<slot name="footer" />
+			</div>
+		{/if}
+	</div>
+</svelte:element>
+
+<style lang="scss">
+	.card {
+		background: var(--color--card-background);
+		box-shadow: var(--card-shadow);
+		color: var(--color--text);
+		border-radius: 10px;
+		transition: all 0.4s ease;
+		position: relative;
+		overflow: hidden;
+		width: 100%;
+
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+
+		text-decoration: none;
+
+		&[href],
+		&[onclick] {
+			cursor: pointer;
+			&:hover {
+				box-shadow: var(--card-shadow-hover);
+				transform: scale(1.01);
+			}
+		}
+	}
+
+	.body {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 10px;
+		padding: 20px 20px;
+		flex: 1 0 50%;
+
+		.content {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+		}
+	}
+
+	.image {
+		position: relative;
+		flex: 1 0 max(50%, 330px);
+		// height: min(100%, 300px);
+		min-height: 280px;
+		max-height: 350px;
+	}
+
+	:global(.card [slot='image']) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		position: absolute;
+	}
+</style>
diff --git a/src/lib/components/atoms/Image.svelte b/src/lib/components/atoms/Image.svelte
new file mode 100644
index 0000000..08e773c
--- /dev/null
+++ b/src/lib/components/atoms/Image.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { dev } from '$app/environment';
+
+	export let src: string;
+	export let alt: string;
+	export let fullBleed: boolean | undefined = undefined;
+
+	export let formats: string[] = ['avif', 'webp', 'png'];
+	export let widths: string[] | undefined = undefined;
+
+	$: fileName = src.split('.')[0];
+
+	function buildSrcset() {
+		if (dev) return;
+
+		let srcset = '';
+
+		if (widths) {
+			for (let i = 0; i < widths.length; i++) {
+				srcset += `${fileName}-${widths[i]}.${formats[0]} ${widths[i]}w`;
+
+				if (i < widths.length - 1) {
+					srcset += ', ';
+				}
+			}
+		} else {
+			for (let i = 0; i < formats.length; i++) {
+				srcset += `${fileName}.${formats[i]}`;
+
+				if (i < formats.length - 1) {
+					srcset += ', ';
+				}
+			}
+		}
+
+		return srcset;
+	}
+</script>
+
+<img {src} {alt} loading="lazy" decoding="async" class:full-bleed={fullBleed} />
+
+<!--
+<img
+	srcset={buildSrcset()}
+	{src}
+	{alt}
+	loading="lazy"
+	decoding="async"
+	class:full-bleed={fullBleed}
+/>
+-->
+
+<style lang="scss">
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+</style>
diff --git a/src/lib/components/atoms/Logo.svelte b/src/lib/components/atoms/Logo.svelte
new file mode 100644
index 0000000..c392b36
--- /dev/null
+++ b/src/lib/components/atoms/Logo.svelte
@@ -0,0 +1,82 @@
+<script>
+	export let animated = false;
+</script>
+
+<div class="logo" class:animated>
+	<svg
+		id="logo-text"
+		width="1023.84009"
+		height="116.720268"
+		viewBox="0 0 1023.84009 116.720269"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<text xml:space="preserve" id="text" transform="translate(-278.77228,-206.83728)">
+			<tspan x="275.57227" y="292.17088" id="tspan1319">
+				<tspan style="font-size:106.667px;font-family:Comfortaa;" id="tspan1317">
+					languageXchange
+				</tspan>
+			</tspan>
+		</text>
+	</svg>
+</div>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	.logo {
+		width: auto;
+		height: 100%;
+
+		display: flex;
+		gap: 16px;
+		align-items: center;
+
+		@include for-phone-only {
+			gap: 8px;
+		}
+
+		#logo-text {
+			width: auto;
+			height: 100%;
+			max-height: 28px;
+
+			#text {
+				transition: all 0.2s ease-in-out;
+				fill: var(--color--text);
+			}
+		}
+
+		&:hover {
+			#logo-text {
+				filter: drop-shadow(0px 0px 3px var(--color--primary));
+			}
+		}
+	}
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		.animated {
+			#icon {
+				> path {
+					--text-color: var(--color--text-shade);
+					stroke-width: 2;
+					animation: svg-text-stroke 3s;
+				}
+
+				#darker {
+					> path {
+						--text-color: var(--color--text);
+						stroke-width: 2;
+						animation: svg-text-stroke 3s;
+					}
+				}
+			}
+
+			#text {
+				animation: svg-text-stroke 3s;
+				stroke-width: 2;
+				--text-color: var(--color--text);
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/atoms/SingleSparkle.svelte b/src/lib/components/atoms/SingleSparkle.svelte
new file mode 100644
index 0000000..6f1fe2f
--- /dev/null
+++ b/src/lib/components/atoms/SingleSparkle.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	export let color: string;
+	export let size: string;
+	export let style: any;
+</script>
+
+<div class="wrapper" style="top: {style.top}; left: {style.left};">
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 160 160"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M80 0C80 0 84.2846 41.2925 101.496 58.504C118.707 75.7154 160 80 160 80C160 80 118.707 84.2846 101.496 101.496C84.2846 118.707 80 160 80 160C80 160 75.7154 118.707 58.504 101.496C41.2925 84.2846 0 80 0 80C0 80 41.2925 75.7154 58.504 58.504C75.7154 41.2925 80 0 80 0Z"
+			fill={color}
+		/>
+	</svg>
+</div>
+
+<style lang="scss">
+	.wrapper {
+		position: absolute;
+		pointer-events: none;
+		display: flex;
+		z-index: 2;
+		animation: grow-and-shrink 900ms ease-in-out forwards;
+
+		svg {
+			animation: spin 900ms linear forwards;
+		}
+	}
+
+	@keyframes grow-and-shrink {
+		0% {
+			transform: scale(0);
+		}
+		50% {
+			transform: scale(1);
+		}
+		100% {
+			transform: scale(0);
+		}
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(180deg);
+		}
+	}
+</style>
diff --git a/src/lib/components/atoms/Sparkles.svelte b/src/lib/components/atoms/Sparkles.svelte
new file mode 100644
index 0000000..d0ad4bc
--- /dev/null
+++ b/src/lib/components/atoms/Sparkles.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import Sparkle from '$lib/components/atoms/SingleSparkle.svelte';
+	import type { SparkleType } from '$lib/utils/types';
+	import { onDestroy, onMount } from 'svelte';
+	const random = (min: number, max: number) => Math.floor(Math.random() * (max - min)) + min;
+
+	export let color: 'default' | 'primary' | 'secondary' = 'default';
+
+	const generateSparkle = (): SparkleType => {
+		return {
+			id: String(random(10000, 99999)),
+			createdAt: Date.now(),
+			color:
+				color === 'primary'
+					? 'var(--color--primary)'
+					: color === 'secondary'
+					? 'var(--color--secondary)'
+					: 'var(--color--yellow',
+			size: random(10, 20),
+			style: {
+				// Pick a random spot in the available space
+				top: random(-10, 80) + '%',
+				left: random(0, 100) + '%'
+			}
+		};
+	};
+
+	let sparkles: SparkleType[] = [];
+	let sparklesInterval: any;
+
+	onMount(() => {
+		sparklesInterval = setInterval(() => {
+			const now = Date.now();
+			// Create a new sparkle
+			const sparkle = generateSparkle();
+			// Clean up any "expired" sparkles
+			const nextSparkles = sparkles.filter((sparkle) => {
+				const delta = now - sparkle.createdAt;
+				return delta < 1500;
+			});
+			// Include our new sparkle
+			nextSparkles.push(sparkle);
+			sparkles = nextSparkles;
+		}, 400);
+	});
+
+	onDestroy(() => {
+		clearInterval(sparklesInterval);
+	});
+</script>
+
+<div class="sparkle-wrapper">
+	{#each sparkles as sparkle (sparkle.id)}
+		<Sparkle color={sparkle.color} size={sparkle.size.toString()} style={sparkle.style} />
+	{/each}
+	<span class="slot-wrapper">
+		<slot />
+	</span>
+</div>
+
+<style lang="scss">
+	.sparkle-wrapper {
+		position: relative;
+		display: inline-block;
+
+		.slot-wrapper {
+			position: relative;
+			z-index: 1;
+		}
+	}
+</style>
diff --git a/src/lib/components/atoms/Tag.svelte b/src/lib/components/atoms/Tag.svelte
new file mode 100644
index 0000000..024b9cf
--- /dev/null
+++ b/src/lib/components/atoms/Tag.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	export let color: 'primary' | 'secondary' = 'primary';
+</script>
+
+<div class="tag {color}">
+	<slot />
+</div>
+
+<style lang="scss">
+	.tag {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 5px;
+		padding: 5px 15px;
+		border-radius: 10px;
+		font-weight: 500;
+		font-size: 0.85rem;
+		width: fit-content;
+		white-space: nowrap;
+
+		&.primary {
+			background-color: var(--color--primary-tint);
+			color: var(--color--primary);
+		}
+		&.secondary {
+			background-color: var(--color--secondary-tint);
+			color: var(--color--secondary);
+		}
+	}
+</style>
diff --git a/src/lib/components/molecules/BlogPostCard.svelte b/src/lib/components/molecules/BlogPostCard.svelte
new file mode 100644
index 0000000..e79d505
--- /dev/null
+++ b/src/lib/components/molecules/BlogPostCard.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import Card from '$lib/components/atoms/Card.svelte';
+	import Tag from '$lib/components/atoms/Tag.svelte';
+	import Image from '../atoms/Image.svelte';
+
+	export let title: string;
+	export let coverImage: string | undefined = undefined;
+	export let excerpt: string;
+	export let slug: string;
+	export let tags: string[] | undefined;
+	export let readingTime: string | undefined = undefined;
+
+	export let showImage = true;
+</script>
+
+<Card
+	href="/{slug}"
+	target="_self"
+	additionalClass="blog-post-card {!showImage || !coverImage ? 'no-image' : ''}"
+>
+	<div class="image" slot="image">
+		{#if coverImage}
+			<Image src={coverImage} alt="Cover image of this blog post" />
+		{/if}
+	</div>
+	<div class="content" slot="content">
+		<p class="title">
+			{title}
+		</p>
+		{#if readingTime}
+			<div class="note">{readingTime}</div>
+		{/if}
+		{#if excerpt}
+			<p class="text">
+				{excerpt}
+			</p>
+		{/if}
+	</div>
+	<div class="footer" slot="footer">
+		{#if tags?.length}
+			<div class="tags">
+				{#each tags.slice(0, 2) as tag}
+					<Tag>{tag}</Tag>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</Card>
+
+<style lang="scss">
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 0px;
+		align-items: flex-start;
+	}
+
+	.title {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		font-size: 1.2rem;
+		font-family: var(--font--title);
+		font-weight: 700;
+	}
+
+	.tags {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		flex-wrap: wrap;
+	}
+
+	.note {
+		font-size: 0.8rem;
+		color: rgba(var(--color--text-rgb), 0.8);
+	}
+
+	.text {
+		margin-top: 5px;
+		font-size: 0.9rem;
+		text-align: justify;
+	}
+
+	.footer {
+		margin-top: 20px;
+	}
+
+	:global(.blog-post-card .image img) {
+		object-fit: cover;
+	}
+
+	:global(.blog-post-card.no-image > .image) {
+		display: none;
+	}
+</style>
diff --git a/src/lib/components/molecules/Callout.svelte b/src/lib/components/molecules/Callout.svelte
new file mode 100644
index 0000000..e5e451b
--- /dev/null
+++ b/src/lib/components/molecules/Callout.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import Alert from '$lib/icons/alert.svelte';
+	import Check from '$lib/icons/check.svelte';
+	import Info from '$lib/icons/info.svelte';
+
+	export let type: string | undefined = undefined;
+</script>
+
+<div class="callout-block {type ?? ''}">
+	{#if type}
+		<div class="icon-wrapper">
+			{#if type == 'info'}
+				<Info />
+			{:else if type == 'warning' || type == 'error'}
+				<Alert />
+			{:else if type == 'success'}
+				<Check />
+			{/if}
+		</div>
+	{/if}
+	<slot />
+</div>
+
+<style lang="scss">
+	.callout-block {
+		--bg-color: var(--color--page-background);
+		--accent-color: transparent;
+		--text-color: var(--color--text);
+
+		margin: 40px 0 30px;
+		padding: 25px 25px;
+		border-top-right-radius: 10px;
+		border-bottom-right-radius: 10px;
+		background: var(--bg-color);
+		color: var(--text-color);
+		border-left: 4px solid var(--accent-color);
+
+		position: relative;
+
+		.icon-wrapper {
+			position: absolute;
+			width: 50px;
+			height: 50px;
+			top: 0;
+			left: 0;
+			transform: translate(calc(-50% - 1.5px), -50%);
+			background: var(--color--post-page-background);
+			padding: 8px;
+			border-radius: 50%;
+			fill: var(--accent-color);
+			color: var(--accent-color);
+		}
+
+		&.info {
+			--bg-color: var(--color--callout-background--info);
+			--accent-color: var(--color--callout-accent--info);
+		}
+		&.warning {
+			--bg-color: var(--color--callout-background--warning);
+			--accent-color: var(--color--callout-accent--warning);
+		}
+		&.error {
+			--bg-color: var(--color--callout-background--error);
+			--accent-color: var(--color--callout-accent--error);
+		}
+		&.success {
+			--bg-color: var(--color--callout-background--success);
+			--accent-color: var(--color--callout-accent--success);
+		}
+	}
+</style>
diff --git a/src/lib/components/molecules/CodeBlock.svelte b/src/lib/components/molecules/CodeBlock.svelte
new file mode 100644
index 0000000..d63c118
--- /dev/null
+++ b/src/lib/components/molecules/CodeBlock.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	export let filename: string;
+	export let lang: string;
+	export let fullBleed: boolean | undefined = undefined;
+</script>
+
+<div class="code-block" class:full-bleed={fullBleed}>
+	{#if filename}
+		<div class="filename">{filename}</div>
+	{/if}
+	{#if lang}
+		<div class="lang">{lang}</div>
+	{/if}
+	<slot />
+</div>
+
+<style lang="scss">
+	.code-block {
+		display: block;
+		position: relative;
+		background-color: var(--color--code-background);
+		color: var(--color--code-text);
+		font-family: var(--font--mono);
+		font-size: 1rem;
+		line-height: 1.33em;
+		border-radius: 8px;
+		box-shadow: var(--card-shadow);
+
+		padding: 30px 15px;
+		margin: 30px 0;
+
+		:global(pre) {
+			overflow-x: auto;
+			scrollbar-color: var(--color--primary) var(--color--primary-tint);
+			scrollbar-width: thin;
+			padding-bottom: 5px;
+
+			&::-webkit-scrollbar {
+				height: 8px;
+			}
+			&::-webkit-scrollbar-thumb {
+				background: var(--color--primary);
+				&:hover {
+					background: var(--color--primary-shade);
+				}
+			}
+		}
+
+		.lang {
+			position: absolute;
+			right: 0;
+			top: -15px;
+			background: inherit;
+			border-radius: 8px;
+			padding: 5px 10px;
+			z-index: 2;
+			font-size: 0.85em;
+		}
+
+		.filename {
+			background: inherit;
+			border-top-left-radius: 8px;
+			border-top-right-radius: 8px;
+			margin-bottom: -2px;
+			padding: 5px 10px;
+			position: absolute;
+			left: 0px;
+			top: -15px;
+			z-index: 1;
+		}
+	}
+</style>
diff --git a/src/lib/components/molecules/FeatureCard.svelte b/src/lib/components/molecules/FeatureCard.svelte
new file mode 100644
index 0000000..45c8b69
--- /dev/null
+++ b/src/lib/components/molecules/FeatureCard.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import Card from '$lib/components/atoms/Card.svelte';
+	import Tag from '$lib/components/atoms/Tag.svelte';
+	import type { TagType } from '$lib/utils/types';
+	import Image from '../atoms/Image.svelte';
+
+	export let name: string;
+	export let description: string;
+	export let image: string;
+	export let tags: TagType[] | undefined;
+</script>
+
+<Card additionalClass="feature-card">
+	<div class="image" slot="image">
+		<Image src={image} alt="Picture describing the {name} feature" />
+	</div>
+	<div class="content" slot="content">
+		<div class="title">
+			<span>{name}</span>
+		</div>
+		<p>{description}</p>
+	</div>
+	<div class="footer" slot="footer">
+		{#if tags && tags.length > 0}
+			<div class="tags">
+				{#each tags as tag}
+					<Tag color={tag.color}>{tag.label}</Tag>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</Card>
+
+<style lang="scss">
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		align-items: flex-start;
+	}
+
+	.title {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+
+		font-size: 1.2rem;
+		font-family: var(--font--title);
+		font-weight: 700;
+	}
+
+	.tags {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		flex-wrap: wrap;
+	}
+
+	.footer {
+		margin-top: 20px;
+	}
+
+	:global(.feature-card .image img) {
+		object-fit: cover;
+	}
+</style>
diff --git a/src/lib/components/molecules/MarkerHighlight.svelte b/src/lib/components/molecules/MarkerHighlight.svelte
new file mode 100644
index 0000000..d5e55d2
--- /dev/null
+++ b/src/lib/components/molecules/MarkerHighlight.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	export let color: 'primary' | 'secondary' = 'primary';
+</script>
+
+<mark class={color}>
+	<slot />
+</mark>
+
+<style lang="scss">
+	mark {
+		--mark-color: transparent;
+
+		margin-inline: calc(0.3em * -1);
+		padding-inline: 0.3em;
+
+		background-color: transparent;
+		background-image: linear-gradient(to bottom right, transparent 50%, var(--mark-color) 50%),
+			linear-gradient(var(--mark-color), var(--mark-color)),
+			linear-gradient(to top left, transparent 50%, var(--mark-color) 50%);
+		background-size: 0.25em 1em, calc(100% - 0.25em * 2 + 1px) 1em, 0.25em 1em;
+		background-position: left center, center, right center;
+		background-repeat: no-repeat;
+		color: inherit;
+		-webkit-box-decoration-break: clone;
+		box-decoration-break: clone;
+
+		&.primary {
+			--mark-color: var(--color--primary-shade);
+		}
+		&.secondary {
+			--mark-color: var(--color--secondary-shade);
+		}
+	}
+</style>
diff --git a/src/lib/components/molecules/Socials.svelte b/src/lib/components/molecules/Socials.svelte
new file mode 100644
index 0000000..625ae85
--- /dev/null
+++ b/src/lib/components/molecules/Socials.svelte
@@ -0,0 +1,63 @@
+<script>
+	import GitHubIcon from '$lib/icons/socials/github.svelte';
+	import EmailIcon from '$lib/icons/socials/email.svelte';
+	import InstagramIcon from '$lib/icons/socials/instagram.svelte';
+	import XIcon from '$lib/icons/socials/x.svelte';
+</script>
+
+<div class="socials">
+	<a
+		href="https://www.instagram.com/langXchan"
+		target="_blank"
+		rel="noopener noreferrer"
+		title="See my Instagram profile"
+	>
+		<InstagramIcon />
+	</a>
+	<a
+		href="https://x.com/langXchan"
+		target="_blank"
+		rel="noopener noreferrer"
+		title="See my X profile"
+	>
+		<XIcon />
+	</a>
+	<a
+		href="https://github.com/languageXchange"
+		target="_blank"
+		rel="noopener noreferrer"
+		title="See my GitHub profile"
+	>
+		<GitHubIcon />
+	</a>
+	<a
+		href="mailto:info@languagexchange.net"
+		target="_blank"
+		rel="noopener noreferrer"
+		title="Send an email"
+	>
+		<EmailIcon />
+	</a>
+</div>
+
+<style lang="scss">
+	@import '../../scss/breakpoints.scss';
+	.socials {
+		display: flex;
+		align-items: center;
+		gap: 20px;
+
+		a {
+			transition: all 0.2s ease-in-out;
+			width: 24px;
+			color: var(--color--text);
+			fill: var(--color--text);
+
+			&:hover {
+				color: var(--color--primary);
+				fill: var(--color--primary);
+				filter: drop-shadow(0px 0px 3px var(--color--primary));
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/molecules/SparklingHighlight.svelte b/src/lib/components/molecules/SparklingHighlight.svelte
new file mode 100644
index 0000000..088d23a
--- /dev/null
+++ b/src/lib/components/molecules/SparklingHighlight.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Sparkles from '$lib/components/atoms/Sparkles.svelte';
+
+	export let color: 'default' | 'primary' | 'secondary' = 'default';
+	export let sparkleColor: 'default' | 'primary' | 'secondary' = 'default';
+</script>
+
+<Sparkles color={sparkleColor}><strong class={color}><slot /></strong></Sparkles>
+
+<style lang="scss">
+	strong {
+		&.primary {
+			color: var(--color--primary);
+		}
+		&.secondary {
+			color: var(--color--secondary);
+		}
+	}
+</style>
diff --git a/src/lib/components/molecules/ThemeToggle.svelte b/src/lib/components/molecules/ThemeToggle.svelte
new file mode 100644
index 0000000..375f44a
--- /dev/null
+++ b/src/lib/components/molecules/ThemeToggle.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { theme } from '$lib/stores/theme';
+
+	function toggleTheme() {
+		if ($theme === 'auto') {
+			theme.set('light');
+		} else if ($theme === 'light') {
+			theme.set('dark');
+		} else {
+			theme.set('auto');
+		}
+	}
+</script>
+
+<noscript>
+	<style>
+		.theme-toggle {
+			display: none !important;
+		}
+	</style>
+</noscript>
+
+<button
+	class="theme-toggle"
+	title="Toggle between light and dark theme"
+	data-theme={$theme}
+	on:click={toggleTheme}
+>
+	<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
+		<mask id="moon">
+			<rect x="0" y="0" width="100%" height="100%" fill="white" />
+			<circle cx="40" cy="8" r="11" fill="black" />
+		</mask>
+		<circle id="sun" cx="12" cy="12" r="11" mask="url(#moon)" />
+		<g id="sun-beams">
+			<line x1="12" y1="1" x2="12" y2="3" />
+			<line x1="12" y1="21" x2="12" y2="23" />
+			<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+			<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+			<line x1="1" y1="12" x2="3" y2="12" />
+			<line x1="21" y1="12" x2="23" y2="12" />
+			<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+			<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+		</g>
+	</svg>
+
+	<span class="label">Auto</span>
+</button>
+
+<style lang="scss">
+	.theme-toggle {
+		height: 24px;
+		padding: 0;
+		appearance: none;
+		border: none;
+		background: none;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: 5px;
+
+		&:hover {
+			.label {
+				color: var(--color--primary);
+			}
+
+			#moon,
+			#sun {
+				fill: var(--color--primary);
+				> * {
+					filter: drop-shadow(0px 0px 3px var(--color--primary));
+				}
+			}
+
+			#sun-beams {
+				stroke: var(--color--primary);
+
+				line {
+					filter: drop-shadow(0px 0px 3px var(--color--primary));
+				}
+			}
+		}
+	}
+
+	.label {
+		transition: all 0.5s var(--ease-4);
+		text-transform: uppercase;
+		font-size: 0.6rem;
+		opacity: 0;
+		transform-origin: left;
+		transform: scaleX(0);
+		max-width: 0;
+		color: var(--color--text);
+	}
+
+	#moon,
+	#sun {
+		fill: var(--color--text);
+		stroke: none;
+	}
+
+	#sun {
+		transition: all 0.5s var(--ease-4);
+		transform-origin: center center;
+	}
+
+	#sun-beams {
+		--_opacity-dur: 0.15s;
+		stroke: var(--color--text);
+		stroke-width: 2px;
+		transform-origin: center center;
+		transition: all 0.5s var(--ease-elastic-4), opacity var(--_opacity-dur) var(--ease-3);
+	}
+
+	#moon > circle {
+		transition: all 0.5s var(--ease-out-3);
+	}
+
+	@mixin light-icon {
+		& #sun {
+			transform: scale(0.5);
+		}
+
+		& #sun-beams {
+			transform: rotateZ(0.25turn);
+			--_opacity-dur: 0.5s;
+		}
+	}
+
+	@mixin dark-icon {
+		& #moon > circle {
+			transform: translateX(-20px);
+		}
+
+		& #sun-beams {
+			opacity: 0;
+		}
+	}
+
+	.theme-toggle:not([data-theme]) {
+		@include light-icon;
+	}
+
+	[data-theme='auto'] {
+		.label {
+			opacity: 1;
+			transform: scaleX(1);
+			max-width: 30px;
+		}
+
+		@media not all and (prefers-color-scheme: dark) {
+			@include light-icon;
+		}
+
+		@media (prefers-color-scheme: dark) {
+			@include dark-icon;
+		}
+	}
+
+	[data-theme='light'] {
+		@include light-icon;
+	}
+
+	[data-theme='dark'] {
+		@include dark-icon;
+	}
+</style>
diff --git a/src/lib/components/molecules/TintHighlight.svelte b/src/lib/components/molecules/TintHighlight.svelte
new file mode 100644
index 0000000..5bc35c8
--- /dev/null
+++ b/src/lib/components/molecules/TintHighlight.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let color: 'primary' | 'secondary' | string = 'primary';
+</script>
+
+<mark style="--mark-color: var(--color--{color}-tint);">
+	<slot />
+</mark>
+
+<style lang="scss">
+	mark {
+		--mark-color: transparent;
+
+		margin-inline: calc(0.1em * -1);
+		padding-inline: 0.1em;
+
+		background-color: transparent;
+		background-image: linear-gradient(to bottom, transparent 60%, var(--mark-color) 60%);
+
+		color: inherit;
+	}
+</style>
diff --git a/src/lib/components/organisms/About.svelte b/src/lib/components/organisms/About.svelte
new file mode 100644
index 0000000..ace6770
--- /dev/null
+++ b/src/lib/components/organisms/About.svelte
@@ -0,0 +1,94 @@
+<script>
+	import SparklingHighlight from '$lib/components/molecules/SparklingHighlight.svelte';
+	import Socials from '$lib/components/molecules/Socials.svelte';
+	import Image from '../atoms/Image.svelte';
+</script>
+
+<section id="about">
+	<div class="info">
+		<h2>
+			Language learning can be a challenging but
+			<SparklingHighlight color="secondary">rewarding process!</SparklingHighlight>
+		</h2>
+		<p>
+			At languageXchange, we believe that the best way to learn a language is through practice and
+			immersion. That's why we've created a platform that connects language learners from around the
+			world,
+		</p>
+		<p>
+			So you can practice speaking with native speakers and improve your skills in a fun and
+			engaging way. Connect with native speakers to dive into immersive experiences. Start your
+			adventure soon!
+		</p>
+		<div class="socials">
+			<span>Socials:</span>
+			<Socials />
+		</div>
+	</div>
+	<div class="image">
+		<Image src="/images/sample-image.png" alt="Sample for the static template" />
+	</div>
+</section>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	#about {
+		position: relative;
+		display: grid;
+		grid-template-columns: 500px 400px;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: 50px;
+
+		@include for-phone-only {
+			grid-template-columns: 1fr;
+			justify-items: center;
+			gap: 20px;
+		}
+
+		.info {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+			h2 {
+				@include for-phone-only {
+					text-align: center;
+				}
+			}
+
+			p {
+				@include for-phone-only {
+					text-align: justify;
+				}
+			}
+
+			@include for-phone-only {
+				gap: 20px;
+			}
+		}
+
+		.socials {
+			display: flex;
+			align-items: center;
+			gap: 15px;
+
+			@include for-phone-only {
+				justify-content: center;
+				margin-bottom: 10px;
+				span {
+					display: none;
+				}
+			}
+		}
+
+		.image {
+			width: 100%;
+			height: 100%;
+
+			@include for-phone-only {
+				width: 80%;
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/ContentSection.svelte b/src/lib/components/organisms/ContentSection.svelte
new file mode 100644
index 0000000..898a878
--- /dev/null
+++ b/src/lib/components/organisms/ContentSection.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	export let id: string | undefined = undefined;
+	export let title: string | undefined = undefined;
+	export let description: string | undefined = undefined;
+
+	export let align: 'left' | 'top' | 'right' = 'top';
+</script>
+
+<section {id} class="content-section {align}">
+	<div class="title-area">
+		{#if title || description}
+			<div class="text">
+				{#if title}
+					<h2>
+						{title}
+					</h2>
+				{/if}
+				{#if description}
+					<p>
+						{description}
+					</p>
+				{/if}
+			</div>
+		{/if}
+		{#if $$slots['button']}
+			<div class="button">
+				<slot name="button" />
+			</div>
+		{/if}
+	</div>
+	<div class="content-area">
+		<slot />
+	</div>
+</section>
+
+<style lang="scss">
+	@import '../../scss/breakpoints.scss';
+
+	.content-section {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 40px;
+		padding: 50px 0;
+
+		.title-area {
+			flex: 2;
+
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			text-align: center;
+			gap: 15px;
+
+			.text {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				gap: 5px;
+			}
+		}
+		.content-area {
+			flex: 5;
+
+			display: grid;
+			place-items: center;
+		}
+
+		@include for-tablet-landscape-up {
+			&.left {
+				.title-area {
+					order: 1;
+				}
+				.content-area {
+					order: 2;
+				}
+			}
+			&.right {
+				.title-area {
+					order: 2;
+				}
+				.content-area {
+					order: 1;
+				}
+			}
+			&.top {
+				flex-direction: column;
+				.title-area {
+					order: 1;
+					max-width: 600px;
+				}
+				.content-area {
+					order: 2;
+					width: 100%;
+				}
+			}
+		}
+		@include for-tablet-portrait-down {
+			flex-direction: column;
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/Features.svelte b/src/lib/components/organisms/Features.svelte
new file mode 100644
index 0000000..4db5cf3
--- /dev/null
+++ b/src/lib/components/organisms/Features.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Feature } from '$lib/utils/types';
+	import FeatureCard from '$lib/components/molecules/FeatureCard.svelte';
+	import ContentSection from '$lib/components/organisms/ContentSection.svelte';
+
+	export let features: Feature[];
+</script>
+
+<ContentSection
+	id="features"
+	title="Features"
+	description="Here are some of the features of this template"
+>
+	<div class="features-container">
+		<div class="three-group-grid">
+			{#each features as feature}
+				<FeatureCard
+					name={feature.name}
+					description={feature.description}
+					image={feature.image}
+					tags={feature.tags}
+				/>
+			{/each}
+		</div>
+	</div>
+</ContentSection>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	.features-container {
+		width: 100%;
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-gap: 20px;
+	}
+
+	.three-group-grid {
+		width: 100%;
+		display: grid;
+		grid-template-columns: 2fr 1fr;
+		grid-gap: 20px;
+
+		@media (max-width: 1085px) {
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@include for-phone-only {
+			grid-template-columns: 1fr;
+		}
+
+		// Select every 3 elements, starting from position 2
+		// And make it take up 2 rows
+		@media (min-width: 1086px) {
+			> :global(:nth-child(3n + 2)) {
+				grid-row: span 2;
+			}
+		}
+
+		// Select every 3 elements, starting from position 1
+		// And make it take up 2 columns
+		> :global(:nth-child(3n + 1)) {
+			@media (max-width: 1085px) {
+				grid-column: span 2;
+			}
+
+			@include for-tablet-portrait-down {
+				grid-template-columns: 1fr;
+				grid-column: unset;
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/Footer.svelte b/src/lib/components/organisms/Footer.svelte
new file mode 100644
index 0000000..9c80b90
--- /dev/null
+++ b/src/lib/components/organisms/Footer.svelte
@@ -0,0 +1,69 @@
+<script>
+	import FooterWave from '$lib/icons/footer-wave.svelte';
+	import Socials from '$lib/components/molecules/Socials.svelte';
+	import ThemeToggle from '$lib/components/molecules/ThemeToggle.svelte';
+</script>
+
+<footer>
+	<div class="wave">
+		<FooterWave />
+	</div>
+	<div class="content">
+		<div class="copyright">© 2023 languageXchange - Practice, Learn, Succeed!</div>
+		<div class="credits">
+			This website is full open sourced and licensed by
+			<a
+				href="https://github.com/languageXchange/website/blob/main/LICENSE"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				MIT Licence
+			</a>. A part of
+			<a href="https://newchapter.tech/" target="_blank" rel="noopener noreferrer">
+				New Chapter Tech
+			</a>
+		</div>
+		<div class="socials">
+			<Socials />
+			<ThemeToggle />
+		</div>
+	</div>
+</footer>
+
+<style lang="scss">
+	footer {
+		height: 340px;
+		width: 100%;
+		background: linear-gradient(60deg, var(--color--waves-start) 0%, var(--color--waves-end) 100%);
+		display: grid;
+		grid-template-rows: 120px 1fr;
+
+		.content {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 15px;
+			font-weight: 600;
+			text-align: center;
+
+			.credits {
+				font-weight: 400;
+				font-size: 90%;
+				color: var(--color--text-shade);
+			}
+
+			.socials {
+				display: flex;
+				align-items: center;
+				gap: 20px;
+			}
+		}
+
+		a {
+			&:hover {
+				filter: drop-shadow(0px 0px 3px var(--color--primary));
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/Header.svelte b/src/lib/components/organisms/Header.svelte
new file mode 100644
index 0000000..9d3d997
--- /dev/null
+++ b/src/lib/components/organisms/Header.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import Logo from '$lib/components/atoms/Logo.svelte';
+	import ThemeToggle from '$lib/components/molecules/ThemeToggle.svelte';
+
+	export let showBackground = false;
+</script>
+
+<header class:has-background={showBackground}>
+	<nav class="container">
+		<a class="logo" href="/" aria-label="Site logo">
+			<Logo />
+		</a>
+		<div class="links">
+			<!--<a href="/blog">Blog</a>-->
+			<ThemeToggle />
+		</div>
+	</nav>
+</header>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	header {
+		position: relative;
+		padding: 30px 0;
+
+		@include for-phone-only {
+			padding: 20px 0;
+		}
+
+		&.has-background {
+			background: linear-gradient(
+				60deg,
+				var(--color--waves-start) 0%,
+				var(--color--waves-end) 100%
+			);
+		}
+
+		.container {
+			display: flex;
+			align-items: center;
+			gap: 30px;
+
+			@include for-phone-only {
+				.links {
+					a {
+						display: none;
+					}
+				}
+			}
+		}
+
+		.logo {
+			height: 44px;
+			flex: 1;
+		}
+
+		a {
+			color: var(--color--text);
+		}
+
+		.links {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			gap: 30px;
+
+			a {
+				text-decoration: none;
+
+				&:hover {
+					color: var(--color--primary);
+					filter: drop-shadow(0px 0px 3px var(--color--primary));
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/Hero.svelte b/src/lib/components/organisms/Hero.svelte
new file mode 100644
index 0000000..4a10546
--- /dev/null
+++ b/src/lib/components/organisms/Hero.svelte
@@ -0,0 +1,77 @@
+<script>
+	import FeaturesIcon from '$lib/icons/features.svelte';
+	import GitHubIcon from '$lib/icons/socials/github.svelte';
+	import Button from '$lib/components/atoms/Button.svelte';
+	import Sparkles from '../atoms/Sparkles.svelte';
+</script>
+
+<section id="hero">
+	<h1 class="hello">Practice, Learn, Succeed!</h1>
+	<p class="intro">
+		<span class="left">Words are the keys that unlock</span>
+		<span class="right">a world of connections.</span>
+	</p>
+	<div class="ctas">
+		<Sparkles>
+			<Button href="https://cdn.forms-content-1.sg-form.com/0797bfc4-739c-11ee-b709-eeadebf91d66">
+				Early Access
+			</Button>
+		</Sparkles>
+		<!--
+		<Button color="primary" href="https://histoire-sveltekit-static-blog-template.vercel.app/">
+			<FeaturesIcon slot="icon" />
+			Components
+		</Button>
+		-->
+	</div>
+</section>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	#hero {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 15px;
+		position: relative;
+		padding: 80px 0;
+
+		@include for-phone-only {
+			padding: 40px 0 50px;
+		}
+
+		.hello {
+			text-align: center;
+		}
+
+		.intro {
+			font-weight: 500;
+			font-size: 1.4rem;
+			width: min(100%, 440px);
+			display: flex;
+			flex-direction: column;
+
+			.left {
+				text-align: left;
+			}
+			.right {
+				text-align: right;
+			}
+
+			@include for-phone-only {
+				display: none;
+			}
+		}
+
+		.ctas {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			justify-content: center;
+			gap: 10px;
+			width: 100%;
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/RecentPosts.svelte b/src/lib/components/organisms/RecentPosts.svelte
new file mode 100644
index 0000000..0f8f350
--- /dev/null
+++ b/src/lib/components/organisms/RecentPosts.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import BlogPostCard from '$lib/components/molecules/BlogPostCard.svelte';
+	import ContentSection from '$lib/components/organisms/ContentSection.svelte';
+	import type { BlogPost } from '$lib/utils/types';
+	import Button from '$lib/components/atoms/Button.svelte';
+
+	export let posts: BlogPost[];
+</script>
+
+<ContentSection
+	id="recent-posts"
+	title="Blog posts"
+	description="This section shows the 4 most recent blog posts. Check them out for tips on how to get started!"
+	align="left"
+>
+	<div slot="button">
+		<Button href="/blog">View More</Button>
+	</div>
+	<div class="grid">
+		{#each posts as post}
+			<BlogPostCard
+				slug={post.slug}
+				title={post.title}
+				excerpt={post.excerpt}
+				tags={post.tags}
+				readingTime={post.readingTime}
+				showImage={false}
+			/>
+		{/each}
+	</div>
+</ContentSection>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	.grid {
+		width: 100%;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 20px;
+
+		@include for-phone-only {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/RelatedPosts.svelte b/src/lib/components/organisms/RelatedPosts.svelte
new file mode 100644
index 0000000..fb1cfc5
--- /dev/null
+++ b/src/lib/components/organisms/RelatedPosts.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { BlogPost } from '$lib/utils/types';
+	import BlogPostCard from '$lib/components/molecules/BlogPostCard.svelte';
+	import ContentSection from '$lib/components/organisms/ContentSection.svelte';
+
+	export let posts: BlogPost[];
+</script>
+
+<ContentSection id="related-posts" title="Related Posts">
+	<div class="simple-grid">
+		{#each posts as post}
+			<BlogPostCard
+				slug={post.slug}
+				title={post.title}
+				excerpt={post.excerpt}
+				tags={post.tags}
+				readingTime={post.readingTime}
+				showImage={false}
+			/>
+		{/each}
+	</div>
+</ContentSection>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	.simple-grid {
+		width: 100%;
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-gap: 20px;
+
+		@media (max-width: 1070px) {
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@include for-tablet-portrait-down {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/Waves.svelte b/src/lib/components/organisms/Waves.svelte
new file mode 100644
index 0000000..1cb2edd
--- /dev/null
+++ b/src/lib/components/organisms/Waves.svelte
@@ -0,0 +1,93 @@
+<div class="waves-container">
+	<svg
+		class="waves"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:xlink="http://www.w3.org/1999/xlink"
+		viewBox="0 24 150 28"
+		preserveAspectRatio="none"
+		shape-rendering="auto"
+	>
+		<defs>
+			<path
+				id="gentle-wave"
+				d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+			/>
+		</defs>
+		<g class="parallax">
+			<use
+				xlink:href="#gentle-wave"
+				x="48"
+				y="0"
+				fill="rgba(var(--color--page-background-rgb),0.7)"
+			/>
+			<use
+				xlink:href="#gentle-wave"
+				x="48"
+				y="3"
+				fill="rgba(var(--color--page-background-rgb),0.5)"
+			/>
+			<use
+				xlink:href="#gentle-wave"
+				x="48"
+				y="5"
+				fill="rgba(var(--color--page-background-rgb),0.3)"
+			/>
+			<use xlink:href="#gentle-wave" x="48" y="7" fill="var(--color--page-background)" />
+		</g>
+	</svg>
+</div>
+
+<style lang="scss">
+	@import '$lib/scss/_breakpoints.scss';
+	.waves-container {
+		background: linear-gradient(60deg, var(--color--waves-start) 0%, var(--color--waves-end) 100%);
+		position: absolute;
+		width: 100%;
+		height: min(65vh, 500px);
+
+		@include for-phone-only {
+			height: min(75vh, 400px);
+		}
+	}
+
+	.waves {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: 15vh;
+		/*Fix for safari gap*/
+		min-height: 100px;
+		max-height: 150px;
+	}
+
+	/* Animation */
+	.parallax > use {
+		@media screen and (prefers-reduced-motion: no-preference) {
+			animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+		}
+	}
+	.parallax > use:nth-child(1) {
+		animation-delay: -2s;
+		animation-duration: 7s;
+	}
+	.parallax > use:nth-child(2) {
+		animation-delay: -3s;
+		animation-duration: 10s;
+	}
+	.parallax > use:nth-child(3) {
+		animation-delay: -4s;
+		animation-duration: 13s;
+	}
+	.parallax > use:nth-child(4) {
+		animation-delay: -5s;
+		animation-duration: 20s;
+	}
+	@keyframes move-forever {
+		0% {
+			transform: translate3d(-90px, 0, 0);
+		}
+		100% {
+			transform: translate3d(85px, 0, 0);
+		}
+	}
+</style>
diff --git a/src/lib/data/blog-posts/index.ts b/src/lib/data/blog-posts/index.ts
new file mode 100644
index 0000000..586ec55
--- /dev/null
+++ b/src/lib/data/blog-posts/index.ts
@@ -0,0 +1,4 @@
+import { filterPosts, importPosts } from './utils';
+
+export const allPosts = importPosts(true);
+export const filteredPosts = filterPosts(allPosts);
diff --git a/src/lib/data/blog-posts/utils.ts b/src/lib/data/blog-posts/utils.ts
new file mode 100644
index 0000000..9f2bd96
--- /dev/null
+++ b/src/lib/data/blog-posts/utils.ts
@@ -0,0 +1,73 @@
+// Disabling eslint because importing Prism is needed
+// even if not directly used in this file
+// eslint-disable-next-line no-unused-vars
+import Prism from 'prismjs';
+// Here we assign it to a variable so the import above
+// is not removed automatically on build
+const ifYouRemoveMeTheBuildFails = Prism;
+import 'prism-svelte';
+import readingTime from 'reading-time';
+import striptags from 'striptags';
+import type { BlogPost } from '$lib/utils/types';
+
+export const importPosts = (render = false) => {
+	const blogImports = import.meta.glob('$routes/*/*/*.md', { eager: true });
+	const innerImports = import.meta.glob('$routes/*/*/*/*.md', { eager: true });
+
+	const imports = { ...blogImports, ...innerImports };
+
+	const posts: BlogPost[] = [];
+	for (const path in imports) {
+		const post = imports[path] as any;
+		if (post) {
+			posts.push({
+				...post.metadata,
+				html: render && post.default.render ? post.default.render()?.html : undefined
+			});
+		}
+	}
+
+	return posts;
+};
+
+export const filterPosts = (posts: BlogPost[]) => {
+	return posts
+		.filter((post) => !post.hidden)
+		.sort((a, b) =>
+			new Date(a.date).getTime() > new Date(b.date).getTime()
+				? -1
+				: new Date(a.date).getTime() < new Date(b.date).getTime()
+				? 1
+				: 0
+		)
+		.map((post) => {
+			const readingTimeResult = post.html ? readingTime(striptags(post.html) || '') : undefined;
+			const relatedPosts = getRelatedPosts(posts, post);
+
+			return {
+				...post,
+				readingTime: readingTimeResult ? readingTimeResult.text : '',
+				relatedPosts: relatedPosts
+			} as BlogPost;
+		});
+};
+
+// #region Unexported Functions
+
+const getRelatedPosts = (posts: BlogPost[], post: BlogPost) => {
+	// Get the first 3 posts that have the highest number of tags in common
+	const relatedPosts = posts
+		.filter((p) => p.slug !== post.slug)
+		.sort((a, b) => {
+			const aTags = a.tags?.filter((t) => post.tags?.includes(t));
+			const bTags = b.tags?.filter((t) => post.tags?.includes(t));
+			return aTags?.length > bTags?.length ? -1 : aTags?.length < bTags?.length ? 1 : 0;
+		});
+
+	return relatedPosts.slice(0, 3).map((p) => ({
+		...p,
+		readingTime: p.html ? readingTime(striptags(p.html) || '').text : ''
+	}));
+};
+
+// #endregion
diff --git a/src/lib/data/features.ts b/src/lib/data/features.ts
new file mode 100644
index 0000000..60974d1
--- /dev/null
+++ b/src/lib/data/features.ts
@@ -0,0 +1,25 @@
+import type { Feature } from '$lib/utils/types';
+
+export default [
+	{
+		name: 'Markdown Support',
+		description:
+			'Blog posts are written in Markdown, a simple and nearly-universal format. This means you can bring over your posts from other platforms, and easily export to another if you want to.',
+		image: 'images/features/markdown.jpg',
+		tags: [{ label: 'Powered by MDsveX' }]
+	},
+	{
+		name: 'Themeable',
+		description:
+			'You can easily theme the entire website by changing just a few colors in the _themes.scss file.',
+		image: 'images/features/themeable.jpg',
+		tags: [{ label: 'Primary Color' }, { label: 'Secondary Color', color: 'secondary' }]
+	},
+	{
+		name: 'Well Optimized',
+		description:
+			'Images are automatically optimized and lazy loaded, to ensure the website loads as fast as possible regardless of connection speed.',
+		image: 'images/features/optimized.jpg',
+		tags: [{ label: 'Powered by Image Transmutation' }]
+	}
+] as Feature[];
diff --git a/src/lib/data/meta.ts b/src/lib/data/meta.ts
new file mode 100644
index 0000000..869a8dd
--- /dev/null
+++ b/src/lib/data/meta.ts
@@ -0,0 +1,206 @@
+// Base values for meta tags
+// So they can be added as suffixes on different pages
+// Via <svelte:head>
+
+export const siteBaseUrl = 'https://languageXchange.net/';
+
+export const description =
+	"At languageXchange, we believe that the best way to learn a language is through practice and immersion. That's why we've created a platform that connects language learners from around the world.";
+
+export const title = 'Practice, Learn, Succeed!';
+
+export const image = `${siteBaseUrl}/images/site-preview.png`;
+
+export const keywords = [
+	'language exchange',
+	'language learning',
+	'language practice',
+	'conversation partner',
+	'language skills',
+	'speaking partner',
+	'language exchange platform',
+	'language exchange app',
+	'tandem language exchange',
+	'hello talk',
+	'speaky',
+	'learn a language',
+	'foreign language practice',
+	'language exchange community',
+	'speak with natives',
+	'language learning partner',
+	'improve language skills',
+	'language exchange website',
+	'language learners',
+	'find a language partner',
+	'online language exchange',
+	'language conversation',
+	'language exchange service',
+	'practice speaking',
+	'language fluency',
+	'language tandem',
+	'language exchange program',
+	'exchange language skills',
+	'meet language partners',
+	'language learning community',
+	'connect with native speakers',
+	'language exchange network',
+	'improve speaking skills',
+	'speak a foreign language',
+	'language exchange community',
+	'practice with a native speaker',
+	'tandem language learning',
+	'speak in a foreign language',
+	'language exchange partner',
+	'foreign language conversation',
+	'language learning app',
+	'speaking practice',
+	'language exchange website',
+	'online language learning',
+	'language exchange chat',
+	'conversation in another language',
+	'language exchange opportunities',
+	'language exchange program',
+	'foreign language partner',
+	'language exchange app',
+	'conversation exchange',
+	'language exchange platform',
+	'speak with native speakers',
+	'improve language fluency',
+	'meet language learners',
+	'language exchange app',
+	'find conversation partners',
+	'exchange language skills',
+	'language learning platform',
+	'connect with language learners',
+	'practice language speaking',
+	'speak a new language',
+	'language exchange practice',
+	'language exchange network',
+	'speaking with native speakers',
+	'learn a second language',
+	'foreign language conversation partner',
+	'language exchange service',
+	'online language exchange',
+	'find a language exchange partner',
+	'language learning opportunities',
+	'language exchange program',
+	'language learning community',
+	'practice with native speakers',
+	'tandem language exchange',
+	'language exchange website',
+	'improve language skills',
+	'conversation in a foreign language',
+	'foreign language fluency',
+	'speak with language partners',
+	'language exchange chat',
+	'online language tandem',
+	'conversation exchange platform',
+	'language exchange community',
+	'language partner search',
+	'practice speaking skills',
+	'speak a foreign language fluently',
+	'language exchange network',
+	'learn a language online',
+	'foreign language conversation practice',
+	'language exchange app',
+	'find language exchange partners',
+	'improve speaking fluency',
+	'speak with language learners',
+	'language exchange forum',
+	'language tandem program',
+	'conversation partner app',
+	'language exchange website',
+	'language exchange community',
+	'practice with language speakers',
+	'foreign language learning partner',
+	'speak with language exchange partners',
+	'language exchange platform',
+	'language exchange service',
+	'learn a language online',
+	'find language tandem partners',
+	'improve language conversation skills',
+	'foreign language exchange program',
+	'language exchange app',
+	'conversation exchange website',
+	'speak with language natives',
+	'online language learning community',
+	'language exchange network',
+	'foreign language speaking practice',
+	'language exchange chat',
+	'practice with language partners',
+	'find language exchange opportunities',
+	'language exchange program',
+	'tandem language learning app',
+	'speak with language experts',
+	'improve language speaking fluency',
+	'speak with language tutors',
+	'language exchange website',
+	'foreign language conversation exchange',
+	'language practice with natives',
+	'connect with language learners',
+	'learn a language online',
+	'foreign language exchange service',
+	'language exchange forum',
+	'language learning partners',
+	'practice with language natives',
+	'language exchange network',
+	'conversation in another language',
+	'language exchange chat',
+	'language exchange platform',
+	'speak with language exchange partners',
+	'learn a new language',
+	'foreign language conversation practice',
+	'find conversation exchange partners',
+	'improve language skills with native speakers',
+	'language exchange app',
+	'language learning community',
+	'practice speaking with language learners',
+	'speak with language exchange tutors',
+	'foreign language fluency exchange',
+	'language exchange website',
+	'language tandem practice',
+	'connect with language exchange community',
+	'language partner search platform',
+	'speak with language experts',
+	'improve speaking skills with natives',
+	'language exchange network',
+	'learn a foreign language',
+	'conversation exchange chat',
+	'language exchange service',
+	'language exchange program',
+	'practice speaking a foreign language',
+	'speak with language tandem partners',
+	'improve language fluency with native speakers',
+	'language exchange website',
+	'foreign language conversation partner search',
+	'language learning app',
+	'connect with language partners',
+	'language exchange opportunities',
+	'language exchange program',
+	'language exchange community',
+	'find conversation exchange partners',
+	'improve speaking skills with language natives',
+	'speak with language exchange tutors',
+	'foreign language fluency exchange',
+	'language exchange network',
+	'learn a foreign language online',
+	'conversation exchange chat',
+	'language exchange service',
+	'language exchange program',
+	'practice speaking a foreign language',
+	'speak with language tandem partners',
+	'improve language fluency with native speakers',
+	'language exchange website',
+	'foreign language conversation partner search',
+	'language learning app',
+	'connect with language partners',
+	'language exchange opportunities',
+	'language exchange program',
+	'language exchange community',
+	'find conversation exchange partners',
+	'improve speaking skills with language natives',
+	'speak with language exchange tutors',
+	'foreign language fluency exchange',
+	'language exchange network',
+	'learn a foreign language online'
+];
diff --git a/src/lib/icons/alert.svelte b/src/lib/icons/alert.svelte
new file mode 100644
index 0000000..29e7367
--- /dev/null
+++ b/src/lib/icons/alert.svelte
@@ -0,0 +1,22 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M12 7L12 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M12 17.01L12.01 16.9989"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/blog.svelte b/src/lib/icons/blog.svelte
new file mode 100644
index 0000000..cde82f2
--- /dev/null
+++ b/src/lib/icons/blog.svelte
@@ -0,0 +1,16 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M3 21L12 21H21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M12.2218 5.82839L15.0503 2.99996L20 7.94971L17.1716 10.7781M12.2218 5.82839L6.61522 11.435C6.42769 11.6225 6.32233 11.8769 6.32233 12.1421L6.32233 16.6776L10.8579 16.6776C11.1231 16.6776 11.3774 16.5723 11.565 16.3847L17.1716 10.7781M12.2218 5.82839L17.1716 10.7781"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/chat.svelte b/src/lib/icons/chat.svelte
new file mode 100644
index 0000000..f7455bd
--- /dev/null
+++ b/src/lib/icons/chat.svelte
@@ -0,0 +1,36 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M17 12.5C17.2761 12.5 17.5 12.2761 17.5 12C17.5 11.7239 17.2761 11.5 17 11.5C16.7239 11.5 16.5 11.7239 16.5 12C16.5 12.2761 16.7239 12.5 17 12.5Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M7 12.5C7.27614 12.5 7.5 12.2761 7.5 12C7.5 11.7239 7.27614 11.5 7 11.5C6.72386 11.5 6.5 11.7239 6.5 12C6.5 12.2761 6.72386 12.5 7 12.5Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/check.svelte b/src/lib/icons/check.svelte
new file mode 100644
index 0000000..fec37d4
--- /dev/null
+++ b/src/lib/icons/check.svelte
@@ -0,0 +1,21 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M7 12.5L10 15.5L17 8.5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/circle.svelte b/src/lib/icons/circle.svelte
new file mode 100644
index 0000000..fb96e6a
--- /dev/null
+++ b/src/lib/icons/circle.svelte
@@ -0,0 +1,15 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/download.svelte b/src/lib/icons/download.svelte
new file mode 100644
index 0000000..2f2d468
--- /dev/null
+++ b/src/lib/icons/download.svelte
@@ -0,0 +1,16 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M6 20L18 20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M12 4V16M12 16L15.5 12.5M12 16L8.5 12.5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/error.svelte b/src/lib/icons/error.svelte
new file mode 100644
index 0000000..717b297
--- /dev/null
+++ b/src/lib/icons/error.svelte
@@ -0,0 +1,138 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 1080 1080"
+	><defs
+		><style>
+			.cls-1,
+			.cls-7 {
+				fill: #c7dcf9;
+			}
+			.cls-14,
+			.cls-2 {
+				fill: #fea691;
+			}
+			.cls-3 {
+				isolation: isolate;
+			}
+			.cls-4,
+			.cls-9 {
+				fill: #e1ecff;
+			}
+			.cls-5 {
+				fill: #f0f4ff;
+			}
+			.cls-6 {
+				clip-path: url(#clip-path);
+			}
+			.cls-7 {
+				opacity: 0.37;
+			}
+			.cls-14,
+			.cls-7,
+			.cls-9 {
+				mix-blend-mode: multiply;
+			}
+			.cls-8 {
+				fill: #99adf9;
+			}
+			.cls-9 {
+				opacity: 0.58;
+			}
+			.cls-10 {
+				fill: none;
+				stroke: #1c3177;
+				stroke-linecap: round;
+				stroke-miterlimit: 10;
+				stroke-width: 9px;
+			}
+			.cls-11 {
+				fill: #1c3177;
+			}
+			.cls-12 {
+				fill: #ff97c9;
+			}
+			.cls-13 {
+				clip-path: url(#clip-path-2);
+			}
+			.cls-14 {
+				opacity: 0.21;
+			}
+		</style><clipPath id="clip-path"
+			><ellipse
+				class="cls-1"
+				cx="447.2"
+				cy="511.48"
+				rx="107.95"
+				ry="147.31"
+				transform="translate(-46.98 45.23) rotate(-5.5)"
+			/></clipPath
+		><clipPath id="clip-path-2"
+			><path
+				class="cls-2"
+				d="M542.23,589.77s-181.59-2.75-222.59,7-33.82,36.64-21.52,48.68,12.55,30-16.91,32.29-109.67,8.45-119.92,36.89,31,52.53,115,49.71,183.2-17.23,204.21.23-30.49,20-7.94,42.56,140.93,13.84,180.9-2.3,61-43.05,37.92-70.21S637.48,701,645.31,685.93c6.66-12.82,6.37-31.69-10.27-40.06-27.14,4.7-168.53,31.83-168.53,31.83S461,661.84,477.1,655,524,637.36,542.23,589.77Z"
+			/></clipPath
+		></defs
+	><g class="cls-3"
+		><g id="Layer_3" data-name="Layer 3"
+			><path
+				class="cls-4"
+				d="M447.49,344.26l364.5,31a33.12,33.12,0,0,1,23.78,13c11,14.48,27.71,42.06,34.84,82.07,5.79,32.52-5.7,92.52-26.73,125.65a33,33,0,0,1-21.74,14.6L466.2,677.73Z"
+			/><ellipse
+				class="cls-5"
+				cx="450.47"
+				cy="511.16"
+				rx="126.33"
+				ry="167.3"
+				transform="translate(-46.93 45.54) rotate(-5.5)"
+			/><ellipse
+				class="cls-1"
+				cx="447.2"
+				cy="511.48"
+				rx="107.95"
+				ry="147.31"
+				transform="translate(-46.98 45.23) rotate(-5.5)"
+			/><g class="cls-6"
+				><path
+					class="cls-7"
+					d="M475.26,354s-66.1,119.73-18.13,235.37c-32.09,54-23.37,113.32-17.23,115.68s215.69-73.48,221.49-69.38S609,320,609,320Z"
+				/></g
+			><path
+				class="cls-8"
+				d="M562.53,354s55.11,46.7,64.59,152.53c8,88.86-52.27,150.66-52.27,150.66l201.59-38s43.71-57,43.71-129c0-79.43-52.84-118.73-52.84-118.73Z"
+			/><path
+				class="cls-9"
+				d="M552.59,556c-4,15.57-10.36,33.8-10.36,33.8l-78.54,43.08,2.51,44.88,355.94-67.16A33,33,0,0,0,843.88,596c8.67-13.67,15.72-31.91,20.6-50.9Z"
+			/><path
+				class="cls-10"
+				d="M661.39,413.94s30.11-3.84,34.85,19c3.46,16.69-18.93,23.93-18.93,23.93"
+			/><path
+				class="cls-10"
+				d="M685.67,526.45s31.71,8.26,25.64,31.55c-3.77,14.46-29.25,17.28-29.25,17.28"
+			/><path
+				class="cls-11"
+				d="M740.29,456.89c-8.93-.47-13.45,11.15-13.32,23.58s2.56,32,14.35,32.58,14-13.32,13.07-28.08S750,457.4,740.29,456.89Z"
+			/><path
+				class="cls-12"
+				d="M752.11,469.77s-10.45,3.61-10.28,12.57,5.07,16.14,12,17.64A52.89,52.89,0,0,0,752.11,469.77Z"
+			/><path
+				class="cls-2"
+				d="M542.23,589.77s-181.59-2.75-222.59,7-33.82,36.64-21.52,48.68,12.55,30-16.91,32.29-109.67,8.45-119.92,36.89,31,52.53,115,49.71,183.2-17.23,204.21.23-30.49,20-7.94,42.56,140.93,13.84,180.9-2.3,61-43.05,37.92-70.21S637.48,701,645.31,685.93c6.66-12.82,6.37-31.69-10.27-40.06-27.14,4.7-168.53,31.83-168.53,31.83S461,661.84,477.1,655,524,637.36,542.23,589.77Z"
+			/><g class="cls-13"
+				><path
+					class="cls-14"
+					d="M413.24,590.15S514.46,604.72,477.1,655c72,20.88,138.75-77.68,138.75-77.68L498.67,553.37Z"
+				/><path
+					class="cls-14"
+					d="M531.39,665.3s105.6-12.94,117,12.43c26.24-13.33,20.09-46.12,20.09-46.12L567,641.86Z"
+				/><path
+					class="cls-14"
+					d="M213.2,686.56c-19.79,8.08-30.89,41.22,11.13,49.25s218.31-10.08,246.15,5.12,14.8,33.86,14.8,33.86l-338.5,23.88L139.61,697.2Z"
+				/></g
+			><path
+				class="cls-2"
+				d="M278.65,862.72c-7.39-12.71,22.89-28.35,54-28.86s55.86,14,53.64,23.91S349.19,872,330.57,872.12,282.92,870.07,278.65,862.72Z"
+			/></g
+		></g
+	></svg
+>
diff --git a/src/lib/icons/experience.svelte b/src/lib/icons/experience.svelte
new file mode 100644
index 0000000..977a1ac
--- /dev/null
+++ b/src/lib/icons/experience.svelte
@@ -0,0 +1,14 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M8 7H4C2.89543 7 2 7.89543 2 9V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V9C22 7.89543 21.1046 7 20 7H16M8 7V3.6C8 3.26863 8.26863 3 8.6 3H15.4C15.7314 3 16 3.26863 16 3.6V7M8 7H16"
+		stroke="currentColor"
+		stroke-width="1.5"
+	/>
+</svg>
diff --git a/src/lib/icons/external-link.svelte b/src/lib/icons/external-link.svelte
new file mode 100644
index 0000000..74fb130
--- /dev/null
+++ b/src/lib/icons/external-link.svelte
@@ -0,0 +1,21 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M12 12H19M19 12L16 15M19 12L16 9"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M19 6V5C19 3.89543 18.1046 3 17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V18"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/features.svelte b/src/lib/icons/features.svelte
new file mode 100644
index 0000000..c423f51
--- /dev/null
+++ b/src/lib/icons/features.svelte
@@ -0,0 +1,16 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M10 15v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2zM16 5v4a2 2 0 01-2 2h-4a2 2 0 01-2-2V5a2 2 0 012-2h4a2 2 0 012 2zM22 15v4a2 2 0 01-2 2h-4a2 2 0 01-2-2v-4a2 2 0 012-2h4a2 2 0 012 2zM6 16v-3M12 6V3M18 16v-3"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/footer-wave.svelte b/src/lib/icons/footer-wave.svelte
new file mode 100644
index 0000000..93114c6
--- /dev/null
+++ b/src/lib/icons/footer-wave.svelte
@@ -0,0 +1,15 @@
+<svg
+	width="100%"
+	height="120"
+	viewBox="0 0 1440 120"
+	fill="none"
+	style="transform: scale(-1,-1)"
+	xmlns="http://www.w3.org/2000/svg"
+	preserveAspectRatio="xMidYMid slice"
+	class="footer__wave"
+>
+	<path
+		d="M0 0L48 8.875C96 17.9167 192 35.4167 288 53.3333C384 71.25 480 88.75 576 82.2083C672 75.4167 768 44.5833 864 26.6667C960 8.75 1056 4.58333 1152 11.125C1248 17.9167 1344 35.4167 1392 44.4583L1440 53.3333V120H1392C1344 120 1248 120 1152 120C1056 120 960 120 864 120C768 120 672 120 576 120C480 120 384 120 288 120C192 120 96 120 48 120H0V0Z"
+		fill="var(--body-background-color)"
+	/>
+</svg>
diff --git a/src/lib/icons/info.svelte b/src/lib/icons/info.svelte
new file mode 100644
index 0000000..afcfaae
--- /dev/null
+++ b/src/lib/icons/info.svelte
@@ -0,0 +1,22 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M12 11.5V16.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+	<path
+		d="M12 7.51L12.01 7.49889"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/internet.svelte b/src/lib/icons/internet.svelte
new file mode 100644
index 0000000..facdf20
--- /dev/null
+++ b/src/lib/icons/internet.svelte
@@ -0,0 +1,63 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M3.33789 17C5.06694 19.989 8.29866 22 12.0001 22C15.7015 22 18.9332 19.989 20.6622 17"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M3.33789 7C5.06694 4.01099 8.29866 2 12.0001 2C15.7015 2 18.9332 4.01099 20.6622 7"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M13 21.9506C13 21.9506 14.4079 20.0966 15.2947 16.9999"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M13 2.04932C13 2.04932 14.4079 3.90328 15.2947 7"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M11 21.9506C11 21.9506 9.59215 20.0966 8.70532 16.9999"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M11 2.04932C11 2.04932 9.59215 3.90328 8.70532 7"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M9 10L10.5 15L12 10L13.5 15L15 10"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M1 10L2.5 15L4 10L5.5 15L7 10"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M17 10L18.5 15L20 10L21.5 15L23 10"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/pin.svelte b/src/lib/icons/pin.svelte
new file mode 100644
index 0000000..1aa2467
--- /dev/null
+++ b/src/lib/icons/pin.svelte
@@ -0,0 +1,21 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M20 10C20 14.4183 12 22 12 22C12 22 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10Z"
+		stroke="currentColor"
+		stroke-width="1.5"
+	/>
+	<path
+		d="M12 11C12.5523 11 13 10.5523 13 10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10C11 10.5523 11.4477 11 12 11Z"
+		fill="currentColor"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/rss.svelte b/src/lib/icons/rss.svelte
new file mode 100644
index 0000000..b0fdbbf
--- /dev/null
+++ b/src/lib/icons/rss.svelte
@@ -0,0 +1,27 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M12 19C12 14.8 9.2 12 5 12"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M19 19C19 10.6 13.4 5 5 5"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M5 19.01L5.01 18.9989"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/socials/email.svelte b/src/lib/icons/socials/email.svelte
new file mode 100644
index 0000000..b2f014e
--- /dev/null
+++ b/src/lib/icons/socials/email.svelte
@@ -0,0 +1,20 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M7 9L12 12.5L17 9"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M2 17V7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17Z"
+		stroke="currentColor"
+		stroke-width="1.5"
+	/>
+</svg>
diff --git a/src/lib/icons/socials/github.svelte b/src/lib/icons/socials/github.svelte
new file mode 100644
index 0000000..f49f238
--- /dev/null
+++ b/src/lib/icons/socials/github.svelte
@@ -0,0 +1,21 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/icons/socials/instagram.svelte b/src/lib/icons/socials/instagram.svelte
new file mode 100644
index 0000000..c0eab06
--- /dev/null
+++ b/src/lib/icons/socials/instagram.svelte
@@ -0,0 +1,28 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+	/>
+	<path
+		stroke="currentColor"
+		stroke-width="1.5"
+		d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z"
+	/>
+	<path
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="m17.5 6.51.01-.011"
+	/>
+</svg>
diff --git a/src/lib/icons/socials/x.svelte b/src/lib/icons/socials/x.svelte
new file mode 100644
index 0000000..fc9d66e
--- /dev/null
+++ b/src/lib/icons/socials/x.svelte
@@ -0,0 +1,15 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M23 3.01s-2.018 1.192-3.14 1.53a4.48 4.48 0 0 0-7.86 3v1a10.66 10.66 0 0 1-9-4.53s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5 0-.278-.028-.556-.08-.83C21.94 5.674 23 3.01 23 3.01Z"
+	/>
+</svg>
diff --git a/src/lib/icons/star.svelte b/src/lib/icons/star.svelte
new file mode 100644
index 0000000..394d743
--- /dev/null
+++ b/src/lib/icons/star.svelte
@@ -0,0 +1,15 @@
+<svg
+	width="100%"
+	height="100%"
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M8.58737 8.23597L11.1849 3.00376C11.5183 2.33208 12.4817 2.33208 12.8151 3.00376L15.4126 8.23597L21.2215 9.08017C21.9668 9.18848 22.2638 10.0994 21.7243 10.6219L17.5217 14.6918L18.5135 20.4414C18.6409 21.1798 17.8614 21.7428 17.1945 21.3941L12 18.678L6.80547 21.3941C6.1386 21.7428 5.35909 21.1798 5.48645 20.4414L6.47825 14.6918L2.27575 10.6219C1.73617 10.0994 2.03322 9.18848 2.77852 9.08017L8.58737 8.23597Z"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/src/lib/scss/_animations.scss b/src/lib/scss/_animations.scss
new file mode 100644
index 0000000..828dfe2
--- /dev/null
+++ b/src/lib/scss/_animations.scss
@@ -0,0 +1,34 @@
+@keyframes svg-text-stroke {
+	0% {
+		fill: transparent;
+		stroke: var(--text-color);
+		stroke-dashoffset: 25%;
+		stroke-dasharray: 0 50%;
+		stroke-width: 2;
+	}
+	70% {
+		fill: transparent;
+		stroke: var(--text-color);
+	}
+	80% {
+		fill: transparent;
+		stroke: var(--text-color);
+		stroke-width: 3;
+	}
+	100% {
+		fill: var(--text-color);
+		stroke: transparent;
+		stroke-dashoffset: -25%;
+		stroke-dasharray: 50% 0;
+		stroke-width: 0;
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0turn);
+	}
+	to {
+		transform: rotate(1turn);
+	}
+}
diff --git a/src/lib/scss/_base.scss b/src/lib/scss/_base.scss
new file mode 100644
index 0000000..8b80de6
--- /dev/null
+++ b/src/lib/scss/_base.scss
@@ -0,0 +1,22 @@
+// Styles that are used everywhere
+
+.container {
+	@include padded-container;
+}
+
+ul,
+ol {
+	margin: 10px 0 10px 40px;
+	padding: 0;
+
+	li {
+		margin: 6px 0;
+
+		&::marker {
+			color: var(--color--primary);
+		}
+	}
+}
+ul {
+	list-style: outside;
+}
diff --git a/src/lib/scss/_breakpoints.scss b/src/lib/scss/_breakpoints.scss
new file mode 100644
index 0000000..c14577f
--- /dev/null
+++ b/src/lib/scss/_breakpoints.scss
@@ -0,0 +1,43 @@
+$breakpoint-iphone-se-max: 320px;
+$breakpoint-phone-max: 767px;
+$breakpoint-tablet-portrait-min: 768px;
+$breakpoint-tablet-portrait-max: 900px;
+$breakpoint-tablet-landscape-min: 901px;
+$breakpoint-tablet-landscape-max: 1200px;
+$breakpoint-desktop-min: 1201px;
+
+@mixin for-iphone-se {
+	@media (max-width: $breakpoint-iphone-se-max) {
+		@content;
+	}
+}
+@mixin for-phone-only {
+	@media (max-width: $breakpoint-phone-max) {
+		@content;
+	}
+}
+@mixin for-tablet-portrait-up {
+	@media (min-width: $breakpoint-tablet-portrait-min) {
+		@content;
+	}
+}
+@mixin for-tablet-portrait-down {
+	@media (max-width: $breakpoint-tablet-portrait-max) {
+		@content;
+	}
+}
+@mixin for-tablet-landscape-up {
+	@media (min-width: $breakpoint-tablet-landscape-min) {
+		@content;
+	}
+}
+@mixin for-tablet-landscape-down {
+	@media (max-width: $breakpoint-tablet-landscape-max) {
+		@content;
+	}
+}
+@mixin for-desktop-up {
+	@media (min-width: $breakpoint-desktop-min) {
+		@content;
+	}
+}
diff --git a/src/lib/scss/_code-highlights.scss b/src/lib/scss/_code-highlights.scss
new file mode 100644
index 0000000..a815547
--- /dev/null
+++ b/src/lib/scss/_code-highlights.scss
@@ -0,0 +1,151 @@
+// pre[class*="language-"] {
+//   display: block;
+//   background-color: var(--code-background-color);
+//   color: var(--code-text-color);
+//   font-family: var(--mono-font);
+//   font-size: 0.85em;
+//   line-height: 1.33em;
+//   border-radius: 0.25em;
+//   box-shadow: var(--card-shadow);
+
+//   padding: 30px 15px;
+
+//   overflow-x: auto;
+//   scrollbar-color: var(--primary-color) var(--scrollbar-track-color);
+//   scrollbar-width: thin;
+
+//   &::-webkit-scrollbar {
+//     height: 5px;
+//   }
+//   &::-webkit-scrollbar-thumb {
+//     background: var(--primary-color);
+//   }
+// }
+
+code[class*='language-'],
+pre[class*='language-'] {
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+	text-shadow: none;
+	background: rgba(29, 59, 83, 0.99);
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+	text-shadow: none;
+	background: rgba(29, 59, 83, 0.99);
+}
+
+@media print {
+	code[class*='language-'],
+	pre[class*='language-'] {
+		text-shadow: none;
+	}
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+	color: rgb(99, 119, 119);
+	font-style: italic;
+}
+
+.token.punctuation {
+	color: rgb(199, 146, 234);
+}
+
+.namespace {
+	color: rgb(178, 204, 214);
+}
+
+.token.deleted {
+	color: rgba(239, 83, 80, 0.56);
+	font-style: italic;
+}
+
+.token.symbol,
+.token.property {
+	color: rgb(128, 203, 196);
+}
+
+.token.tag,
+.token.operator,
+.token.keyword {
+	color: rgb(127, 219, 202);
+}
+
+.token.boolean {
+	color: rgb(255, 88, 116);
+}
+
+.token.number {
+	color: rgb(247, 140, 108);
+}
+
+.token.constant,
+.token.function,
+.token.builtin,
+.token.char {
+	color: rgb(130, 170, 255);
+}
+
+.token.selector,
+.token.doctype {
+	color: rgb(199, 146, 234);
+	font-style: italic;
+}
+
+.token.attr-name,
+.token.inserted {
+	color: rgb(173, 219, 103);
+	font-style: italic;
+}
+
+.token.string,
+.token.url,
+.token.entity,
+.language-css .token.string,
+.style .token.string {
+	color: rgb(173, 219, 103);
+}
+
+.token.class-name,
+.token.atrule,
+.token.attr-value {
+	color: rgb(255, 203, 139);
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: rgb(214, 222, 235);
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
diff --git a/src/lib/scss/_functions.scss b/src/lib/scss/_functions.scss
new file mode 100644
index 0000000..bdd9d0b
--- /dev/null
+++ b/src/lib/scss/_functions.scss
@@ -0,0 +1,6 @@
+// Calculate brightness of a given color.
+@function brightness($color) {
+	// @return ((red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)) / 255 * 100%;
+	// @return math.div((red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114), 255);
+	@return calc(((red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)) / 255);
+}
diff --git a/src/lib/scss/_markdown.scss b/src/lib/scss/_markdown.scss
new file mode 100644
index 0000000..6265b2b
--- /dev/null
+++ b/src/lib/scss/_markdown.scss
@@ -0,0 +1,85 @@
+#article-content {
+	.content {
+		a:not(.button) {
+			&:hover {
+				filter: drop-shadow(0px 0px 3px var(--color--primary));
+			}
+		}
+
+		p {
+			margin: 0.75rem 0;
+			line-height: 1.55em;
+		}
+
+		h2 {
+			margin: 3rem 0 0.5rem;
+		}
+
+		h3 {
+			font-size: 1.2rem;
+			margin: 2rem 0 0.3rem;
+		}
+
+		h4 {
+			font-size: 1.3rem;
+			margin: 2rem 0 0.3rem;
+		}
+
+		picture {
+			display: inline;
+		}
+
+		img {
+			display: block;
+			margin-left: auto;
+			margin-right: auto;
+			margin-top: 2rem;
+			margin-bottom: 2rem;
+
+			max-width: 100%;
+			height: auto;
+			width: auto;
+
+			box-shadow: var(--image-shadow);
+		}
+
+		figcaption {
+			font-size: 0.85rem;
+			text-align: center;
+			margin-bottom: 2rem;
+			color: rgba(var(--color--text-rgb), 0.8);
+		}
+
+		img + figcaption {
+			margin-top: -1rem;
+		}
+
+		blockquote {
+			padding: 25px 25px 15px;
+			border-radius: 20px;
+			font-size: 1.1rem;
+			border-left: 4px solid var(--color--primary);
+			background: var(--color--callout-background);
+		}
+
+		code:not([class^='language-']) {
+			background: var(--color--code-inline-background);
+			padding: 5px 10px;
+			border-radius: 5px;
+		}
+
+		code {
+			font-family: var(--font--mono);
+		}
+	}
+
+	.heading-link {
+		color: var(--color--primary);
+		text-decoration: none;
+		margin-right: 10px;
+	}
+
+	img {
+		border-radius: 6px;
+	}
+}
diff --git a/src/lib/scss/_mixins.scss b/src/lib/scss/_mixins.scss
new file mode 100644
index 0000000..221d102
--- /dev/null
+++ b/src/lib/scss/_mixins.scss
@@ -0,0 +1,49 @@
+@import './_breakpoints.scss';
+@import './_functions.scss';
+
+@mixin padded-container {
+	width: 100%;
+	padding-right: 15px;
+	padding-left: 15px;
+	margin-right: auto;
+	margin-left: auto;
+
+	@include for-iphone-se {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	@include for-tablet-portrait-up {
+		padding-right: 20px;
+		padding-left: 20px;
+	}
+
+	@include for-tablet-landscape-up {
+		padding-right: 30px;
+		padding-left: 30px;
+	}
+
+	@include for-desktop-up {
+		max-width: 1080px;
+	}
+}
+
+// Defines a bunch of CSS variables for a given color
+// In HEX, HSL and RGB formats
+// Plus a contrast option for text
+@mixin define-color($title, $color) {
+	--color--#{$title}: #{$color};
+
+	--color--#{$title}-h: #{hue($color)};
+	--color--#{$title}-l: #{lightness($color)};
+	--color--#{$title}-s: #{saturation($color)};
+	--color--#{$title}-a: #{alpha($color)};
+
+	--color--#{$title}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
+
+	--color--#{$title}-contrast: #{if(
+			brightness($color) > 186,
+			var(--color--text),
+			var(--color--text-inverse)
+		)};
+}
diff --git a/src/lib/scss/_reset.scss b/src/lib/scss/_reset.scss
new file mode 100644
index 0000000..58fde3d
--- /dev/null
+++ b/src/lib/scss/_reset.scss
@@ -0,0 +1,47 @@
+/*
+  Josh's Custom CSS Reset
+  https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+* {
+	margin: 0;
+}
+html,
+body {
+	height: 100%;
+}
+body {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
+#root,
+#__next {
+	isolation: isolate;
+}
diff --git a/src/lib/scss/_themes.scss b/src/lib/scss/_themes.scss
new file mode 100644
index 0000000..9813a79
--- /dev/null
+++ b/src/lib/scss/_themes.scss
@@ -0,0 +1,93 @@
+@import '$lib/scss/_mixins.scss';
+
+@mixin base-theme {
+	@include define-color('primary', #ffc409);
+	@include define-color('primary-shade', #e0ac08);
+	@include define-color('primary-tint', #f9f6fe);
+
+	@include define-color('secondary', #ff571a);
+	@include define-color('secondary-shade', #ffa280);
+	@include define-color('secondary-tint', #fff8f5);
+
+	@include define-color('yellow', #ffd400);
+
+	@include define-color('text', #1c1e26);
+	@include define-color('text-shade', #5d5f65);
+	@include define-color('text-inverse', #ffffff);
+	@include define-color('text-inverse-shade', #9eb4b5);
+
+	@include define-color('page-background', #f4f8fb);
+	@include define-color('post-page-background', #f3fbfc);
+	@include define-color('card-background', #ffffff);
+
+	// Used for Callout component
+	@include define-color('callout-background', #f4f8fb);
+	@include define-color('callout-background--info', #dfeffd);
+	@include define-color('callout-accent--info', #2883f4);
+	@include define-color('callout-background--warning', #fff6b6);
+	@include define-color('callout-accent--warning', #c87820);
+	@include define-color('callout-background--error', #ffe8e8);
+	@include define-color('callout-accent--error', #f95256);
+	@include define-color('callout-background--success', #dcf7ec);
+	@include define-color('callout-accent--success', #009f70);
+
+	// Used for Code Block component
+	@include define-color('code-background', #1c1e26);
+	@include define-color('code-text', #ffffff);
+	@include define-color('code-inline-background', #e3e3e3);
+
+	--color--waves-start: rgba(var(--color--primary-rgb), 0.3);
+	--color--waves-end: rgba(var(--color--primary-rgb), 0.1);
+
+	--card-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+	--card-shadow-hover: 0px 4px 10px 8px rgb(0 0 0 / 10%);
+	--image-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
+}
+
+@mixin dark-theme {
+	@include define-color('primary', #ffc409);
+	@include define-color('primary-shade', #e0ac08);
+	@include define-color('primary-tint', #231934);
+
+	@include define-color('secondary', #ff723f);
+	@include define-color('secondary-shade', #ab3307);
+	@include define-color('secondary-tint', #1b1918);
+
+	@include define-color('yellow', #ffd400);
+
+	@include define-color('text', #ffffff);
+	@include define-color('text-shade', #9eb4b5);
+	@include define-color('text-inverse', #1c1e26);
+	@include define-color('text-inverse-shade', #5d5f65);
+
+	@include define-color('page-background', #1c1e26);
+	@include define-color('post-page-background', #141519);
+	@include define-color('card-background', #32343e);
+
+	// Used for Callout component
+	@include define-color('callout-background', #1c1e26);
+	@include define-color('callout-background--info', #1d3874);
+	@include define-color('callout-accent--info', #6ca9f7);
+	@include define-color('callout-background--warning', #724413);
+	@include define-color('callout-accent--warning', #ffca39);
+	@include define-color('callout-background--error', #7c1d20);
+	@include define-color('callout-accent--error', #ff8082);
+	@include define-color('callout-background--success', #004737);
+	@include define-color('callout-accent--success', #00c48f);
+
+	@include define-color('code-inline-background', #2b3131);
+}
+
+:root {
+	@include base-theme;
+
+	&[data-theme='dark'] {
+		@include dark-theme;
+	}
+
+	&[data-theme='auto'] {
+		@media (prefers-color-scheme: dark) {
+			@include dark-theme;
+		}
+	}
+}
diff --git a/src/lib/scss/_typography.scss b/src/lib/scss/_typography.scss
new file mode 100644
index 0000000..52c7b90
--- /dev/null
+++ b/src/lib/scss/_typography.scss
@@ -0,0 +1,63 @@
+a {
+	color: var(--color--text);
+	text-decoration-color: var(--color--primary);
+	text-underline-offset: 0.1em;
+	text-decoration-thickness: 2px;
+	transition: all 0.2s ease-in-out;
+
+	&:hover {
+		text-underline-offset: 0.3em;
+	}
+}
+
+::selection {
+	background-color: rgba(var(--color--primary-rgb), 0.3);
+	color: var(--color--text);
+	text-shadow: none;
+}
+
+strong,
+b {
+	font-weight: 600;
+}
+em,
+i {
+	font-style: italic;
+}
+
+// #region Titles
+h1 {
+	font-size: 2.5rem;
+	font-weight: 700;
+
+	@include for-phone-only {
+		font-size: 2rem;
+	}
+}
+
+h2 {
+	font-size: 1.8rem;
+	font-weight: 600;
+}
+
+h3 {
+	font-size: 1.5rem;
+	font-weight: 600;
+}
+
+h4 {
+	font-size: 1.2rem;
+}
+
+h5 {
+	font-size: 1rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+	font-family: var(--font--title);
+}
+// #endregion
diff --git a/src/lib/scss/_variables.scss b/src/lib/scss/_variables.scss
new file mode 100644
index 0000000..52ca8cd
--- /dev/null
+++ b/src/lib/scss/_variables.scss
@@ -0,0 +1,13 @@
+:root {
+	// Fonts
+	--font--default: Comfortaa, sans-serif;
+	--font--title: Comfortaa, serif;
+	--font--mono: Comfortaa, monospace;
+
+	// Grabbed from open-props.style
+	--ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+	--ease-4: cubic-bezier(0.25, 0, 0.2, 1);
+	--ease-out-1: cubic-bezier(0, 0, 0.75, 1);
+	--ease-out-3: cubic-bezier(0, 0, 0.3, 1);
+	--ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+}
diff --git a/src/lib/scss/global.scss b/src/lib/scss/global.scss
new file mode 100644
index 0000000..c0cff4a
--- /dev/null
+++ b/src/lib/scss/global.scss
@@ -0,0 +1,45 @@
+@import '$lib/scss/_reset.scss';
+@import '$lib/scss/_variables.scss';
+@import '$lib/scss/_themes.scss';
+@import '$lib/scss/_breakpoints.scss';
+@import '$lib/scss/_functions.scss';
+@import '$lib/scss/_mixins.scss';
+@import '$lib/scss/_base.scss';
+@import '$lib/scss/_typography.scss';
+@import '$lib/scss/_markdown.scss';
+@import '$lib/scss/_code-highlights.scss';
+@import '$lib/scss/animations.scss';
+
+@import '@fontsource/comfortaa';
+@import '@fontsource/comfortaa/600.css';
+@import '@fontsource/comfortaa/700.css';
+
+body {
+	--body-background-color: var(--color--page-background);
+	background-color: var(--body-background-color);
+	color: var(--color--text);
+	fill: var(--color--text);
+	transition: all 0.4s ease;
+	font-family: var(--font--default);
+	line-height: 1.3;
+	scroll-behavior: smooth;
+
+	height: 100%;
+	min-height: 100vh;
+	/* safari viewport bug fix */
+	min-height: -webkit-fill-available;
+
+	width: 100%;
+	overflow-x: hidden;
+}
+
+html {
+	scroll-behavior: smooth;
+	font-size: 18px;
+	width: 100%;
+}
+
+#svelte-root {
+	height: 100%;
+	position: relative;
+}
diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts
new file mode 100644
index 0000000..ed79d1e
--- /dev/null
+++ b/src/lib/stores/theme.ts
@@ -0,0 +1,24 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+function createTheme() {
+	let currentTheme;
+	if (browser) {
+		currentTheme = localStorage.getItem('theme-preference') || 'auto';
+	}
+
+	const { subscribe, set } = writable<string>(currentTheme);
+
+	return {
+		subscribe,
+		set: (value: string) => {
+			if (browser) {
+				localStorage.setItem('theme-preference', value);
+				document.firstElementChild?.setAttribute('data-theme', value);
+			}
+			set(value);
+		}
+	};
+}
+
+export const theme = createTheme();
diff --git a/src/lib/utils/regex.ts b/src/lib/utils/regex.ts
new file mode 100644
index 0000000..8397cd0
--- /dev/null
+++ b/src/lib/utils/regex.ts
@@ -0,0 +1 @@
+export const HttpRegex = /^((http|https):\/\/)/;
diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
new file mode 100644
index 0000000..cdcc12b
--- /dev/null
+++ b/src/lib/utils/types.ts
@@ -0,0 +1,38 @@
+export type NoUndefinedField<T> = { [P in keyof T]-?: NoUndefinedField<NonNullable<T[P]>> };
+
+export type SparkleType = {
+	id: string;
+	createdAt: number;
+	color: string;
+	size: number;
+	style: any;
+};
+
+export type TagType = {
+	label: string;
+	color?: 'primary' | 'secondary';
+};
+
+export type SocialLink = {};
+
+export type Feature = {
+	name: string;
+	description: string;
+	image: string;
+	tags: TagType[];
+};
+
+export type BlogPost = {
+	tags: string[];
+	keywords: string[];
+	hidden: boolean;
+	slug: string;
+	title: string;
+	date: string;
+	updated: string;
+	excerpt: string;
+	html: string | undefined;
+	readingTime: string;
+	relatedPosts: BlogPost[];
+	coverImage: string | undefined;
+};
diff --git a/src/routes/(blog-article)/+layout.server.ts b/src/routes/(blog-article)/+layout.server.ts
new file mode 100644
index 0000000..2ac7449
--- /dev/null
+++ b/src/routes/(blog-article)/+layout.server.ts
@@ -0,0 +1,11 @@
+import { filteredPosts } from '$lib/data/blog-posts';
+
+export async function load({ url }: { url: { pathname: string } }) {
+	const { pathname } = url;
+	const slug = pathname.replace('/', '');
+	const post = filteredPosts.find((post) => post.slug === slug);
+
+	return {
+		post
+	};
+}
diff --git a/src/routes/(blog-article)/+layout.svelte b/src/routes/(blog-article)/+layout.svelte
new file mode 100644
index 0000000..460ba07
--- /dev/null
+++ b/src/routes/(blog-article)/+layout.svelte
@@ -0,0 +1,190 @@
+<script lang="ts">
+	import Header from '$lib/components/organisms/Header.svelte';
+	import Footer from '$lib/components/organisms/Footer.svelte';
+	import Tag from '$lib/components/atoms/Tag.svelte';
+	import dateformat from 'dateformat';
+
+	import { keywords, siteBaseUrl, title } from '$lib/data/meta';
+	import type { BlogPost } from '$lib/utils/types';
+	import RelatedPosts from '$lib/components/organisms/RelatedPosts.svelte';
+	import Image from '$lib/components/atoms/Image.svelte';
+
+	export let data: { post: BlogPost };
+	$: ({ post } = data);
+
+	let metaKeywords = keywords;
+
+	$: {
+		if (post?.tags?.length) {
+			metaKeywords = post.tags.concat(metaKeywords);
+		}
+		if (post?.keywords?.length) {
+			metaKeywords = post.keywords.concat(metaKeywords);
+		}
+	}
+</script>
+
+<svelte:head>
+	{#if post}
+		<meta name="keywords" content={metaKeywords.join(', ')} />
+
+		<meta name="description" content={post.excerpt} />
+		<meta property="og:description" content={post.excerpt} />
+		<meta name="twitter:description" content={post.excerpt} />
+		<link rel="canonical" href="{siteBaseUrl}/{post.slug}" />
+
+		<title>{post.title} - {title}</title>
+		<meta property="og:title" content="{post.title} - {title}" />
+		<meta name="twitter:title" content="{post.title} - {title}" />
+
+		{#if post.coverImage}
+			<meta property="og:image" content="{siteBaseUrl}{post.coverImage}" />
+			<meta name="twitter:image" content="{siteBaseUrl}{post.coverImage}" />
+		{/if}
+	{/if}
+</svelte:head>
+
+<div class="article-layout">
+	<Header showBackground />
+
+	<main>
+		<article id="article-content">
+			<div class="header">
+				{#if post}
+					<h1>{post.title}</h1>
+					<div class="note">Published on {dateformat(post.date, 'UTC:dd mmmm yyyy')}</div>
+					{#if post.updated}
+						<div class="note">Updated on {dateformat(post.updated, 'UTC:dd mmmm yyyy')}</div>
+					{/if}
+					{#if post.readingTime}
+						<div class="note">{post.readingTime}</div>
+					{/if}
+					{#if post.tags?.length}
+						<div class="tags">
+							{#each post.tags as tag}
+								<Tag>{tag}</Tag>
+							{/each}
+						</div>
+					{/if}
+				{/if}
+			</div>
+			{#if post && post.coverImage}
+				<div class="cover-image">
+					<Image src={post.coverImage} alt={post.title} />
+				</div>
+			{/if}
+			<div class="content">
+				<slot />
+			</div>
+		</article>
+
+		{#if post.relatedPosts && post.relatedPosts.length > 0}
+			<div class="container">
+				<RelatedPosts posts={post.relatedPosts} />
+			</div>
+		{/if}
+	</main>
+
+	<Footer />
+</div>
+
+<style lang="scss">
+	@import '$lib/scss/_mixins.scss';
+
+	.article-layout {
+		--body-background-color: var(--color--post-page-background);
+		background-color: var(--color--post-page-background);
+	}
+
+	#article-content {
+		--main-column-width: 65ch;
+		position: relative;
+		padding-top: 40px;
+		padding-bottom: 80px;
+		padding-right: 15px;
+		padding-left: 15px;
+
+		@include for-iphone-se {
+			padding-left: 0;
+			padding-right: 0;
+		}
+
+		@include for-tablet-portrait-up {
+			padding-right: 20px;
+			padding-left: 20px;
+		}
+
+		@include for-tablet-landscape-up {
+			padding-right: 30px;
+			padding-left: 30px;
+		}
+
+		display: flex;
+		flex-direction: column;
+		gap: 30px;
+
+		.header {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+			gap: 10px;
+			width: min(var(--main-column-width), 100%);
+			margin: 0 auto;
+
+			.note {
+				font-size: 90%;
+				color: rgba(var(--color--text-rgb), 0.8);
+			}
+		}
+
+		.cover-image {
+			width: min(var(--main-column-width), 100%);
+			margin: 0 auto;
+			max-height: 400px;
+			box-shadow: var(--image-shadow);
+			border-radius: 6px;
+
+			img {
+				width: 100%;
+				height: 100%;
+				max-height: 400px;
+				object-fit: cover;
+			}
+		}
+
+		:global(.cover-image img) {
+			max-height: 400px;
+			object-fit: cover;
+		}
+
+		.content {
+			display: grid;
+			grid-template-columns:
+				1fr
+				min(var(--main-column-width), 100%)
+				1fr;
+
+			:global(> *) {
+				grid-column: 2;
+			}
+
+			:global(> .full-bleed) {
+				grid-column: 1 / 4;
+				width: 100%;
+				max-width: 1600px;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		.tags {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 5px;
+			flex-wrap: wrap;
+		}
+	}
+</style>
diff --git a/src/routes/(blog-article)/blog-posts/+page.md b/src/routes/(blog-article)/blog-posts/+page.md
new file mode 100644
index 0000000..1005097
--- /dev/null
+++ b/src/routes/(blog-article)/blog-posts/+page.md
@@ -0,0 +1,63 @@
+---
+title: How Blog Posts Work
+slug: blog-posts
+coverImage: /images/posts/blog-posts.jpg
+date: 2023-04-22T21:55:15.361Z
+excerpt: How to manage existing blog posts and create new ones
+tags:
+  - Documentation
+---
+
+<script>
+  import Callout from "$lib/components/molecules/Callout.svelte";
+  import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
+  import Image from "$lib/components/atoms/Image.svelte";
+</script>
+
+All blog posts are located inside the `src/routes/(blog-article)` folder. Each folder inside it represents a blog post, and each folder has a `+page.md` file, which is the file that contains the post's content.
+
+This way, the URL for each blog post is generated with the folder's name. For example, the folder `src/routes/(blog-article)/how-blog-posts-work` will generate the URL `https://mysite.com/how-blog-posts-work`.
+
+All posts are Markdown files, which means you can use the [Markdown syntax](https://www.markdownguide.org/basic-syntax) in them, and it will work out of the box. However, since this projects uses [MDsveX](https://mdsvex.pngwn.io/) to parse Markdown, you can also use Svelte components inside them! This means that the components used in other pages can also be used in blog posts.
+
+<Callout type="info">
+  This is a Svelte component inside a Markdown file!
+</Callout>
+
+## Processing
+
+Besides the blog post page itself, the blog posts can be displayed in other places, such as the `/blog` page, which lists all blog posts, and the `<RecentPosts>` component, used in the home page.
+
+To be able to do that, posts are processed in the `src/lib/data/blog-posts/index.ts` file. That file imports the blog post files and processes them, so we're able to use some of the post's metadata to list them. For example, we get the post's title, cover image, and calculate the reading time based on its content, so that information is displayed in the blog post cards in the `/blog` page.
+
+There is also some basic logic to get related posts based on a post's tags. The logic should be straightforward enough to modify it to your needs.
+
+## Creating a new post
+
+To create a new post, create a new folder inside the `src/routes/(blog-article)` folder, and inside it, create a `+page.md` file. The folder name will be used as the post's URL slug, so make sure it's a valid URL slug.
+
+Inside the `+page.md` file, you must start with the front matter, which is a YAML-like syntax that is used to define metadata for the post. The front matter must be the first thing in the file, and must be separated from the rest of the content by three dashes (`---`). An example of a front matter is:
+
+<CodeBlock lang="markdown">
+
+```md
+---
+slug: my-new-blog-post
+title: My New Blog Post
+date: 2023-04-22T20:45:25.350Z
+excerpt: A short description of the post
+coverImage: /images/posts/cover-image.jpg
+tags:
+  - Example
+---
+```
+
+</CodeBlock>
+
+## Managing blog posts
+
+I highly recommend the [Front Matter VS Code extension](https://frontmatter.codes/) to manage blog posts. It gives you a nice CMS-like UI to manage the front matter of all blog posts, as well as a preview of their content. It is, of course, optional, and you can manage everything directly in the Markdown files if you prefer.
+
+<Image fullBleed src="/images/posts/frontmatter-preview-dashboard.png" alt="Screenshot of the Front Matter VS Code extension, showing the dashboard with all posts" />
+
+<Image fullBleed src="/images/posts/frontmatter-preview-edit.png" alt="Screenshot of the Front Matter VS Code extension, showing the post editing UI" />
diff --git a/src/routes/(blog-article)/customization/+page.md b/src/routes/(blog-article)/customization/+page.md
new file mode 100644
index 0000000..1f9ee79
--- /dev/null
+++ b/src/routes/(blog-article)/customization/+page.md
@@ -0,0 +1,60 @@
+---
+slug: customization
+title: How to Customize this Template
+date: 2023-04-22T21:55:27.154Z
+excerpt: How to customize what you're seeing here and make it your own.
+coverImage: /images/posts/customization.jpg
+tags:
+  - Documentation
+---
+
+In general, content can be modified by editing the **organisms** and the pages themselves. Below is a list of the most common changes that you may want to make.
+
+## Domain/site URL
+
+The first thing you might want to do is replace the domain of of the site with your own. There are two places where you need to do that:
+
+- In the `package.json` file, check the `postbuild` script. Change the domain there to your own, so it ends up like this: `svelte-sitemap --domain https://your-domain.com`. This is used to generate the sitemap of your website, which is used by search engines to index your site.
+- In the `src/lib/data/meta.ts` file, change the `siteBaseUrl` property to your own domain. This is used in multiple parts of the app wherever the site needs to link to itself.
+
+## Header/site logo
+
+To replace the logo that appears in the header, modify or replace the contents of the `Logo.svelte` atom.
+
+The links that appear on the header can be modified directly in the `Header.svelte` organism.
+
+## Hero section
+
+The hero section is the first section of the site's home page. It is composed of a Heading, the _intro_ text, and a list of buttons/CTAs. The contents of this section can be modified directly in the `Hero.svelte` organism.
+
+## About section
+
+The about section contains another headline, a paragraph of text, some social media links, and optionally an image. The contents of this section can be modified directly in the `About.svelte` organism.
+
+## Social Links
+
+The social links are contained in the `Socials.svelte` molecule and can be used in any page. This template shows them on the About section and in the Footer.
+
+## Footer
+
+The footer contains some credits, a list of social links, and the Theme toggle. The contents of this section can be modified directly in the `Footer.svelte` organism.
+
+## Colors
+
+You can change the color palette of the website just by tweaking the `_themes.scss` file. The file uses the `define-color` scss function to automatically set the color variables in Hex, RGB and HSL formats, so you can choose whichever format you need.
+
+The main theme colors (primary and secondary) have two variants: shade and tint. The shade is a lighter version of the color (darker in dark mode), and the tint should almost match the page's background, so that in light mode, it's really bright, and in dark mode, it's really dark.
+
+## Fonts
+
+This template uses the Inter, Merriweather and Ubuntu Mono font families. You can change the font family by editing the `_variables.scss` file, and the code is already set up to accept a default font, a heading font, and a monospace font.
+
+I recommend using [Fontsource](https://fontsource.org/) to import the fonts you need, or self-hosting them. In case you're using Fontsource, you can import the fonts in `global.scss` file to make sure they're available in the entire site.
+
+## Favicon
+
+Favicons are located in the `static/favicons` folder. I like to use [Real Favicon Generator](https://realfavicongenerator.net) to generate mine, but you can use any other tool you like. I wrote [a blog post about Favicons](https://fantinel.dev/fixing-favicons) in case you want to learn more about them.
+
+## Social Media Link Preview
+
+You probably want to customize how links to your website look when posted on social media/messaging apps. To do that, you can edit the info in `src/lib/data/meta.ts`. There, you can edit the site's title, description, tags (used by search engines) and the image that appears when sharing a link.
diff --git a/src/routes/(blog-article)/project-structure/+page.md b/src/routes/(blog-article)/project-structure/+page.md
new file mode 100644
index 0000000..eae0fab
--- /dev/null
+++ b/src/routes/(blog-article)/project-structure/+page.md
@@ -0,0 +1,53 @@
+---
+slug: project-structure
+title: Project Structure
+date: 2023-04-22T21:55:21.800Z
+excerpt: How code and structure are organized.
+coverImage: /images/posts/project-structure.jpg
+tags:
+  - Documentation
+---
+
+<script>
+  import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
+</script>
+
+This project follows the basic [SvelteKit structure](https://kit.svelte.dev/docs/project-structure), with some added conventions to make customization a post-management easier.
+
+## Components
+
+The components are organized following the [Atomic Design](https://medium.com/@WeAreMobile1st/atomic-design-getting-started-916bc81bad0e) principles, albeit somewhat simplified. Components are in the `src/lib/components` folder, and are organized in the following way:
+
+### Atoms
+
+Atoms are the most basic components, which can be seen as building blocks for other components. They're small and self-contained, and do only one thing. Examples of atoms are buttons, inputs, and tags.
+
+### Molecules
+
+Molecules are groups of atoms that work together to form a more complex component. Examples of molecules are cards, groups of links, or an alert callout.
+
+### Organisms
+
+Organisms, in this project, are code blocks that represent a section of a page, such as the header, footer and hero section. They can be used directly in a page as a sort of building block, so the page's code can be as simple as this:
+
+<CodeBlock lang="html" filename="+page.svelte">
+
+```html
+<header />
+<Hero />
+<About />
+<footer />
+```
+
+</CodeBlock>
+
+## Pages
+
+Pages obey the default SvelteKit structure, but can be summarized as follows:
+
+- There are two different file types: the pages (`+page.svelte`) and the layouts (`+layout.svelte`). Layouts are a way to reuse the same structure between different pages without having to duplicate code;
+- There are two different page layouts in this site: the "Waves" layout, which all pages inside the `(waves)` folder use, and the "Blog Article" layout, which all pages inside the `(blog-article)` folder use;
+
+## Blog Posts
+
+To know how blog posts work and how to create new ones, check out [How Blog Posts Work](/blog-posts).
diff --git a/src/routes/(waves)/+layout.svelte b/src/routes/(waves)/+layout.svelte
new file mode 100644
index 0000000..9b50c4a
--- /dev/null
+++ b/src/routes/(waves)/+layout.svelte
@@ -0,0 +1,35 @@
+<script>
+	import Waves from '$lib/components/organisms/Waves.svelte';
+	import Header from '$lib/components/organisms/Header.svelte';
+	import Footer from '$lib/components/organisms/Footer.svelte';
+
+	import { description, image, keywords, title, siteBaseUrl } from '$lib/data/meta';
+</script>
+
+<svelte:head>
+	<link rel="“canonical”" href={siteBaseUrl} />
+	<meta name="keywords" content={keywords.join(', ')} />
+
+	<meta name="description" content={description} />
+	<meta property="og:description" content={description} />
+	<meta name="twitter:description" content={description} />
+
+	<title>{title}</title>
+	<meta property="og:title" content={title} />
+	<meta name="twitter:title" content={title} />
+
+	<meta property="og:image" content={image} />
+	<meta name="twitter:image" content={image} />
+
+	<meta name="twitter:card" content="summary_large_image" />
+</svelte:head>
+
+<Waves />
+
+<Header />
+
+<main>
+	<slot />
+</main>
+
+<Footer />
diff --git a/src/routes/(waves)/+page.server.ts b/src/routes/(waves)/+page.server.ts
new file mode 100644
index 0000000..c7e31af
--- /dev/null
+++ b/src/routes/(waves)/+page.server.ts
@@ -0,0 +1,11 @@
+import features from '$lib/data/features';
+import { filteredPosts } from '$lib/data/blog-posts';
+
+export async function load() {
+	const posts = filteredPosts.slice(0, 4);
+
+	return {
+		features,
+		posts
+	};
+}
diff --git a/src/routes/(waves)/+page.svelte b/src/routes/(waves)/+page.svelte
new file mode 100644
index 0000000..45fc677
--- /dev/null
+++ b/src/routes/(waves)/+page.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Hero from '$lib/components/organisms/Hero.svelte';
+	import About from '$lib/components/organisms/About.svelte';
+	// import RecentPosts from '$lib/components/organisms/RecentPosts.svelte';
+	// import Features from '$lib/components/organisms/Features.svelte';
+	import type { Feature, BlogPost } from '$lib/utils/types';
+
+	export let data: {
+		features: Feature[];
+		posts: BlogPost[];
+	};
+
+	let { features, posts } = data;
+</script>
+
+<div class="container">
+	<Hero />
+	<About />
+	<!--
+	{#if posts && posts.length > 0}
+		<RecentPosts {posts} />
+	{/if}
+	<Features {features} />
+	-->
+</div>
diff --git a/src/routes/(waves)/404/+page.svelte b/src/routes/(waves)/404/+page.svelte
new file mode 100644
index 0000000..5b433d6
--- /dev/null
+++ b/src/routes/(waves)/404/+page.svelte
@@ -0,0 +1,41 @@
+<script>
+	import Button from '$lib/components/atoms/Button.svelte';
+	import Error from '$lib/icons/error.svelte';
+</script>
+
+<div class="error-page">
+	<div class="container">
+		<h1>Oh no! 404!</h1>
+		<div class="svg-wrapper">
+			<Error />
+		</div>
+		<p>It seems like coffee was spilled all over this page, and now it can't be displayed.</p>
+		<br />
+		<Button href="/">Start over</Button>
+	</div>
+</div>
+
+<style lang="scss">
+	.error-page {
+		background: var(--color--page-background);
+		position: relative;
+	}
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 60vh;
+		text-align: center;
+
+		.svg-wrapper {
+			width: 300px;
+			margin-top: -60px;
+			margin-bottom: -30px;
+
+			:global(svg) {
+				filter: drop-shadow(2px 6px 0px rgba(0, 0, 0, 0.1));
+			}
+		}
+	}
+</style>
diff --git a/src/routes/(waves)/blog/+page.server.ts b/src/routes/(waves)/blog/+page.server.ts
new file mode 100644
index 0000000..8ea46c5
--- /dev/null
+++ b/src/routes/(waves)/blog/+page.server.ts
@@ -0,0 +1,7 @@
+import { filteredPosts } from '$lib/data/blog-posts';
+
+export async function load() {
+	return {
+		posts: filteredPosts
+	};
+}
diff --git a/src/routes/(waves)/blog/+page.svelte b/src/routes/(waves)/blog/+page.svelte
new file mode 100644
index 0000000..2c25a32
--- /dev/null
+++ b/src/routes/(waves)/blog/+page.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import BlogPostCard from '$lib/components/molecules/BlogPostCard.svelte';
+	import ContentSection from '$lib/components/organisms/ContentSection.svelte';
+	import type { BlogPost } from '$lib/utils/types';
+
+	export let data: {
+		posts: BlogPost[];
+	};
+
+	let { posts } = data;
+</script>
+
+<div class="container">
+	<ContentSection title="All Blog Posts">
+		<div class="grid">
+			{#each posts as post}
+				<BlogPostCard
+					title={post.title}
+					coverImage={post.coverImage}
+					excerpt={post.excerpt}
+					readingTime={post.readingTime}
+					slug={post.slug}
+					tags={post.tags}
+				/>
+			{/each}
+		</div>
+	</ContentSection>
+</div>
+
+<style lang="scss">
+	@import '$lib/scss/_mixins.scss';
+
+	.grid {
+		width: 100%;
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+		grid-gap: 20px;
+
+		@include for-tablet-portrait-down {
+			grid-template-columns: 1fr;
+		}
+
+		@include for-tablet-landscape-up {
+			// Select every 6 elements, starting from position 1
+			// And make it take up 6 columns
+			> :global(:nth-child(6n + 1)) {
+				grid-column: span 6;
+			}
+			// Select every 6 elements, starting from position 2
+			// And make it take up 3 columns
+			> :global(:nth-child(6n + 2)) {
+				grid-column: span 3;
+			}
+			// Select every 6 elements, starting from position 3
+			// And make it take up 3 columns
+			> :global(:nth-child(6n + 3)) {
+				grid-column: span 3;
+			}
+			// Select every 6 elements, starting from position 4, 5 and 6
+			// And make it take up 2 columns
+			> :global(:nth-child(6n + 4)),
+			:global(:nth-child(6n + 5)),
+			:global(:nth-child(6n + 6)) {
+				grid-column: span 2;
+			}
+		}
+	}
+</style>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..257db17
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,50 @@
+<script>
+	import Header from '$lib/components/organisms/Header.svelte';
+	import Footer from '$lib/components/organisms/Footer.svelte';
+
+	import Button from '$lib/components/atoms/Button.svelte';
+	import Error from '$lib/icons/error.svelte';
+</script>
+
+<Header showBackground />
+
+<main>
+	<div class="error-page">
+		<div class="container">
+			<h1>Oh no!</h1>
+			<div class="svg-wrapper">
+				<Error />
+			</div>
+			<p>It seems like coffee was spilled all over this page, and now it can't be displayed.</p>
+			<br />
+			<Button href="/">Start over</Button>
+		</div>
+	</div>
+</main>
+
+<Footer />
+
+<style lang="scss">
+	.error-page {
+		background: var(--color--page-background);
+		position: relative;
+	}
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 60vh;
+		text-align: center;
+
+		.svg-wrapper {
+			width: 300px;
+			margin-top: -60px;
+			margin-bottom: -30px;
+
+			:global(svg) {
+				filter: drop-shadow(2px 6px 0px rgba(0, 0, 0, 0.1));
+			}
+		}
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2909df4..92dd51c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,49 +1,5 @@
 <script>
-	import Header from './Header.svelte';
-	import './styles.css';
+	import '$lib/scss/global.scss';
 </script>
 
-<div class="app">
-	<Header />
-
-	<main>
-		<slot />
-	</main>
-
-	<footer>
-		<p>Copyright 2023</p>
-	</footer>
-</div>
-
-<style>
-	.app {
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh;
-	}
-
-	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
-		width: 100%;
-		max-width: 64rem;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
-
-	footer {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		padding: 12px;
-	}
-
-	@media (min-width: 480px) {
-		footer {
-			padding: 12px 0;
-		}
-	}
-</style>
+<slot />
diff --git a/src/routes/+page.ts b/src/routes/+layout.ts
similarity index 100%
rename from src/routes/+page.ts
rename to src/routes/+layout.ts
diff --git a/src/routes/Counter.svelte b/src/routes/Counter.svelte
deleted file mode 100644
index 96ef556..0000000
--- a/src/routes/Counter.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-	import { spring } from 'svelte/motion';
-
-	let count = 0;
-
-	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
-
-	function modulo(n: number, m: number) {
-		// handle negative numbers
-		return ((n % m) + m) % m;
-	}
-</script>
-
-<div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5" />
-		</svg>
-	</button>
-
-	<div class="counter-viewport">
-		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
-		</div>
-	</div>
-
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-		</svg>
-	</button>
-</div>
-
-<style>
-	.counter {
-		display: flex;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		margin: 1rem 0;
-	}
-
-	.counter button {
-		width: 2em;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 0;
-		background-color: transparent;
-		touch-action: manipulation;
-		font-size: 2rem;
-	}
-
-	.counter button:hover {
-		background-color: var(--color-bg-1);
-	}
-
-	svg {
-		width: 25%;
-		height: 25%;
-	}
-
-	path {
-		vector-effect: non-scaling-stroke;
-		stroke-width: 2px;
-		stroke: #444;
-	}
-
-	.counter-viewport {
-		width: 8em;
-		height: 4em;
-		overflow: hidden;
-		text-align: center;
-		position: relative;
-	}
-
-	.counter-viewport strong {
-		position: absolute;
-		display: flex;
-		width: 100%;
-		height: 100%;
-		font-weight: 400;
-		color: var(--color-theme-1);
-		font-size: 4rem;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.counter-digits {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-
-	.hidden {
-		top: -100%;
-		user-select: none;
-	}
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/oldpage.svelte
similarity index 86%
rename from src/routes/+page.svelte
rename to src/routes/oldpage.svelte
index 5b7bed2..6cac85a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/oldpage.svelte
@@ -25,21 +25,3 @@
 		<a href="https://github.com/languageXchange/website">GitHub repository</a> for more information.
 	</p>
 </section>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		flex: 0.6;
-	}
-
-	h1 {
-		width: 100%;
-	}
-
-	span {
-		font-weight: bold;
-	}
-</style>
diff --git a/src/routes/styles.css b/src/routes/styles.css
deleted file mode 100644
index 5641224..0000000
--- a/src/routes/styles.css
+++ /dev/null
@@ -1,107 +0,0 @@
-@import '@fontsource/comfortaa';
-
-:root {
-	--font-body: Comfortaa, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-		Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	--font-mono: 'Comfortaa', monospace;
-	--color-bg-0: rgb(202, 216, 228);
-	--color-bg-1: hsl(209, 36%, 86%);
-	--color-bg-2: hsl(224, 44%, 95%);
-	--color-theme-1: #ffc409;
-	--color-theme-2: #4075a6;
-	--color-text: rgba(0, 0, 0, 0.7);
-	--column-width: 42rem;
-	--column-margin-top: 4rem;
-	font-family: var(--font-body);
-	color: var(--color-text);
-}
-
-body {
-	min-height: 100vh;
-	margin: 0;
-	background-attachment: fixed;
-	background-color: var(--color-bg-1);
-	background-size: 100vw 100vh;
-	background-image: radial-gradient(
-			50% 50% at 50% 50%,
-			rgba(255, 255, 255, 0.75) 0%,
-			rgba(255, 255, 255, 0) 100%
-		),
-		linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
-}
-
-h1,
-h2,
-p {
-	font-weight: 400;
-}
-
-p {
-	line-height: 1.5;
-}
-
-a {
-	color: var(--color-theme-1);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-h1 {
-	font-size: 2rem;
-	text-align: center;
-}
-
-h2 {
-	font-size: 1rem;
-}
-
-pre {
-	font-size: 16px;
-	font-family: var(--font-mono);
-	background-color: rgba(255, 255, 255, 0.45);
-	border-radius: 3px;
-	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
-	padding: 0.5em;
-	overflow-x: auto;
-	color: var(--color-text);
-}
-
-.text-column {
-	display: flex;
-	max-width: 48rem;
-	flex: 0.6;
-	flex-direction: column;
-	justify-content: center;
-	margin: 0 auto;
-}
-
-input,
-button {
-	font-size: inherit;
-	font-family: inherit;
-}
-
-button:focus:not(:focus-visible) {
-	outline: none;
-}
-
-@media (min-width: 720px) {
-	h1 {
-		font-size: 2.4rem;
-	}
-}
-
-.visually-hidden {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: auto;
-	margin: 0;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	white-space: nowrap;
-}
diff --git a/static/favicons/android-chrome-192x192.png b/static/favicons/android-chrome-192x192.png
new file mode 100644
index 0000000..80e481c
Binary files /dev/null and b/static/favicons/android-chrome-192x192.png differ
diff --git a/static/favicons/android-chrome-512x512.png b/static/favicons/android-chrome-512x512.png
new file mode 100644
index 0000000..af964ce
Binary files /dev/null and b/static/favicons/android-chrome-512x512.png differ
diff --git a/static/favicons/apple-touch-icon.png b/static/favicons/apple-touch-icon.png
new file mode 100644
index 0000000..ce46b48
Binary files /dev/null and b/static/favicons/apple-touch-icon.png differ
diff --git a/static/favicons/favicon-16x16.png b/static/favicons/favicon-16x16.png
new file mode 100644
index 0000000..f6bcc95
Binary files /dev/null and b/static/favicons/favicon-16x16.png differ
diff --git a/static/favicons/favicon-32x32.png b/static/favicons/favicon-32x32.png
new file mode 100644
index 0000000..a14083c
Binary files /dev/null and b/static/favicons/favicon-32x32.png differ
diff --git a/static/favicons/favicon.ico b/static/favicons/favicon.ico
new file mode 100644
index 0000000..0cba8c9
Binary files /dev/null and b/static/favicons/favicon.ico differ
diff --git a/static/favicon.png b/static/favicons/favicon.png
similarity index 100%
rename from static/favicon.png
rename to static/favicons/favicon.png
diff --git a/static/favicons/safari-pinned-tab.svg b/static/favicons/safari-pinned-tab.svg
new file mode 100644
index 0000000..a091c80
--- /dev/null
+++ b/static/favicons/safari-pinned-tab.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="616.000000pt" height="616.000000pt" viewBox="0 0 616.000000 616.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,616.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3605 6153 c-188 -16 -401 -69 -560 -138 -130 -56 -194 -93 -455
+-260 -118 -76 -433 -278 -700 -448 -267 -170 -531 -341 -587 -379 -551 -375
+-817 -1062 -672 -1737 25 -116 79 -271 125 -363 l35 -69 -34 -57 c-170 -281
+-245 -578 -234 -922 8 -263 56 -464 167 -696 227 -478 644 -836 1159 -995 458
+-142 947 -106 1352 99 132 66 1576 981 1720 1089 308 231 523 578 611 983 19
+91 22 135 23 330 0 178 -4 243 -18 312 -28 138 -64 253 -119 382 -45 105 -49
+122 -38 140 160 252 243 527 256 851 20 470 -165 936 -518 1301 -315 326 -744
+530 -1203 574 -104 9 -222 11 -310 3z m348 -708 c447 -67 819 -398 934 -830
+23 -87 26 -120 27 -260 0 -146 -2 -169 -27 -258 -15 -54 -32 -109 -37 -123
+l-10 -24 -67 49 c-156 112 -331 203 -513 266 l-105 36 -1 77 c-1 132 -60 230
+-176 292 -81 44 -184 52 -268 23 -66 -23 -1505 -939 -1558 -991 -54 -54 -77
+-114 -77 -202 0 -128 61 -228 177 -291 58 -32 70 -34 153 -34 72 0 100 5 139
+22 26 13 184 109 350 215 305 194 414 251 556 291 63 17 103 21 260 21 168 0
+194 -3 282 -26 208 -56 376 -153 524 -302 226 -227 327 -467 327 -776 -1 -162
+-23 -275 -81 -402 -67 -148 -194 -306 -317 -393 -152 -108 -1540 -983 -1620
+-1021 -386 -183 -855 -116 -1194 171 -277 235 -424 584 -390 928 8 89 36 222
+58 280 l11 27 67 -49 c156 -112 331 -203 513 -266 l105 -36 0 -77 c1 -99 34
+-177 106 -244 93 -88 240 -117 354 -71 61 25 1487 933 1533 976 18 18 45 57
+60 87 35 72 37 180 5 252 -75 167 -284 250 -443 176 -30 -14 -187 -109 -348
+-211 -325 -207 -352 -223 -467 -261 -133 -45 -242 -59 -400 -53 -308 11 -554
+120 -770 341 -159 163 -254 337 -297 545 -26 127 -21 355 12 476 47 178 177
+383 315 497 57 47 1470 953 1616 1036 192 109 446 153 682 117z"/>
+</g>
+</svg>
diff --git a/static/favicons/site.webmanifest b/static/favicons/site.webmanifest
new file mode 100644
index 0000000..b1ec4a3
--- /dev/null
+++ b/static/favicons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+	"name": "SvelteKit Static Blog Template",
+	"short_name": "SvelteKit Template",
+	"icons": [
+		{
+			"src": "/favicons/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/favicons/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#f9f6fe",
+	"background_color": "#f9f6fe",
+	"display": "standalone"
+}
diff --git a/static/images/features/extensible.jpg b/static/images/features/extensible.jpg
new file mode 100644
index 0000000..44c65fb
Binary files /dev/null and b/static/images/features/extensible.jpg differ
diff --git a/static/images/features/light-dark.jpg b/static/images/features/light-dark.jpg
new file mode 100644
index 0000000..fb736d7
Binary files /dev/null and b/static/images/features/light-dark.jpg differ
diff --git a/static/images/features/markdown.jpg b/static/images/features/markdown.jpg
new file mode 100644
index 0000000..5666882
Binary files /dev/null and b/static/images/features/markdown.jpg differ
diff --git a/static/images/features/open-source.jpg b/static/images/features/open-source.jpg
new file mode 100644
index 0000000..2c7b17e
Binary files /dev/null and b/static/images/features/open-source.jpg differ
diff --git a/static/images/features/optimized.jpg b/static/images/features/optimized.jpg
new file mode 100644
index 0000000..bd5360d
Binary files /dev/null and b/static/images/features/optimized.jpg differ
diff --git a/static/images/features/themeable.jpg b/static/images/features/themeable.jpg
new file mode 100644
index 0000000..134b822
Binary files /dev/null and b/static/images/features/themeable.jpg differ
diff --git a/static/images/posts/blog-posts.jpg b/static/images/posts/blog-posts.jpg
new file mode 100644
index 0000000..9b60790
Binary files /dev/null and b/static/images/posts/blog-posts.jpg differ
diff --git a/static/images/posts/customization.jpg b/static/images/posts/customization.jpg
new file mode 100644
index 0000000..1b5f08c
Binary files /dev/null and b/static/images/posts/customization.jpg differ
diff --git a/static/images/posts/frontmatter-preview-dashboard.png b/static/images/posts/frontmatter-preview-dashboard.png
new file mode 100644
index 0000000..57ea475
Binary files /dev/null and b/static/images/posts/frontmatter-preview-dashboard.png differ
diff --git a/static/images/posts/frontmatter-preview-edit.png b/static/images/posts/frontmatter-preview-edit.png
new file mode 100644
index 0000000..6e04f52
Binary files /dev/null and b/static/images/posts/frontmatter-preview-edit.png differ
diff --git a/static/images/posts/project-structure.jpg b/static/images/posts/project-structure.jpg
new file mode 100644
index 0000000..8ab4424
Binary files /dev/null and b/static/images/posts/project-structure.jpg differ
diff --git a/static/images/sample-image.png b/static/images/sample-image.png
new file mode 100644
index 0000000..82b6efa
Binary files /dev/null and b/static/images/sample-image.png differ
diff --git a/static/images/site-preview.png b/static/images/site-preview.png
new file mode 100644
index 0000000..4c56431
Binary files /dev/null and b/static/images/site-preview.png differ
diff --git a/static/images/site-screenshot.png b/static/images/site-screenshot.png
new file mode 100644
index 0000000..84b8d8e
Binary files /dev/null and b/static/images/site-screenshot.png differ
diff --git a/svelte.config.js b/svelte.config.js
index d7d7710..a290a68 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,15 +1,47 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import { mdsvex } from 'mdsvex';
+import rehypeExternalLinks from 'rehype-external-links';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+
+const extensions = ['.svelte', '.md'];
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-
 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
+		prerender: {
+			handleHttpError: 'warn'
+		}
 	},
+	preprocess: [
+		// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+		// for more information about preprocessors
+		vitePreprocess(),
+		mdsvex({
+			extensions: extensions,
+			rehypePlugins: [
+				rehypeExternalLinks, // Adds 'target' and 'rel' to external links
+				rehypeSlug, // Adds 'id' attributes to Headings (h1,h2,etc)
+				[
+					rehypeAutolinkHeadings,
+					{
+						// Adds hyperlinks to the headings, requires rehypeSlug
+						behavior: 'prepend',
+						properties: { className: ['heading-link'], title: 'Permalink', ariaHidden: 'true' },
+						content: {
+							type: 'element',
+							tagName: 'span',
+							properties: {},
+							children: [{ type: 'text', value: '#' }]
+						}
+					}
+				]
+			]
+		})
+	],
+	extensions: extensions,
 	trailingSlash: 'always'
 };
 
diff --git a/vite.config.ts b/vite.config.ts
index 37b6a84..a226d65 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,15 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
+import path from 'path';
 
 export default defineConfig({
 	plugins: [sveltekit()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+	resolve: {
+		alias: {
+			$routes: path.resolve('./src/routes')
+		}
 	}
 });