From 18dbba03a6b12b96e49fa2035d696de633ac3e6f Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Mon, 8 Jul 2024 10:52:02 +0200
Subject: [PATCH] Revert parts of "[c+a] better accessibility + HomeButton
 component"

This reverts commit 7308de8728509d3849f3a596025fe9c82d3ec560.
Will revisit later.
---
 src/app.html                                  |  3 +-
 src/lib/components/About.svelte               | 36 +++++++++-
 src/lib/components/Home.svelte                |  3 +-
 src/lib/components/Modal.svelte               |  3 +-
 src/lib/components/Projects.svelte            | 60 +++++++++++++----
 src/lib/components/Socials.svelte             | 37 ++++++++++-
 src/lib/components/elements/HomeButton.svelte | 66 -------------------
 src/styles/socials.scss                       |  6 ++
 8 files changed, 123 insertions(+), 91 deletions(-)
 delete mode 100644 src/lib/components/elements/HomeButton.svelte

diff --git a/src/app.html b/src/app.html
index cbabff7..6784559 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,13 +6,12 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="title" content="Sangelo's Space" />
-		<meta name="description" content="Hello World! My name's Sangelo and I'm a guy who does stuff. That includes UI prototypes, scripts, and programs." />
 		<meta property="og:type" content="website" />
 		<meta property="og:url" content="https://sangelo.space/" />
 		<meta property="og:title" content="Sangelo's Space" />
 		<meta property="og:image" content="https://sangelo.space/assets/img/meta-banner.png" />
 		<meta name="theme-color" content="#00C4FB">
-		<meta property="og:description" content="Hello World! My name's Sangelo and I'm a guy who does stuff. That includes UI prototypes, scripts, and programs." />
+		<meta property="og:description" content="Hello World! I'm a guy who does stuff." />
 
 		<meta property="twitter:card" content="summary_large_image" />
 
diff --git a/src/lib/components/About.svelte b/src/lib/components/About.svelte
index ff5201b..8a819e9 100644
--- a/src/lib/components/About.svelte
+++ b/src/lib/components/About.svelte
@@ -1,10 +1,42 @@
 <script lang="ts">
-    import HomeButton from "./elements/HomeButton.svelte";
+    import { smoothScrollTo, handleKeydown } from '$lib/index';
 </script>
 
 <div id="about" class="section">
     <header>
-        <HomeButton page="about"/>
+        <svg
+            role="button"
+            class="logo"
+            width="145px"
+            height="145px"
+            viewBox="0 0 145 145"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            tabindex="0"
+            on:click={() => smoothScrollTo('home')}
+            on:keydown={handleKeydown}
+        >
+            <mask
+                id="mask0_1404_2"
+                style="mask-type: alpha"
+                maskUnits="userSpaceOnUse"
+                x="27"
+                y="0"
+                width="90"
+                height="145"
+            >
+                <path
+                    d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
+                    fill="#131313"
+                />
+            </mask>
+            <g mask="url(#mask0_1404_2)">
+                <rect width="144.6" height="36.15" fill="#00C4FB" />
+                <rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
+                <rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
+                <rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
+            </g>
+        </svg>
         <h1 class="no-select">About me</h1>
     </header>
     <content>
diff --git a/src/lib/components/Home.svelte b/src/lib/components/Home.svelte
index f39af8e..63aebb6 100644
--- a/src/lib/components/Home.svelte
+++ b/src/lib/components/Home.svelte
@@ -24,7 +24,7 @@
                     style="mask-type: alpha"
                     maskUnits="userSpaceOnUse"
                     x="27"
-                    y="0"
+                    y="0"t
                     width="90"
                     height="145"
                 >
@@ -51,7 +51,6 @@
             on:click={()=> smoothScrollTo('about')}
             on:keydown={handleKeydown}
             role="button"
