diff --git a/package-lock.json b/package-lock.json
index b2dc0f1..01bc38b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
 			"name": "wjtje",
 			"version": "0.1.5",
 			"dependencies": {
+				"@dotenvx/dotenvx": "^1.23.0",
+				"@prisma/client": "^5.22.0",
 				"@zip.js/zip.js": "^2.7.53",
 				"gemoji": "^8.1.0",
 				"github-colors": "github:ozh/github-colors",
@@ -74,6 +76,77 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/@dotenvx/dotenvx": {
+			"version": "1.23.0",
+			"resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.23.0.tgz",
+			"integrity": "sha512-gL2SoyLeG1ZZgrP8ztaPcnjc1tQb/OGuUZHc/VI7yhRWS+wx0Xyd9vO8uPUNKLZ058YUxH8AIrZE4cLFy9oGkA==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"commander": "^11.1.0",
+				"dotenv": "^16.4.5",
+				"eciesjs": "^0.4.10",
+				"execa": "^5.1.1",
+				"fdir": "^6.2.0",
+				"ignore": "^5.3.0",
+				"object-treeify": "1.1.33",
+				"picomatch": "^4.0.2",
+				"which": "^4.0.0"
+			},
+			"bin": {
+				"dotenvx": "src/cli/dotenvx.js",
+				"git-dotenvx": "src/cli/dotenvx.js"
+			},
+			"funding": {
+				"url": "https://dotenvx.com"
+			}
+		},
+		"node_modules/@dotenvx/dotenvx/node_modules/commander": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+			"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/@dotenvx/dotenvx/node_modules/isexe": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+			"integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/@dotenvx/dotenvx/node_modules/which": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+			"integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+			"license": "ISC",
+			"dependencies": {
+				"isexe": "^3.1.1"
+			},
+			"bin": {
+				"node-which": "bin/which.js"
+			},
+			"engines": {
+				"node": "^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@ecies/ciphers": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@ecies/ciphers/-/ciphers-0.2.1.tgz",
+			"integrity": "sha512-ezMihhjW24VNK/2qQR7lH8xCQY24nk0XHF/kwJ1OuiiY5iEwQXOcKVSy47fSoHPRG8gVGXcK5SgtONDk5xMwtQ==",
+			"license": "MIT",
+			"engines": {
+				"bun": ">=1",
+				"deno": ">=2",
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"@noble/ciphers": "^1.0.0"
+			}
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -734,6 +807,45 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@noble/ciphers": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.0.0.tgz",
+			"integrity": "sha512-wH5EHOmLi0rEazphPbecAzmjd12I6/Yv/SiHdkA9LSycsQk7RuuTp7am5/o62qYr0RScE7Pc9icXGBbsr6cesA==",
+			"license": "MIT",
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@noble/curves": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.6.0.tgz",
+			"integrity": "sha512-TlaHRXDehJuRNR9TfZDNQ45mMEd5dwUwmicsafcIX4SsNiqnCHKjE/1alYPd/lDRVhxdhUAlv8uEhMCI5zjIJQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@noble/hashes": "1.5.0"
+			},
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/@noble/hashes": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.5.0.tgz",
+			"integrity": "sha512-1j6kQFb7QRru7eKN3ZDvRcP13rugwdxZqCjbiAVZfIJwgj2A65UmT4TgARXGlXgnRkORLTDTrO19ZErt7+QXgA==",
+			"license": "MIT",
+			"engines": {
+				"node": "^14.21.3 || >=16"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1100,6 +1212,24 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@prisma/client": {
+			"version": "5.22.0",
+			"resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.22.0.tgz",
+			"integrity": "sha512-M0SVXfyHnQREBKxCgyo7sffrKttwE6R8PMq330MIUF0pTwjUhLbW84pFDlf06B27XyCR++VtjugEnIHdr07SVA==",
+			"hasInstallScript": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=16.13"
+			},
+			"peerDependencies": {
+				"prisma": "*"
+			},
+			"peerDependenciesMeta": {
+				"prisma": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@prisma/debug": {
 			"version": "5.22.0",
 			"resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.22.0.tgz",
@@ -2390,7 +2520,6 @@
 			"version": "7.0.5",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
 			"integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"path-key": "^3.1.0",
@@ -2518,6 +2647,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/dotenv": {
+			"version": "16.4.5",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+			"integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://dotenvx.com"
+			}
+		},
 		"node_modules/eastasianwidth": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2525,6 +2666,23 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/eciesjs": {
