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

Frontend: Fixing major issues with the sidebar when on large screens. Optimised the code to use less scrollY.

Browse source
This commit is contained in:
Yohan Boujon 2024-01-30 22:48:10 +01:00
parent 06188f1faa
commit e9563e6a5d
2 changed files with 178 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,14 +9,12 @@
.sidebar {
position: absolute;
width: 15rem;
height: 75rem;
background-color: var(--color-special);
transition: all 0s ease 0s;
margin-left: 1rem;
}
.fake-sidebar {
width: 100%;
flex-basis: 20rem;
width: 20rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
background-color: var(--color-special);
}

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

@ -16,7 +16,7 @@
mdiXml,
mdiApplication,
mdiEarth,
mdiHeart
mdiHeart,
} from "@mdi/js";
// Main
@ -24,11 +24,11 @@
import SubSection from "$lib/components/subsection.svelte";
import Education from "$lib/components/education.svelte";
import Experience from "$lib/components/experience.svelte";
import Projects from "$lib/components/projects.svelte"
import Projects from "$lib/components/projects.svelte";
import SlideShow from "$lib/components/slideshow.svelte";
import Pill from "$lib/components/pill.svelte"
import FlagComponent from "$lib/components/flag-component.svelte"
import ProjectsPopup from "$lib/components/projects-popup.svelte"
import Pill from "$lib/components/pill.svelte";
import FlagComponent from "$lib/components/flag-component.svelte";
import ProjectsPopup from "$lib/components/projects-popup.svelte";
import { mdiSchool, mdiBriefcase, mdiWrench, mdiPencil } from "@mdi/js";
import { onMount } from "svelte";
@ -39,8 +39,8 @@
// Sidebar sticky
let sidebar;
let containerCv;
let footer;
let moving_position = 0;
$: scrollY = 0;
$: innerHeight = 0;
onMount(() => {
@ -48,20 +48,30 @@
});
function sidebarScrollingHandler() {
let isBottom = (scrollY+innerHeight >= footer.offsetTop);
let isBottom = scrollY + innerHeight >= footer.offsetTop;
let isMoved = scrollY + innerHeight >= sidebar.offsetHeight;
let littleScreen = innerHeight < sidebar.offsetHeight;
console.log(littleScreen);
// Only having the sticky sidebar if the size of the screen is too 'little'
// Testing if sidebar is outside of scrolling scope
if(scrollY+innerHeight >= sidebar.offsetHeight && !isBottom) {
sidebar.style.position = 'fixed';
sidebar.style.top = `-${sidebar.offsetHeight-innerHeight}px`;
moving_position = scrollY;
if (isMoved && !isBottom) {
sidebar.style.position = "fixed";
sidebar.style.top = littleScreen
? `${innerHeight - sidebar.offsetHeight}px`
: "0px";
}
else if(isBottom) {
sidebar.style.position = 'absolute';
sidebar.style.top = `${moving_position-(sidebar.offsetHeight-innerHeight)}px`;
// Checking if at the bottom, calculating the diff. between the cv and the sidebar heights
else if (isBottom && littleScreen) {
sidebar.style.position = "absolute";
sidebar.style.top = `${
containerCv.offsetHeight - sidebar.offsetHeight
}px`;
}
else {
sidebar.style.position = 'absolute';
sidebar.style.top = '';
// Only putting absolute if on little screen
else if (littleScreen) {
sidebar.style.position = "absolute";
sidebar.style.top = "";
}
}
@ -72,11 +82,17 @@
}
</script>
<svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
<svelte:window
bind:scrollY
bind:innerHeight
bind:innerWidth
on:scroll={sidebarScrollingHandler}
on:resize={mobileCheck}
/>
{#if data.status == 0}
<ProjectsPopup tags={cv.tags} />
<div class="container-cv">
<div class="container-cv" bind:this={containerCv}>
<!-- SIDEBAR DIV (LEFT) -->
<div class="sidebar" bind:this={sidebar}>
<div class="profile-picture-container">
@ -87,15 +103,9 @@
/>
</div>
<SidebarComponent icon={mdiAccount} description={birth_year} />
<SidebarComponent
icon={mdiEmailOutline}
description={cv.info.email}
/>
<SidebarComponent icon={mdiEmailOutline} description={cv.info.email} />
{#if cv.info.phone_number != null}
<SidebarComponent
icon={mdiPhone}
description={cv.info.phone_number}
/>
<SidebarComponent icon={mdiPhone} description={cv.info.phone_number} />
{/if}
<SidebarComponent
icon={mdiStar}
@ -128,33 +138,50 @@
reverse="true"
/>
<Section icon={mdiWrench} title="Projects" />
<SlideShow
data={cv.skills.project}
type={Projects}
/>
<SlideShow data={cv.skills.project} type={Projects} />
<Section icon={mdiPencil} title="Skills" />
<SubSection icon={mdiXml} title="Programming Languages" />
<div class="subsection">
{#each cv.skills.programming_languages as pilldata, index (index)}
<Pill name={pilldata.lang} type_icon={pilldata.type_icon} icon={pilldata.icon} color={pilldata.color} show_tooltip={true} tooltip_data={cv.project_programming[index]}/>
<Pill
name={pilldata.lang}
type_icon={pilldata.type_icon}
icon={pilldata.icon}
color={pilldata.color}
show_tooltip={true}
tooltip_data={cv.project_programming[index]}
/>
{/each}
</div>
<SubSection icon={mdiApplication} title="Software" />
<div class="subsection">
{#each cv.skills.softwares as pilldata, index (index)}
<Pill name={pilldata.software} type_icon={pilldata.type_icon} icon={pilldata.icon} color={pilldata.color} show_tooltip={true} tooltip_data={cv.project_software[index]}/>
<Pill
name={pilldata.software}
type_icon={pilldata.type_icon}
icon={pilldata.icon}
color={pilldata.color}
show_tooltip={true}
tooltip_data={cv.project_software[index]}
/>
{/each}
</div>
<SubSection icon={mdiEarth} title="Languages" />
<div class="subsection flag-container end">
{#each cv.skills.languages as langdata}
<FlagComponent lang={langdata.lang} level={langdata.level} icon={langdata.icon_alpha}/>
<FlagComponent
lang={langdata.lang}
level={langdata.level}
icon={langdata.icon_alpha}
/>
{/each}
</div>
</div>
</div>
<div class="footer" bind:this={footer}>
<p>Made with <SvgIcon size="20" path={mdiHeart} type="mdi"/> using Svelte</p>
<p>
Made with <SvgIcon size="20" path={mdiHeart} type="mdi" /> using Svelte
</p>
<p>All rights reserved, Yohan Boujon • {new Date().getFullYear()}</p>
</div>
{:else}