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

Frontend: Adjusted CSS to work with mobile environnement.

Browse source
This commit is contained in:
Yohan Boujon 2024-01-25 00:01:23 +01:00
parent d3aceced88
commit aea400db5d
11 changed files with 264 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-theme="crimson"> <body data-sveltekit-preload-data="hover" data-theme="crimson">

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

@ -23,6 +23,7 @@
</div> </div>
<div class="slide-text-container"> <div class="slide-text-container">
<h1 class="slide-title">{title}</h1> <h1 class="slide-title">{title}</h1>
<img class="slide-img-mobile" src={picture} alt="Education" />
{#if location} {#if location}
<div class="slide-subtitle-container"> <div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiMapMarker} type="mdi" /> <SvgIcon size="35" path={mdiMapMarker} type="mdi" />

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

@ -28,6 +28,7 @@
</div> </div>
<div class="slide-text-container"> <div class="slide-text-container">
<h1 class="slide-title">{position}</h1> <h1 class="slide-title">{position}</h1>
<img class="slide-img-mobile" src={picture} alt="Experience" />
<div class="slide-subtitle-container"> <div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" /> <SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
<p class="slide-subtitle slide-aftericon"> <p class="slide-subtitle slide-aftericon">

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

@ -21,10 +21,11 @@
<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="projects" /> <img class="slide-img" src={picture} alt="Projects" />
</div> </div>
<div class="slide-text-container"> <div class="slide-text-container">
<h1 class="slide-title">{title}</h1> <h1 class="slide-title">{title}</h1>
<img class="slide-img-mobile" src={picture} alt="Projects" />
<div class="slide-subtitle-container"> <div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiCalendarRange} type="mdi" /> <SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
<p class="slide-subtitle slide-aftericon"> <p class="slide-subtitle slide-aftericon">

11
frontend/src/lib/components/slideshow.svelte
View file

