Etheryo/curriculum-vitae
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Created Slideshow component (will be reused for skills and experience). Updated CSS. Updated Transition between each 'slide'.

Browse source
This commit is contained in:
Yohan Boujon 2023-11-14 22:29:08 +01:00
parent aa7ee55e62
commit 6f5e264b49
10 changed files with 92 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/lib/components/education.svelte
View file

@ -1,3 +1,4 @@
<script>
import "$lib/css/education.css";

2
frontend/src/lib/components/section.svelte
View file

@ -8,6 +8,6 @@
</script>
<div class="section-container">
<SvgIcon size="75" path={icon} type="mdi" />
<SvgIcon size="60" path={icon} type="mdi" />
<h1 class="section-h1">{title}</h1>
</div>

2
frontend/src/lib/components/sidebar-component.svelte
View file

@ -11,7 +11,7 @@
<div class="sc-container">
<div class="sc-icon">
<SvgIcon size="50" path={icon} type="mdi"/>
<SvgIcon size="45" path={icon} type="mdi"/>
</div>
<h1 class="text sc-title">{title}</h1>
{#each descriptionArray as text}

51
frontend/src/lib/components/slideshow.svelte Normal file
View file

@ -0,0 +1,51 @@
<script>
import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
import "$lib/css/slideshow.css"
export let data = [];
export let type;
let slideshow_index = 0;
let slideshow_hidden = [];
function slideEducation() {
const slideshowElements = document.querySelectorAll(".education-main");
if (slideshow_index >= data.length - 1) {
slideshow_hidden = [];
slideshow_index = 0;
} else {
slideshow_hidden.push(slideshow_index);
slideshow_index++;
}
let transformValue;
slideshowElements.forEach((element, id) => {
if (slideshow_hidden.includes(id)) {
transformValue = slideshow_index * 60;
} else {
transformValue = slideshow_index * 47.7;
}
element.style.transform = `translateX(-${transformValue}rem)`;
});
}
</script>
<div class="slideshow">
<button class="slideshow_btn" on:click={slideEducation}>
<div>
<SvgIcon
size="45"
path={slideshow_index >= data.length - 1
? mdiChevronLeft
: mdiArrowRight}
type="mdi"
/>
</div>
</button>
{#each data.reverse() as selected_data, index (index)}
<svelte:component
this={type}
data={selected_data}
active={index == slideshow_index ? true : false}
/>
{/each}
</div>

32
frontend/src/lib/css/cv.css
View file

@ -14,7 +14,7 @@ html {
.sidebar {
width: 100%;
height: 100%;
flex-basis: 25rem;
flex-basis: 20rem;
background-color: var(--color-special);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
z-index: 2;
@ -27,7 +27,7 @@ html {
}
.profile-picture {
width: 10rem;
width: 9rem;
height: auto;
margin: 2rem;
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
@ -49,36 +49,12 @@ h1 {
color: var(--color-title);
font-family: 'Urbanist', sans-serif;
font-weight: 600;
font-size: 4rem;
font-size: 3rem;
}
h2 {
color: var(--color-subtitle);
font-family: 'Urbanist', sans-serif;
font-weight: 500;
font-size: 2rem;
}
.education {
display: flex;
flex-direction: row;
align-items: center;
}
.education_btn {
z-index: 5;
position: absolute;
right: 0;
margin-right: 2.5rem;
min-width: 8rem;
min-height: 8rem;
background-color: var(--color-special);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-background);
border: 0;
transition: all .3s ease 0s;
font-size: 1.5rem;
}

8
frontend/src/lib/css/education.css
View file

@ -3,7 +3,7 @@
border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background);
height: 20rem;
height: 18rem;
margin-left: 2.5rem;
margin-right: 2.5rem;
z-index: 1;
@ -18,12 +18,12 @@
}
.education-img {
max-height: 15rem;
max-height: 12.5rem;
}
.education-text-container {
margin: 1.5rem;
width: 20rem;
width: 18rem;
}
.education-title {
@ -41,6 +41,6 @@
}
.education-unactive {
transform: scale(0.9);
scale: 0.9;
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
}

1
frontend/src/lib/css/section.css
View file

@ -10,4 +10,5 @@
.section-h1 {
margin-left: 2rem;
font-size: 2.5rem;
}

4
frontend/src/lib/css/sidebar-component.css
View file

@ -24,12 +24,12 @@
.sc-title {
font-weight: 600;
font-size: 2.5rem;
font-size: 2rem;
margin-bottom: 0.5rem;
}
.sc-description {
font-weight: 500;
font-size: 1.5rem;
font-size: 1.2rem;
margin-bottom: 0.25rem;
}

23
frontend/src/lib/css/slideshow.css Normal file
View file

@ -0,0 +1,23 @@
.slideshow {
display: flex;
flex-direction: row;
align-items: center;
}
.slideshow_btn {
z-index: 5;
position: absolute;
right: 0;
margin-right: 2.5rem;
min-width: 5rem;
min-height: 5rem;
background-color: var(--color-special);
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-background);
border: 0;
transition: all .3s ease 0s;
}

38
frontend/src/routes/+page.svelte
View file

@ -3,7 +3,6 @@
import { formatDate } from "$lib/js/date.js";
import "$lib/css/base.css";
import "$lib/css/cv.css";
import SvgIcon from "@jamescoyle/svelte-icon";
// Sidebar
import profile_pic from "$lib/img/cvnQU1-W_nowhite_carre.jpg";
@ -19,26 +18,13 @@
// Main
import Section from "$lib/components/section.svelte";
import Education from "$lib/components/education.svelte";
import { mdiSchool, mdiArrowRight, mdiChevronLeft } from "@mdi/js";
import SlideShow from "$lib/components/slideshow.svelte";
import { mdiSchool } from "@mdi/js";
export let data;
const cv = data.status == 0 ? processData(data) : undefined;
const birth_year =
data.status == 0 ? formatDate(cv.info.birth_year) : undefined;
let education_index = 0;
function slideEducation() {
const educationElements = document.querySelectorAll(".education-main");
if (education_index >= cv.education.length - 1) {
education_index = 0;
} else {
education_index++;
}
const transformValue = `translateX(-${education_index * 53}rem)`;
educationElements.forEach((element) => {
element.style.transform = transformValue;
});
}
</script>
{#if data.status == 0}
@ -77,25 +63,7 @@
<h1 class="name">{cv.info.full_name}</h1>
<h2 class="name">Apprentice Engineer Automatic/Electronic</h2>
<Section icon={mdiSchool} title="Education" />
<div class="education">
<button class="education_btn" on:click={slideEducation}>
<div class="education_btn_icon">
<SvgIcon
size="75"
path={education_index >= cv.education.length - 1
? mdiChevronLeft
: mdiArrowRight}
type="mdi"
/>
</div>
</button>
{#each cv.education.reverse() as ed_data, index (index)}
<Education
data={ed_data}
active={index == education_index ? true : false}
/>
{/each}
</div>
<SlideShow data={cv.education} type={Education} />
</div>
</div>
{:else}