show link preview for contact

HannesGitH · Jan 26, 2024 · 8d45c7c · 8d45c7c
1 parent 72de214
commit 8d45c7c
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 6 deletions.
diff --git a/src/lib/components/projects/project.svelte b/src/lib/components/projects/project.svelte
@@ -156,7 +156,7 @@
         color: $on-surface;
         width: 32rem;
         transform-style: preserve-3d;
-        transition: transform 0.3s ease-in-out;
+        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);;
         transform: perspective(800px) translateZ(0) rotateX(var(--hover3d-xAngle)) rotateY(var(--hover3d-yAngle));
 
 		&:hover {

diff --git a/src/lib/sections/contact.svelte b/src/lib/sections/contact.svelte
@@ -4,15 +4,41 @@
 	import { _ } from 'svelte-i18n';
 	import contacts from '$lib/data/contacts';
 	import Contact from '$lib/components/contact.svelte';
+	import { slide } from 'svelte/transition';
+
+
+	let activeContactIdx = -1;
+	$: active = activeContactIdx >= 0;
+	$: activeContact = !active ? null : contacts[activeContactIdx];
+
+	function handleHover(idx: number) {
+		activeContactIdx = idx;
+	}
+
 </script>
 
 <div id="content" use:scrollRef={refs.contact}>
 	<h1 class="header" id="header">{$_('contact.title')}</h1>
 	<!-- <p id="more_channels">More channels coming soon..</p> -->
-	<div id="contacts">
-		{#each contacts as contact}
-			<Contact {contact} />
-		{/each}
+	<div class="row">
+		<div id="contacts">
+			{#each contacts as contact, idx}
+				<div 
+				id="contact-wrapper"
+					on:mouseenter={() => handleHover(idx)}
+					on:mouseleave={() => handleHover(-1)}
+				>
+					<Contact {contact} />
+				</div>
+			{/each}
+		</div>
+		<div id="link-preview" class:active>
+			{#if active}
+				<a transition:slide href={activeContact?.link}> 
+					<!-- <i class={activeContact?.iconClass}></i> -->{activeContact?.link}<i class="fa-solid fa fa-arrow-up-right-from-square"></i>
+				</a>
+			{/if}
+		</div>
 	</div>
 	<h2 class="header"  id="impressum_header">{$_('impress.title')}</h2>
 	<div id="impressum_body">
@@ -39,13 +65,41 @@
 			color: aliceblue;
 		}
 	}
+
+	#link-preview {
+		position: relative;
+		z-index: -1;
+		pointer-events: none;
+		padding: $std-margin;
+		margin: auto calc(2 * $std-margin);
+		background: $surface;
+		transition: all 0.3s ease-in-out;
+		border-radius: calc(3 * $std-margin);
+		opacity: 0;
+		transform: translateX(-20rem);
+		&.active {
+			opacity: 1;
+			pointer-events: all;
+			transform: translateX(0);
+			// z-index: 1;
+		}
+		& a {
+			color: aliceblue;
+			// padding: $std-margin;
+			& i {
+				margin: 0 $std-margin;
+			}
+		}
+	}
 	
-	#contacts {
+	#contacts , .row{
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
 		justify-content: stretch;
 		justify-self: stretch;
+		position: relative;
+		z-index: 0;
 	}
 
 	.header {