+			"version": "0.4.11",
+			"resolved": "https://registry.npmjs.org/eciesjs/-/eciesjs-0.4.11.tgz",
+			"integrity": "sha512-SmUG449n1w1YGvJD9R30tBGvpxTxA0cnn0rfvpFIBvmezfIhagLjsH2JG8HBHOLS8slXsPh48II7IDUTH/J3Mg==",
+			"license": "MIT",
+			"dependencies": {
+				"@ecies/ciphers": "^0.2.1",
+				"@noble/ciphers": "^1.0.0",
+				"@noble/curves": "^1.6.0",
+				"@noble/hashes": "^1.5.0"
+			},
+			"engines": {
+				"bun": ">=1",
+				"deno": ">=2",
+				"node": ">=16"
+			}
+		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.5.57",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.57.tgz",
@@ -2883,6 +3041,35 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"license": "MIT",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/execa/node_modules/signal-exit": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+			"license": "ISC"
+		},
 		"node_modules/extend": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -2954,7 +3141,6 @@
 			"version": "6.4.2",
 			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
 			"integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"picomatch": "^3 || ^4"
@@ -3094,6 +3280,18 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/github-colors": {
 			"version": "1.0.0",
 			"resolved": "git+ssh://git@github.com/ozh/github-colors.git#ecb55f2421abfad6650d7f6283463eb6d2c49123",
@@ -3216,11 +3414,19 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
 			"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 4"
@@ -3371,11 +3577,22 @@
 				"@types/estree": "^1.0.6"
 			}
 		},
