Furhter work

package-lock.json

@@ -10,6 +10,7 @@
 			"devDependencies": {
 				"@playwright/test": "^1.28.1",
 				"@sveltejs/adapter-auto": "^2.0.0",
+				"@sveltejs/adapter-node": "^1.3.1",
 				"@sveltejs/kit": "^1.20.4",
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
 				"@typescript-eslint/parser": "^5.45.0",
@@ -610,6 +611,171 @@
 			"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
 			"dev": true
 		},
+		"node_modules/@rollup/plugin-commonjs": {
+			"version": "25.0.4",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.4.tgz",
+			"integrity": "sha512-L92Vz9WUZXDnlQQl3EwbypJR4+DM2EbsO+/KOcEkP4Mc6Ct453EeDB2uH9lgRwj4w5yflgNpq9pHOiY8aoUXBQ==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"commondir": "^1.0.1",
+				"estree-walker": "^2.0.2",
+				"glob": "^8.0.3",
+				"is-reference": "1.2.1",
+				"magic-string": "^0.27.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.68.0||^3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/glob": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+			"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^5.0.1",
+				"once": "^1.3.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/is-reference": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+			"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/estree": "*"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/magic-string": {
+			"version": "0.27.0",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+			"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+			"dev": true,
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.13"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@rollup/plugin-commonjs/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@rollup/plugin-json": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.0.0.tgz",
+			"integrity": "sha512-i/4C5Jrdr1XUarRhVu27EEwjt4GObltD7c+MkCIpO2QIbojw8MUs+CCTqOphQi3Qtg1FLmYt+l+6YeoIf51J7w==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-node-resolve": {
+			"version": "15.2.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.0.tgz",
+			"integrity": "sha512-mKur03xNGT8O9ODO6FtT43ITGqHWZbKPdVJHZb+iV9QYcdlhUUB0wgknvA4KCUmC5oHJF6O2W1EgmyOQyVUI4Q==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"@types/resolve": "1.20.2",
+				"deepmerge": "^4.2.2",
+				"is-builtin-module": "^3.2.1",
+				"is-module": "^1.0.0",
+				"resolve": "^1.22.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.78.0||^3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/pluginutils": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.3.tgz",
+			"integrity": "sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==",
+			"dev": true,
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"estree-walker": "^2.0.2",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/pluginutils/node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true
+		},
 		"node_modules/@sinclair/typebox": {
 			"version": "0.27.8",
 			"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -628,6 +794,21 @@
 				"@sveltejs/kit": "^1.0.0"
 			}
 		},
+		"node_modules/@sveltejs/adapter-node": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.3.1.tgz",
+			"integrity": "sha512-A0VgRQDCDPzdLNoiAbcOxGw4zT1Mc+n1LwT1OmO350R7WxrEqdMUChPPOd1iMfIDWlP4ie6E2d/WQf5es2d4Zw==",
+			"dev": true,
+			"dependencies": {
+				"@rollup/plugin-commonjs": "^25.0.0",
+				"@rollup/plugin-json": "^6.0.0",
+				"@rollup/plugin-node-resolve": "^15.0.1",
+				"rollup": "^3.7.0"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^1.0.0"
+			}
+		},
 		"node_modules/@sveltejs/kit": {
 			"version": "1.22.6",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.6.tgz",
@@ -743,6 +924,12 @@
 			"integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
 			"dev": true
 		},
+		"node_modules/@types/resolve": {
+			"version": "1.20.2",
+			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+			"dev": true
+		},
 		"node_modules/@types/semver": {
 			"version": "7.5.0",
 			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz",
@@ -1209,6 +1396,18 @@
 				"node": "*"
 			}
 		},
+		"node_modules/builtin-modules": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+			"integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/busboy": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1352,6 +1551,12 @@
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 			"dev": true
 		},
+		"node_modules/commondir": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+			"dev": true
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1938,6 +2143,12 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/function-bind": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+			"dev": true
+		},
 		"node_modules/get-func-name": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
@@ -2026,6 +2237,18 @@
 			"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
 			"dev": true
 		},
+		"node_modules/has": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+			"dev": true,
+			"dependencies": {
+				"function-bind": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4.0"
+			}
+		},
 		"node_modules/has-flag": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -2107,6 +2330,33 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/is-builtin-module": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+			"integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
