Logo + personal git social restored

src/lib/components/atoms/Logo.svelte

@@ -1,8 +1,10 @@
 <script>
+	import Crest from './Crest.svelte';
 	export let animated = true;
 </script>
 
 <div class="logo" class:animated>
+	<Crest x="62" y="62" />
 	<svg
 		id="logo-text"
 		width="723.84009"
@@ -13,7 +15,8 @@
 	>
 		<text xml:space="preserve" id="text" transform="translate(-278.77228,-206.83728)"
 			><tspan x="275.57227" y="292.17088" id="tspan1319"
-				><tspan style="font-size:106.667px;font-family:monospace;" id="tspan1317">Alaskar.dev</tspan
+				><tspan style="font-size:106.667px;font-family:'Font-Awesome-brands';" id="tspan1317"
+					>Alaskar.dev</tspan
 				></tspan
 			></text
 		>
@@ -28,11 +31,11 @@
 		height: 100%;
 
 		display: flex;
-		gap: 16px;
+		gap: 8px;
 		align-items: center;
 
 		@include for-phone-only {
-			gap: 8px;
+			gap: 4px;
 		}
 
 		#logo-text {
@@ -55,20 +58,10 @@
 
 	@media screen and (prefers-reduced-motion: no-preference) {
 		.animated {
-			#icon {
+			:global(svg path) {
-				> path {
+				fill: transparent;
-					--text-color: var(--color--text-shade);
+				stroke: var(--color--text);
-					stroke-width: 2;
+				animation: svg-crest-stroke 3s ease forwards;
-					animation: svg-text-stroke 3s;
-				}
-
-				#darker {
-					> path {
-						--text-color: var(--color--text);
-						stroke-width: 2;
-						animation: svg-text-stroke 3s;
-					}
-				}
 			}
 
 			#text {

src/lib/components/molecules/Socials.svelte

@@ -1,6 +1,7 @@
 <script>
 	import TelegramIcon from '$lib/icons/socials/telegram.svelte';
 	import GitHubIcon from '$lib/icons/socials/github.svelte';
+	import ForgejoIcon from '$lib/icons/socials/forgejo.svelte';
 	import LinkedInIcon from '$lib/icons/socials/linkedin.svelte';
 	import EmailIcon from '$lib/icons/socials/email.svelte';
 	import RssIcon from '$lib/icons/rss.svelte';
@@ -16,6 +17,14 @@
 	>
 		<GitHubIcon />
 	</a>
+	<a
+		href="https://git.askar.tv/nomad"
+		target="_blank"
+		rel="noopener noreferrer"
+		title="See my Forgejo profile"
+	>
+		<ForgejoIcon />
+	</a>
 	<a
 		href="https://www.linkedin.com/in/sager-alaskar-b8b6bb33b/"
 		target="_blank"

src/lib/icons/socials/forgejo.svelte

@@ -0,0 +1,15 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 200 200"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g transform="translate(6,6)" stroke="currentColor" stroke-width="12">
+		<path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" />
+		<path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" />
+		<circle cx="142" cy="20" r="18" />
+		<circle cx="142" cy="88" r="18" />
+		<circle cx="58" cy="180" r="18" />
+	</g>
+</svg>

src/lib/scss/_animations.scss

@@ -6,15 +6,18 @@
 		stroke-dasharray: 0 50%;
 		stroke-width: 2;
 	}
+
 	70% {
 		fill: transparent;
 		stroke: var(--text-color);
 	}
+
 	80% {
 		fill: transparent;
 		stroke: var(--text-color);
 		stroke-width: 3;
 	}
+
 	100% {
 		fill: var(--text-color);
 		stroke: transparent;
@@ -28,7 +31,50 @@
 	from {
 		transform: rotate(0turn);
 	}
+
 	to {
 		transform: rotate(1turn);
 	}
 }
+
+@keyframes svg-crest-stroke {
+	0% {
+		fill: transparent;
+		stroke: var(--color--text);
+		stroke-dashoffset: 25%;
+		stroke-dasharray: 0 50%;
+		stroke-width: 0;
+	}
+
+	60% {
+		fill: transparent;
+		stroke: var(--color--text);
+		stroke-width: 4;
+	}
+
+	70% {
+		fill: transparent;
+		stroke: var(--color--text);
+		stroke-width: 5;
+	}
+
+	80% {
+		fill: transparent;
+		stroke: var(--color--text);
+		stroke-width: 6;
+	}
+
+	90% {
+		fill: transparent;
+		stroke: var(--color--text);
+		stroke-width: 7;
+	}
+
+	100% {
+		fill: transparent;
+		stroke: var(--color--text);
+		stroke-dashoffset: -25%;
+		stroke-dasharray: 50% 0;
+		stroke-width: 7;
+	}
+}

src/lib/scss/global.scss

@@ -10,6 +10,8 @@
 @import '$lib/scss/_code-highlights.scss';
 @import '$lib/scss/animations.scss';
 
+@import '../../../static/fonts/fontawesome.css';
+
 @import '@fontsource/inter';
 @import '@fontsource/inter/600.css';
 @import '@fontsource/inter/700.css';

static/fonts/fontawesome.css

@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'Font-Awesome';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/fa-brands-400.woff2') format('woff2'),
+    url('/fonts/fa-brands-400.ttf') format('truetype');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Font-Awesome-brands';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/Font Awesome 6 Brands-Regular-400.otf') format('opentype');
+  font-display: swap;
+}