@ -20,13 +20,15 @@
data = data.reverse(); data = data.reverse();
} }
// Svelte bindings
let windowWidth = 0;
// Resizing variables // Resizing variables
let resizing = false; let resizing = false;
// Slideshow global variables // Slideshow global variables
let slideshow_index = 0; let slideshow_index = 0;
let slideshow_hidden = []; let slideshow_hidden = [];
let slideshowTimeline; let slideshowTimeline;
let slideshowElements; let slideshowElements;
let slideshowBubbles; let slideshowBubbles;
@ -34,6 +36,7 @@
// Timeline global variables // Timeline global variables
let slideshow; let slideshow;
let bubbles = []; let bubbles = [];
onMount(() => { onMount(() => {
/* Slideshow */ /* Slideshow */
//global writer count //global writer count
@ -80,7 +83,7 @@
// Incrementing the transformValue for each element // Incrementing the transformValue for each element
let transformValue = 0; let transformValue = 0;
for (const id of slideshow_hidden) { for (const id of slideshow_hidden) {
transformValue += slideshowElements[id].clientWidth; transformValue += slideshowElements[id].clientWidth;
} }
// Translating elements // Translating elements
@ -166,13 +169,13 @@
} }
</script> </script>
<svelte:window on:resize={changeSize} /> <svelte:window on:resize={changeSize} bind:innerWidth={windowWidth}/>
<div class="slideshow" bind:this={slideshow}> <div class="slideshow" bind:this={slideshow}>
<button class="slideshow_btn" on:click={slideCards}> <button class="slideshow_btn" on:click={slideCards}>
<div> <div>
<SvgIcon <SvgIcon
size="45" size={windowWidth < 1000 ? "30" : "45"}
path={slideshow_index >= data.length - 1 path={slideshow_index >= data.length - 1
? mdiChevronLeft ? mdiChevronLeft
: mdiArrowRight} : mdiArrowRight}

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

@ -45,6 +45,43 @@ html {
} }
} }
@media screen and (min-width: 1000px) {
.name {
text-align: center;
text-shadow: -15px 5px 20px #00000030;
}
.footer p {
font-family: 'Urbanist', sans-serif;
font-weight: 600;
font-size: 1.25rem;
color: var(--color-background);
margin: 0.5rem;
}
}
@media screen and (max-width: 1000px) {
.name {
text-align: center;
text-shadow: -15px 5px 20px #00000030;
background-color: var(--color-special);
color: var(--color-background);
margin-top: 0;
padding-top: 1.5rem;
margin-bottom: 0;
padding-bottom: 1.5rem;
box-shadow: rgba(0, 14, 83, 0.12) 0px 30px 25px, rgba(0, 14, 83, 0.05) 0px 5px 10px;
}
.footer p {
font-family: 'Urbanist', sans-serif;
font-weight: 600;
font-size: 1rem;
color: var(--color-background);
margin: 0.5rem;
}
}
.profile-picture-container { .profile-picture-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -62,12 +99,6 @@ html {
width: 100%; width: 100%;
overflow-x: hidden; overflow-x: hidden;
z-index: 0; z-index: 0;
padding-right: 2rem;
}
.name {
text-align: center;
text-shadow: -15px 5px 20px #00000030;
} }
h1 { h1 {
@ -98,7 +129,7 @@ h2 {
.footer { .footer {
position: relative; position: relative;
display: flex; display: flex;
height: 10rem; height: 30vh;
background-color: var(--color-text); background-color: var(--color-text);
z-index: 3; z-index: 3;
justify-content: center; justify-content: center;
@ -106,14 +137,6 @@ h2 {
flex-direction: column; flex-direction: column;
} }
.footer p {
font-family: 'Urbanist', sans-serif;
font-weight: 600;
font-size: 1.25rem;
color: var(--color-background);
margin: 0.5rem;
}
.footer svg { .footer svg {
margin: 0; margin: 0;
} }

6
frontend/src/lib/css/pill.css
View file

@ -29,6 +29,10 @@
filter: invert(8%) sepia(21%) saturate(1187%) hue-rotate(234deg) brightness(101%) contrast(91%); filter: invert(8%) sepia(21%) saturate(1187%) hue-rotate(234deg) brightness(101%) contrast(91%);
} }
.pill-container img, svg { .pill-container img {
margin-right: 0.5rem;
}
.pill-container svg {
margin-right: 0.5rem; margin-right: 0.5rem;
} }

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

@ -1,21 +1,48 @@
.section-container { @media screen and (min-width: 1000px)
margin-top: 3rem; {
margin-left: 3rem; .section-container {
display: flex; margin-top: 3rem;
flex-direction: row; margin-left: 3rem;
align-items: center; display: flex;
color: var(--color-title); flex-direction: row;
filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15)); align-items: center;
color: var(--color-title);
filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
}
.subsection-container {
margin-left: 3rem;
margin-bottom: 0.5rem;
display: flex;
flex-direction: row;
align-items: center;
color: var(--color-subtitle);
filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
}
} }
.subsection-container { @media screen and (max-width: 1000px)
margin-left: 3rem; {
margin-bottom: 0.5rem; .section-container {
display: flex; margin-top: 2rem;
flex-direction: row; margin-left: 1rem;
align-items: center; display: flex;
color: var(--color-subtitle); flex-direction: row;
filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15)); align-items: center;
color: var(--color-title);
filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
}
.subsection-container {
margin-left: 1rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
display: flex;
flex-direction: row;
align-items: center;
color: var(--color-subtitle);
filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
}
} }
.section-h1 { .section-h1 {

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

@ -1,52 +1,135 @@
.slide-container { @media screen and (min-width: 1000px)
display: flex; {
flex-direction: column; .slide-container {
transition: all .3s ease 0s; display: flex;
flex-direction: column;
transition: all .3s ease 0s;
}
.slide-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: 22rem;
margin-left: 2.5rem;
margin-right: 2.5rem;
z-index: 1;
transition: all .3s ease 0s;
}
.slide-img {
max-height: 15rem;
min-width: 20rem;
max-width: 25rem;
}
.slide-img-mobile {
height: 0;
width: 0;
}
.slide-img-container{
display: flex;
margin: 1.5rem;
justify-content: center;
align-items: center;
}
.slide-title {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 600;
font-size: 2rem;
margin-bottom: 0.5rem;
}
/* Any Subtitle */
.slide-subtitle {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 500;
font-size: 1.5rem;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
width: 100%;
}
.slide-text-container {
margin: 1.5rem;
width: 25rem;
}
.slide-unactive {
scale: 0.9;
margin-left: 2.25rem !important;
margin-right: 2.25rem !important;
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
}
} }
.slide-main { @media screen and (max-width: 1000px)
display: flex; {
border-radius: 0.4rem; .slide-container {
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); display: flex;
background-color: var(--color-background); flex-direction: column;
height: 22rem; transition: all .3s ease 0s;
margin-left: 2.5rem; }
margin-right: 2.5rem;
z-index: 1;
transition: all .3s ease 0s;
}
.slide-unactive { .slide-main {
scale: 0.9; display: flex;
margin-left: 2.25rem !important; border-radius: 0.4rem;
margin-right: 2.25rem !important; box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important; background-color: var(--color-background);
} height: 36rem;
width: 90dvw;
margin-left: 5dvw;
z-index: 1;
transition: all .3s ease 0s;
}
.slide-img-container{ .slide-img-mobile {
display: flex; max-height: 15rem;
margin: 1.5rem; min-width: 76dvw;
justify-content: center; max-width: 76dvw;
align-items: center; margin-top: 1.5rem;
} margin-bottom: 1.5rem;
}
.slide-img { .slide-img-container{
max-height: 15rem; visibility: hidden;
min-width: 20rem; width: 0;
max-width: 25rem; height: 0;
} }
.slide-text-container { .slide-title {
margin: 1.5rem; color: var(--color-text);
width: 25rem; font-family: 'Gabarito', sans-serif;
} font-weight: 600;
font-size: 2rem;
margin-bottom: 0;
}
.slide-title { /* Any Subtitle */
color: var(--color-text); .slide-subtitle {
font-family: 'Gabarito', sans-serif; color: var(--color-text);
font-weight: 600; font-family: 'Gabarito', sans-serif;
font-size: 2rem; font-weight: 500;
margin-bottom: 0.5rem; font-size: 1.25rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
width: 100%;
}
.slide-text-container {
margin: 1.5rem;
width: 75dvw;
}
.slide-unactive {
scale: 0.9;
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
}
} }
.slide-subtitle-container { .slide-subtitle-container {
@ -60,17 +143,6 @@
margin-left: 0.5rem; margin-left: 0.5rem;
} }
/* Any Subtitle */
.slide-subtitle {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 500;
font-size: 1.5rem;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
width: 100%;
}
.slide-justify { .slide-justify {
text-align: justify; text-align: justify;
text-justify:auto; text-justify:auto;

56
frontend/src/lib/css/slideshow.css
View file

@ -4,22 +4,46 @@
align-items: center; align-items: center;
} }
.slideshow_btn { @media screen and (min-width: 1000px)
z-index: 5; {
position: absolute; .slideshow_btn {
right: 0; z-index: 5;
margin-right: 2.5rem; position: absolute;
min-width: 5rem; right: 0;
min-height: 5rem; margin-right: 2.5rem;
background-color: var(--color-special); min-width: 5rem;
box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2); min-height: 5rem;
border-radius: 50%; background-color: var(--color-special);
display: flex; box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
justify-content: center; border-radius: 50%;
align-items: center; display: flex;
color: var(--color-background); justify-content: center;
border: 0; align-items: center;
transition: all .3s ease 0s; color: var(--color-background);
border: 0;
transition: all .3s ease 0s;
}
}
@media screen and (max-width: 1000px)
{
.slideshow_btn {
z-index: 5;
position: absolute;
right: 0;
margin-right: 1rem;
min-width: 3.5rem;
min-height: 3.5rem;
background-color: var(--color-special);
box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-background);
border: 0;
transition: all .3s ease 0s;
}
} }
.slideshow_btn:hover { .slideshow_btn:hover {

2
frontend/vite.config.js
View file

@ -4,7 +4,7 @@ import { defineConfig } from 'vite';
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()], plugins: [sveltekit()],
server: { server: {
host: '127.0.0.1', host: '0.0.0.0',
port: 5125, port: 5125,
}, },
}); });