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

Frontend: Some tweaks for the containers of the slides, mainly pictures focused. Added formatDateMobile().

Browse source
This commit is contained in:
Yohan Boujon 2024-01-25 22:51:18 +01:00
parent bb42cd9c2b
commit 524bb88a4c
5 changed files with 145 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,54 +1,59 @@
<script> <script>
import SvgIcon from "@jamescoyle/svelte-icon"; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiMapMarker, mdiCog } from "@mdi/js"; import { mdiMapMarker, mdiCog } from "@mdi/js";
import "$lib/css/slide.css"; import "$lib/css/slide.css";
import { formatYear } from "$lib/js/date.js" import { formatYear } from "$lib/js/date.js";
export let active = false; export let active = false;
export let data; export let data;
const title = data.school; const title = data.school;
const location = data.school_location; const location = data.school_location;
const speciality = data.speciality; const speciality = data.speciality;
const option = data.school_options; const option = data.school_options;
const picture = data.picture_url; const picture = data.picture_url;
const end_year = data.end_year === null ? '' : formatYear(data.end_year); const end_year = data.end_year === null ? "" : formatYear(data.end_year);
const start_year = data.start_year === null ? '' : (data.end_year === null ? formatYear(data.start_year) : '-'+formatYear(data.start_year)); const start_year =
data.start_year === null
? ""
: data.end_year === null
? formatYear(data.start_year)
: "-" + formatYear(data.start_year);
</script> </script>
<div class="slide-container"> <div class="slide-container">
<div class="slide-main {active ? '' : 'slide-unactive'}"> <div class="slide-main {active ? '' : 'slide-unactive'}">
<div class="slide-img-container"> <div class="slide-img-container">
<img class="slide-img" src={picture} alt="Education" /> <img class="slide-img" src={picture} alt="Education" />
</div>
<div class="slide-text-container">
<h1 class="slide-title">{title}</h1>
<div class="slide-img-mobile-container">
<img class="slide-img-mobile" src={picture} alt="Education" />
</div>
{#if location}
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
<p class="slide-subtitle slide-aftericon">
{location}
</p>
</div>
{/if}
{#if speciality}
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiCog} type="mdi" />
<p class="slide-subtitle slide-aftericon">
{speciality}
</p>
</div>
{/if}
{#if option}
<p class="slide-subtitle">{option}</p>
{/if}
</div>
</div> </div>
<div class="slide-time"> <div class="slide-text-container">
<div class="slide-bubble" /> <h1 class="slide-title">{title}</h1>
<h2 class="slide-date">{`${end_year}${start_year}`}</h2> <div class="slide-img-mobile-container">
<img class="slide-img-mobile" src={picture} alt="Education" />
</div>
{#if location}
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
<p class="slide-subtitle slide-aftericon">
{location}
</p>
</div>
{/if}
{#if speciality}
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiCog} type="mdi" />
<p class="slide-subtitle slide-aftericon">
{speciality}
</p>
</div>
{/if}
{#if option}
<p class="slide-subtitle">{option}</p>
{/if}
</div> </div>
</div>
<div class="slide-time">
<div class="slide-bubble" />
<h2 class="slide-date">{`${end_year}${start_year}`}</h2>
</div>
</div> </div>

115
frontend/src/lib/components/experience.svelte
View file

@ -1,61 +1,74 @@
<script> <script>
import SvgIcon from "@jamescoyle/svelte-icon"; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiMapMarker, mdiOfficeBuilding } from "@mdi/js"; import { mdiMapMarker, mdiOfficeBuilding } from "@mdi/js";
import "$lib/css/slide.css"; import "$lib/css/slide.css";
import { formatDate } from "$lib/js/date.js"; import { formatDate,formatDateMobile } from "$lib/js/date.js";
export let active = false; export let active = false;
export let data; export let data;
const enterprise = data.enterprise; const enterprise = data.enterprise;
const location = data.enterprise_location; const location = data.enterprise_location;
const description = data.job_description; const description = data.job_description;
const position = data.job_position; const position = data.job_position;
const end_year = data.end_year === null ? "" : formatDate(data.end_year); const end_year = data.end_year === null ? "" : formatDate(data.end_year);
const start_year = const start_year =
data.start_year === null data.start_year === null
? "" ? ""
: data.end_year === null : data.end_year === null
? formatDate(data.start_year) ? formatDate(data.start_year)
: " - " + formatDate(data.start_year); : " - " + formatDate(data.start_year);
const mobile_end_year =
data.end_year === null ? "" : formatDateMobile(data.end_year);
const mobile_start_year =
data.start_year === null
? ""
: data.end_year === null
? formatDateMobile(data.start_year)
: "-" + formatDateMobile(data.start_year);
const picture = data.picture_url; const picture = data.picture_url;
// mobile version
let windowWidth = 0;
</script> </script>
<svelte:window bind:innerWidth={windowWidth} />
<div class="slide-container"> <div class="slide-container">
<div class="slide-main {active ? '' : 'slide-unactive'}"> <div class="slide-main {active ? '' : 'slide-unactive'}">
<div class="slide-img-container"> <div class="slide-img-container">
<img class="slide-img" src={picture} alt="Experience" /> <img class="slide-img" src={picture} alt="Experience" />
</div>
<div class="slide-text-container">
<h1 class="slide-title">{position}</h1>
<div class="slide-img-mobile-container">
<img class="slide-img-mobile" src={picture} alt="Experience" />
</div>
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
<p class="slide-subtitle slide-aftericon">
{enterprise}
</p>
</div>
{#if location}
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
<p class="slide-subtitle slide-aftericon">
{location}
</p>
</div>
{/if}
{#if description}
<div class="slide-subtitle-container">
<p class="slide-subtitle">
{description}
</p>
</div>
{/if}
</div>
</div> </div>
<div class="slide-time"> <div class="slide-text-container">
<div class="slide-bubble" /> <h1 class="slide-title">{position}</h1>
<h2 class="slide-date">{`${end_year}${start_year}`}</h2> <div class="slide-img-mobile-container">
<img class="slide-img-mobile" src={picture} alt="Experience" />
</div>
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
<p class="slide-subtitle slide-aftericon">
{enterprise}
</p>
</div>
{#if location}
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
<p class="slide-subtitle slide-aftericon">
{location}
</p>
</div>
{/if}
{#if description}
<div class="slide-subtitle-container">
<p class="slide-subtitle">
{description}
</p>
</div>
{/if}
</div> </div>
</div>
<div class="slide-time">
<div class="slide-bubble" />
<h2 class="slide-date">{`${windowWidth > 1000 ? end_year : mobile_end_year}${windowWidth > 1000 ? start_year : mobile_start_year}`}</h2>
</div>
</div> </div>

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

@ -41,7 +41,7 @@
</p> </p>
</div> </div>
<div class="slide-subtitle-container"> <div class="slide-subtitle-container">
<p class="slide-subtitle slide-text slide-overflow slide-o2 slide-justify"> <p class="slide-subtitle slide-text slide-overflow slide-justify">
{description} {description}
</p> </p>
</div> </div>

58
frontend/src/lib/css/slide.css
View file

@ -73,6 +73,11 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
/* Add it to any text that may overflow. (long texts)*/
.slide-text {
font-size: 1.25rem !important;
}
} }
@media screen and (max-width: 1000px) @media screen and (max-width: 1000px)
@ -88,7 +93,7 @@
border-radius: 0.4rem; border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background); background-color: var(--color-background);
height: 70dvh; height: 60dvh;
width: 90dvw; width: 90dvw;
margin-left: 5dvw; margin-left: 5dvw;
z-index: 1; z-index: 1;
@ -98,13 +103,15 @@
.slide-img-mobile-container { .slide-img-mobile-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 30dvh;
} }
.slide-img-mobile { .slide-img-mobile {
max-width: 76dvw; max-width: 76dvw;
max-height: 30dvh; max-height: 100%;
margin-top: 1.5rem; margin-top: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
object-fit: cover;
} }
.slide-img-container{ .slide-img-container{
@ -117,7 +124,7 @@
color: var(--color-text); color: var(--color-text);
font-family: 'Gabarito', sans-serif; font-family: 'Gabarito', sans-serif;
font-weight: 600; font-weight: 600;
font-size: 2rem; font-size: 3vmax;
margin-bottom: 0; margin-bottom: 0;
} }
@ -126,7 +133,7 @@
color: var(--color-text); color: var(--color-text);
font-family: 'Gabarito', sans-serif; font-family: 'Gabarito', sans-serif;
font-weight: 500; font-weight: 500;
font-size: 1.25rem; font-size: 1.75vmax;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
width: 100%; width: 100%;
@ -149,6 +156,18 @@
right: 0; right: 0;
position: absolute; position: absolute;
} }
.slide-text {
font-size: 1.5vmax;
}
}
.slide-overflow {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
} }
.slide-subtitle-container { .slide-subtitle-container {
@ -166,37 +185,6 @@
text-align: justify; text-align: justify;
text-justify:auto; text-justify:auto;
} }
/* Add it to any text that may overflow. (long texts)*/
.slide-text {
font-size: 1.25rem !important;
}
.slide-overflow {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.slide-o1 {
-webkit-line-clamp: 1;
}
.slide-o2 {
-webkit-line-clamp: 2;
}
.slide-o3 {
-webkit-line-clamp: 3;
}
.slide-o4 {
-webkit-line-clamp: 4;
}
.slide-o5 {
-webkit-line-clamp: 5;
}
/* Every button are centered to the right side of the component */ /* Every button are centered to the right side of the component */
.slide-button { .slide-button {

7
frontend/src/lib/js/date.js
View file

@ -5,6 +5,13 @@ export function formatDate(date) {
return formattedDate; return formattedDate;
} }
export function formatDateMobile(date) {
const options = { month: 'numeric', year: 'numeric' };
const cool_date = new Date(date);
const formattedDate = cool_date.toLocaleString('fr-FR', options);
return formattedDate;
}
export function formatMonth(date) { export function formatMonth(date) {
const options = { month: 'long', year: 'numeric' }; const options = { month: 'long', year: 'numeric' };
const cool_date = new Date(date); const cool_date = new Date(date);