Education: Added education component, added section component, added css linked to these components. Modified +page.
This commit is contained in:
parent
285ccc0691
commit
aa7ee55e62
7 changed files with 203 additions and 10 deletions
22
frontend/src/lib/components/education.svelte
Normal file
22
frontend/src/lib/components/education.svelte
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script>
|
||||
import "$lib/css/education.css";
|
||||
|
||||
export let active = false;
|
||||
export let data;
|
||||
export let picture = "https://bib.insa-toulouse.fr/_resource/info_pratiques/INSA-Venir-Bib-photo-8_0.jpg";
|
||||
|
||||
const title = data.school;
|
||||
const location = data.school_location;
|
||||
const option = data.school_options;
|
||||
</script>
|
||||
|
||||
<div class="education-main {active ? '' : 'education-unactive'}">
|
||||
<div class="education-img-container">
|
||||
<img class="education-img" src={picture} alt="Education"/>
|
||||
</div>
|
||||
<div class="education-text-container">
|
||||
<h1 class="education-title">{title}</h1>
|
||||
<p class="education-subtitle">{location}</p>
|
||||
<p class="education-subtitle">{option}</p>
|
||||
</div>
|
||||
</div>
|
||||
13
frontend/src/lib/components/section.svelte
Normal file
13
frontend/src/lib/components/section.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script>
|
||||
import "$lib/css/section.css";
|
||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import { mdiHelpCircle } from "@mdi/js";
|
||||
|
||||
export let title = "Title";
|
||||
export let icon = mdiHelpCircle;
|
||||
</script>
|
||||
|
||||
<div class="section-container">
|
||||
<SvgIcon size="75" path={icon} type="mdi" />
|
||||
<h1 class="section-h1">{title}</h1>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap');
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-title: #071952;
|
||||
--color-subtitle: #0C356A;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
body, html {
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
background: var(--color-background);
|
||||
margin: 0;
|
||||
|
|
@ -16,7 +17,7 @@ body, html {
|
|||
flex-basis: 25rem;
|
||||
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;
|
||||
margin-right: 2rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.profile-picture-container {
|
||||
|
|
@ -34,6 +35,9 @@ body, html {
|
|||
|
||||
.main {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
z-index: 0;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
@ -53,4 +57,28 @@ h2 {
|
|||
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;
|
||||
}
|
||||
46
frontend/src/lib/css/education.css
Normal file
46
frontend/src/lib/css/education.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.education-main {
|
||||
display: flex;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
|
||||
background-color: var(--color-background);
|
||||
height: 20rem;
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 2.5rem;
|
||||
z-index: 1;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.education-img-container{
|
||||
display: flex;
|
||||
margin: 1.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.education-img {
|
||||
max-height: 15rem;
|
||||
}
|
||||
|
||||
.education-text-container {
|
||||
margin: 1.5rem;
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.education-title {
|
||||
color: var(--color-text);
|
||||
font-family: 'Gabarito', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.education-subtitle {
|
||||
color: var(--color-text);
|
||||
font-family: 'Gabarito', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.education-unactive {
|
||||
transform: scale(0.9);
|
||||
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
|
||||
}
|
||||
13
frontend/src/lib/css/section.css
Normal file
13
frontend/src/lib/css/section.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.section-container {
|
||||
margin-top: 3rem;
|
||||
margin-left: 3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: var(--color-title);
|
||||
filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.section-h1 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
|
@ -3,32 +3,99 @@
|
|||
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";
|
||||
import SidebarComponent from "$lib/components/sidebar-component.svelte";
|
||||
import { mdiAccount, mdiCogs, mdiEmailOutline, mdiLocationEnter, mdiMapMarker, mdiPhone, mdiStar } from '@mdi/js';
|
||||
import {
|
||||
mdiAccount,
|
||||
mdiCogs,
|
||||
mdiEmailOutline,
|
||||
mdiPhone,
|
||||
mdiStar,
|
||||
} from "@mdi/js";
|
||||
|
||||
// Main
|
||||
import Section from "$lib/components/section.svelte";
|
||||
import Education from "$lib/components/education.svelte";
|
||||
import { mdiSchool, mdiArrowRight, mdiChevronLeft } 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;
|
||||
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}
|
||||
<div class="container-cv">
|
||||
<!-- SIDEBAR DIV (LEFT) -->
|
||||
<div class="sidebar">
|
||||
<div class="profile-picture-container">
|
||||
<img class="profile-picture" src={profile_pic} alt="{cv.info.full_name}"/>
|
||||
<img
|
||||
class="profile-picture"
|
||||
src={profile_pic}
|
||||
alt={cv.info.full_name}
|
||||
/>
|
||||
</div>
|
||||
<SidebarComponent icon={mdiAccount} description={birth_year}/>
|
||||
<SidebarComponent icon={mdiEmailOutline} description={cv.info.email}/>
|
||||
<SidebarComponent icon={mdiPhone} description={cv.info.phone_number}/>
|
||||
<SidebarComponent icon={mdiStar} title="Interests" description={cv.info.interests}/>
|
||||
<SidebarComponent icon={mdiCogs} title="Soft-Skills" description={cv.info.softskills}/>
|
||||
<SidebarComponent icon={mdiAccount} description={birth_year} />
|
||||
<SidebarComponent
|
||||
icon={mdiEmailOutline}
|
||||
description={cv.info.email}
|
||||
/>
|
||||
<SidebarComponent
|
||||
icon={mdiPhone}
|
||||
description={cv.info.phone_number}
|
||||
/>
|
||||
<SidebarComponent
|
||||
icon={mdiStar}
|
||||
title="Interests"
|
||||
description={cv.info.interests}
|
||||
/>
|
||||
<SidebarComponent
|
||||
icon={mdiCogs}
|
||||
title="Soft-Skills"
|
||||
description={cv.info.softskills}
|
||||
/>
|
||||
</div>
|
||||
<!-- MAIN DIV (RIGHT) -->
|
||||
<div class="main">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue