Added Social tab.
This commit is contained in:
parent
69dc2b1047
commit
754435800f
9 changed files with 232 additions and 39 deletions
|
|
@ -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 -->
|
||||
|
|
|
|||
108
frontend/src/lib/components/social.svelte
Normal file
108
frontend/src/lib/components/social.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
4
frontend/src/lib/css/post-min.css
vendored
4
frontend/src/lib/css/post-min.css
vendored
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
63
frontend/src/lib/css/social.css
Normal file
63
frontend/src/lib/css/social.css
Normal file
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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
|
||||
title="Alix est beau"
|
||||
/>
|
||||
<PostMin title="Alix est beau" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue