feat: improve contact

src/lib/Footer.svelte

@@ -1,24 +1,10 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
+	import { firstName, lastName } from './data/global';
-	import { firstName, lastName, socialNetworks } from './data/global';
 
 	const year = new Date().getFullYear();
 </script>
 
-<div class="flex flex-wrap items-center justify-center" id="contact">
-	{#each socialNetworks as socialNetwork}
-		<div class="p-5">
-			<a
-				href={socialNetwork.url}
-				target="_blank"
-				title={socialNetwork.title}
-				rel="noopener"
-				data-umami-event={`Social ${socialNetwork.title} button`}
-			>
-				<Icon icon={socialNetwork.icon} class="text-5xl" />
-			</a>
-		</div>
-	{/each}
-</div>
-
 <div class="pb-5 text-center text-lg font-light">© {year} {firstName} {lastName}</div>
+<div class="pb-5 text-center text-sm font-light">
+	Design inspiré par le thème hugo-porto créé par Andrew Molyuk
+</div>

src/lib/data/global.ts

@@ -34,26 +34,31 @@ export const socialNetworks = [
 	{
 		title: 'Linkedin',
 		icon: 'mdi:linkedin',
-		url: 'https://www.linkedin.com/in/arnaud-scheffler/'
+		url: 'https://www.linkedin.com/in/arnaud-scheffler/',
+		color: 'hover:text-[#0e76a8]'
 	},
 	{
 		title: 'GitHub',
 		icon: 'mdi:github',
-		url: 'https://github.com/ArnaudScheffler'
+		url: 'https://github.com/ArnaudScheffler',
+		color: 'hover:text-[#24292e]'
 	},
 	{
 		title: 'Gitea',
 		icon: 'simple-icons:gitea',
-		url: 'https://git.s-algo.com/explore/repos/'
+		url: 'https://git.s-algo.com/explore/repos/',
+		color: 'hover:text-[#609926]'
 	},
 	{
 		title: 'malt',
 		icon: 'simple-icons:malt',
-		url: 'https://www.malt.fr/profile/arnaudscheffler'
+		url: 'https://www.malt.fr/profile/arnaudscheffler',
+		color: 'hover:text-[#d4524f]'
 	},
 	{
-		title: 'codeur.com',
+		title: 'Codeur.com',
 		icon: 'mdi:letter-c-box',
-		url: 'https://www.codeur.com/-arnaud-scheffler'
+		url: 'https://www.codeur.com/-arnaud-scheffler',
+		color: 'hover:text-[#2169ec]'
 	}
 ];

src/lib/landing/Contact.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { socialNetworks } from '$lib/data/global';
+</script>
+
+<p class="text-center">
+	Utilisez ces icones pour me retrouver sur les plateformes correspondantes :
+</p>
+<div class="flex flex-wrap items-center justify-center">
+	{#each socialNetworks as socialNetwork}
+		<div class="p-5">
+			<a
+				class={socialNetwork.color}
+				href={socialNetwork.url}
+				target="_blank"
+				title={socialNetwork.title}
+				rel="noopener"
+				data-umami-event={`Social ${socialNetwork.title} button`}
+			>
+				<Icon icon={socialNetwork.icon} class="text-5xl" />
+			</a>
+		</div>
+	{/each}
+</div>

src/routes/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { educations, experiences, projects, skills } from '$lib/data/landing';
+	import { educations, experiences, skills } from '$lib/data/landing';
 	import Footer from '$lib/Footer.svelte';
+	import Contact from '$lib/landing/Contact.svelte';
 	import Educations from '$lib/landing/Educations.svelte';
 	import Experiences from '$lib/landing/Experiences.svelte';
 	import Hero from '$lib/landing/Hero.svelte';
-	import Projects from '$lib/landing/Projects.svelte';
 	import Skills from '$lib/landing/Skills.svelte';
 	import Title from '$lib/landing/Title.svelte';
 	import Navbar from '$lib/Navbar.svelte';
@@ -30,6 +30,9 @@
 
 		<Title id={'educations'}>Formations</Title>
 		<Educations {educations} />
+
+		<Title id={'contact'}>Contact</Title>
+		<Contact />
 	</main>
 	<footer>
 		<Footer />