Merge pull request #50 from ProjectSegfault/brand-changes

Brand changes

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 - present, Project Segfault team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,4 +1,4 @@
-# Project Segfault Website
+# Project Segfault website
 
 Live at [projectsegfau.lt](https://projectsegfau.lt).
 
@@ -10,17 +10,10 @@ Live at [projectsegfau.lt](https://projectsegfau.lt).
 -   Install [pnpm](https://pnpm.io/) (optional, although strongly recommended).
 -   Learn [Svelte](https://svelte.dev).
 
-### Universal
+### Running a dev server.
 
 1. Clone the repository using `git clone https://github.com/ProjectSegfault/website`.
 2. Change directory into the clone using `cd ./website`.
 3. Install dependencies using `pnpm i` (recommended) or `npm i`.
 4. Run the dev server using `pnpm dev` (recommended) or `npm run dev`.
 5. Open a browser on `http://localhost:5173/` and you should see the website running locally!
-
-### NixOS
-
-1. Clone the repository using `git clone https://github.com/ProjectSegfault/website`.
-2. Change directory into the clone using `cd ./website`.
-3. In the same terminal type `nix-shell`.
-4. Open a browser on `http://localhost:5173/` and you should see the website running locally!

package.json

@@ -17,17 +17,20 @@
 		"@iconify-json/simple-icons": "^1.1.20",
 		"@sveltejs/adapter-static": "1.0.0-next.38",
 		"@sveltejs/kit": "1.0.0-next.396",
+		"dayjs": "^1.11.4",
 		"mdsvex": "^0.10.6",
 		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
 		"svelte": "^3.49.0",
 		"svelte-check": "^2.8.0",
+		"svelte-dark-mode": "^2.1.0",
 		"svelte-hcaptcha": "^0.1.1",
 		"svelte-preprocess": "^4.10.7",
 		"svelte-seo": "^1.4.1",
+		"svelte-vertical-timeline": "^0.0.2",
 		"tslib": "^2.4.0",
 		"typescript": "^4.7.4",
-		"unplugin-icons": "^0.14.7",
+		"unocss": "^0.45.5",
 		"vite": "^3.0.4"
 	},
 	"type": "module"

pnpm-lock.yaml

@@ -5,17 +5,20 @@ specifiers:
   '@iconify-json/simple-icons': ^1.1.20
   '@sveltejs/adapter-static': 1.0.0-next.38
   '@sveltejs/kit': 1.0.0-next.396
+  dayjs: ^1.11.4
   mdsvex: ^0.10.6
   prettier: ^2.7.1
   prettier-plugin-svelte: ^2.7.0
   svelte: ^3.49.0
   svelte-check: ^2.8.0
+  svelte-dark-mode: ^2.1.0
   svelte-hcaptcha: ^0.1.1
   svelte-preprocess: ^4.10.7
   svelte-seo: ^1.4.1
+  svelte-vertical-timeline: ^0.0.2
   tslib: ^2.4.0
   typescript: ^4.7.4
-  unplugin-icons: ^0.14.7
+  unocss: ^0.45.5
   vite: ^3.0.4
 
 devDependencies:
@@ -23,21 +26,32 @@ devDependencies:
   '@iconify-json/simple-icons': 1.1.20
   '@sveltejs/adapter-static': 1.0.0-next.38
   '@sveltejs/kit': 1.0.0-next.396_svelte@3.49.0+vite@3.0.4
+  dayjs: 1.11.4
   mdsvex: 0.10.6_svelte@3.49.0
   prettier: 2.7.1
   prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
   svelte: 3.49.0
   svelte-check: 2.8.0_svelte@3.49.0
+  svelte-dark-mode: 2.1.0
   svelte-hcaptcha: 0.1.1
   svelte-preprocess: 4.10.7_uslzfc62di2n2otc2tvfklnwji
   svelte-seo: 1.4.1_typescript@4.7.4
+  svelte-vertical-timeline: 0.0.2
   tslib: 2.4.0
   typescript: 4.7.4
-  unplugin-icons: 0.14.7_vite@3.0.4
+  unocss: 0.45.5_vite@3.0.4
   vite: 3.0.4
 
 packages:
 
+  /@ampproject/remapping/2.2.0:
+    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.1.1
+      '@jridgewell/trace-mapping': 0.3.14
+    dev: true
+
   /@antfu/install-pkg/0.1.0:
     resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
     dependencies:
@@ -78,11 +92,24 @@ packages:
       - supports-color
     dev: true
 
+  /@jridgewell/gen-mapping/0.1.1:
+    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
   /@jridgewell/resolve-uri/3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
     dev: true
 
+  /@jridgewell/set-array/1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
     dev: true
@@ -115,6 +142,10 @@ packages:
       fastq: 1.13.0
     dev: true
 
+  /@polka/url/1.0.0-next.21:
+    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
+    dev: true
+
   /@rollup/pluginutils/4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -188,10 +219,145 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
 
-  /acorn/8.8.0:
+  /@unocss/cli/0.45.5:
-    resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
+    resolution: {integrity: sha512-gB/XZ6ksS/le1r33JhLam7UtJhd2fvtbgYV2rU76DOoqIa+qCZFbrMDFyF+PJz6yCW0goYF9ybtZXND42aygZQ==}
-    engines: {node: '>=0.4.0'}
+    engines: {node: '>=14'}
     hasBin: true
+    dependencies:
+      '@unocss/config': 0.45.5
+      '@unocss/core': 0.45.5
+      '@unocss/preset-uno': 0.45.5
+      cac: 6.7.12
+      chokidar: 3.5.3
+      colorette: 2.0.19
+      consola: 2.15.3
+      fast-glob: 3.2.11
+      pathe: 0.3.3
+      perfect-debounce: 0.1.3
+    dev: true
+
+  /@unocss/config/0.45.5:
+    resolution: {integrity: sha512-wae2RmItmaSsXcMPb9dOzrfQlG6SDgbuUmyuXydJi7VZmj/5a/a1cRTny/J2/eP1kS5aUNgCm/FzpletH59mfw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 0.45.5
+      unconfig: 0.3.5
+    dev: true
+
+  /@unocss/core/0.45.5:
+    resolution: {integrity: sha512-6boP8sGTRb+nE87pdjii7otO/tguIlDkFh90E6mglA0XdjHWiLCCNlgJoxgjCGCPNYUm/Nojx0bUbcokuqBZDw==}
+    dev: true
+
+  /@unocss/inspector/0.45.5:
+    resolution: {integrity: sha512-OM1bmmt8Qbsdt4AvokI/HAYVrHWOYwsNyisEhgGRQiOuc6JuFx1+B1T8hyELBRZfunvfm4J6qDJ3qGqPZWFU9g==}
+    dependencies:
+      gzip-size: 6.0.0
+      sirv: 2.0.2
+    dev: true
+
+  /@unocss/preset-attributify/0.45.5:
+    resolution: {integrity: sha512-xgjsuYDB5EYqXaCa73B9Tk19y6U8482S/trf6kcbSSGLaEcXhOQMdo8xtUJPyacwoCG0ralCgWIgWeb/VQ0noQ==}
+    dependencies:
+      '@unocss/core': 0.45.5
+    dev: true
+
+  /@unocss/preset-icons/0.45.5:
+    resolution: {integrity: sha512-msrhKKEWh5HMyQXnseKjMTe8dZZZl/URaxCtDkIhzGJHzDvTAiU7kDr6pAr3Uxw2DgDEviq159W22679JyaBHg==}
+    dependencies:
+      '@iconify/utils': 1.0.33
+      '@unocss/core': 0.45.5
+      ohmyfetch: 0.4.18
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@unocss/preset-mini/0.45.5:
+    resolution: {integrity: sha512-R8FDinKThZBTIqwuYokI8GHOTxt8x11W/dY4wyXOFXXiGW2kmL7fjhB3KNN3sfyhyp+k2g5CW40XJ13rOunODw==}
+    dependencies:
+      '@unocss/core': 0.45.5
+    dev: true
+
+  /@unocss/preset-tagify/0.45.5:
+    resolution: {integrity: sha512-fRUEh8EuJUjXHvJNzbPquC6Ih51mIygFmNaBXr9W9SNQYgYF9Z9Xy/2rFD3ADaI6L52JUIEV0OZgt1E/QJpAng==}
+    dependencies:
+      '@unocss/core': 0.45.5
+    dev: true
+
+  /@unocss/preset-typography/0.45.5:
+    resolution: {integrity: sha512-4F2hRDsuE8BCA0MZIaRjClXIVQkePQsQyz+s3qw89Fndeatj+Yd5VrKEPBBz3g9062A6dUGfgWUyy4o+SAOCvA==}
+    dependencies:
+      '@unocss/core': 0.45.5
+    dev: true
+
+  /@unocss/preset-uno/0.45.5:
+    resolution: {integrity: sha512-eo0do6sS1xMRaeOvxkxEjFXZoh0Pm5g1c8bb3WpNMogcp9l8t22JCkSLo5dq+dnC+nQduOzt/GJoA+XksQeEsw==}
+    dependencies:
+      '@unocss/core': 0.45.5
+      '@unocss/preset-mini': 0.45.5
+      '@unocss/preset-wind': 0.45.5
+    dev: true
+
+  /@unocss/preset-web-fonts/0.45.5:
+    resolution: {integrity: sha512-wusZRdGXpAVWbdyNP7Cd7D1hWuAEG1jch4kXzRNyjZ4Uo7ImGY42yEysjXpuNizA29i0Xe9FtT99kCqOcQwHRQ==}
+    dependencies:
+      '@unocss/core': 0.45.5
+      ohmyfetch: 0.4.18
+    dev: true
+
+  /@unocss/preset-wind/0.45.5:
+    resolution: {integrity: sha512-N4kr5SG4WjqJ4hI+4Fp8QlB5u7pTtAGY1WDVPeKwh3lX2iE01BnQhL6W6ds7BjXSdGm/yUQwBCedpnAfzWqutQ==}
+    dependencies:
+      '@unocss/core': 0.45.5
+      '@unocss/preset-mini': 0.45.5
+    dev: true
+
+  /@unocss/reset/0.45.5:
+    resolution: {integrity: sha512-JDFRoc1H0Tk1knRGI+LljOKrKkWrF1txJ50DG3oa+azTdQaX0wDQ4isyDM6PbodydhEqYCsZcJEL/2pEiPRg8A==}
+    dev: true
+
+  /@unocss/scope/0.45.5:
+    resolution: {integrity: sha512-+7PPbxxVp/k27YyBVSM/euKnB65KtaXA4iYHiDWRja235RnnsZ7XcSZ78o5hDuOA3dnqZU+d4rV5rt1tGy6XJA==}
+    dev: true
+
+  /@unocss/transformer-attributify-jsx/0.45.5:
+    resolution: {integrity: sha512-e4l5G7ZLhSeIkHM6mo6KfXZbQDi6XFcTNQRJStXF6t2UjqABAtR/jLCUzkyK7khaLE4QxduRhCHCfR/VyYvCyg==}
+    dependencies:
+      '@unocss/core': 0.45.5
+    dev: true
+
+  /@unocss/transformer-compile-class/0.45.5:
+    resolution: {integrity: sha512-R08rLO3XZyk5g1BQ01GT+0AuztVpj+g6e+B+4NeoMF3LhShA4Zg+yqn7awa2d5/1tXwpMYO4kwyBFZzQf0WzBw==}
+    dependencies:
+      '@unocss/core': 0.45.5
+    dev: true
+
+  /@unocss/transformer-directives/0.45.5:
+    resolution: {integrity: sha512-k+QZetHGcSmxXMlE2UfkfnzFJ865FBxnT5EZCU/dlL1B2momDi19n2q0Hc9DnX/GjbLtrzurQFrq+Xy4gQ7HcA==}
+    dependencies:
+      '@unocss/core': 0.45.5
+      css-tree: 2.1.0
+    dev: true
+
+  /@unocss/transformer-variant-group/0.45.5:
+    resolution: {integrity: sha512-Qp0g+9U//cXV7u6dojXw3tafs1saRW+nViMdfCjEKWz3TStFssI9IAhwg5wIZoYYLSSCVMfBTc96OkDvO1m9rA==}
+    dependencies:
+      '@unocss/core': 0.45.5
+    dev: true
+
+  /@unocss/vite/0.45.5_vite@3.0.4:
+    resolution: {integrity: sha512-QVNj9xDBJ46RC1D+rSFiGWywazq6z7MVszrpifCACtA8qKdWbrWuI8beEpfo3pBpf7uYFIb+Df6CU9gCD809Og==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@rollup/pluginutils': 4.2.1
+      '@unocss/config': 0.45.5
+      '@unocss/core': 0.45.5
+      '@unocss/inspector': 0.45.5
+      '@unocss/scope': 0.45.5
+      '@unocss/transformer-directives': 0.45.5
+      magic-string: 0.26.2
+      vite: 3.0.4
     dev: true
 
   /anymatch/3.1.2:
@@ -229,6 +395,11 @@ packages:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
 
+  /cac/6.7.12:
+    resolution: {integrity: sha512-rM7E2ygtMkJqD9c7WnFU6fruFcN3xe4FM5yUmgxhZzIKJk4uHl9U/fhwdajGFQbQuv43FAUo1Fe8gX/oIKDeSA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -249,10 +420,18 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /colorette/2.0.19:
+    resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==}
+    dev: true
+
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
+  /consola/2.15.3:
+    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
+    dev: true
+
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -262,6 +441,18 @@ packages:
       which: 2.0.2
     dev: true
 
+  /css-tree/2.1.0:
+    resolution: {integrity: sha512-PcysZRzToBbrpoUrZ9qfblRIRf8zbEAkU0AIpQFtgkFK0vSbzOmBCvdSAx2Zg7Xx5wiYJKUKk0NMP7kxevie/A==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      mdn-data: 2.0.27
+      source-map-js: 1.0.2
+    dev: true
+
+  /dayjs/1.11.4:
+    resolution: {integrity: sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==}
+    dev: true
+
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -279,11 +470,23 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /defu/6.0.0:
+    resolution: {integrity: sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==}
+    dev: true
+
+  /destr/1.1.1:
+    resolution: {integrity: sha512-QqkneF8LrYmwATMdnuD2MLI3GHQIcBnG6qFC2q9bSH430VTCDAVjcspPmUaKhPGtAtPAftIUFqY1obQYQuwmbg==}
+    dev: true
+
   /detect-indent/6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
     dev: true
 
+  /duplexer/0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+    dev: true
+
   /es6-promise/3.3.1:
     resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
     dev: true
@@ -598,6 +801,13 @@ packages:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     dev: true
 
+  /gzip-size/6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
   /has/1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
@@ -668,6 +878,11 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /jiti/1.14.0:
+    resolution: {integrity: sha512-4IwstlaKQc9vCTC+qUXLM1hajy2ImiL9KnLvVYiaHOtS/v3wRjhLlGl121AmgDgx/O43uKmxownJghS5XMya2A==}
+    hasBin: true
+    dev: true
+
   /kleur/4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
@@ -702,6 +917,10 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /mdn-data/2.0.27:
+    resolution: {integrity: sha512-kwqO0I0jtWr25KcfLm9pia8vLZ8qoAKhWZuZMbneJq3jjBD3gl5nZs8l8Tu3ZBlBAHVQtDur9rdDGyvtfVraHQ==}
+    dev: true
+
   /mdsvex/0.10.6_svelte@3.49.0:
     resolution: {integrity: sha512-aGRDY0r5jx9+OOgFdyB9Xm3EBr9OUmcrTDPWLB7a7g8VPRxzPy4MOBmcVYgz7ErhAJ7bZ/coUoj6aHio3x/2mA==}
     peerDependencies:
@@ -763,6 +982,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /mrmime/1.0.1:
+    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
@@ -773,6 +997,10 @@ packages:
     hasBin: true
     dev: true
 
+  /node-fetch-native/0.1.4:
+    resolution: {integrity: sha512-10EKpOCQPXwZVFh3U1ptOMWBgKTbsN7Vvo6WVKt5pw4hp8zbv6ZVBZPlXw+5M6Tyi1oc1iD4/sNPd71KYA16tQ==}
+    dev: true
+
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -785,6 +1013,15 @@ packages:
       path-key: 3.1.1
     dev: true
 
+  /ohmyfetch/0.4.18:
+    resolution: {integrity: sha512-MslzNrQzBLtZHmiZBI8QMOcMpdNFlK61OJ34nFNFynZ4v+4BonfCQ7VIN4EGXvGGq5zhDzgdJoY3o9S1l2T7KQ==}
+    dependencies:
+      destr: 1.1.1
+      node-fetch-native: 0.1.4
+      ufo: 0.8.5
+      undici: 5.8.1
+    dev: true
+
   /once/1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -838,6 +1075,14 @@ packages:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
+  /pathe/0.3.3:
+    resolution: {integrity: sha512-x3nrPvG0HDSDzUiJ0WqtzhN4MD+h5B+dFJ3/qyxVuARlr4Y3aJv8gri2cZzp9Z8sGs2a+aG9gNbKngh3gme57A==}
+    dev: true
+
+  /perfect-debounce/0.1.3:
+    resolution: {integrity: sha512-NOT9AcKiDGpnV/HBhI22Str++XWcErO/bALvHCuhv33owZW/CjH8KAFLZDCmu3727sihe0wTxpDhyGc6M8qacQ==}
+    dev: true
+
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
@@ -972,6 +1217,15 @@ packages:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
 
+  /sirv/2.0.2:
+    resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 3.0.0
+    dev: true
+
   /sorcery/0.10.0:
     resolution: {integrity: sha512-R5ocFmKZQFfSTstfOtHjJuAwbpGyf9qjQa1egyhvXSbM7emjrtLXtGdZsDJDABC85YBfVvrOiGWKSYXPKdvP1g==}
     hasBin: true
@@ -1036,6 +1290,10 @@ packages:
       - sugarss
     dev: true
 
+  /svelte-dark-mode/2.1.0:
+    resolution: {integrity: sha512-/QmIqWGwzcfE82FAMuHBlKFwudW7Vcos60Ii8j/mJZ0H6kGAXwL5EGlcc8voBJMJv/i0QZmhp5b1ZX/XKg9NJQ==}
+    dev: true
+
   /svelte-hcaptcha/0.1.1:
     resolution: {integrity: sha512-iFF3HwfrCRciJnDs4Y9/rpP/BM2U/5zt+vh+9d4tALPAHVkcANiJIKqYuS835pIaTm6gt+xOzjfFI3cgiRI29A==}
     dev: true
@@ -1108,6 +1366,10 @@ packages:
       - typescript
     dev: true
 
+  /svelte-vertical-timeline/0.0.2:
+    resolution: {integrity: sha512-tM+wghFsIW3Xb/KC+ImlTw1S1THTEhcVki8x4/u+XVLGAnRGiPbeiO/aRhVj0k8v7D8YZHwlRm0X295KyAKQdg==}
+    dev: true
+
   /svelte/3.49.0:
     resolution: {integrity: sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==}
     engines: {node: '>= 8'}
@@ -1127,6 +1389,11 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /totalist/3.0.0:
+    resolution: {integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
@@ -1137,66 +1404,57 @@ packages:
     hasBin: true
     dev: true
 
+  /ufo/0.8.5:
+    resolution: {integrity: sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==}
+    dev: true
+
+  /unconfig/0.3.5:
+    resolution: {integrity: sha512-YMnPPUSfW0pT4Zzy4inM8tRHJZmhH+KcuFW/3qxkLKPhswEw18gQYe1jt57jY6ctFB0fnpiCpQ2Jtkbg4y/IPA==}
+    dependencies:
+      '@antfu/utils': 0.5.2
+      defu: 6.0.0
+      jiti: 1.14.0
+    dev: true
+
+  /undici/5.8.1:
+    resolution: {integrity: sha512-iDRmWX4Zar/4A/t+1LrKQRm102zw2l9Wgat3LtTlTn8ykvMZmAmpq9tjyHEigx18FsY7IfATvyN3xSw9BDz0eA==}
+    engines: {node: '>=12.18'}
+    dev: true
+
   /unist-util-stringify-position/2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
     dependencies:
       '@types/unist': 2.0.6
     dev: true
 
-  /unplugin-icons/0.14.7_vite@3.0.4:
+  /unocss/0.45.5_vite@3.0.4:
-    resolution: {integrity: sha512-TrNnEdpaXMdiG5BsCgvU6cv/gSLYvIk1f8wGCGZmOo4wmi3nqYBuqIEuiXhmmyXdDZuRRpCaOzCnCYYZ5H7U8g==}
+    resolution: {integrity: sha512-dHmyAnTnkoffgXHjWpJIK2iwCDK9HEWkdHrz+Wh114G/ZcX3vQWlpnvboo36oW0V37UaqbId5ajwHRHE6SNo4g==}
+    engines: {node: '>=14'}
     peerDependencies:
-      '@svgr/core': '>=5.5.0'
+      '@unocss/webpack': 0.45.5
-      '@vue/compiler-sfc': ^3.0.2
-      vue-template-compiler: ^2.6.12
-      vue-template-es2015-compiler: ^1.9.0
     peerDependenciesMeta:
-      '@svgr/core':
+      '@unocss/webpack':
-        optional: true
-      '@vue/compiler-sfc':
-        optional: true
-      vue-template-compiler:
-        optional: true
-      vue-template-es2015-compiler:
         optional: true
     dependencies:
-      '@antfu/install-pkg': 0.1.0
+      '@unocss/cli': 0.45.5
-      '@antfu/utils': 0.5.2
+      '@unocss/core': 0.45.5
-      '@iconify/utils': 1.0.33
+      '@unocss/preset-attributify': 0.45.5
-      debug: 4.3.4
+      '@unocss/preset-icons': 0.45.5
-      kolorist: 1.5.1
+      '@unocss/preset-mini': 0.45.5
-      local-pkg: 0.4.2
+      '@unocss/preset-tagify': 0.45.5
-      unplugin: 0.7.2_vite@3.0.4
+      '@unocss/preset-typography': 0.45.5
+      '@unocss/preset-uno': 0.45.5
+      '@unocss/preset-web-fonts': 0.45.5
+      '@unocss/preset-wind': 0.45.5
+      '@unocss/reset': 0.45.5
+      '@unocss/transformer-attributify-jsx': 0.45.5
+      '@unocss/transformer-compile-class': 0.45.5
+      '@unocss/transformer-directives': 0.45.5
+      '@unocss/transformer-variant-group': 0.45.5
+      '@unocss/vite': 0.45.5_vite@3.0.4
     transitivePeerDependencies:
-      - esbuild
-      - rollup
       - supports-color
       - vite
-      - webpack
-    dev: true
-
-  /unplugin/0.7.2_vite@3.0.4:
-    resolution: {integrity: sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==}
-    peerDependencies:
-      esbuild: '>=0.13'
-      rollup: ^2.50.0
-      vite: ^2.3.0 || ^3.0.0-0
-      webpack: 4 || 5
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-    dependencies:
-      acorn: 8.8.0
-      chokidar: 3.5.3
-      vite: 3.0.4
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.4.4
     dev: true
 
   /vfile-message/2.0.4:
@@ -1233,15 +1491,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /webpack-sources/3.2.3:
-    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
-    engines: {node: '>=10.13.0'}
-    dev: true
-
-  /webpack-virtual-modules/0.4.4:
-    resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
-    dev: true
-
   /which/2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}

shell.nix

@@ -1,13 +0,0 @@
-{ pkgs ? import <nixpkgs> {}
-}:
-pkgs.mkShell {
-    name="dev";
-    buildInputs = [
-        pkgs.nodejs-16_x
-    ];
-    shellHook = ''
-        echo "Installing dependencies using npm, please wait."
-        npm i
-        echo "You can now "run npm run dev" to start a dev server."
-    '';
-}

src/app.html

@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<link
 			rel="icon"
-			href="%sveltekit.assets%/logo.png"
+			href="%sveltekit.assets%/logo_transparent.svg"
 		/>
 		<meta
 			name="viewport"

src/lib/Card/CardInner.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	export let title: any;
+	export let position: any;
+	export let description: any;
+	export let icon: any;
+</script>
+
+<div class="card-inner">
+	<div class="main">
+		{#if icon}
+			<div>
+				<img src={icon} alt="{title} icon" />
+			</div>
+		{/if}
+		<div>
+			<span>
+				{title}
+
+				{#if position}
+					- {position}
+				{/if}
+			</span>
+
+			{#if description}
+				<p class="description">{description}</p>
+			{/if}
+		</div>
+	</div>
+	<slot />
+</div>
+
+<style>
+	.card-inner {
+		background-color: var(--secondary);
+		border-radius: 10px;
+		padding: 1rem;
+		width: 30em;
+		display: flex;
+		flex-direction: column;
+	}
+
+	@media screen and (max-width: 555px) {
+		.card-inner {
+			width: 18em;
+		}
+	}
+
+	.main {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		gap: 1rem;
+	}
+
+	img {
+		height: 5rem;
+		border-radius: 10px;
+	}
+
+	span {
+		font-size: 25px;
+		font-weight: bold;
+	}
+</style>

src/lib/Card/CardOuter.svelte

@@ -0,0 +1,12 @@
+<div class="card-outer">
+	<slot />
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+		flex-flow: row wrap;
+	}
+</style>

src/lib/Card/Link.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	export let url: any;
+	export let classes: string;
+</script>
+
+<a href={url} class={classes}>
+	<slot />
+</a>
+
+<style>
+	.web,
+	.email,
+	.picture,
+	.pgp {
+		background-color: var(--alt);
+		color: var(--alt-text);
+		font-size: 20px;
+		height: 23px;
+		transition: all 0.25s;
+		display: flex;
+		align-items: center;
+	}
+
+	.web:hover,
+	.email:hover,
+	.picture:hover,
+	.pgp:hover {
+		background-color: var(--accent);
+		color: var(--alt);
+	}
+
+	.matrixcolored {
+		background-color: var(--alt);
+		color: var(--alt-text);
+		font-size: 20px;
+		height: 23px;
+		display: flex;
+		align-items: center;
+	}
+
+	.discordcolored {
+		background-color: #5865f2;
+		color: #fff;
+		font-size: 20px;
+		height: 23px;
+		display: flex;
+		align-items: center;
+	}
+
+	.githubcolored {
+		background-color: #333;
+		color: #fff;
+		font-size: 20px;
+		height: 23px;
+		display: flex;
+		align-items: center;
+	}
+
+	a {
+		border: none;
+		border-radius: 10px;
+		padding: 0.5rem;
+		cursor: pointer;
+		font-family: var(--font-primary);
+		color: var(--secondary);
+		text-decoration: none;
+		width: fit-content;
+	}
+</style>

src/lib/Card/LinksOuter.svelte

@@ -0,0 +1,11 @@
+<div>
+	<slot />
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+</style>

src/lib/Card/index.ts

@@ -0,0 +1,4 @@
+export { default as CardOuter } from "./CardOuter.svelte";
+export { default as CardInner } from "./CardInner.svelte";
+export { default as LinksOuter } from "./LinksOuter.svelte";
+export { default as Link } from "./Link.svelte";

src/lib/ContactForm.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import IconLock from "~icons/fa6-solid/lock";
-	import IconInfo from "~icons/fa6-solid/circle-info";
 	import HCaptcha from "svelte-hcaptcha";
 	let submit = false;
 
@@ -15,7 +13,7 @@
 	id="contact-form"
 >
 	<div class="note">
-		<IconLock />
+		<div class="i-fa6-solid:lock"></div>
 		<b>Your IP will be logged for anti-abuse measures.</b>
 	</div>
 	<div class="meta">
@@ -44,12 +42,11 @@
 		placeholder="Your message"
 	/>
 	<div class="note">
-		<IconInfo />
+		<div class="i-fa6-solid:circle-info"></div>
 		<b>The submit button will be visible when you complete the Captcha.</b>
 	</div>
 	<HCaptcha
 		sitekey="67e84266-980c-4050-8a39-142a91928fe8"
-		theme="dark"
 		on:success={showSubmitButton}
 	/>
 	{#if submit}
@@ -99,17 +96,17 @@
 	}
 
 	.form-textbox {
-		background-color: var(--tertiary);
+		background-color: var(--secondary);
 		color: var(--text);
 		border-radius: 10px;
 		border: none;
 		padding: 0.5rem;
-		font-family: "Comfortaa", sans-serif;
+		font-family: var(--font-primary);
 		outline: none;
 	}
 
 	.button {
-		background-color: var(--tertiary);
+		background-color: var(--secondary);
 		border: none;
 		border-radius: 10px;
 		padding: 0.5rem;
@@ -120,7 +117,7 @@
 	}
 
 	.button:not(select):hover {
-		background-color: var(--accent-tertiary);
+		background-color: var(--accent);
 		text-decoration: none;
 		transition: all 0.5s;
 		color: var(--secondary);

src/lib/Footer.svelte

@@ -1,90 +1,67 @@
 <script>
-	import IconMatrix from "~icons/simple-icons/matrix";
-	import IconGitHub from "~icons/simple-icons/github";
-	import IconSignal from "~icons/fa6-solid/signal";
 	import { page } from "$app/stores";
 </script>
 
 <footer>
 	{#if $page.url.pathname === "/"}
-		<a
+		<div class="badge">
-			href="https://www.abuseipdb.com/user/82331"
+			<a
-			title="AbuseIPDB is an IP address blacklist for webmasters and sysadmins to report IP addresses engaging in abusive behavior on their networks"
+				href="https://www.abuseipdb.com/user/82331"
-			style="width: fit-content;"
+				title="AbuseIPDB is an IP address blacklist for webmasters and sysadmins to report IP addresses engaging in abusive behavior on their networks"
-		>
+				style="width: fit-content; padding: 1rem;"
-			<img
+			>
-				src="https://www.abuseipdb.com/contributor/82331.svg"
+				<img
-				alt="AbuseIPDB Contributor Badge"
+					src="https://www.abuseipdb.com/contributor/82331.svg"
-			/>
+					alt="AbuseIPDB Contributor Badge"
-		</a>
+				/>
-	{/if}
-	<hr />
-	<div class="content">
-		<span>© 2021 - present, Project Segfault</span>
-
-		<div class="links">
-			<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
-				<IconMatrix />
-			</a>
-			<a href="https://github.com/ProjectSegfault/">
-				<IconGitHub />
-			</a>
-			<a href="https://status.projectsegfau.lt/">
-				<IconSignal />
 			</a>
 		</div>
+	{/if}
+	<div class="content">
+		<span>© 2021 - present, Project Segfault <a href="/team">team</a></span>
+		<span
+			>Made with <a href="https://kit.svelte.dev/">SvelteKit</a> and
+			released under the
+			<a href="https://opensource.org/licenses/MIT/">MIT license</a
+			>.</span
+		>
 	</div>
 </footer>
 
 <style>
 	footer {
-		padding: 1rem;
 		display: flex;
 		flex-direction: column;
 		font-size: 20px;
 		position: sticky;
 		top: 100vh;
-		width: calc(100vw - 2rem);
-	}
-
-	hr {
-		color: var(--accent-primary);
-		width: 100%;
-		margin-left: 0;
 	}
 
 	div.content {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	div.links {
-		display: flex;
-		gap: 12px;
-		margin-left: 8px;
-	}
-
-	.links a {
-		text-decoration: none;
 		display: flex;
 		align-items: center;
+		flex-direction: column;
+		border-top: 1px solid var(--grey);
+		padding: 0.5rem;
 	}
 
-	@media only screen and (max-width: 500px) {
+	div.content > * {
-		.content {
+		color: var(--text);
-			display: flex;
+		font-size: 13px;
-			flex-direction: column;
+		font-weight: 500;
-			gap: 8px;
+		text-align: center;
-		}
+	}
 
-		div.links {
+	.badge {
-			margin-left: 0;
+		display: flex;
-		}
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
 	}
 
 	img {
 		width: 270px;
-		background: var(--accent-primary);
+		background: var(--accent);
 		padding: 0.5rem;
 		border-radius: 10px;
 	}

src/lib/Hero.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	export let title: string;
+	export let description: string;
+	export let marginTop: string;
+</script>
+
+<div class="hero" style="margin-top: {marginTop}%;">
+	{#if title}
+		<h1>{title}</h1>
+	{/if}
+	{#if description}
+		<p>{description}</p>
+	{/if}
+	<slot />
+</div>
+
+<style>
+	.hero {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.hero > * {
+		margin: 0;
+		padding: 0;
+		text-align: center;
+	}
+
+	p {
+		font-size: 30px;
+		color: var(--text);
+	}
+
+	h1 {
+		font-size: 50px;
+		font-weight: 800;
+		color: var(--accent);
+	}
+</style>

src/lib/Instances.json

@@ -0,0 +1,114 @@
+[
+	{
+		"name": "Invidious",
+		"description": "A frontend for YouTube.",
+		"website": "https://invidious.projectsegfau.lt/",
+		"icon": "https://github.com/iv-org/invidious/raw/master/assets/invidious-colored-vector.svg",
+		"category": "Instances"
+	},
+	{
+		"name": "Libreddit",
+		"description": "A frontend for Reddit.",
+		"website": "https://libreddit.projectsegfau.lt/",
+		"icon": "https://github.com/spikecodes/libreddit/raw/master/static/logo.png",
+		"category": "Instances"
+	},
+	{
+		"name": "Librarian (LBRY)",
+		"description": "A frontend for Odysee.",
+		"website": "https://lbry.projectsegfau.lt/",
+		"icon": "https://codeberg.org/librarian/librarian/raw/branch/main/static/img/librarian.svg",
+		"category": "Instances"
+	},
+	{
+		"name": "Nitter",
+		"description": "A frontend for Twitter.",
+		"website": "https://nitter.projectsegfau.lt/",
+		"icon": "https://github.com/zedeus/nitter/raw/master/public/logo.png",
+		"category": "Instances"
+	},
+	{
+		"name": "Quetre",
+		"description": "A frontend for Quora.",
+		"website": "https://quetre.projectsegfau.lt/",
+		"icon": "https://github.com/zyachel/quetre/raw/main/public/icon.svg",
+		"category": "Instances"
+	},
+	{
+		"name": "Element",
+		"description": "An open source and decentralized chat application.",
+		"website": "https://chat.projectsegfau.lt/",
+		"icon": "https://element.io/images/logo-mark-primary.svg",
+		"category": "Instances"
+	},
+	{
+		"name": "Piped",
+		"description": "Another alternative for YouTube.",
+		"website": "https://piped.projectsegfau.lt/",
+		"icon": "https://github.com/TeamPiped/Piped/raw/master/public/img/icons/logo.svg",
+		"category": "Instances"
+	},
+	{
+		"name": "SearXNG",
+		"description": "A private meta-search engine.",
+		"website": "https://search.projectsegfau.lt/search",
+		"icon": "https://docs.searxng.org/_static/searxng-wordmark.svg",
+		"category": "Instances"
+	},
+	{
+		"name": "Lingva Translate",
+		"description": "A frontend for Google Translate.",
+		"website": "https://translate.projectsegfau.lt",
+		"icon": "https://github.com/thedaviddelta/lingva-translate/raw/main/public/logo.svg",
+		"category": "Instances"
+	},
+	{
+		"name": "Bibliogram",
+		"description": "A frontend for Instagram.",
+		"website": "https://bib.projectsegfau.lt",
+		"icon": "https://git.sr.ht/~cadence/bibliogram/blob/master/art/logo-circle.png",
+		"category": "Instances"
+	},
+	{
+		"name": "Minecraft",
+		"description": "Our invite-only Minecraft SMP.",
+		"website": "https://projectsegfau.lt/minecraft",
+		"icon": "https://icon-library.com/images/flat-minecraft-icon/flat-minecraft-icon-7.jpg",
+		"category": "Gameservers"
+	},
+	{
+		"name": "Minetest",
+		"description": "Minecraft \"alternative\".",
+		"website": "https://matrix.to/#/#minetest:projectsegfau.lt",
+		"icon": "https://instances.projectsegfau.lt/assets/icons/custom/1024px-Minetest_logo.svg.png",
+		"category": "Gameservers"
+	},
+	{
+		"name": "Portainer (Soleil Levant)",
+		"description": "Portainer instance for Soleil Levant.",
+		"website": "https://portainer.soleil-levant.projectsegfau.lt/",
+		"icon": "https://www.docker.com/wp-content/uploads/2022/03/vertical-logo-monochromatic.png",
+		"category": "Internal"
+	},
+	{
+		"name": "Portainer (Helios)",
+		"description": "Portainer instance for Helios.",
+		"website": "https://portainer.projectsegfau.lt/",
+		"icon": "https://www.docker.com/wp-content/uploads/2022/03/vertical-logo-monochromatic.png",
+		"category": "Internal"
+	},
+	{
+		"name": "mailcow",
+		"description": "Our mail server and webmail.",
+		"website": "https://mail.projectsegfau.lt/",
+		"icon": "https://instances.projectsegfau.lt/assets/icons/custom/cow_mailcow.svg",
+		"category": "Internal"
+	},
+	{
+		"name": "Plausible analytics",
+		"description": "Analytics for our website.",
+		"website": "https://analytics.projectsegfau.lt/projectsegfau.lt",
+		"icon": "https://avatars.githubusercontent.com/u/54802774?s=200&v=4",
+		"category": "Internal"
+	}
+]

src/lib/Nav.svelte

@@ -1,44 +1,64 @@
-<script>
+<script lang="ts">
-	import IconBars from "~icons/fa6-solid/bars";
+	import ThemeToggle from "./ThemeToggle.svelte";
+	import { page } from "$app/stores";
+
+	$: currentPage = $page.url.pathname;
+
+	const menus = [
+		{ name: "Instances", url: "/instances" },
+		{ name: "Projects", url: "/projects" },
+		{ name: "Minecraft", url: "/minecraft" },
+		{ name: "Donate", url: "/donate" },
+		{ name: "FAQ", url: "/faq" },
+		{ name: "Contact us", url: "/contact" },
+		{ name: "Our team", url: "/team" },
+		{ name: "Timeline", url: "/timeline" },
+		{ name: "Blog", url: "https://blog.projectsegfau.lt/" },
+		{ name: "Legal", url: "/legal" },
+		{ name: "Status", url: "https://status.projectsegfau.lt/" }
+	];
 </script>
 
 <nav>
 	<a class="brand" href="/">
 		<img src="/logo.png" alt="Project Segfault logo" />
-		<span
+		<span>Project Segfault</span>
-			style="color: var(--accent-secondary); margin-left: 4px; margin-right: 4px;"
-			>Project</span
-		>
-		<span style="color: var(--accent-primary); margin-right: 8px;"
-			>Segfault</span
-		>
 	</a>
 
 	<input type="checkbox" id="toggle-menu" />
 	<label class="menu-icon" for="toggle-menu">
-		<div id="menu-icon">
+		<div id="menu-icon" class="i-fa6-solid:bars">
-			<IconBars />
 		</div>
 	</label>
 
 	<div class="links">
-		<a href="https://instances.projectsegfau.lt/">Instances & Gameservers</a
+		{#each menus as { url, name }}
-		>
+			<a
-		<a href="/minecraft">Minecraft</a>
+				sveltekit:prefetch
-		<a href="/donate">Donate</a>
+				class:active={url !== "/"
-		<a href="/faq">FAQ</a>
+					? currentPage.match(url)
-		<a href="/contact">Contact</a>
+					: url === currentPage}
-		<a href="/members">Members</a>
+				href={url}>{name}</a
-		<a href="https://blog.projectsegfau.lt/">Blog</a>
+			>
-		<a href="/legal">Legal</a>
+		{/each}
+		<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
+			<div class="i-simple-icons:matrix"></div>
+		</a>
+		<a href="https://github.com/ProjectSegfault/">
+			<div class="i-simple-icons:github"></div>
+		</a>
+		<div>
+			<ThemeToggle />
+		</div>
 	</div>
 </nav>
 
 <style>
 	nav {
-		background-color: var(--secondary);
+		background-color: var(--primary);
-		padding: 1rem;
+		border-bottom: 1px solid var(--grey);
 		display: flex;
+		padding: 0.5rem;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
@@ -47,6 +67,17 @@
 		display: flex;
 		align-items: center;
 		text-decoration: none;
+		color: var(--text);
+		gap: 8px;
+		transition: opacity 0.25s;
+	}
+
+	a.active {
+		color: var(--accent);
+	}
+
+	a.brand:hover {
+		opacity: 0.6;
 	}
 
 	.links {
@@ -55,32 +86,24 @@
 	}
 
 	.links > * {
-		background-color: var(--tertiary);
+		padding: 0.5rem;
-		border: none;
-		border-radius: 10px;
-		padding: 1rem;
 		cursor: pointer;
 		color: var(--text);
-		font-family: var(--font-primary);
 		text-decoration: none;
+		transition: color 0.25s;
+		font-size: 13px;
+		font-weight: 500;
+		display: flex;
+		align-items: center;
 	}
 
 	.links > *:hover {
-		background-color: var(--accent-tertiary);
 		text-decoration: none;
-		transition: all 0.5s;
+		color: var(--accent);
-		color: var(--secondary);
-	}
-
-	.links > *:active {
-		background-color: var(--accent-primary);
-		text-decoration: none;
-		transition: all 0.5s;
-		color: var(--secondary);
 	}
 
 	img {
-		height: 36px;
+		height: 30px;
 		border-radius: 50%;
 	}
 
@@ -93,12 +116,11 @@
 		display: none;
 	}
 
-	@media screen and (max-width: 1150px) {
+	@media screen and (max-width: 1058px) {
 		.links {
 			display: none;
 			width: 100%;
-			background-color: var(--secondary);
+			padding-top: 12px;
-			padding-top: 2rem;
 		}
 
 		nav {
@@ -112,15 +134,17 @@
 		}
 
 		.menu-icon {
-			display: block;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			z-index: 1;
 			position: absolute;
-			top: 0.45rem;
 			right: 1rem;
-			background-color: var(--tertiary);
+			top: 0.5rem;
 			border: none;
 			border-radius: 10px;
-			padding: 1rem;
+			height: 30px;
+			width: 30px;
 			cursor: pointer;
 			line-height: 1;
 		}

src/lib/Projects.json

@@ -0,0 +1,14 @@
+[
+	{
+		"name": "Website",
+		"description": "Our website written in SvelteKit.",
+		"github": "https://github.com/ProjectSegfault/website/",
+		"website": "https://projectsegfau.lt/"
+	},
+	{
+		"name": "Segfautils",
+		"description": "Web utilities (APIs) for Project Segfault, but you could probably use them too.",
+		"github": "https://github.com/ProjectSegfault/Segfautils/",
+		"website": "https://segfautils.projectsegfau.lt/"
+	}
+]

src/lib/Team.json

@@ -23,7 +23,9 @@
 		"position": "System administrator",
 		"description": "I don't need to describe myself.",
 		"github": "https://github.com/Midou36O/",
-		"website": "https://miicord.com/"
+		"website": "https://miicord.com/",
+		"email": "midou@projectsegfau.lt",
+		"pgp": "https://keys.openpgp.org/vks/v1/by-fingerprint/E2CA3E4AAC6FF624A1EB993FFC7429AE78981D71"
 	},
 	{
 		"name": "MrLeRien",

src/lib/ThemeToggle.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { afterUpdate } from "svelte";
+	import DarkMode from "svelte-dark-mode";
+	import type { Theme } from "svelte-dark-mode/types/DarkMode.svelte";
+
+	let theme: Theme;
+
+	afterUpdate(() => {
+		document.documentElement.className = theme;
+	});
+
+	let toggle = () => {
+		theme = theme === "dark" ? "light" : "dark";
+	};
+</script>
+
+<DarkMode bind:theme />
+
+{#if theme === "dark"}
+	<div on:click={toggle} class="i-fa6-solid:sun">
+	</div>
+{:else if theme === "light"}
+	<div on:click={toggle} class="i-fa6-solid:moon">
+	</div>
+{/if}
+
+<style>
+	div {
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+	}
+</style>

src/lib/app.css

@@ -1,18 +1,31 @@
 @font-face {
-	font-family: Comfortaa;
+	font-family: Raleway;
-	src: url("/Comfortaa.ttf");
+	src: url("/Raleway.ttf");
 	font-display: swap;
 }
 
 html {
+	--accent: #00a584;
+	--accent-translucent: #00a58498;
+	--font-primary: Raleway;
+	--font-header: Raleway;
 	--primary: #151515;
 	--secondary: #252525;
 	--tertiary: #353535;
-	--accent-primary: #00d4aa;
+	--text: #ffffffde;
-	--accent-secondary: #ce1717;
+	--grey: #5454547a;
-	--text: #fff;
+	--alt: #333;
-	--font-primary: Comfortaa;
+	--alt-text: #ddd
-	--accent-tertiary: #4beacb;
+}
+
+html.light {
+	--primary: #dddddd;
+	--secondary: #f9f3f3;
+	--tertiary: #939393;
+	--text: #444444;
+	--grey: #444444;
+	--alt: #ddd;
+	--alt-text: #333;
 }
 
 body {
@@ -25,6 +38,11 @@ body {
 	position: relative;
 	min-height: 100vh;
 	line-height: 1.625;
+	transition: all 0.25s;
+}
+
+::selection {
+	background-color: var(--accent-translucent);
 }
 
 main {
@@ -33,6 +51,11 @@ main {
 
 a {
 	text-decoration: underline;
-	color: var(--accent-primary);
+	color: var(--accent);
 	text-underline-offset: 5px;
+	transition: filter 0.25s;
+}
+
+a:hover {
+	filter: brightness(125%);
 }

src/routes/__layout.svelte

@@ -3,18 +3,18 @@
 	import Nav from "$lib/Nav.svelte";
 	import Footer from "$lib/Footer.svelte";
 	import SvelteSeo from "svelte-seo";
+	import "uno.css";
 </script>
 
 <SvelteSeo
 	title="Project Segfault"
-	description="7 idiots, 2 OVH vpses, a BuyVM 1024 Slice, a Sun server and a Hitachi Compute Rack."
+	description="Open source development and hosted services."
 	canonical="https://projectsegfau.lt/"
 	keywords="projectsegfault, project segfault, privacy services, privacy instances, invidious, nitter, searxng, minecraft"
 	openGraph={{
 		url: "https://projectsegfau.lt/",
 		title: "Project Segfault",
-		description:
+		description: "Open source development and hosted services.",
-			"7 idiots, 2 OVH vpses, a BuyVM 1024 Slice, a Sun server and a Hitachi Compute Rack.",
 		images: [
 			{
 				url: "/ProjectSegfault_Desktop_16-9.png",

src/routes/contact.md

@@ -1,5 +1,5 @@
 ---
-title: Contact Us
+title: Contact us
 description: Do you want to contact us?
 ---
 
@@ -23,4 +23,4 @@ _Please be aware that Microsoft often blocks non-popular emails, if you do conta
 
 ## People
 
-You can find ways to contact individual members [on our Members page](/members).
+You can find ways to contact individual team members [on our team page](/team).

src/routes/donate.md

@@ -13,40 +13,34 @@ If you donate, we will be more motivated to work on the server and host more stu
 
 ## Donation Links
 
+<h3>Monero</h3>
+
 <div class="monero">
-    Monero: <code style="margin-left: 4px;">47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA</code>
+    <div class="written">
-	<img src="/Monero.png" alt="Monero Qr Code" />
+        <span>Address: <code>47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA</code></span><br />
+        <span>Alias: <a href="https://projectsegfau.lt/">projectsegfau.lt</a> <i>(Put this in an OpenAlias compatible wallet e.g. MyMonero)</i></span>
+    </div>
+    <div class="qr">
+        <img src="/Monero.png" alt="Monero QR code" />
+    </div>
 </div>
 
-<p class="reports-note">
+_You can find all of our financial reports on [our transparency repository on GitHub](https://github.com/ProjectSegfault/transparency/)._
-    You can find all of our financial reports on <a href="https://github.com/ProjectSegfault/transparency/">our transparency repository on GitHub</a>.
-</p>
 
 <style>
-	.monero {
+    .monero {
-		display: flex;
+        display: flex;
-		align-items: center;
+        flex-direction: row;
-        word-break: break-all;
+        align-items: center;
-	}
+        gap: 8px;
+        word-wrap: break-word;
+    }
 
-	.monero > img {
+    @media screen and (max-width: 1004px) {
-		margin-left: 26px;
+        .monero {
-	}
+            flex-direction: column;
+            align-items: initial;
+        }
+    }
 
-	.reports-note {
-		margin-top: 32px;
-        font-style: italic;
-	}
-
-	@media only screen and (max-width: 930px) {
-		.monero {
-			flex-direction: column;
-			align-items: flex-start;
-		}
-
-		.monero > img {
-			margin-left: 0;
-			margin-top: 8px;
-		}
-	}
 </style>

src/routes/faq.md

@@ -7,7 +7,11 @@ description: Frequently Asked Questions
 
 ## Who is the project owner?
 
-The project doesn't have a single owner but is made up of a team of people. A list of the people involved and their positions can be found [on our members page](/members).
+The project doesn't have a single owner but is made up of a team of people. A list of the people involved and their positions can be found [on our members page](/team).
+
+## What's the backstory to Project Segfault?
+
+We have a rather interesting backstory, if I do say so myself. [Click here to see a timeline of things that happened in Project Segfault's history](/timeline).
 
 ## One of your services contains toxic people!
 

src/routes/index.md

@@ -1,16 +0,0 @@
----
-title: Home
-description: 7 idiots, 2 OVH vpses, a BuyVM 1024 Slice, a Sun server and a Hitachi Compute Rack.
----
-
-# Project Segfault
-
-{ description }
-
-## What is this?
-
-We are 7 teenagers who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!
-
-## Tell me more! What do you guys host? Where can I contact you? Can you fix my daughter's iPad?
-
-We can't fix your daughter's iPad, but there is a navigation bar at the top of the page with links to websites and pages that explain things about us, or contain useful information about our services.

src/routes/index.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import SvelteSeo from "svelte-seo";
+	import Hero from "$lib/Hero.svelte";
+	import dayjs from "dayjs";
+
+	let description: string = "Open source development and hosted services.";
+
+	let announcements: any = [];
+	async function fetchAnnouncements() {
+		const url = `https://segfautils.projectsegfau.lt/api/announcements`;
+		const response = await fetch(url);
+		announcements = await response.json();
+		return announcements;
+	}
+
+	const promise = fetchAnnouncements();
+</script>
+
+<SvelteSeo title="Home | Project Segfault" {description} />
+
+<Hero
+	title="Project Segfault"
+	description="Open source development and hosted services"
+	marginTop="7"
+>
+	<div class="buttons">
+		<a href="/instances">Explore our services</a>
+		<a href="/projects">Explore our projects</a>
+		<a href="/donate"><div class="i-fa6-solid:money-bill"></div> Donate</a>
+	</div>
+</Hero>
+
+<div class="announcements">
+	{#await promise}
+		<span />
+	{:then}
+		<div class="announcement-container">
+			<div class="announcement">
+				<div class="general">
+					{#if announcements.severity === "info"}
+						<div class="i-fa6-solid:circle-info"></div>
+					{:else}
+						<div class="i-fa6-solid:triangle-exclamation"></div>
+					{/if}
+					<span>
+						{dayjs
+							.unix(announcements.created)
+							.format("DD/MM/YYYY HH:mm")}
+					</span>
+				</div>
+				<div class="title">
+					<h1>{announcements.title}</h1>
+				</div>
+
+				<div class="read-more">
+					<a href={announcements.link}>Read more...</a>
+				</div>
+			</div>
+		</div>
+	{:catch}
+		<span />
+	{/await}
+</div>
+
+{#if announcements.severity === "info"}
+	<style>
+		.announcement {
+			background-color: #8caaee;
+		}
+	</style>
+{:else if announcements.severity === "low"}
+	<style>
+		.announcement {
+			background-color: #a6d189;
+		}
+	</style>
+{:else if announcements.severity === "medium"}
+	<style>
+		.announcement {
+			background-color: #e5c890;
+		}
+	</style>
+{:else if announcements.severity === "high"}
+	<style>
+		.announcement {
+			background-color: #e78284;
+		}
+	</style>
+{/if}
+
+<style>
+	.buttons {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+		margin: 1rem;
+	}
+
+	@media screen and (max-width: 452px) {
+		.buttons {
+			flex-direction: column;
+		}
+	}
+
+	.buttons a {
+		text-decoration: none;
+		background-color: var(--accent);
+		padding: 8px 1em 8px 1em;
+		color: var(--primary);
+		border-radius: 10px;
+		transition: filter 0.25s;
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.buttons a:hover {
+		filter: brightness(125%);
+	}
+
+	.announcement-container {
+		display: flex;
+		justify-content: center;
+		margin-top: 4rem;
+	}
+
+	.announcement {
+		color: #252525 !important;
+		padding: 2rem 1rem;
+		border-radius: 10px;
+		width: fit-content;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.announcement a {
+		color: #252525;
+	}
+
+	.announcement .general {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+</style>

src/routes/instances.svelte

@@ -0,0 +1,56 @@
+<script>
+	import { CardInner, CardOuter } from "$lib/Card";
+	import instances from "$lib/Instances.json";
+
+	let groups = instances.reduce((curr, val) => {
+		let group = curr.find((g) => g.category === `${val.category}`);
+		if (group) {
+			group.values.push(val);
+		} else {
+			curr.push({ category: `${val.category}`, values: [val] });
+		}
+		return curr;
+	}, []);
+</script>
+
+<h1>Our instances</h1>
+<CardOuter>
+	<div class="container">
+		{#each groups as group}
+			<div class="container-inner">
+				<h2>{group.category}</h2>
+				<div class="items">
+					{#each group.values as item}
+						<a href={item.website}>
+							<CardInner
+								title={item.name}
+								description={item.description}
+								icon={item.icon}
+							/>
+						</a>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	</div>
+</CardOuter>
+
+<style>
+	.container-inner,
+	.container {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.items {
+		display: flex;
+		flex-direction: row;
+		flex-flow: row wrap;
+		gap: 2rem;
+	}
+
+	a {
+		text-decoration: none;
+		color: var(--text);
+	}
+</style>

src/routes/legal/privacy-policy.md

@@ -39,5 +39,4 @@ Often times you can clear your own data simply by deleting your account.
 
 As we said, you can request any GDPR/Privacy things in [this Matrix room](https://matrix.to/#/#gdpr:projectsegfau.lt). But, if there's any ongoing investigations and a law enforcement agency contacts us, we will comply. But, we will only do it if we can verify it's official and they have a warrant.
 
-
 _Last updated 28.07.2022 22:00 UTC+1_

src/routes/members.svelte

@@ -1,147 +0,0 @@
-<script lang="ts">
-	import members from "$lib/Members.json";
-	import IconDiscord from "~icons/simple-icons/discord";
-	import IconMatrix from "~icons/simple-icons/matrix";
-	import IconGitHub from "~icons/simple-icons/github";
-
-	import IconGlobe from "~icons/fa6-solid/globe";
-	import IconEmail from "~icons/fa6-solid/envelope";
-	import IconCamera from "~icons/fa6-solid/camera";
-</script>
-
-<svelte:head>
-	<title>Members | Project Segfault</title>
-	<meta name="description" content="Members of Project Segfault." />
-</svelte:head>
-
-<div class="members">
-	<h1>Members</h1>
-	<p>Our excellent members!</p>
-	<div class="member-outer">
-		{#each members as { name, discord, matrix, position, description, github, website, email, picture }}
-			<div class="member-inner">
-				<div class="main">
-					<span>{name} - {position}</span>
-
-					{#if description}
-						<p class="description">{description}</p>
-					{/if}
-				</div>
-
-				<div class="socials">
-					{#if matrix}
-						<a href={matrix} class="matrixcolored"><IconMatrix /></a
-						>
-					{/if}
-
-					{#if discord}
-						<a href={discord} class="discordcolored"
-							><IconDiscord /></a
-						>
-					{/if}
-
-					{#if github}
-						<a href={github} class="githubcolored"><IconGitHub /></a
-						>
-					{/if}
-
-					{#if website}
-						<a href={website} class="web"><IconGlobe /></a>
-					{/if}
-
-					{#if email}
-						<a href={email} class="email"><IconEmail /></a>
-					{/if}
-
-					{#if picture}
-						<a href={picture} class="picture"><IconCamera /></a>
-					{/if}
-				</div>
-			</div>
-		{/each}
-	</div>
-</div>
-
-<style>
-	.member-outer {
-		display: flex;
-		flex-direction: column;
-		gap: 2rem;
-		flex-flow: row wrap;
-	}
-
-	.member-inner {
-		background-color: #252525;
-		border-radius: 10px;
-		padding: 1rem;
-		width: 30em;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.main {
-		flex: 1;
-	}
-
-	span {
-		font-size: 25px;
-		font-weight: bold;
-	}
-
-	a {
-		border: none;
-		border-radius: 10px;
-		padding: 0.5rem;
-		cursor: pointer;
-		font-family: var(--font-primary);
-		color: var(--secondary);
-		text-decoration: none;
-		width: fit-content;
-	}
-
-	.matrixcolored {
-		background-color: #fff;
-		font-size: 20px;
-		height: 23px;
-	}
-
-	.discordcolored {
-		background-color: #5865f2;
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-	}
-
-	.githubcolored {
-		background-color: #333;
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-	}
-
-	.web,
-	.email,
-	.picture {
-		background-color: var(--tertiary);
-		color: #fff !important;
-		font-size: 20px;
-		height: 23px;
-	}
-
-	.web:hover {
-		background-color: var(--accent-tertiary);
-		color: var(--secondary) !important;
-		transition: all 0.5s;
-	}
-
-	.web:active {
-		background-color: var(--accent-primary);
-		transition: all 0.5s;
-	}
-
-	.socials {
-		display: flex;
-		flex-direction: row;
-		gap: 0.5rem;
-	}
-</style>

src/routes/minecraft/index.md

@@ -9,7 +9,7 @@ We have an invite-only SMP server running on our network on version 1.18\* (1.18
 
 ## How do I join?
 
-If you would like to join, please join our Matrix space or and ask a project member to whitelist your account. The link to the Matrix space can be found on the footer of the page.
+If you would like to join, please join our Matrix space or and ask a project member to whitelist your account. The link to the Matrix space can be found on the navigation bar at the top of the page.
 
 ## Rules
 

src/routes/projects.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { CardInner, CardOuter, Link, LinksOuter } from "$lib/Card";
+	import projects from "$lib/Projects.json";
+</script>
+
+<svelte:head>
+	<title>Our projects | Project Segfault</title>
+	<meta name="description" content="Our collection of projects." />
+</svelte:head>
+
+<h1>Our projects</h1>
+<CardOuter>
+	{#each projects as { name, description, github, website }}
+		<CardInner title={name} {description}>
+			<LinksOuter>
+				{#if website}
+					<Link url={website} classes="web">
+						<div class="i-fa6-solid:globe"></div>
+					</Link>
+				{/if}
+
+				{#if github}
+					<Link url={github} classes="githubcolored">
+						<div class="i-simple-icons:github"></div>
+					</Link>
+				{/if}
+			</LinksOuter>
+		</CardInner>
+	{/each}
+</CardOuter>

src/routes/team.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { CardInner, CardOuter, Link, LinksOuter } from "$lib/Card";
+	import members from "$lib/Team.json";
+</script>
+
+<svelte:head>
+	<title>Our team | Project Segfault</title>
+	<meta name="description" content="Team members of Project Segfault." />
+</svelte:head>
+
+<h1>Our team</h1>
+<CardOuter>
+	{#each members as { name, discord, matrix, position, description, github, pgp, website, email, picture }}
+		<CardInner title={name} {position} {description}>
+			<LinksOuter>
+				{#if matrix}
+					<Link url={matrix} classes="matrixcolored">
+						<div class="i-simple-icons:matrix"></div>
+					</Link>
+				{/if}
+
+				{#if discord}
+					<Link url={discord} classes="discordcolored">
+						<div class="i-simple-icons:discord"></div>
+					</Link>
+				{/if}
+
+				{#if github}
+					<Link url={github} classes="githubcolored">
+						<div class="i-simple-icons:github"></div>
+					</Link>
+				{/if}
+
+				{#if website}
+					<Link url={website} classes="web">
+						<div class="i-fa6-solid:globe"></div>
+					</Link>
+				{/if}
+
+				{#if email}
+					<Link url="mailto:{email}" classes="email">
+						<div class="i-fa6-solid:envelope"></div>
+					</Link>
+				{/if}
+
+				{#if pgp}
+					<Link url={pgp} classes="pgp">
+						<div class="i-fa6-solid:key"></div>
+					</Link>
+				{/if}
+
+				{#if picture}
+					<Link url={picture} classes="picture">
+						<div class="i-fa6-solid:camera"></div>
+					</Link>
+				{/if}
+			</LinksOuter>
+		</CardInner>
+	{/each}
+</CardOuter>

src/routes/timeline.svelte

@@ -0,0 +1,237 @@
+<script>
+	import {
+		Timeline,
+		TimelineItem,
+		TimelineSeparator,
+		TimelineDot,
+		TimelineConnector,
+		TimelineContent,
+		TimelineOppositeContent
+	} from "svelte-vertical-timeline";
+	import Hero from "$lib/Hero.svelte";
+</script>
+
+<svelte:head>
+	<title>Timeline | Project Segfault</title>
+	<meta
+		name="description"
+		content="Timeline of Project Segfault's history."
+	/>
+</svelte:head>
+
+<Hero>
+	<h1>A timeline of <span>Project Segfault</span>'s history</h1>
+</Hero>
+
+<Timeline position="alternate">
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>2020</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Terrific Tea Studios is formed</h3>
+			<p>
+				While not intended to be as the beginning of the founding of
+				Project Segfault, it grouped 3 core team members together:
+				Odyssey, Midou and Devnol, with some other people. This was all
+				of us' first attempt at making an organization that focuses on
+				computers. It primarily focused on development of products. This
+				organization was ultimately killed in February 2021 when Odyssey
+				brutally murdered it by abusing a backdoor in it's Discord bot,
+				Cytrus-RE.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>January 2021</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Neutron Technologies is formed</h3>
+			<p>
+				This was our second attempt at an organization, attempting to
+				not follow our previous mistakes. While it went nicely at first,
+				it eventually got to the point where Devnol (the current
+				organizer) decided he had better things to do (not really) and
+				left. From there, things went south and eventually we just
+				deleted the entire organization's Discord (we werent convinced
+				of Matrix at this time.). Since we had access to some hardware,
+				this was supposed to be focused on making backend stuff rather
+				than desktop apps.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>Somewhere in July 2021?</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>MrLeRien opens a small homeserver with the help of Midou</h3>
+			<p>
+				This eventually formed a nice little (primarily focused on
+				hosting) project called mutahar.rocks. Here, the duo focused on
+				hosting anything they could on a Core 2 Duo HP machine with 8GB
+				of RAM running Arch Linux. This alongside a small VPS they
+				already had.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>Probably October 2021</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Mutahar.rocks obtained a powerful server</h3>
+			<p>
+				MrLeRien's dad's work had an unused Hitachi Compute Rack with
+				320GB of ram and two decade-old Xeons. Once he got his hands on
+				the server, mutahar.rocks started hosting more stuff.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>December 2021</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Odyssey joins Mutahar.rocks</h3>
+			<p>
+				At this point, it wasn't "official", but he did some work for
+				them (like try to make a website, which eventually got lost and
+				never found), and that's about it.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>February 2022</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Mutahar.rocks started hosting gameservers.</h3>
+			<p>
+				Odyssey was in charge of most of them, which made him an
+				official member of Mutahar.rocks. We primarily focused on
+				hosting Source game servers, for example Garry's Mod. We also
+				hosted a Minecraft server to a couple of... annoying people. I'm
+				glad they're out of my life now.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>April 2022</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Mutahar.rocks' main server was forced to shut down.</h3>
+			<p>
+				Eventually, after many months and pointless arguments with his
+				dad, MrLeRien decided to give up on fighting with his dad to
+				keep the server online. I don't remember exactly when, but I had
+				to make an announcement in the middle of a class to tell people
+				what was going on. Not fun.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>April 2022</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>
+				Devnol comes in and joins Mutahar.rocks with his server, Helios.
+			</h3>
+			<p>
+				When he joined, we decided that this was huge for Mutahar.rocks
+				and we decided it was time to rebrand... This is when
+				Mutahar.rocks became Project Segfault. Same thing - just a bit
+				more professional.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>Now</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Months later, 3 new members, we're better than ever.</h3>
+			<p>
+				We decided to get some new members. First, we started by getting
+				someone who likes to do frontend development, Akis. Then, we got
+				an amazing sysadmin who goes by the alias "openssl_rand". He
+				does a lot of cool stuff for us, and he is very dedicated. Then
+				we also decided that we needed backups, and then one of our
+				friends told us he could help us with that. His name is
+				Stephenvk. We also decided to just get better.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>Now-er</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot style={"background-color: #fff; "} />
+			<TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>
+				Project Segfault decides to expand and now develops software.
+			</h3>
+			<p>
+				This started after Odyssey decided to work on Segfautils, an API
+				for Project Segfault. Midou plans to start a huge project in the
+				near future together with the team that can help people with
+				multiple servers.
+			</p>
+		</TimelineContent>
+	</TimelineItem>
+</Timeline>
+
+<style>
+	h1 {
+		font-size: 50px;
+		font-weight: 800;
+	}
+
+	span {
+		color: var(--accent);
+	}
+</style>

static/logo.svg

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="375.6322"
+   height="380.6076"
+   viewBox="0 0 375.6322 380.6076"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="pjsgfltrebrandtransparentish.svg"
+   inkscape:export-filename="pjsgfltrebrandtransparentish.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="1.5866953"
+     inkscape:cx="191.9083"
+     inkscape:cy="255.24749"
+     inkscape:window-width="1920"
+     inkscape:window-height="1022"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect5025"
+       nodesatellites_param="F,0,0,1,0,25.978608,0,1 @ F,0,0,1,0,33.280871,0,1 @ F,0,0,1,0,28.006389,0,1 @ F,0,0,1,0,127.08513,0,1"
+       is_visible="true"
+       lpeversion="1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="0"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <filter
+       style="color-interpolation-filters:sRGB"
+       inkscape:label="Drop Shadow"
+       id="filter6113"
+       x="-0.126191"
+       y="-0.11677853"
+       width="1.29696"
+       height="1.2842329">
+      <feFlood
+         flood-opacity="0.270588"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood6103" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="in"
+         result="composite1"
+         id="feComposite6105" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="11.4467"
+         result="blur"
+         id="feGaussianBlur6107" />
+      <feOffset
+         dx="9.87989"
+         dy="12.1413"
+         result="offset"
+         id="feOffset6109" />
+      <feComposite
+         in="SourceGraphic"
+         in2="offset"
+         operator="over"
+         result="composite2"
+         id="feComposite6111" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-68.183914,-65.696182)">
+    <g
+       id="path4697"
+       style="fill:#00a584;fill-opacity:1;stroke:none;filter:url(#filter6113)"
+       transform="translate(3.3117698,2.7243936)">
+      <path
+         style="color:#000000;fill:#00a584;fill-opacity:1;stroke:#00d4aa;stroke-width:1px;stroke-opacity:1;-inkscape-stroke:none"
+         d="m 351.90112,133.51155 -176.76509,0.18162 a 33.315084,33.315084 134.97056 0 0 -33.28085,33.31507 v 188.60647 c 0,15.4675 10.961,21.91398 24.3089,14.09941 34.2977,-20.07971 95.12715,-57.50001 116.78195,-82.32123 35.27372,-40.43152 -107.15263,-43.78827 -85.17069,-57.04148 50.69215,-30.56298 120.95696,-66.93584 156.8986,-85.18994 12.79194,-6.49679 11.57476,-11.66466 -2.77282,-11.64992 z"
+         id="path4991"
+         sodipodi:nodetypes="cccsc"
+         inkscape:path-effect="#path-effect5025"
+         inkscape:original-d="m 377.87971,133.48486 -236.02453,0.24251 V 383.6211 c 0,0 303.15572,-167.40787 44.67569,-108.17418 C 9.614791,315.98928 377.87971,133.48486 377.87971,133.48486 Z" />
+    </g>
+  </g>
+  <rect
+     style="fill:#00a584;fill-opacity:0.563436;paint-order:stroke fill markers;image-rendering:optimizeQuality"
+     id="rect4630"
+     width="375.63217"
+     height="380.60764"
+     x="0"
+     y="0"
+     ry="52.713902" />
+</svg>

static/logo_transparent.svg

@@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="375.6322"
+   height="380.6076"
+   viewBox="0 0 375.6322 380.6076"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="logo.svg"
+   inkscape:export-filename="pjsgfltrebrandtransparentish.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="1.5866953"
+     inkscape:cx="192.22342"
+     inkscape:cy="255.24749"
+     inkscape:window-width="1920"
+     inkscape:window-height="1022"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect5025"
+       nodesatellites_param="F,0,0,1,0,25.978608,0,1 @ F,0,0,1,0,33.280871,0,1 @ F,0,0,1,0,28.006389,0,1 @ F,0,0,1,0,127.08513,0,1"
+       is_visible="true"
+       lpeversion="1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="0"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <filter
+       style="color-interpolation-filters:sRGB"
+       inkscape:label="Drop Shadow"
+       id="filter6113"
+       x="-0.126191"
+       y="-0.11677853"
+       width="1.29696"
+       height="1.2842329">
+      <feFlood
+         flood-opacity="0.270588"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood6103" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="in"
+         result="composite1"
+         id="feComposite6105" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="11.4467"
+         result="blur"
+         id="feGaussianBlur6107" />
+      <feOffset
+         dx="9.87989"
+         dy="12.1413"
+         result="offset"
+         id="feOffset6109" />
+      <feComposite
+         in="SourceGraphic"
+         in2="offset"
+         operator="over"
+         result="composite2"
+         id="feComposite6111" />
+    </filter>
+  </defs>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-68.183914,-65.696182)">
+    <g
+       id="path4697"
+       style="fill:#00a584;fill-opacity:1;stroke:none;filter:url(#filter6113)"
+       transform="translate(3.3117698,2.7243936)">
+      <path
+         style="color:#000000;fill:#00a584;fill-opacity:1;stroke:#00d4aa;stroke-width:1px;stroke-opacity:1;-inkscape-stroke:none"
+         d="m 351.90112,133.51155 -176.76509,0.18162 a 33.315084,33.315084 134.97056 0 0 -33.28085,33.31507 v 188.60647 c 0,15.4675 10.961,21.91398 24.3089,14.09941 34.2977,-20.07971 95.12715,-57.50001 116.78195,-82.32123 35.27372,-40.43152 -107.15263,-43.78827 -85.17069,-57.04148 50.69215,-30.56298 120.95696,-66.93584 156.8986,-85.18994 12.79194,-6.49679 11.57476,-11.66466 -2.77282,-11.64992 z"
+         id="path4991"
+         sodipodi:nodetypes="cccsc"
+         inkscape:path-effect="#path-effect5025"
+         inkscape:original-d="m 377.87971,133.48486 -236.02453,0.24251 V 383.6211 c 0,0 303.15572,-167.40787 44.67569,-108.17418 C 9.614791,315.98928 377.87971,133.48486 377.87971,133.48486 Z" />
+    </g>
+  </g>
+</svg>

uno.config.ts

@@ -0,0 +1,14 @@
+import {
+	defineConfig,
+	presetIcons
+} from "unocss";
+
+import { extractorSvelte } from "unocss";
+
+export default defineConfig({
+	extractors: [extractorSvelte],
+
+	presets: [
+		presetIcons()
+	]
+});

vite.config.js

@@ -1,14 +1,12 @@
 import { sveltekit } from "@sveltejs/kit/vite";
-import icons from "unplugin-icons/vite";
+import unoCSS from "unocss/vite";
+
 
 /** @type {import('vite').UserConfig} */
 const config = {
 	plugins: [
 		sveltekit(),
-
+		unoCSS()
-		icons({
-			compiler: "svelte"
-		})
 	]
 };