Whitespace change

.containerignore

@@ -1,3 +1,10 @@
-node_modules
 .git
-build
+node_modules
+.eslint*
+.prettier*
+.git*
+.vscode
+Containerfile*
+public
+.svelte-kit
+build

.eslintignore

@@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

.eslintrc.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-};

.prettierignore

@@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

.prettierrc

@@ -1,9 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}

Containerfile

@@ -1,23 +1,20 @@
-FROM docker.io/node:16.19.0-alpine AS builder
+FROM docker.io/node:20.5.0-alpine AS builder
 
-# install dependencies
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 
-# Copy all local files into the image.
 COPY . .
 
 RUN npm run build
 
-###
+
-# Only copy over the Node pieces we need
+FROM docker.io/node:20.5.0-alpine
-# ~> Saves 35MB
-###
-FROM docker.io/nginx:alpine
 
 WORKDIR /app
-COPY --from=builder /app/build /usr/share/nginx/html
+COPY package.json package-lock.json .
-COPY nginx.conf /etc/nginx/nginx.conf
+RUN npm ci --omit dev
+COPY --from=builder /app/build /app
+EXPOSE 3000
 
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["node", "."]

biome.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	}
+}

nginx.conf

@@ -1,37 +0,0 @@
-user  nginx;
-worker_processes  auto;
-
-error_log  /var/log/nginx/error.log notice;
-pid        /var/run/nginx.pid;
-
-events {
-    worker_connections  1024;
-}
-
-http {
-    include       /etc/nginx/mime.types;
-    default_type  application/octet-stream;
-    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
-                      '$status $body_bytes_sent "$http_referer" '
-                      '"$http_user_agent" "$http_x_forwarded_for"';
-    access_log  /var/log/nginx/access.log  main;
-    sendfile        on;
-    keepalive_timeout  65;
-    gzip  on;
-
-    server {
-        listen       80;
-        listen  [::]:80;
-        server_name  localhost;
-        index  index.html index.htm;
-
-        location / {
-            root   /usr/share/nginx/html;
-            try_files $uri$args $uri$args/ /index.html;
-        }
-        error_page   500 502 503 504  /50x.html;
-        location = /50x.html {
-            root   /usr/share/nginx/html;
-        }
-    }
-}

package.json

@@ -13,25 +13,18 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^1.0.0",
+		"@sveltejs/adapter-auto": "^3.2.1",
-		"@sveltejs/kit": "^1.0.0",
+		"@sveltejs/kit": "^2.5.10",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"svelte": "^4.2.17",
-		"@typescript-eslint/parser": "^5.45.0",
+		"svelte-check": "^3.7.1",
-		"eslint": "^8.28.0",
+		"tslib": "^2.6.2",
-		"eslint-config-prettier": "^8.5.0",
+		"typescript": "^5.4.5",
-		"eslint-plugin-svelte3": "^4.0.0",
+		"vite": "^5.2.11",
-		"prettier": "^2.8.0",
+		"vitest": "^1.6.0"
-		"prettier-plugin-svelte": "^2.8.1",
-		"svelte": "^3.54.0",
-		"svelte-check": "^2.9.2",
-		"tslib": "^2.4.1",
-		"typescript": "^4.9.3",
-		"vite": "^4.0.0",
-		"vitest": "^0.25.3"
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/adapter-static": "^1.0.0",
+		"@sveltejs/adapter-node": "^5.0.1",
-		"sass": "^1.57.1"
+		"sass": "^1.77.2"
 	}
 }

src/app.html

@@ -9,14 +9,6 @@
 		<meta property="og:type" content="website" />
 		
 		<style>
-			html {
-				background-image: linear-gradient(0deg, rgba(18, 2, 25, 0.9), rgba(18, 2, 25, 0.9)), url("/background-stars.png");
-				background-size: cover;
-			}
-			body {
-				font-family: "Noto Sans",Arial,sans-serif;
-				color: #fff;
-			}
 		</style>
 		%sveltekit.head%
 	</head>

src/app.scss

