Fully working links. in terms of frontend.

frontend/src/lib/components/link.svelte

@@ -1,11 +1,72 @@
 <script>
 	import '$lib/css/base.css';
 	import '$lib/css/link.css';
+	import { hexTorgb, darkenHexTorgb } from '$lib/js/color.js';
+
 	import SvgIcon from '$lib/components/svg-icon-custom.svelte';
 	import { mdiChevronRight } from '@mdi/js';
+	import anime from 'animejs';
+
+	let color = '9A031E';
+	const color_rgb = hexTorgb(color);
+	const color_darken = darkenHexTorgb(color, 0.8);
+	let imgBase = 'placeholder_link.png';
+	let imgHover = 'placeholder_link_hover.png';
+	let base;
+	let hover;
+
+	let span_link;
+	let svg_icon;
+	let div_background;
+	let span_width = '0%';
+
+	async function enter() {
+		span_width = '100%';
+		span_link.style.color = 'var(--color-background)';
+		svg_icon.svgElement.style.color = 'var(--color-background)';
+		svg_icon.svgElement.style.transform = 'translateX(8px)';
+		updatePicture(false, base);
+		updatePicture(true, hover);
+		updatePicture(true, div_background);
+	}
+
+	async function leave() {
+		span_width = '0%';
+		span_link.style.color = 'var(--color-text)';
+		svg_icon.svgElement.style.color = 'var(--color-text)';
+		svg_icon.svgElement.style.transform = '';
+		updatePicture(true, base);
+		updatePicture(false, hover);
+		updatePicture(false, div_background);
+	}
+
+	function updatePicture(show, img) {
+		const targetOpacity = show ? 1 : 0;
+
+		anime({
+			targets: img,
+			opacity: [1 - targetOpacity, targetOpacity],
+			duration: 400,
+			easing: 'easeInOutQuad'
+		});
+	}
 </script>
 
-<div class="link-container flex-row center">
+<div
-	<span>Link</span>
+	style="--shadow: rgba({color_rgb.r}, {color_rgb.g}, {color_rgb.b}, 0.4) 0px 30px 60px -12px, rgba({color_darken.r}, {color_darken.g}, {color_darken.b}, 0.3) 0px 18px 36px -18px; --gradient: linear-gradient(180deg, #{color} 0%, rgba({color_darken.r},{color_darken.g}, {color_darken.b}, 1) 100%); --span-width: {span_width};"
-	<SvgIcon type="mdi" path={mdiChevronRight} size={80}></SvgIcon>
+	class="link-container"
+	on:mouseenter={enter}
+	on:mouseleave={leave}
+	role="button"
+	tabindex="0"
+>
+	<div class="link-background" bind:this={div_background} />
+	<div class="link-content flex-row center">
+		<div class="link-img">
+			<img bind:this={base} alt="base" src={imgBase} />
+			<img bind:this={hover} alt="hover" class="link-img-hover" src={imgHover} />
+		</div>
+		<span bind:this={span_link}>Link</span>
+		<SvgIcon type="mdi" path={mdiChevronRight} size={80} bind:this={svg_icon}></SvgIcon>
+	</div>
 </div>

frontend/src/lib/css/base.css

@@ -64,6 +64,7 @@ h2 {
     --2-rem: clamp(1.4rem, -0.834rem + 4.0851vw, 2rem);
 
     --navbar-height: 6rem;
+    --transition: all .4s ease 0s;
 }
 
 .base {

frontend/src/lib/css/footer/page.css

@@ -2,7 +2,7 @@
     text-decoration: none;
     position: relative;
     font-size: var(--1-2-rem);
-    transition: all .3s ease 0s;
+    transition: var(--transition);
 }
 
 .page-icon-text h1 {
@@ -20,7 +20,7 @@
     height: 0.2rem;
     background-color: var(--palette-pink);
     width: 0%;
-    transition: all .3s ease 0s;
+    transition: var(--transition);
 }
 
 .page-icon-text > a:hover::after {

frontend/src/lib/css/link.css

@@ -1,5 +1,4 @@
 :root {
-    --link-color: #0174BE;
     --line-size: 5px;
 }
 
@@ -7,46 +6,78 @@
     width: 60rem;
     height: 20rem;
     margin-bottom: 2rem;
-    margin-left: 1rem;
+    cursor: pointer;
-    margin-right: 1rem;
+    transition: var(--transition);
-    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    display: grid;
+    border-radius: 1rem;
+    grid-template-areas:
+        "overlay";
+}
+
+.link-container:hover {
+    box-shadow: var(--shadow);
 }
 
 .link-container svg {
     margin-left: 1rem;
+    color: var(--color-text);
+    transition: var(--transition);
+}
+
+.link-img {
+    display: grid;
+    grid-template-areas:
+        "overlay";
+    max-width: 30rem;
+    height: 20rem;
+}
+
+.link-img img {
+    grid-area: overlay;
+    height: 100%;
+    width: auto;
+}
+
+.link-img-hover {
+    opacity: 0;
+}
+
+.link-content {
+    grid-area: overlay;
+    width: 60rem;
+    height: 20rem;
+    border-radius: 1rem;
+}
+
+.link-background {
+    grid-area: overlay;
+    width: 60rem;
+    height: 20rem;
+    border-radius: 1rem;
+    opacity: 0;
+    background-image: var(--gradient);
 }
 
 /* Link Underlined */
 
