Added Social tab.

frontend/src/lib/components/archive.svelte

@@ -7,6 +7,8 @@
 
 	export let fontPost = 1;
 	export let paddingPost = 0.5;
+	export let width = "100%";
+
 	const posts = {
 		'Août 2024': [
 			'Est-ce que le lorem est Ipsum ?',
@@ -97,24 +99,12 @@
 			duration: 200,
 			easing: 'easeInOutQuad'
 		});
-
-		if (isActive[index]) {
-			scrollToPosition();
-		}
-	}
-
-	function scrollToPosition() {
-		const rect = containerRef.getBoundingClientRect().top + window.scrollY;
-		window.scrollTo({
-			top: rect,
-			behavior: 'smooth'
-		});
 	}
 </script>
 
 <div
 	class="archive-container"
-	style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem;"
+	style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem; width:{width};"
 	bind:this={containerRef}
 >
 	<!-- svelte-ignore a11y-no-static-element-interactions -->

frontend/src/lib/components/social.svelte

@@ -0,0 +1,108 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/social.css';
+
+	import anime from 'animejs';
+	import SvgIcon from '@jamescoyle/svelte-icon';
+
+	let social_list = [
+		{
+			pic: 'https://cdn.simpleicons.org/instagram',
+			color: 'E4405F',
+			alt: 'instagram',
+			name: '@yo.boujon',
+			link: 'https://www.instagram.com/yoboujon/'
+		},
+		{
+			pic: 'https://cdn.simpleicons.org/github',
+			color: '181717',
+			alt: 'github',
+			name: 'yoboujon',
+			link: 'https://github.com/yoboujon'
+		},
+		{
+			pic: 'https://cdn.simpleicons.org/youtube',
+			color: 'FF0000',
+			alt: 'youtube',
+			name: '@yoboujon',
+			link: 'https://www.youtube.com/@yoboujon'
+		},
+		{
+			pic: 'https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2',
+			color: '0A66C2',
+			alt: 'linkedin',
+			name: 'Yohan Boujon',
+			link: 'https://www.linkedin.com/in/yohan-boujon-a08511202/'
+		},
+		{
+			icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z',
+			color: 'AD62AA',
+			name: 'Etheryo',
+			link: 'https://www.etheryo.fr'
+		}
+	];
+
+	let div_social;
+	const resetcolor = {
+		r: 15,
+		g: 11,
+		b: 17,
+		a: 0.1
+	};
+	let oldcolor = resetcolor;
+
+	function changeBackground(color, reset) {
+		let newcolor = resetcolor;
+		if (!reset) {
+			newcolor = {
+				r: parseInt(color.substring(0, 2), 16),
+				g: parseInt(color.substring(2, 4), 16),
+				b: parseInt(color.substring(4, 6), 16),
+				a: 0.2
+			};
+		}
+
+		anime({
+			targets: { red: oldcolor.r, green: oldcolor.g, blue: oldcolor.b, alpha: oldcolor.a },
+			red: [oldcolor.r, newcolor.r],
+			green: [oldcolor.g, newcolor.g],
+			blue: [oldcolor.b, newcolor.b],
+			alpha: [oldcolor.a, newcolor.a],
+			duration: 500,
+			easing: 'easeInOutQuad',
+			update: function (anim) {
+				div_social.style.backgroundImage = `linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(${anim.animations[0].currentValue},${anim.animations[1].currentValue},${anim.animations[2].currentValue},${anim.animations[3].currentValue}) 100%)`;
+				oldcolor = {
+					r: anim.animations[0].currentValue,
+					g: anim.animations[1].currentValue,
+					b: anim.animations[2].currentValue,
+					a: anim.animations[3].currentValue
+				};
+			}
+		});
+	}
+</script>
+
+<div class="social" bind:this={div_social}>
+	<h1>Liens</h1>
+	{#each social_list as s}
+		<div class="social-link align-center">
+			{#if s.pic === undefined}
+				<SvgIcon size="32" type="mdi" path={s.icon}></SvgIcon>
+			{:else}
+				<img alt={s.alt} src={s.pic} />
+			{/if}
+			<a
+				href={s.link}
+				target="_blank"
+				style="--social-color: #{s.color};"
+				on:mouseenter={() => {
+					changeBackground(s.color, false);
+				}}
+				on:mouseleave={() => {
+					changeBackground(s.color, true);
+				}}>{s.name}</a
+			>
+		</div>
+	{/each}
+</div>

frontend/src/lib/css/archive.css

@@ -1,9 +1,8 @@
 .archive-container {
     box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-    /* For now */
-    width: 50%;
     border-radius: 1rem;
     color: var(--color-text);
+    background-image: var(--background-light);
 }
 
 .archive {
@@ -27,6 +26,10 @@
     display: none;
 }
 
+.archive-post > div {
+    width: auto;
+}
+
 .archive-post span {
     /* Overflow */
     overflow: hidden;

frontend/src/lib/css/base.css

@@ -33,7 +33,8 @@ h1 {
     --palette-purple: #4B1E78;
     --palette-brown: #3c2317;
 
-    --background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
+    --background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(15, 11, 17, 0.1) 100%);
+    --background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%);
 
     --z-index-last: -1;
     --z-index-normal: 0;
@@ -45,6 +46,7 @@ h1 {
     --border-max: 2rem;
     --profile-content-width: 40rem;
 
+    --width-min-desktop: 1275px;
     --width-mobile: 875px;
     /*  https://clamp.font-size.app/ 
         min=875px       max=110px       */

frontend/src/lib/css/button-slider.css

@@ -2,7 +2,7 @@
     display: flex;
     width: 100%;
     height: 3.5rem;
-    background: var(--background-light);
+    background: var(--background-dark);
     border-radius: 3rem;
     padding: 0 !important;
 }

frontend/src/lib/css/post-min.css

@@ -64,6 +64,10 @@
     margin-top: auto !important;
 }
 
+.post-min-pill span {
+    font-size: 0.8rem;
+}
+
 .post-min-pill svg {
     width: 1.2rem !important;
     height: 1.2rem !important;

frontend/src/lib/css/profile/base.css

@@ -16,6 +16,11 @@
     margin: 0;
 }
 
+.profile-title {
+    margin-bottom: 2rem !important;
+    margin-left: 2rem !important;
+} 
+
 .profile p {
     text-align: justify;
     text-justify: auto;
@@ -65,7 +70,7 @@
 
 .profile-name {
     display: flex;
-    margin-top: 2rem;
+    height: 12rem;
     margin-left: calc(var(--picture-left) + var(--picture-width) + var(--picture-border)*2);
 }
 
@@ -77,22 +82,32 @@
     border-radius: var(--border-min);
 }
 
-.profile-container {
+.profile-main {
     width: 100%;
     display: flex;
+}
+
+.profile-container {
+    display: flex;
     flex-direction: column;
+    margin-bottom: 2rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.profile-container > div {
+    margin-bottom: 2rem;
 }
 
 .profile-post-container {
     display: flex;
     flex-direction: row;
+    width: calc(var(--profile-content-width) + 6rem);
 }
 
 /* Depending on media */
 
 .profile-content {
-    margin-top: 8rem;
-    margin-bottom: 2rem;
     width: var(--profile-content-width);
     padding: 3rem;
     border-radius: 1rem;

frontend/src/lib/css/social.css

@@ -0,0 +1,63 @@
+:root {
+    --social-max-width: 20rem;
+    --social-min-width: 2rem;
+}
+
+.social {
+    padding: 3rem;
+    padding-right: 2rem;    
+    padding-left: 2rem;
+    border-radius: 1rem;
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    background-image: var(--background-light);
+    width: var(--social-max-width);
+}
+
+.social-link {
+    height: 2rem;
+    display: flex;
+    flex-direction: row;
+    margin-top: 1.2rem;
+    margin-bottom: 1.2rem;
+    cursor: pointer;
+    transition: all .3s ease 0s;
+}
+
+.social-link img {
+    height: 2rem;
+    width: 2rem;
+}
+
+.social-link a {
+    text-decoration: none;
+    position: relative;
+    color: var(--color-text);
+    margin-left: auto;
+    font-size: 1.4rem;
+    font-weight: 500;
+}
+
+/* Underline links */
+
+.social-link a:hover {
+    color: var(--social-color);
+}
+
+.social-link a::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    background-color: var(--social-color);
+    transition: all .3s ease 0s;
+    height: 3px;
+}
+
+.social-link a::after {
+    bottom: -3px;
+    height: 3px;
+    right: 0;
+}
+
+.social-link a:hover::after {
+    width: 100%;
+}

frontend/src/routes/profile/+page.svelte

@@ -3,6 +3,8 @@
 	import '$lib/css/profile/base.css';
 
 	import PostMin from '$lib/components/post-min.svelte';
+	import Social from '$lib/components/social.svelte';
+	import Archive from '$lib/components/archive.svelte'
 
 	let cover =
 		'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg';
@@ -25,12 +27,19 @@
 		<h1>{name}</h1>
 		<span>{pronoun}</span>
 	</div>
-	<div class="center profile-container">
+	<div class="profile-main justify-center">
+		<div class="profile-container">
+			<Social />
+			<h1 class="profile-title">Archives</h1>
+			<Archive width="24rem"/>
+		</div>
+		<div class="profile-container">
 			<div class="profile-content">
 				<h1>À propos</h1>
 				<p>{@html description}</p>
 			</div>
-		<div class="profile-post-container">
+			<h1 class="profile-title">Derniers articles</h1>
+			<div class="profile-post-container center">
 				<PostMin
 					cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
 					title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
@@ -41,9 +50,8 @@
 					title="Comment installer Linus Torvalds sur ma tablette?"
 					date="13/03/2024"
 				/>
-			<PostMin 
+				<PostMin title="Alix est beau" />
-				title="Alix est beau"
+			</div>
-			/>
 		</div>
 	</div>
 </div>