diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css index f1539da..0a93fe7 100644 --- a/frontend/src/lib/css/cv.css +++ b/frontend/src/lib/css/cv.css @@ -12,15 +12,21 @@ html { } .sidebar { - width: 100%; - height: 100%; - flex-basis: 20rem; + position: absolute; + width: 16rem; + height: 75rem; 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; z-index: 2; transition: all 0s ease 0s; } +.fake-sidebar { + width: 100%; + flex-basis: 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); +} + .profile-picture-container { display: flex; justify-content: center; diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index b71e0f1..4c5f0e9 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -33,23 +33,26 @@ let sidebar_height = 0; $: scrollY = 0; $: innerHeight = 0; + $: outerHeight = 0; onMount(() => { sidebar_height = sidebar.offsetHeight; + console.log(sidebar_height); sidebarScrollingHandler(); }); function sidebarScrollingHandler() { if(scrollY+innerHeight >= sidebar_height) { - const translateValue = (scrollY+innerHeight)-sidebar_height; - sidebar.style.transform = `translateY(${translateValue}px)`; + sidebar.style.position = 'fixed'; + sidebar.style.top = `-${sidebar_height-innerHeight}px`; } else { - sidebar.style.transform = ''; + sidebar.style.position = 'absolute'; + sidebar.style.top = ''; } } - + {#if data.status == 0}
@@ -82,6 +85,7 @@ description={cv.info.softskills} />
+

{cv.info.full_name}