+		"node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/jackspeak": {
@@ -3792,6 +4009,12 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/merge-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+			"license": "MIT"
+		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4392,6 +4615,15 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/minimatch": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4514,6 +4746,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"license": "MIT",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4534,6 +4778,30 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/object-treeify": {
+			"version": "1.1.33",
+			"resolved": "https://registry.npmjs.org/object-treeify/-/object-treeify-1.1.33.tgz",
+			"integrity": "sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"license": "MIT",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/optionator": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -4624,7 +4892,6 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
 			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
@@ -4665,7 +4932,6 @@
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
 			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=12"
@@ -5323,7 +5589,6 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
 			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"shebang-regex": "^3.0.0"
@@ -5336,7 +5601,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
 			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
@@ -5484,6 +5748,15 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/strip-final-newline": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+			"integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/strip-json-comments": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -6301,7 +6574,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
 			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-			"dev": true,
 			"license": "ISC",
 			"dependencies": {
 				"isexe": "^2.0.0"
diff --git a/package.json b/package.json
index f6205dc..c826786 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
 		"git": "npm ci && npx prisma migrate deploy && npx prisma generate"
 	},
 	"dependencies": {
+		"@dotenvx/dotenvx": "^1.23.0",
+		"@prisma/client": "^5.22.0",
 		"@zip.js/zip.js": "^2.7.53",
 		"gemoji": "^8.1.0",
 		"github-colors": "github:ozh/github-colors",
diff --git a/src/app.css b/src/app.css
index ce90842..0d9212f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,12 +3,3 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Global body */
-body {
-	@apply gdark:bg-zinc-900 gdark:text-white transition-colors overflow-x-hidden;
-}
-
-/* Global headings */
-h1 {
-	@apply text-4xl pb-6;
-}
diff --git a/src/lib/components/common/MiniPost.svelte b/src/lib/components/common/MiniPost.svelte
index 5f02c86..fda6434 100644
--- a/src/lib/components/common/MiniPost.svelte
+++ b/src/lib/components/common/MiniPost.svelte
@@ -2,11 +2,14 @@
 	import { locale } from '$lib/i18n';
 	import { DateTime } from 'luxon';
 	import Markdown from 'svelte-exmarkdown';
+	import { scale } from 'svelte/transition';
 
 	export let image: string = undefined;
 	export let date: Date | string = undefined;
 	export let mainTitle: string = undefined;
 	export let subTitle: string = undefined;
+	export let index: number = 0;
+	export let url: string | undefined = undefined;
 
 	// Remove images from the subtitle
 	$: subtitleClean = String(subTitle).replaceAll(/!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g, '');
@@ -16,7 +19,7 @@
 	});
 </script>
 
-<section>
+<section in:scale={{ duration: 400, delay: index * 50 }}>
 	<div class="text">
 		<slot name="tags" />
 
diff --git a/src/lib/components/common/PageTransition.svelte b/src/lib/components/common/PageTransition.svelte
index cffbc41..4ce7180 100644
--- a/src/lib/components/common/PageTransition.svelte
+++ b/src/lib/components/common/PageTransition.svelte
@@ -29,9 +29,9 @@
 
 <div class="content">
 	{#key currentPage}
-		<main in:fly={{ x: -5, duration, delay: duration }} out:fly={{ x: 5, duration }}>
+		<div in:fly={{ x: -5, duration, delay: duration }} out:fly={{ x: 5, duration }}>
 			<slot />
-		</main>
+		</div>
 	{/key}
 
 	{#if isLoading}
@@ -41,7 +41,7 @@
 
 <style lang="scss">
 	div.content {
-		@apply grid justify-items-center;
+		@apply grid;
 
 		& > * {
 			grid-column-start: 1;
@@ -57,10 +57,6 @@
 		transform-origin: left;
 	}
 
-	main {
-		@apply container mx-auto py-4 lg:py-8 px-4 lg:px-8 w-screen;
-	}
-
 	@keyframes load-right {
 		0% {
 			left: -100vw;
diff --git a/src/lib/components/home/ActivityList.svelte b/src/lib/components/home/ActivityList.svelte
index d0b04b7..54cd226 100644
--- a/src/lib/components/home/ActivityList.svelte
+++ b/src/lib/components/home/ActivityList.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { locale, t } from '$lib/i18n';
-	import { scale } from 'svelte/transition';
 	import MiniPostLoader from '$lib/components/common/MiniPostLoader.svelte';
 	import MiniPost from '../common/MiniPost.svelte';
 
@@ -24,9 +23,7 @@
 		<h3>{$t('home.dataLoadingFailed', { status: response.status })}</h3>
 	{/if}
 	{#each response.events as event, i}
-		<div in:scale={{ duration: 400, delay: i * 50 }}>
-			<MiniPost {...event} />
-		</div>
+		<MiniPost {...event} index={i} />
 	{/each}
 {:catch error}
 	<h3>{$t('home.noData', { status: error.message })}</h3>
diff --git a/src/lib/components/home/Profile.svelte b/src/lib/components/home/Profile.svelte
index 618d112..c2c3fdf 100644
--- a/src/lib/components/home/Profile.svelte
+++ b/src/lib/components/home/Profile.svelte
@@ -4,22 +4,32 @@
 </script>
 
 <section>
-	<img
-		src="https://www.gravatar.com/avatar/1741643deaafad86bd0bf2a4fb481366?s=200&d=mp"
-		alt="headshot"
-	/>
-
-	<h1>{$t('home.name')}</h1>
-
-	<p>
-		{$t('home.about', {
-			birthday: env.PUBLIC_BIRTHDAY
-		})}
-	</p>
+	<div class="main">
+		<div class="layout">
+			<img
+				src="https://www.gravatar.com/avatar/1741643deaafad86bd0bf2a4fb481366?s=200&d=mp"
+				alt="headshot"
+			/>
+
+			<h1>{$t('home.name')}</h1>
+
+			<p>
+				{$t('home.about', {
+					birthday: env.PUBLIC_BIRTHDAY
+				})}
+			</p>
+		</div>
+	</div>
 </section>
 
 <style lang="scss">
 	section {
+		background-image: url('https://cdn.wjtje.dev/21d46a4a-78ce-43d8-80c9-e7c0cf673eec.jpeg');
+		background-size: cover;
+		background-position: center;
+	}
+
+	div.layout {
 		@apply grid grid-cols-[8rem_1fr] grid-rows-[8rem_1fr] md:grid-rows-2 gap-4 items-center md:items-start;
 
 		img {
@@ -27,11 +37,11 @@
 		}
 
 		h1 {
-			@apply md:self-end pb-0;
+			@apply md:self-end pb-0 text-white;
 		}
 
 		p {
-			@apply text-zinc-900 gdark:text-zinc-100 col-span-2 md:col-span-1;
+			@apply text-zinc-100 col-span-2 md:col-span-1;
 		}
 	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a5c82bd..4bf1a8f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -73,4 +73,19 @@
 			@apply text-sm text-zinc-600 hover:text-zinc-800 gdark:text-zinc-400 gdark:hover:text-zinc-200;
 		}
 	}
+
+	/* Global body */
+	:global(body) {
+		@apply gdark:bg-zinc-900 gdark:text-white transition-colors overflow-x-hidden;
+	}
+
+	/* Global headings */
+	:global(h1) {
+		@apply text-4xl pb-6;
+	}
+
+	:global(main),
+	:global(.main) {
+		@apply container mx-auto py-4 lg:py-8 px-4 lg:px-8 w-screen;
+	}
 </style>
diff --git a/src/routes/[lang]/+page.svelte b/src/routes/[lang]/+page.svelte
index 798c2e4..cb61c29 100644
--- a/src/routes/[lang]/+page.svelte
+++ b/src/routes/[lang]/+page.svelte
@@ -17,19 +17,21 @@
 
 <Profile />
 
-<section class="activity">
-	<section class="github">
-		<h2>{$t('home.ghactivity')}</h2>
-
-		<ActivityList activityName="github" />
-	</section>
-
-	<section class="osm">
-		<h2>{$t('home.osmactivity')}</h2>
-
-		<ActivityList activityName="osm" />
+<main>
+	<section class="activity">
+		<section class="github">
+			<h2>{$t('home.ghactivity')}</h2>
+			
+			<ActivityList activityName="github" />
+		</section>
+		
+		<section class="osm">
+			<h2>{$t('home.osmactivity')}</h2>
+			
+			<ActivityList activityName="osm" />
+		</section>
 	</section>
-</section>
+</main>
 
 <style lang="scss">
 	:global(section) {
diff --git a/src/routes/[lang]/blog/[page]/+page.svelte b/src/routes/[lang]/blog/[page]/+page.svelte
index 964772e..8e4dcc1 100644
--- a/src/routes/[lang]/blog/[page]/+page.svelte
+++ b/src/routes/[lang]/blog/[page]/+page.svelte
@@ -19,37 +19,39 @@
 	<title>{$t('common.title')} - {$t('blog.title')}</title>
 </svelte:head>
 
-<h1>{$t('blog.title')}</h1>
-
-{#if posts.length > 0}
-	{#if ready}
-		{#each posts as post, i}
-			<a
-				in:scale={{ duration: 400, delay: i * 50 + 100 }}
-				href={`/${$locale}/blog/post/${post.slug}`}
-			>
-				<MiniPost date={post.createdAt} mainTitle={post.title} subTitle={post.preview}>
-					<a
-						aria-hidden="true"
-						tabindex="-1"
-						href={`/${$locale}/blog/post/${post.slug}`}
-						slot="subTitle">{$t('blog.more')}</a
-					>
-				</MiniPost>
-			</a>
-		{/each}
-
-		<PageSelector
-			currentPage={data.currentPage}
-			pageCount={data.totalPages}
-			on:pageChange={(event) => {
-				goto(`/${$locale}/blog/${event.detail.page}`);
-			}}
-		/>
+<main>
+	<h1>{$t('blog.title')}</h1>
+
+	{#if posts.length > 0}
+		{#if ready}
+			{#each posts as post, i}
+				<a
+					in:scale={{ duration: 400, delay: i * 50 + 100 }}
+					href={`/${$locale}/blog/post/${post.slug}`}
+				>
+					<MiniPost date={post.createdAt} mainTitle={post.title} subTitle={post.preview}>
+						<a
+							aria-hidden="true"
+							tabindex="-1"
+							href={`/${$locale}/blog/post/${post.slug}`}
+							slot="subTitle">{$t('blog.more')}</a
+						>
+					</MiniPost>
+				</a>
+			{/each}
+
+			<PageSelector
+				currentPage={data.currentPage}
+				pageCount={data.totalPages}
+				on:pageChange={(event) => {
+					goto(`/${$locale}/blog/${event.detail.page}`);
+				}}
+			/>
+		{/if}
+	{:else}
+		<p>{$t('blog.noPosts')}</p>
 	{/if}
-{:else}
-	<p>{$t('blog.noPosts')}</p>
-{/if}
+</main>
 
 <style lang="scss">
 	a {
diff --git a/src/routes/[lang]/blog/post/[slug]/+page.svelte b/src/routes/[lang]/blog/post/[slug]/+page.svelte
index 47e8e91..b90a242 100644
--- a/src/routes/[lang]/blog/post/[slug]/+page.svelte
+++ b/src/routes/[lang]/blog/post/[slug]/+page.svelte
@@ -25,21 +25,23 @@
 	<meta name="og:description" content={post.preview} />
 	<meta name="og:image" content={post.image ?? ''} />
 	<!-- Custom tags for Mastodon -->
-	<meta name="fediverse:creator" content="@wouter@wjt.je">
+	<meta name="fediverse:creator" content="@wouter@wjt.je" />
 </svelte:head>
 
-<h1>{post.title}</h1>
+<main>
+	<h1>{post.title}</h1>
 
-<span
-	>{$t('blog.written_by', {
-		author: post.owner.name,
-		date: date
-	})}</span
->
+	<span
+		>{$t('blog.written_by', {
+			author: post.owner.name,
+			date: date
+		})}</span
+	>
 
-<div class="markdown">
-	<Markdown md={post.body} plugins={[gfmPlugin]} />
-</div>
+	<div class="markdown">
+		<Markdown md={post.body} plugins={[gfmPlugin]} />
+	</div>
+</main>
 
 <style lang="scss">
 	h1 {
diff --git a/src/routes/[lang]/contact/+page.svelte b/src/routes/[lang]/contact/+page.svelte
index f806a14..627b77e 100644
--- a/src/routes/[lang]/contact/+page.svelte
+++ b/src/routes/[lang]/contact/+page.svelte
@@ -17,52 +17,54 @@
 	<meta name="description" content={$t('contact.meta')} />
 </svelte:head>
 
-<h1>{$t('contact.title')}</h1>
+<main>
+	<h1>{$t('contact.title')}</h1>
 
-<p>{$t('contact.description')}</p>
+	<p>{$t('contact.description')}</p>
 
-<ul>
-	<li class="email">
-		<MdEmail title="email" />
-		<span><a href="mailto:contact@wjt.je">contact@wjt.je</a></span>
-	</li>
-	<li class="github">
-		<GoMarkGithub title="Github" />
-		<span><a href="https://www.github.com/wjtje">wjtje</a></span>
-	</li>
-	<li class="linkedin">
-		<FaLinkedin title="LinkedIn" />
-		<span><a href="https://www.linkedin.com/in/wjtje/">Wouter van der Wal</a></span>
-	</li>
-	<li class="mastodon">
-		<MastodonIcon />
-		<span><a rel="me" href="https://social.wjt.je/@wouter">@wouter@wjt.je</a></span>
-	</li>
-	<li class="matrix">
-		<MatrixIcon />
-		<span><a href="https://matrix.to/#/@wouter:wjt.je">@wouter:wjt.je</a></span>
-	</li>
-	<li class="osm">
-		<OsmIcon />
-		<span><a href="https://www.openstreetmap.org/user/wjtje">wjtje</a></span>
-	</li>
-</ul>
+	<ul>
+		<li class="email">
+			<MdEmail title="email" />
+			<span><a href="mailto:contact@wjt.je">contact@wjt.je</a></span>
+		</li>
+		<li class="github">
+			<GoMarkGithub title="Github" />
+			<span><a href="https://www.github.com/wjtje">wjtje</a></span>
+		</li>
+		<li class="linkedin">
+			<FaLinkedin title="LinkedIn" />
+			<span><a href="https://www.linkedin.com/in/wjtje/">Wouter van der Wal</a></span>
+		</li>
+		<li class="mastodon">
+			<MastodonIcon />
+			<span><a rel="me" href="https://social.wjt.je/@wouter">@wouter@wjt.je</a></span>
+		</li>
+		<li class="matrix">
+			<MatrixIcon />
+			<span><a href="https://matrix.to/#/@wouter:wjt.je">@wouter:wjt.je</a></span>
+		</li>
+		<li class="osm">
+			<OsmIcon />
+			<span><a href="https://www.openstreetmap.org/user/wjtje">wjtje</a></span>
+		</li>
+	</ul>
 
-<br />
+	<br />
 
-<ul>
-	<li class="reddit">
-		<FaReddit title="Reddit" /><span><a href="https://www.reddit.com/u/wjtje">u/wjtje</a></span>
-	</li>
-	<li class="discord">
-		<DiscordIcon />
-		<span><a href="https://discord.com/users/389862864409853952">wjtje</a></span>
-	</li>
-	<li class="youtube">
-		<FaYoutube title="Youtube" />
-		<span><a href="https://www.youtube.com/channel/UCIXqIlnYY016Dn1aSuYvTmg">wjtje</a></span>
-	</li>
-</ul>
+	<ul>
+		<li class="reddit">
+			<FaReddit title="Reddit" /><span><a href="https://www.reddit.com/u/wjtje">u/wjtje</a></span>
+		</li>
+		<li class="discord">
+			<DiscordIcon />
+			<span><a href="https://discord.com/users/389862864409853952">wjtje</a></span>
+		</li>
+		<li class="youtube">
+			<FaYoutube title="Youtube" />
+			<span><a href="https://www.youtube.com/channel/UCIXqIlnYY016Dn1aSuYvTmg">wjtje</a></span>
+		</li>
+	</ul>
+</main>
 
 <style lang="scss">
 	p {
diff --git a/src/routes/[lang]/notice/+page.svelte b/src/routes/[lang]/notice/+page.svelte
index 3f3479f..8f58ec0 100644
--- a/src/routes/[lang]/notice/+page.svelte
+++ b/src/routes/[lang]/notice/+page.svelte
@@ -6,34 +6,36 @@
 	<title>{$t('common.title')} - Notice</title>
 </svelte:head>
 
-<h1>Notice</h1>
-
-<p>
-	The discord logo and the color <span class="blurple">Blurple</span> are trademarks of Discord, Inc,
-	and is used with their permission. This project is not endorsed by or affiliated with Discord, Inc.
-</p>
-
-<p>
-	The 'in' logo is a registered trademark of LinkedIn™, and is used with their permission. This
-	project is not endorsed by or affiliated with LinkedIn™.
-</p>
-
-<p>
-	The OpenStreetMap logo is a trademark of the OpenStreetMap Foundation, and is used with their
-	permission. This project is not endorsed by or affiliated with the OpenStreetMap Foundation.
-</p>
-
-<p>
-	The 'Snoo head logo' and the color <span class="orangered">Orangered</span> are trademarks of Reddit,
-	Inc, and is used with their permission. This project is not endorsed by or affiliated with Reddit,
-	Inc.
-</p>
-
-<p>
-	The 'YouTube logo' and the color <span class="youtube">YouTube Red</span> are trademarks of YouTube,
-	LLC, and is used with their permission. This project is not endorsed by or affiliated with YouTube,
-	LLC.
-</p>
+<main>
+	<h1>Notice</h1>
+	
+	<p>
+		The discord logo and the color <span class="blurple">Blurple</span> are trademarks of Discord, Inc,
+		and is used with their permission. This project is not endorsed by or affiliated with Discord, Inc.
+	</p>
+	
+	<p>
+		The 'in' logo is a registered trademark of LinkedIn™, and is used with their permission. This
+		project is not endorsed by or affiliated with LinkedIn™.
+	</p>
+	
+	<p>
+		The OpenStreetMap logo is a trademark of the OpenStreetMap Foundation, and is used with their
+		permission. This project is not endorsed by or affiliated with the OpenStreetMap Foundation.
+	</p>
+	
+	<p>
+		The 'Snoo head logo' and the color <span class="orangered">Orangered</span> are trademarks of Reddit,
+		Inc, and is used with their permission. This project is not endorsed by or affiliated with Reddit,
+		Inc.
+	</p>
+	
+	<p>
+		The 'YouTube logo' and the color <span class="youtube">YouTube Red</span> are trademarks of YouTube,
+		LLC, and is used with their permission. This project is not endorsed by or affiliated with YouTube,
+		LLC.
+	</p>
+</main>
 
 <style lang="scss">
 	p {
diff --git a/src/routes/[lang]/projects/+page.svelte b/src/routes/[lang]/projects/+page.svelte
index dfb4bc5..b84cd7a 100644
--- a/src/routes/[lang]/projects/+page.svelte
+++ b/src/routes/[lang]/projects/+page.svelte
@@ -23,48 +23,54 @@
 	<meta name="description" content={$t('projects.temp')} />
 </svelte:head>
 
-<h1>{$t('projects.title')}</h1>
+<main>
+	<h1>{$t('projects.title')}</h1>
 
-{#if ready}
-	{#each data.repos as repo, i}
-		<a
-			in:scale={{ duration: 400, delay: i * 50 }}
-			class="project"
-			href={repo.detailPage
-				? `/${$locale}/projects/${encodeURIComponent(repo.owner)}/${encodeURIComponent(repo.name)}`
-				: repo.url}
-		>
-			<MiniPost subTitle={repo.description}>
-				<svelte:fragment slot="mainTitle">
-					{#if repo.owner == GitHubUsername}
-						{repo.name}
-					{:else}
-						{repo.owner}/{repo.name}
-					{/if}
-					{#if !repo.detailPage}
-						<span class="github-readme">
-							<GoMarkGithub />
-						</span>
-					{/if}
-				</svelte:fragment>
-				<div class="indicators" slot="tags">
-					<LanguageIndicator language={repo.language} />
-					<NumberIndicator count={repo.forksCount}>
-						<GoRepoForked title="Number of forks" />
-					</NumberIndicator>
-					<NumberIndicator count={repo.stargazersCount}>
-						<GoStar title="Number of stars" />
-					</NumberIndicator>
-					<ForkIndicator fork={repo.fork} parentName={repo.parentName} parentUrl={repo.parentUrl} />
-				</div>
-			</MiniPost>
-		</a>
-	{/each}
-{/if}
+	{#if ready}
+		<div class="list">
+			{#each data.repos as repo, i}
+				<MiniPost
+					subTitle={repo.description}
+					index={i}
+					url={repo.detailPage
+						? `/${$locale}/projects/${encodeURIComponent(repo.owner)}/${encodeURIComponent(repo.name)}`
+						: repo.url}
+				>
+					<svelte:fragment slot="mainTitle">
+						{#if repo.owner == GitHubUsername}
+							{repo.name}
+						{:else}
+							{repo.owner}/{repo.name}
+						{/if}
+						{#if !repo.detailPage}
+							<span class="github-readme">
+								<GoMarkGithub />
+							</span>
+						{/if}
+					</svelte:fragment>
+					<div class="indicators" slot="tags">
+						<LanguageIndicator language={repo.language} />
+						<NumberIndicator count={repo.forksCount}>
+							<GoRepoForked title="Number of forks" />
+						</NumberIndicator>
+						<NumberIndicator count={repo.stargazersCount}>
+							<GoStar title="Number of stars" />
+						</NumberIndicator>
+						<ForkIndicator
+							fork={repo.fork}
+							parentName={repo.parentName}
+							parentUrl={repo.parentUrl}
+						/>
+					</div>
+				</MiniPost>
+			{/each}
+		</div>
+	{/if}
+</main>
 
 <style lang="scss">
-	a.project {
-		@apply w-full md:w-[60%] lg:w-[50%] cursor-pointer block;
+	div.list {
+		@apply w-full md:w-[60%] lg:w-[50%] block;
 
 		div.indicators {
 			@apply flex gap-2;
diff --git a/src/routes/[lang]/projects/[owner]/[project]/+page.svelte b/src/routes/[lang]/projects/[owner]/[project]/+page.svelte
index 10cbb94..76aa62b 100644
--- a/src/routes/[lang]/projects/[owner]/[project]/+page.svelte
+++ b/src/routes/[lang]/projects/[owner]/[project]/+page.svelte
@@ -7,13 +7,15 @@
 	const link = `https://github.com/${data.repo.owner}/${data.repo.name}`;
 </script>
 
-<h1>{data.title}</h1>
+<main>
+	<h1>{data.title}</h1>
 
-<GitHubButton {link} type="large" />
+	<GitHubButton {link} type="large" />
 
-<div class="markdown">
-	<Markdown md={data.body} />
-</div>
+	<div class="markdown">
+		<Markdown md={data.body} />
+	</div>
+</main>
 
 <style lang="scss">
 	div.markdown {