-.link-container > span {
+.link-content>span {
     font-family: 'JetBrains Mono';
     font-weight: 500;
     font-size: 2.5rem;
     text-decoration: none;
     position: relative;
-    transition: all .3s ease 0s;
+    color: var(--color-text);
+    transition: var(--transition);
 }
 
-.link-container > span:hover {
+.link-content>span::after {
-    cursor: pointer;
-    color: var(--link-color);
-}
-
-.link-container > span::after {
     content: "";
     position: absolute;
-    width: 0;
+    background-color: var(--color-background);
-    background-color: var(--link-color);
-    transition: all .3s ease 0s;
     height: var(--line-size);
-}
-
-.link-container > span::after {
     bottom: calc(0px - var(--line-size));
     height: var(--line-size);
     left: 0;
-}
+    transition: var(--transition);
-
+    width: var(--span-width);
-.link-container > span:hover::after {
-    width: 100%;
 }

frontend/src/lib/css/navbar.css

@@ -1,5 +1,4 @@
 :root {
-    --transition: all .4s ease 0s;
     --navbar-dark: #261C2CFF;
     --navbar-darker: #261C2CFF;
     --navbar-light: #413543FF;
@@ -89,7 +88,7 @@ a {
     font-family: JetBrains Mono;
     font-weight: 500;
     font-size: 1rem;
-    transition: all .3s ease 0s;
+    transition: var(--transition);
     color: var(--color-background);
     transition: var(--transition);
 }
@@ -106,7 +105,7 @@ a {
     position: absolute;
     width: 0;
     background-color: var(--palette-pink);
-    transition: all .3s ease 0s;
+    transition: var(--transition);
     height: 3px;
 }
 

frontend/src/lib/css/social.css

@@ -58,13 +58,13 @@
     margin-top: 1.2rem;
     margin-bottom: 1.2rem;
     cursor: pointer;
-    transition: all .3s ease 0s;
+    transition: var(--transition);
 }
 
 .social-link img {
     height: 2rem;
     width: 2rem;
-    transition: all .3s ease 0s;
+    transition: var(--transition);
 }
 
 .social-link img:hover {
@@ -72,7 +72,7 @@
 }
 
 .social-link svg {
-    transition: all .3s ease 0s;
+    transition: var(--transition);
 }
 
 .social-link svg:hover {
@@ -90,7 +90,7 @@
     position: absolute;
     width: 0;
     background-color: var(--social-color);
-    transition: all .3s ease 0s;
+    transition: var(--transition);
     height: 3px;
 }
 

frontend/src/lib/js/color.js

@@ -0,0 +1,22 @@
+export function hexTorgb(hex) {
+    return {
+        r: parseInt(hex.substring(0, 2), 16),
+        g: parseInt(hex.substring(2, 4), 16),
+        b: parseInt(hex.substring(4, 6), 16),
+    }
+}
+
+/* should be type {r,g,b} */
+export function rgbTohex(rgb) {
+    return (rgb.r.toString(16) + rgb.g.toString(16) + rgb.b.toString(16));
+}
+
+export function darkenHexTorgb(hex, darken) {
+    let rgb = hexTorgb(hex);
+    console.log(hex);
+    console.log(rgb);
+    rgb.r = Math.floor(Math.round(rgb.r * darken));
+    rgb.g = Math.floor(Math.round(rgb.g * darken));
+    rgb.b = Math.floor(Math.round(rgb.b * darken));
+    return rgb;
+}