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>
<meta charset="utf-8" />
<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%
</head>
<body data-sveltekit-preload-data="hover" data-theme="crimson">

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

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

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

@ -28,6 +28,7 @@
</div>
<div class="slide-text-container">
<h1 class="slide-title">{position}</h1>
<img class="slide-img-mobile" src={picture} alt="Experience" />
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
<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-main {active ? '' : 'slide-unactive'}">
<div class="slide-img-container">
<img class="slide-img" src={picture} alt="projects" />
<img class="slide-img" src={picture} alt="Projects" />
</div>
<div class="slide-text-container">
<h1 class="slide-title">{title}</h1>
<img class="slide-img-mobile" src={picture} alt="Projects" />
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
<p class="slide-subtitle slide-aftericon">

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

@ -20,13 +20,15 @@
data = data.reverse();
}
// Svelte bindings
let windowWidth = 0;
// Resizing variables
let resizing = false;
// Slideshow global variables
let slideshow_index = 0;
let slideshow_hidden = [];
let slideshowTimeline;
let slideshowElements;
let slideshowBubbles;
@ -34,6 +36,7 @@
// Timeline global variables
let slideshow;
let bubbles = [];
onMount(() => {
/* Slideshow */
//global writer count
@ -80,7 +83,7 @@
// Incrementing the transformValue for each element
let transformValue = 0;
for (const id of slideshow_hidden) {
transformValue += slideshowElements[id].clientWidth;
transformValue += slideshowElements[id].clientWidth;
}
// Translating elements
@ -166,13 +169,13 @@
}
</script>
<svelte:window on:resize={changeSize} />
<svelte:window on:resize={changeSize} bind:innerWidth={windowWidth}/>
<div class="slideshow" bind:this={slideshow}>
<button class="slideshow_btn" on:click={slideCards}>
<div>
<SvgIcon
size="45"
size={windowWidth < 1000 ? "30" : "45"}
path={slideshow_index >= data.length - 1
? mdiChevronLeft
: 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 {
display: flex;
justify-content: center;
@ -62,12 +99,6 @@ html {
width: 100%;
overflow-x: hidden;
z-index: 0;
padding-right: 2rem;
}
.name {
text-align: center;
text-shadow: -15px 5px 20px #00000030;
}
h1 {
@ -98,7 +129,7 @@ h2 {
.footer {
position: relative;
display: flex;
height: 10rem;
height: 30vh;
background-color: var(--color-text);
z-index: 3;
justify-content: center;
@ -106,14 +137,6 @@ h2 {
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 {
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%);
}
.pill-container img, svg {
.pill-container img {
margin-right: 0.5rem;
}
.pill-container svg {
margin-right: 0.5rem;
}

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

@ -1,21 +1,48 @@
.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));
@media screen and (min-width: 1000px)
{
.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));
}
.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 {
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));
@media screen and (max-width: 1000px)
{
.section-container {
margin-top: 2rem;
margin-left: 1rem;
display: flex;
flex-direction: row;
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 {

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

@ -1,52 +1,135 @@
.slide-container {
display: flex;
flex-direction: column;
transition: all .3s ease 0s;
@media screen and (min-width: 1000px)
{
.slide-container {
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 {
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;
}
@media screen and (max-width: 1000px)
{
.slide-container {
display: flex;
flex-direction: column;
transition: all .3s ease 0s;
}
.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 {
display: flex;
border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background);
height: 36rem;
width: 90dvw;
margin-left: 5dvw;
z-index: 1;
transition: all .3s ease 0s;
}
.slide-img-container{
display: flex;
margin: 1.5rem;
justify-content: center;
align-items: center;
}
.slide-img-mobile {
max-height: 15rem;
min-width: 76dvw;
max-width: 76dvw;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.slide-img {
max-height: 15rem;
min-width: 20rem;
max-width: 25rem;
}
.slide-img-container{
visibility: hidden;
width: 0;
height: 0;
}
.slide-text-container {
margin: 1.5rem;
width: 25rem;
}
.slide-title {
color: var(--color-text);
font-family: 'Gabarito', sans-serif;
font-weight: 600;
font-size: 2rem;
margin-bottom: 0;
}
.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.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 {
@ -60,17 +143,6 @@
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 {
text-align: justify;
text-justify:auto;

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

@ -4,22 +4,46 @@
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: 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;
@media screen and (min-width: 1000px)
{
.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: 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;
}
}
@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 {

2
frontend/vite.config.js
View file

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