+			"dev": true,
+			"dependencies": {
+				"builtin-modules": "^3.3.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-core-module": {
+			"version": "2.13.0",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+			"integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+			"dev": true,
+			"dependencies": {
+				"has": "^1.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2128,6 +2378,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-module": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+			"integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+			"dev": true
+		},
 		"node_modules/is-number": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -2567,6 +2823,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/path-parse": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+			"dev": true
+		},
 		"node_modules/path-type": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -2873,6 +3135,23 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/resolve": {
+			"version": "1.22.4",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
+			"integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
+			"dev": true,
+			"dependencies": {
+				"is-core-module": "^2.13.0",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			},
+			"bin": {
+				"resolve": "bin/resolve"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3158,6 +3437,18 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/supports-preserve-symlinks-flag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/svelte": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.0.tgz",

package.json

@@ -17,6 +17,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",

src/lib/GitLink.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-    export let url: string
+	export let url: string;
 </script>
-<a href="{url}">
+
-<img src="/logos/git.svg" alt="Git Repository">
+<a href={url}>
-</a><br><br>
+	<img src="/logos/color/git.svg" alt="Git Repository" />
+</a><br /><br />
 
 <style>
-    img {
+	img {
-        height: 25px;
+		height: 25px;
-        width: 25px;
+		width: 25px;
-    }
+	}
-</style>
+</style>

src/lib/articles/latest.svelte

@@ -15,6 +15,7 @@
 	.article {
 		background-color: blueviolet;
 		height: 100px;
-		width: 200px;
+		width: 95%;
+		margin: auto;
 	}
 </style>

src/lib/content-boxes/FullWidthContent.svelte

@@ -0,0 +1,19 @@
+<section>
+	<div>
+		<slot />
+	</div>
+</section>
+
+<style>
+	section {
+		width: 100%;
+		background-color: var(--main-text-color);
+		color: rgb(46, 46, 46);
+		margin: 0;
+		padding: 0;
+	}
+	div {
+		width: 90%;
+		margin: auto;
+	}
+</style>

src/lib/global.css

@@ -8,12 +8,12 @@
 }
 
 @font-face {
-    font-family: 'shadowsintolight';
+	font-family: 'shadowsintolight';
-    src: url('/font/shadowsintolight-regular.woff2') format('woff2'),
+	src: url('/font/shadowsintolight-regular.woff2') format('woff2'),
-         url('/font/shadowsintolight-regular.woff') format('woff'),
+		url('/font/shadowsintolight-regular.woff') format('woff'),
-         url('/font/shadowsintolight-regular.ttf') format('truetype');
+		url('/font/shadowsintolight-regular.ttf') format('truetype');
-    font-weight: normal;
+	font-weight: normal;
-    font-style: normal;
+	font-style: normal;
 }
 
 html {
@@ -26,6 +26,7 @@ body {
 	width: 100%;
 	margin: 0;
 	padding: 0;
+	font-family: Arial, Helvetica, sans-serif;
 }
 
 a {

src/lib/header.svelte

@@ -12,17 +12,17 @@
 
 <style>
 	header {
-        font-family: shadowsintolight;
+		font-family: shadowsintolight;
 		margin: 0px;
 		padding: 0px;
-        text-align: center;
+		text-align: center;
 	}
 
-    h1 {
+	h1 {
-        margin-bottom: 0px;
+		margin-bottom: 0px;
-    }
+	}
 
-    h2 {
+	h2 {
-        margin-top: 0px;
+		margin-top: 0px;
-    }
+	}
 </style>

src/lib/highlights/emphasis.svelte

@@ -0,0 +1,14 @@
+<span>
+	<slot />
+</span>
+
+<style>
+	span {
+		background-color: green;
+		color: white;
+		border-top-right-radius: 5px;
+		border-bottom-left-radius: 5px;
+		border-bottom-right-radius: 2px;
+		border-top-left-radius: 2px;
+	}
+</style>

src/lib/lang.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	export let langs: string[];
-	export let plats: string[];
-
-	import { platforms } from './logos';
-	import { languages } from './logos';
-</script>
-
-{#each langs as lang}
-	<img src={languages.get(lang)} alt={lang} />
-{/each}
-<br />
-{#each plats as plat}
-	<img src={platforms.get(plat)} alt={plat} />
-{/each}
-
-<style>
-	img {
-		height: 25px;
-		width: 25px;
-		padding-left: 5px;
-		padding-right: 5px;
-	}
-</style>

src/lib/language-logos/Logos.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let langs: string[];
+	export let plats: string[];
+
+	import { languageNames } from './link-map';
+</script>
+
+{#each langs as lang}
+	{#await languageNames.get(lang) then langName}
+		<a href="/posts/tag/{langName}">
+			<img src="/logos/color/{lang}.svg" alt={langName} />
+		</a>
+	{/await}
+{/each}
+<br />
+{#each plats as plat}
+	<a href="/posts/tag/{plat.toLowerCase()}">
+		<img src="/logos/color/{plat}.svg" alt={plat} />
+	</a>
+{/each}
+
+<style>
+	img {
+		height: 25px;
+		width: 25px;
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+</style>

src/lib/language-logos/link-map.ts

@@ -0,0 +1,22 @@
+export const languageNames: Map<string, string> = new Map([
+	['py', 'python'],
+	['go', 'go'],
+	['ts', 'typescript'],
+	['js', 'javascript'],
+	['c', 'c'],
+	['c#', 'csharp'],
+	['c++', 'cpp'],
+	['css', 'css'],
+	['dart', 'dart'],
+	['erlang', 'erlang'],
+	['f#', 'fsharp'],
+	['html', 'html'],
+	['java', 'java'],
+	['kotlin', 'kotlin'],
+	['lua', 'lua'],
+	['md', 'markdown'],
+	['php', 'php'],
+	['r', 'r'],
+	['rust', 'rust'],
+	['scala', 'scala']
+]);

src/lib/logos.ts

@@ -1,17 +0,0 @@
-export const languages = new Map([
-	['js', '/logos/js.svg'],
-	['ts', '/logos/ts.svg'],
-	['go', '/logos/go.svg'],
-	['py', '/logos/py.svg'],
-	['html', '/logos/html.svg'],
-	['css', '/logos/css.svg'],
-	['php', '/logos/php.svg']
-]);
-
-export const platforms = new Map([
-	['svelte', '/logos/svelte.svg'],
-	['express', '/logos/express.svg'],
-	['node', '/logos/node.svg'],
-	['mongo', '/logos/mongo.svg'],
-	['redis', '/logos/redis.svg'],
-]);

src/lib/projects/fetch.ts

@@ -1,10 +1,10 @@
-import type { Project } from "./types";
+import type { Project } from './types';
 
-export async function fetchProjects(number: number|string): Promise<Project[]> {
+export async function fetchProjects(number: number | string): Promise<Project[]> {
-    if (number === "all") {
+	if (number === 'all') {
-        // Fetch All Projects
+		// Fetch All Projects
-    } else if (typeof(number) === "number") {
+	} else if (typeof number === 'number') {
-        // Fetch {number} random projects
+		// Fetch {number} random projects
-    }
+	}
-    return []
+	return [];
-}
+}

src/lib/projects/types.ts

@@ -1,6 +1,6 @@
 export interface Project {
-    name: string;
+	name: string;
-    tag: string;
+	tag: string;
-    imagePath: string;
+	imagePath: string;
-    summary: string;
+	summary: string;
-}
+}

src/routes/+page.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
 	import Latest from '$lib/articles/latest.svelte';
 	import Header from '$lib/header.svelte';
+	import Emphasis from '$lib/highlights/emphasis.svelte';
+	import Layout from './+layout.svelte';
 
 	const title: string = "Hi, I'm Fred";
 	const subtitle: string = 'Crafting Digital';
 </script>
 
 <Header {title} {subtitle} />
-<section>
+<section id="welcome">
 	<div id="header-text">
 		<div id="text-content">
 			<p>
 				Alongside the railway's iron path, I earn my living and fuel my passions. By day, I'm woven
-				into the rail's story. By night, I craft digital magic, design experiences, and build tools.
+				into the rail's story. By night, I craft, design and build tools that work for people. My
-				My canvas? The web and beyond.
+				canvas? The web, and beyond.
 			</p>
 			<p>
 				With a family close to heart, I capture life's moments through photography and dabble in
 				model railways. All in a world I shape with creativity.
 			</p>
-			<p>Discover more at <a href="https://fredboniface.co.uk">fredboniface.co.uk</a></p>
+			<p>Sometimes, I write about it too.</p>
 		</div>
 	</div>
 	<div id="header-visual">
@@ -30,11 +32,23 @@
 		</picture>
 	</div>
 </section>
-
+<section id="meta-links">
-<Latest />
+	<div id="projects" class="col">
+		<h1>Projects</h1>
+		<Latest numbers={1} />
+	</div>
+	<div id="posts" class="col">
+		<h1>Posts</h1>
+		<Latest />
+	</div>
+	<div id="tags" class="col">
+		<h1>Tags</h1>
+		<Latest />
+	</div>
+</section>
 
 <style>
-	section {
+	#welcome {
 		display: flex;
 		flex-direction: column; /* Start with column layout for mobile */
 		align-items: center;
@@ -57,7 +71,11 @@
 	#text-content {
 		margin-left: 10px;
 		margin-right: 10px;
-		size: 18px;
+	}
+
+	#text-content p {
+		font-size: 18px;
+		line-height: 1.5;
 	}
 
 	#header-visual {
@@ -79,7 +97,7 @@
 
 	/* Media query for larger screens */
 	@media (min-width: 768px) {
-		section {
+		#welcome {
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
@@ -113,4 +131,20 @@
 			height: 100%; /* Fill the height of the #header-visual container */
 		}
 	}
+
+	#meta-links {
+		display: flex;
+		flex-direction: column;
+	}
+
+	@media (min-width: 768px) {
+		#meta-links {
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+		.col {
+			width: 30%;
+		}
+	}
 </style>

src/routes/projects/+page.server.ts

@@ -2,4 +2,4 @@ import type { Project } from '$lib/projects/types';
 
 export async function load({ params }) {
 	// Fetch all projects
-}
+}

src/routes/projects/+page.svelte

@@ -1,34 +1,44 @@
 <script lang="ts">
 	import GitLink from '$lib/GitLink.svelte';
+	import FullWidthContent from '$lib/content-boxes/FullWidthContent.svelte';
 	import Header from '$lib/header.svelte';
-import Lang from '$lib/lang.svelte';
+	import Logos from '$lib/language-logos/Logos.svelte';
 
-	const title: string = "Stuff I've Done"
+	const title: string = "Stuff I've Done";
 </script>
 
 <Header {title} />
 <main>
-<a href="/articles/owlboard">OwlBoard</a>
+	<FullWidthContent>
-<GitLink url={"https://git.fjla.uk/owlboard"} />
+		<h1><a href="/articles/owlboard">OwlBoard</a></h1>
-<Lang
+		<br />
-	langs={['js', 'ts', 'py', 'go', 'html', 'css']}
+		<GitLink url={'https://git.fjla.uk/owlboard'} />
-	plats={['svelte', 'express', 'mongo', 'redis']}
+		<Logos
-/>
+			langs={['js', 'ts', 'py', 'go', 'html', 'css']}
-<p>
+			plats={['svelte', 'express', 'mongo', 'redis']}
-	Working full time on the 'iron road', left me wanting a faster way to get the information I
+		/>
-	needed. OwlBoard evolved from <a href="/articles/athena">Athena</a> and grew to provide more information
+		<p>
-	that frontline rail colleagues need. <a href="">Read more...</a>
+			Working full time on the 'iron road', left me wanting a faster way to get the information I
-</p>
+			needed. OwlBoard evolved from <a href="/articles/athena">Athena</a> and grew to provide more
-
+			information that frontline rail colleagues need. <a href="">Read more...</a>
-<a href="/articles/map-dots">map-dots</a><br />
+		</p>
-<Lang langs={['go', 'py']} plats={[]} />
+	</FullWidthContent>
-<p>
+	<FullWidthContent>
-	I like to collect data, I am just not always sure what to do with that data. map-dots takes in
+		<h1><a href="/articles/map-dots">map-dots</a></h1>
-	location history data and produces imagery. It can also run as a server and the map-dots-fetch
+		<br />
-	script can be used to fetch and save configurable images.
+		<Logos langs={['go', 'py']} plats={[]} />
-</p>
+		<p>
+			I like to collect data, I am just not always sure what to do with that data. map-dots takes in
+			location history data and produces imagery. It can also run as a server and the map-dots-fetch
+			script can be used to fetch and save configurable images.
+		</p>
+	</FullWidthContent>
 </main>
 
 <style>
-	
+	h1 {
+		margin-bottom: 8px;
+		padding-top: 5px;
+		font-family: shadowsintolight;
+	}
 </style>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 import { mdsvex } from 'mdsvex';