@@ -0,0 +1,80 @@
+@use "./colors.scss";
+@import "https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css";
+
+html {
+	background-color: rgba(14, 1, 20, 1);
+	background-image:
+		radial-gradient(white, rgba(255,153,255,.2) 2px, transparent 40px),
+		radial-gradient(white, rgba(255,153,255,.15) 1px, transparent 30px),
+		radial-gradient(white, rgba(255,153,255,.1) 2px, transparent 50px),
+		radial-gradient(rgba(255,153,255,.4), rgba(255,153,255,.1) 2px, transparent 30px);
+	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
+	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
+}
+
+body {
+  font-family: "Lexend","Noto Sans", "Verdana", sans-serif;
+  color: colors.$text;
+}
+
+img {
+  image-orientation: from-image;
+}
+
+a {
+  text-decoration-line: underline;
+  text-decoration-color: colors.$secondary;
+  text-decoration-thickness: .125em;
+  color: colors.$text;
+}
+
+hr {
+  border: 1px solid colors.$highlight;
+  width: 100%;
+}
+
+button {
+  background-color: colors.$highlight;
+  color: colors.$highlight-text;
+  border: none;
+  height: 2.5em;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  transition-duration: 0.25s;
+  font-size: 1em;
+
+  &:hover {
+    cursor: pointer;
+    background-color: lighten(colors.$highlight, 5%);
+  }
+
+  &:active {
+    background-color: darken(colors.$highlight, 5%);
+  }
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+
+.card {
+  width: 60%;
+  margin: auto;
+}
+
+@media (max-width: 500px) {
+  .card {
+    width: 100%;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 1000px) {
+  .card {
+    width: 75%;
+  }
+}

src/colors.scss

@@ -0,0 +1,13 @@
+$background: rgba(14, 1, 20, 1);
+
+$highlight: white;
+$secondary: white;
+
+$highlight-text: black;
+$text: white;
+$inactive-text: lighten($text, 20%);
+$highlight-inactive-text: darken($highlight-text, 20%);
+
+$blue: #848fab;
+$yellow: #a7ad86;
+$red: #a88b83;

src/routes/+layout.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import "../app.scss";
+
+  import { onNavigate } from "$app/navigation";
+
+
+  onNavigate((navigation) => {
+    // @ts-expect-error
+    if (!document.startViewTransition) return;
+
+    return new Promise((resolve) => {
+      // @ts-expect-error
+      document.startViewTransition(async () => {
+        resolve();
+        await navigation.complete;
+      });
+    });
+  });
+</script>
+
+<slot />

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import HomeIcons from './home-icons.svelte';
+	import Project from './project.svelte';
 </script>
 
 <div class="content-slim">
@@ -7,23 +8,54 @@
 		<HomeIcons />
 	</div>
 	<div class="item home-greeting">
-		<h1>Welcome to my space in the internet</h1>
+		<h1>Welcome to my internet space</h1>
 	</div>
 	<div class="item home-description">
 		<p>
-			Hello, I'm Trivernis, a german software developer, working on way too many projects at once.
+			Hello, I'm Trivernis (he/they), a german software developer, working on way too many projects at once.
-			My pronouns are he/they. I primarily use Rust because it's just the best programming language.
+			I primarily use Rust because it's just the best programming language.
 		</p>
 	</div>
-	<div class="item github-stats">
+	<hr class="item"/>
-		<img
+	<div class="item projects">
-			alt="Dynamically generated by GitHub readme stats. It displays my total stars earned, total commits, PRs, issues and repositories."
+		<h1>Some Projects</h1>
-			src="https://github-readme-stats.vercel.app/api?username=trivernis&show_icons=true&theme=tokyonight"
+		<Project
+			name="Mediarepo"
+			href="https://mediarepo.trivernis.dev"
+			description="A media management tool written in Rust and Angular.
+			It uses tags to sort images into categories and can be run fully headless.
+			Furthermore it can be run in a classic server-client fashion as well as a single
+			desktop application."
 		/>
-		<img
+		<Project
-			alt="Dynamically generated by GitHub readme stats. It displays my most used languages. At the time of writing this it's rust with 53%."
+			name="2b-rs"
-			src="https://github-readme-stats.vercel.app/api/top-langs/?username=trivernis&hide=html&show_icons=true&theme=tokyonight"
+			href="https://git.trivernis.net/Trivernis/2b-rs"
+			description="A discord bot written in Rust.
+			It provides commands for playing music, searching for xkcd comics, finding image sources etc."
 		/>
+		<Project
+			name="rusty-value"
+			href="https://git.trivernis.net/Trivernis/rusty-value"
+			description="A Rust libary to get a generic representation for any rust type.
+			The library features a derive trait to create a rusty value from any type. The value can
+			be inspected by using match expressions."
+		/>
+		<Project
+			name="multi-trait-object"
+			href="https://git.trivernis.net/Trivernis/multi-trait-object"
+			description="A Rust library to store all traits alongside a dynamic value.
+			Usually dyn types in rust only support one non-marker trait since the fat pointer representation
+			of a dyn type only includes one pointer to the data and one pointer to the v-table of the trait.
+			This libary creates even fatter pointers for trait objects to store multiple v-table pointers alongside
+			a data pointer. This way you can create dyn objects that are both Clone and Debug.
+			Also this libary is super unsafe."
+		/>
+		<Project
+			name="Snekdown"
+			href="https://git.trivernis.net/Trivernis/snekdown"
+			description="A custom markdown flavour with a parser and html renderer written entirely in Rust."
+		/>
+		<h4>And there's even more on my Git and GitHub...</h4>
 	</div>
 </div>
 
@@ -32,6 +64,11 @@
 		display: flex;
 		flex-direction: column;
 		margin: 5% 15% 5em;
+		padding: 5em;
+		/* background: rgba(14,1,20,0.9); */
+		backdrop-filter: blur(50px);
+		/* box-shadow:  0px 0px 60px 30px rgba(14,1,20,0.9); */
+		border-radius: 5px;
 	}
 
 	.item {
@@ -58,20 +95,6 @@
 		text-align: center;
 	}
 
-	.github-stats {
-		margin: auto;
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		width: 100%;
-
-		img {
-			padding: 5px;
-			margin: auto;
-			display: flex;
-			max-width: 100%;
-		}
-	}
 	@media screen and (max-width: 1000px) {
 		.home-greeting {
 			h1 {

src/routes/home-icons.svelte

@@ -4,12 +4,18 @@
   import githubLogo from "$lib/assets/github-logo.png";
   import discordLogo from "$lib/assets/discord-logo.png";
   import mastodonLogo from "$lib/assets/mastodon-logo.png";
+  import giteaLogo from "$lib/assets/gitea-logo.png";
+  import matrixLogo from "$lib/assets/matrix-logo.png";
 </script>
 
 <div class="home-icons">
-  <Icon href="https://github.com/trivernis" src={githubLogo} alt="GitHub logo"/>
+  <Icon small={true} href="https://github.com/trivernis" src={githubLogo} alt="GitHub logo"/>
-  <Icon href="https://discord.gg/ZxzM2bTeXU" src={discordLogo} alt="Discord logo"/>
+  <Icon small={true} href="https://discord.gg/ZxzM2bTeXU" src={discordLogo} alt="Discord logo"/>
+</div>
+<div class="home-icons">
+  <Icon href="https://git.trivernis.net/Trivernis" src={giteaLogo} alt="Gitea logo"/>
   <Icon href="https://social.funkyfish.cool/@trivernis" src={mastodonLogo} alt="Mastodon logo"/>
+  <Icon href="https://matrix.to/#/@trivernis:trivernis.net" src={matrixLogo} alt="Matrix logo"/>
 </div>
 
 <style lang="scss">

src/routes/icon.svelte

@@ -2,18 +2,26 @@
 export let src: string;
 export let alt: string;
 export let href: string;
+export let small = false;
 </script>
 
-<a {href}>
+<a {href} class="{small? 'small' : ''}">
     <img {src} {alt} />
 </a>
 
 <style lang="scss">
   a {
-    padding: 15px;
+    padding: 20px;
     img {
-      height: 50px;
+      height: 60px;
       width: auto;
     }
   }
+  a.small {
+    padding: 15px;
+
+    img {
+        height: 35px;
+    }
+  }
 </style>

src/routes/project.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	export let name: string;
+	export let href: string;
+	export let description: string;
+</script>
+
+<div class="project">
+	<div>
+		<a {href}><h2>{name}</h2></a>
+	</div>
+	<p>{description}</p>
+</div>
+
+<style lang="scss">
+	.project {
+		display: flex;
+		flex-direction: column;
+		margin-top: 1em;
+		width: 100%;
+		a {
+			display: inline;
+			color: white;
+			h2 {
+				display: inline;
+			}
+		}
+	}
+</style>

src/routes/server.ts

@@ -1,2 +1 @@
-export const csr = false;
 export const prerender = true;

static/.well-known/webfinger

@@ -0,0 +1,20 @@
+{
+    "subject":"acct:trivernis@social.funkyfish.cool",
+    "aliases":
+    [
+        "https://social.funkyfish.cool/@trivernis"
+    ],
+    "links":
+    [
+        {
+            "rel":"self",
+            "type":"application/activity+json",
+            "href":"https://social.funkyfish.cool/@trivernis"
+        },
+        {
+            "rel":"http://webfinger.net/rel/profile-page",
+            "type":"text/html",
+            "href":"https://social.funkyfish.cool/@trivernis"
+        }
+    ]
+}

svelte.config.js

@@ -1,5 +1,5 @@
-import adapter from '@sveltejs/adapter-static';
+import adapter from "@sveltejs/adapter-node";
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -8,8 +8,8 @@ const config = {
 	preprocess: vitePreprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
-	}
+	},
 };
 
 export default config;