111 lines
3.4 KiB
Svelte
111 lines
3.4 KiB
Svelte
<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',
|
|
alt: 'Etheryo',
|
|
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 social-width" bind:this={div_social}>
|
|
<h1>Liens</h1>
|
|
{#each social_list as s}
|
|
<div
|
|
class="social-link align-center"
|
|
style="--social-color: #{s.color};"
|
|
role="button"
|
|
tabindex="0"
|
|
title={s.alt}
|
|
on:mouseenter={() => {
|
|
changeBackground(s.color, false);
|
|
}}
|
|
on:mouseleave={() => {
|
|
changeBackground(s.color, true);
|
|
}}
|
|
>
|
|
{#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">{s.name}</a>
|
|
</div>
|
|
{/each}
|
|
</div>
|