-            aria-label="Scroll down for more"
             tabindex=0
         >
             <IconChevronDown size="1.6em" />
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index 50e08fb..91c1e33 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -50,10 +50,9 @@
 			out:fly={{ y: 200, duration: 300 }}
 		>
 			{#if contentComponent}
-                <button class="close-button" aria-label="Close Modal" on:click={closeModal}><IconCloseCircle size="1.25em"/></button>
+                <button class="close-button" on:click={closeModal}><IconCloseCircle size="1.25em"/></button>
 				<svelte:component this={contentComponent} />
 			{:else}
-				<button class="close-button" aria-label="Close Modal" on:click={closeModal}><IconCloseCircle size="1.25em"/></button>
 				<p class="error-msg"><span class="error-icon"><IconAlert size="1.5em"/></span><br>No content provided</p>
 			{/if}
 		</div>
diff --git a/src/lib/components/Projects.svelte b/src/lib/components/Projects.svelte
index fc2296e..66e5b5b 100644
--- a/src/lib/components/Projects.svelte
+++ b/src/lib/components/Projects.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 
-	import HomeButton from './elements/HomeButton.svelte';
+	import { smoothScrollTo, handleKeydown } from '$lib/index';
 	
 	// Modal
 	import Modal from '$lib/components/Modal.svelte';
@@ -29,29 +29,61 @@
 
 <div id="projects" class="section">
 	<header>
-		<HomeButton page="projects"/>
+		<svg
+			role="button"
+			class="logo"
+			width="145px"
+			height="145px"
+			viewBox="0 0 145 145"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			tabindex="0"
+			on:click={() => smoothScrollTo('home')}
+			on:keydown={handleKeydown}
+		>
+			<mask
+				id="mask0_1404_2"
+				style="mask-type: alpha"
+				maskUnits="userSpaceOnUse"
+				x="27"
+				y="0"
+				width="90"
+				height="145"
+			>
+				<path
+					d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
+					fill="#131313"
+				/>
+			</mask>
+			<g mask="url(#mask0_1404_2)">
+				<rect width="144.6" height="36.15" fill="#00C4FB" />
+				<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
+				<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
+				<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
+			</g>
+		</svg>
 		<h1 class="no-select">Projects</h1>
 	</header>
 	<content>
 		<div class="container">
 			<div class="grid">
 				<div class="one">
-					<button class="button inactive" aria-label="Inactive Button" />
-					<button class="button inactive" aria-label="Inactive Button" />
-					<button class="button sangelo" aria-label="Sangelo's Space" on:click={() => openModalWith(SangeloSpaceModal)} />
-					<button class="button lunivity" aria-label="Lunivity" on:click={() => openModalWith(LunivityModal)} />
+					<button class="button inactive" />
+					<button class="button inactive" />
+					<button class="button sangelo" on:click={() => openModalWith(SangeloSpaceModal)} />
+					<button class="button lunivity" on:click={() => openModalWith(LunivityModal)} />
 				</div>
 				<div class="two">
-					<button class="button gitpot" aria-label="Gitpot" on:click={() => openModalWith(GitpotModal)} />
-					<button class="button dashinit" aria-label="Dashinit" on:click={() => openModalWith(DashinitModal)} />
-					<button class="button explorecraft" aria-label="ExploreCraft" on:click={() => openModalWith(ExploreCraftModal)} />
-					<button class="button utility" aria-label="UtilityClient" on:click={() => openModalWith(UtilityClientModal)} />
+					<button class="button gitpot" on:click={() => openModalWith(GitpotModal)} />
+					<button class="button dashinit" on:click={() => openModalWith(DashinitModal)} />
+					<button class="button explorecraft" on:click={() => openModalWith(ExploreCraftModal)} />
+					<button class="button utility" on:click={() => openModalWith(UtilityClientModal)} />
 				</div>
 				<div class="thr">
-					<button class="button inactive" aria-label="Inactive Button" />
-					<button class="button sangefault" aria-label="SangeFault" on:click={() => openModalWith(SangeFaultModal)} />
-					<button class="button next" aria-label="More Projects..." on:click={() => openModalWith(MoreProjectsModal)} />
-					<button class="button inactive" aria-label="Inactive Button" />
+					<button class="button inactive" />
+					<button class="button sangefault" on:click={() => openModalWith(SangeFaultModal)} />
+					<button class="button next" on:click={() => openModalWith(MoreProjectsModal)} />
+					<button class="button inactive" />
 				</div>
 			</div>
 			<div class="tip">
diff --git a/src/lib/components/Socials.svelte b/src/lib/components/Socials.svelte
index 59ae800..deb79f2 100644
--- a/src/lib/components/Socials.svelte
+++ b/src/lib/components/Socials.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
     import { onMount } from 'svelte';
 	import { slide } from 'svelte/transition';
-	import { openWebsite } from '$lib/index';
+	import { smoothScrollTo, handleKeydown, openWebsite } from '$lib/index';
 	import { emojis } from '$lib/emojis';
-	import HomeButton from './elements/HomeButton.svelte';
 
 	// Icons
 	import IconDiscord from 'svelte-material-icons/Discord.svelte';
@@ -246,7 +245,39 @@
 		</div>
 	</content>
 	<footer>
-        <HomeButton page="socials"/>
+		<svg
+			role="button"
+			class="logo"
+			width="145px"
+			height="145px"
+			viewBox="0 0 145 145"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			tabindex="0"
+			on:click={() => smoothScrollTo('home')}
+			on:keydown={handleKeydown}
+		>
+			<mask
+				id="mask0_1404_2"
+				style="mask-type: alpha"
+				maskUnits="userSpaceOnUse"
+				x="27"
+				y="0"
+				width="90"
+				height="145"
+			>
+				<path
+					d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
+					fill="#131313"
+				/>
+			</mask>
+			<g mask="url(#mask0_1404_2)">
+				<rect width="144.6" height="36.15" fill="#00C4FB" />
+				<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
+				<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
+				<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
+			</g>
+		</svg>
 		<p class="no-select footer footer-credits">&copy; Sangelo 2023-2024, All rights reserved.</p>
 		<p class="no-select footer footer-text">
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/src/lib/components/elements/HomeButton.svelte b/src/lib/components/elements/HomeButton.svelte
deleted file mode 100644
index eeb502c..0000000
--- a/src/lib/components/elements/HomeButton.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts">
-    import { smoothScrollTo, handleKeydown } from '$lib/index';
-    export let page: string;
-</script>
-
-<svg
-	role="button"
-	class="logo"
-	width="145px"
-	height="145px"
-	viewBox="0 0 145 145"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
-	tabindex="0"
-	on:click={() => smoothScrollTo('home')}
-	on:keydown={handleKeydown}
->
-	<mask
-		id="mask0_1404_2"
-		style="mask-type: alpha"
-		maskUnits="userSpaceOnUse"
-		x="27"
-		y="0"
-		width="90"
-		height="145"
-	>
-		<path
-			d="M46.7029 141.913C42.9858 137.94 41.035 133.479 41.035 128.952C41.035 123.914 39.9988 121.93 34.0581 115.588C28.1576 109.29 27.0886 106.668 28.273 101.396C29.947 93.9459 32.7227 91.6033 55.6196 78.3162C61.4926 74.908 66.5691 71.4125 66.9008 70.5483C67.6262 68.658 64.9196 64.838 61.5525 63C60.2091 62.2666 54.8908 59.7224 49.7341 57.3461C39.1468 52.4674 32.7016 47.2533 31.3911 42.5068C30.1104 37.8687 31.7499 30.4195 34.7377 27.3009C37.9507 23.9472 54.3659 14.1964 67.4147 7.89039C85.1571 -0.683936 95.0145 -1.86142 100.781 3.90474C104.255 7.37954 104.579 13.2727 101.562 18.1536C98.9972 22.3035 91.6993 28.4086 84.3922 32.5169C81.2408 34.2887 78.5255 36.4495 78.3581 37.3187C77.951 39.4328 82.2355 42.5665 97.3121 51.1814C111.526 59.3033 115.249 62.9778 115.998 69.6225C116.587 74.8466 114.675 79.0223 110.161 82.372C108.414 83.6682 99.8315 88.381 91.0892 92.8447C68.9024 104.173 64.9926 108.482 63.8666 122.844C62.919 134.93 57.5476 144.6 51.7823 144.6C50.2443 144.6 48.2099 143.524 46.7029 141.913Z"
-			fill="#131313"
-		/>
-	</mask>
-	<g mask="url(#mask0_1404_2)">
-		<rect width="144.6" height="36.15" fill="#00C4FB" />
-		<rect y="36.15" width="144.6" height="36.15" fill="#00B1FA" />
-		<rect y="72.3" width="144.6" height="36.15" fill="#0091FB" />
-		<rect y="108.45" width="144.6" height="36.15" fill="#0075F7" />
-	</g>
-</svg>
-
-{#if page === 'about'}
-<style lang="scss">
-    @import '$styles/about.scss';
-</style>
-{/if}
-
-{#if page === 'projects'}
-<style lang="scss">
-    @import '$styles/projects.scss';
-</style>
-{/if}
-
-{#if page === 'socials'}
-<style lang="scss">
-	// didn't import file directly, because it was creating weird shadows
-	// for the social icons above, and I don't know why :p
-
-    // @import '$styles/socials.scss';
-	footer {
-		svg.logo {
-			height: 3em;
-			width: 3em;
-			cursor: pointer;
-		}
-	}
-</style>
-{/if}
diff --git a/src/styles/socials.scss b/src/styles/socials.scss
index e536488..07c6c0a 100644
--- a/src/styles/socials.scss
+++ b/src/styles/socials.scss
@@ -164,6 +164,12 @@
 	footer {
 		margin: 2em;
 
+		svg.logo {
+			height: 3em;
+			width: 3em;
+			cursor: pointer;
+		}
+
 		.footer {
 			font-size: 18px;
 		}