added about

frontend/package.json

@@ -16,6 +16,7 @@
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/adapter-node": "1.0.0-next.86",
 		"@sveltejs/kit": "next",
+		"@types/md5": "^2.3.2",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"autoprefixer": "^10.4.7",
@@ -34,5 +35,8 @@
 		"vite": "^3.0.0",
 		"vite-imagetools": "^4.0.4"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"md5": "^2.3.0"
+	}
 }

frontend/pnpm-lock.yaml

@@ -4,12 +4,14 @@ specifiers:
   '@sveltejs/adapter-auto': next
   '@sveltejs/adapter-node': 1.0.0-next.86
   '@sveltejs/kit': next
+  '@types/md5': ^2.3.2
   '@typescript-eslint/eslint-plugin': ^5.27.0
   '@typescript-eslint/parser': ^5.27.0
   autoprefixer: ^10.4.7
   eslint: ^8.16.0
   eslint-config-prettier: ^8.3.0
   eslint-plugin-svelte3: ^4.0.0
+  md5: ^2.3.0
   postcss: ^8.4.14
   prettier: ^2.6.2
   prettier-plugin-svelte: ^2.7.0
@@ -22,10 +24,14 @@ specifiers:
   vite: ^3.0.0
   vite-imagetools: ^4.0.4
 
+dependencies:
+  md5: 2.3.0
+
 devDependencies:
   '@sveltejs/adapter-auto': 1.0.0-next.64
   '@sveltejs/adapter-node': 1.0.0-next.86
   '@sveltejs/kit': 1.0.0-next.405_svelte@3.49.0+vite@3.0.2
+  '@types/md5': 2.3.2
   '@typescript-eslint/eslint-plugin': 5.30.7_6wltbjakwuqm7awqswigmiuhd4
   '@typescript-eslint/parser': 5.30.7_he2ccbldppg44uulnyq4rwocfa
   autoprefixer: 10.4.7_postcss@8.4.14
@@ -238,6 +244,10 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
+  /@types/md5/2.3.2:
+    resolution: {integrity: sha512-v+JFDu96+UYJ3/UWzB0mEglIS//MZXgRaJ4ubUPwOM0gvLc/kcQ3TWNYwENEK7/EcXGQVrW8h/XqednSjBd/Og==}
+    dev: true
+
   /@types/node/18.0.6:
     resolution: {integrity: sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==}
     dev: true
@@ -603,6 +613,10 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /charenc/0.0.2:
+    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
+    dev: false
+
   /chokidar/3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -675,6 +689,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypt/0.0.2:
+    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
+    dev: false
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1400,6 +1418,10 @@ packages:
       binary-extensions: 2.2.0
     dev: true
 
+  /is-buffer/1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+    dev: false
+
   /is-core-module/2.9.0:
     resolution: {integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==}
     dependencies:
@@ -1496,6 +1518,14 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /md5/2.3.0:
+    resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
+    dependencies:
+      charenc: 0.0.2
+      crypt: 0.0.2
+      is-buffer: 1.1.6
+    dev: false
+
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}

frontend/src/lib/components/Link.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let url: string;
+</script>
+
+<a href={url} class="w-12 h-12 link m-4 rounded-xl shrink-0" target="_blank" />

frontend/src/lib/components/Member.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import md5 from 'md5';
+	import Link from './Link.svelte';
+
+	export let name: string;
+	export let email: string;
+	export let description: string;
+	export let url: string;
+	const image = `http://www.gravatar.com/avatar/${md5(email)}`;
+</script>
+
+<div class="flex flex-row gap-4 items-center rounded-xl bg-gray-800 p-4">
+	<img class="rounded-2xl w-16 h-16" src={image} alt="" />
+	<div class="grow flex flex-col">
+		<p class="text-white font-title text-xl">{name}</p>
+		<p class="text-gray-300 font-sans text-xl break-words">{description}</p>
+	</div>
+	<Link {url} />
+</div>

frontend/src/lib/components/Project.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+import Link from "./Link.svelte";
+
 	export let name: string;
 	export let description: string;
 	export let link: string;
@@ -13,5 +15,5 @@
 			<p class="text-gray-500 font-sans text-xl break-words">{partDescription}</p>
 		{/each}
 	</div>
-	<a href={link} class="w-12 h-12 link m-4 rounded-xl shrink-0" target="_blank" />
+	<Link url={link} />
 </article>

frontend/src/lib/components/Text.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let title: string;
+</script>
+
+<article
+	class="w-full flex flex-row p-4 items-center justify-between border-t-2 border-white border-opacity-10 gap-2 -mt-8"
+>
+	<div class="grow flex flex-col gap-2 px-4 -mb-2">
+		<h1 class="text-white font-sans text-2xl mt-1">{title}</h1>
+		<slot />
+	</div>
+</article>

frontend/src/lib/components/Transition.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	export let url: URL;
+</script>
+
+{#key url}
+	<div class="grow flex flex-col gap-12" in:fade={{ duration: 250, delay: 300 }}>
+		<slot />
+	</div>
+{/key}

frontend/src/routes/__error.svelte

@@ -11,5 +11,5 @@
 	<title>{status}</title>
 </svelte:head>
 
-<h1 class="text-white font-title error">{status}</h1>
-<a class="text-white text-opacity-50 underline font-sans" href="/">Back to main page</a>
+<h1 class="text-white font-title error text-center">{status}</h1>
+<a class="text-white text-opacity-50 underline font-sans text-center" href="/">Back to main page</a>

frontend/src/routes/__layout.svelte

@@ -1,10 +1,14 @@
 <script>
 	import '../app.css';
+	import { page } from '$app/stores';
+	import Transition from '$lib/components/Transition.svelte';
 </script>
 
 <main
 	class="w-full md:w-8/12 lg:w-6/12 md:rounded-4xl md:min-h-0 min-h-full flex flex-col pb-8 gap-12"
 >
 	<img class="h-38 w-full md:rounded-t-4xl" src="anime1.png" alt="anime girl 1" />
-	<slot />
+	<Transition url={$page.url}>
+		<slot />
+	</Transition>
 </main>

frontend/src/routes/about.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Member from '$lib/components/Member.svelte';
+	import Text from '$lib/components/Text.svelte';
+</script>
+
+<h1 class="text-3xl font-title text-white font-normal text-left ml-8 -mt-6 mb-2" id="title">
+	About us
+</h1>
+
+<Text title="Who we are?">
+	<p class="text-gray-500 font-sans text-xl break-words">
+		We are tech cuties from Ukraine, who loves Open Source Software and hating russians
+	</p>
+</Text>
+
+<Text title="Our languages">
+	<p class="text-gray-500 font-sans text-xl break-words">Our languages are Ukrainian and English</p>
+</Text>
+
+<Text title="Our members">
+	<Member
+		name="Qugalet"
+		email="qugalet@m0e.space"
+		description="Server owner and system administrator"
+		url="https://qugalet.pp.ua"
+	/>
+	<Member
+		name="evolji"
+		email="evoljixgod@gmail.com"
+		description="Designer"
+		url="https://t.me/evolj1"
+	/></Text
+>

frontend/src/routes/index.svelte

@@ -13,5 +13,10 @@
 		class="text-white text-opacity-50 underline font-['Jeko-MediumItalic'] text-xl md:text-lg"
 		>design: evolji</a
 	>
+	<a
+		href="/about"
+		class="text-white text-opacity-50 underline font-['Jeko-MediumItalic'] text-xl md:text-lg"
+		>about us</a
+	>
 	<!-- <div class="flex flex-row gap-4"></div> -->
 </div>