[c] progress

package.json

@@ -13,6 +13,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",

src/app.scss

@@ -9,8 +9,8 @@ html,
 body,
 main {
 	font-family: $font-family;
-	width: 100%;
+	// width: 100%;
-	height: 100%;
+	// height: 100%;
 	margin: 0;
 	color: $white;
 	background-color: $space-black;

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#key data.pathname}
-	<main in:fly={{ x: 10, duration: 250, delay: 250 }} out:fly={{ x: -5, duration: 250 }}>
+	<main in:fly={{ x: -10, duration: 250, delay: 250 }} out:fly={{ x: 5, duration: 250 }}>
 		<slot />
 	</main>
 {/key}

src/routes/+layout.ts

@@ -5,3 +5,4 @@ export const load = ({ url }) => {
 		pathname
 	};
 };
+export const prerender = true

src/routes/About.svelte

@@ -66,7 +66,7 @@
     </header>
     <content>
         <div class="about-text">
-            <h2>Hi! It's me, Sangelo.</h2>
+            <h2>Hi! It's me, <span class="sangelo">Sangelo</span>.</h2>
             <p>
                 I'm a guy who does stuff.<br />
                 <br />

src/routes/Home.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
     import { goto } from '$app/navigation';
 
+    import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
+
     function smoothScrollTo(elementId: string) {
 		const element = document.getElementById(elementId);
 		if (element) {
@@ -65,6 +67,15 @@
             <span class="word-sangelo-color">Sangelo</span><br />and I
             <span class="word-create-color">create</span> things.
         </h1>
+        <div
+            class="chevron"
+            on:click={()=> smoothScrollTo('about')}
+            on:keydown={handleKeydown}
+            role="button"
+            tabindex=0
+        >
+            <IconChevronDown size="1.6em" />
+        </div>
     </header>
 </div>
 

src/routes/Socials.svelte

@@ -41,7 +41,8 @@
 		'in 🏫',
 		'at 🏠',
 		'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
-		'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>'
+		'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>',
+		'with <img src="/assets/emojis/svelte.png" alt="Svelte" style="height: 18px;" />'
 	];
 
 	let emoji = '';
@@ -89,6 +90,7 @@
 <div id="socials" class="section">
 	<content>
 		<div class="button-container">
+			<div class="tooltip">
 				<a
 					href="https://discord.com/users/373525255102136341"
 					target="_blank"
@@ -98,6 +100,9 @@
 				>
 					<IconDiscord class="icon" size="2.5em" />
 				</a>
+				<span class="tooltiptext">@sangelo</span>
+			</div>
+			<div class="tooltip">
 				<a
 					href="https://youtube.com/@Sangeloo"
 					target="_blank"
@@ -107,6 +112,9 @@
 				>
 					<IconYouTube class="icon" size="3em" />
 				</a>
+				<span class="tooltiptext">@Sangeloo</span>
+			</div>
+			<div class="tooltip">
 				<a
 					href="https://github.com/SangeloDev"
 					target="_blank"
@@ -116,6 +124,9 @@
 				>
 					<IconGitHub class="icon" size="3em" />
 				</a>
+				<span class="tooltiptext">/SangeloDev</span>
+			</div>
+			<div class="tooltip">
 				<a
 					href="mailto:contact@sangelo.space"
 					target="_blank"
@@ -125,11 +136,13 @@
 				>
 					<IconEmailFast class="icon" size="3em" />
 				</a>
+				<span class="tooltiptext">contact@sangelo.space</span>
+			</div>
 		</div>
 		<div class="button-container below">
 			{#if showMore}
 				<div class="button-container below" transition:slide>
-					<!-- <div > -->
+					<div class="tooltip">
 						<a href="#top" class="round-button button inactive" aria-label="Inactive" />
 						<a
 							href="https://matrix.to/#/@sangelo:matrix.org"
@@ -140,6 +153,9 @@
 						>
 							<IconMatrix class="icon" size="2.5em" />
 						</a>
+						<span class="tooltiptext">@sangelo:matrix.org</span>
+					</div>
+					<div class="tooltip">
 						<a
 							href="https://gitpot.dev/Sangelo"
 							target="_blank"
@@ -208,17 +224,26 @@
 								</defs>
 							</svg>
 						</a>
+						<span class="tooltiptext">/sangelo</span>
+					</div>
 					<a href="#top" class="round-button button inactive" aria-label="Inactive" />
 				</div>
 			{/if}
 		</div>
-		<a class="toggle-more" href="#socials" on:click={toggleShowMore} role="button" class:active={showMore}>
+		<div
+			class="toggle-more"
+			on:click={toggleShowMore}
+			on:keydown={handleKeydown}
+			role="button"
+			class:active={showMore}
+			tabindex=0
+		>
 			{#if showMore}
 				Less <IconChevronUp />
 			{:else}
 				More <IconChevronDown />
 			{/if}
-		</a>
+		</div>
 	</content>
 	<footer>
 		<svg

src/styles/about.scss

@@ -8,10 +8,10 @@
 	align-items: flex-start;
 	text-align: left;
 	flex-direction: column;
-    background-image: url("/assets/img/banner-bg.svg");
+    // background-image: url("/assets/img/banner-bg.svg");
-    background-repeat: no-repeat;
+    // background-repeat: no-repeat;
-    background-size: fill;
+    // background-size: fill;
-    background-position: center, center, 50%, 50%;
+    // background-position: center, center, 50%, 50%;
 }
 
 #about {

src/styles/home.scss

@@ -47,5 +47,72 @@
 		color: $capri;
 	}
 
-	@import "./mobile/home.scss";
+	.chevron {
+		opacity: 0;
+		cursor: pointer;
+		animation: jump 1.5s ease-in-out 0s infinite normal, fadeInFadeOut 33s ease-in-out 0s infinite normal;
+	}
+
+	@keyframes jump {
+		0% {
+			transform: translateY(0);
+		}
+		20% {
+			transform: translateY(0);
+		}
+		40% {
+			transform: translateY(-10px);
+		}
+		50% {
+			transform: translateY(0);
+		}
+		60% {
+			transform: translateY(-5px);
+		}
+		80% {
+			transform: translateY(0);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@-webkit-keyframes jump {
+		0% {
+			-webkit-transform: translateY(0);
+			transform: translateY(0);
+		}
+		20% {
+			-webkit-transform: translateY(0);
+			transform: translateY(0);
+		}
+		40% {
+			-webkit-transform: translateY(-10px);
+			transform: translateY(-10px);
+		}
+		50% {
+			-webkit-transform: translateY(0);
+			transform: translateY(0);
+		}
+		60% {
+			-webkit-transform: translateY(-5px);
+			transform: translateY(-5px);
+		}
+		80% {
+			-webkit-transform: translateY(0);
+			transform: translateY(0);
+		}
+		100% {
+			-webkit-transform: translateY(0);
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes fadeInFadeOut {
+		0%, 8% { opacity: 0; }
+		9%, 91% { opacity: 1; }
+		92%, 100% { opacity: 0; }
+	}
+
+	@import './mobile/home.scss';
 }

src/styles/index.scss

@@ -1,6 +1,7 @@
 /* layout */
 .container {
 	height: 100vh;
+	width: auto;
 	scroll-snap-type: y mandatory;
 	overflow-y: scroll;
 }

src/styles/socials.scss

@@ -8,7 +8,6 @@
 	align-items: center;
 	text-align: center;
 	flex-direction: column;
-
 }
 
 /* content */
@@ -110,6 +109,47 @@
 		.round-button:active {
 			opacity: 0.8;
 		}
+
+		// Tooltips
+		.tooltip {
+			position: relative;
+			display: inline-block;
+		}
+
+		.tooltip .tooltiptext {
+			visibility: hidden;
+			background-color: $space-gray-tooltip;
+			color: $white;
+			text-align: center;
+			border-radius: 6px;
+			padding: 5px 10px;
+			position: absolute;
+			z-index: 1000;
+			top: 116%;
+			left: 50%;
+			transform: translateX(-50%);
+			opacity: 0;
+			transition: opacity ease-in-out 0.1s;
+		}
+
+		.tooltiptext {
+			z-index: 1001;
+			user-select: none;
+			cursor: default;
+		}
+
+		.tooltip:hover .tooltiptext {
+			visibility: visible;
+			opacity: 1;
+			backdrop-filter: blur(6px);
+			-webkit-backdrop-filter: blur(6px);
+		}
+
+		.tooltiptext:hover {
+			visibility: hidden;
+			opacity: 0;
+		}
+
 	}
 
 	footer {
@@ -131,6 +171,5 @@
 		}
 	}
 
-	@import "./mobile/socials.scss";
+	@import './mobile/socials.scss';
 }
-

src/variables.scss

@@ -12,6 +12,8 @@ $space-gray: #3e4053;
 $star-gray: #878894;
 $white: #ffffff;
 
+// Tooltip Alpha
+$space-gray-tooltip: #3e4053b2;
 
 // Font Family
 $font-family: 'Manrope', sans-serif;

svelte.config.js

@@ -1,6 +1,7 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -11,7 +12,15 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter({
+			// default options are shown. On some platforms
+			// these options are set automatically — see below
+			pages: 'build',
+			assets: 'build',
+			fallback: undefined,
+			precompress: false,
+			strict: true
+		})
 	}
 };
 

yarn.lock

@@ -246,6 +246,11 @@
   dependencies:
     import-meta-resolve "^4.0.0"
 
+"@sveltejs/adapter-static@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-2.0.3.tgz#616836c30bdce4d673a2e26c0f5ffbd5c1bc7c67"
+  integrity sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==
+
 "@sveltejs/kit@^1.20.4":
   version "1.27.3"
   resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.27.3.tgz#2e7067fd781d26c194e0da536cf643cbae9b79a2"