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

Frontend: The profile picture will be shown directly to then appear as a button on mobile.

Browse source
This commit is contained in:
Yohan Boujon 2024-02-07 23:29:44 +01:00
parent 4ad753597c
commit 71bce7efa3
2 changed files with 33 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -91,7 +91,15 @@
border-bottom-right-radius: 1rem; border-bottom-right-radius: 1rem;
} }
#topbar>button { .topbar-button-big {
min-width: 5rem !important;
min-height: 5rem !important;
background-size: cover;
margin-left: 2rem !important;
box-shadow: 0px 8px 18px -1px #261C2C60 !important;
}
.topbar-button {
transition: all .3s ease 0s; transition: all .3s ease 0s;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
@ -100,19 +108,19 @@
border-radius: 50%; border-radius: 50%;
min-width: 2.5rem; min-width: 2.5rem;
min-height: 2.5rem; min-height: 2.5rem;
display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 1rem; margin-left: 1rem;
box-shadow: 0px 8px 12px -1px #0174BE50; box-shadow: 0px 8px 12px -1px #0174BE50;
display: flex;
} }
#topbar>button:hover { .topbar-button:hover {
color: var(--color-special); color: var(--color-special);
background-color: var(--color-background); background-color: var(--color-background);
} }
#topbar>button:active { .topbar-button:active {
transform: translateY(3px); transform: translateY(3px);
box-shadow: 0px 3px 8px -1px #0174BEAA; box-shadow: 0px 3px 8px -1px #0174BEAA;
} }
@ -129,9 +137,11 @@
text-align: center; text-align: center;
text-shadow: -15px 5px 20px #00000030; text-shadow: -15px 5px 20px #00000030;
padding: 0; padding: 0;
padding-right: 2rem;
margin: 0.5rem; margin: 0.5rem;
font-size: 3rem; font-size: 2rem;
transition: all .3s ease 0s; transition: all .3s ease 0s;
text-align: end;
} }
.topbar-name-little { .topbar-name-little {
@ -155,6 +165,7 @@
margin-top: 0; margin-top: 0;
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.5rem;
box-shadow: rgba(0, 14, 83, 0.12) 0px 30px 25px, rgba(0, 14, 83, 0.05) 0px 5px 10px; box-shadow: rgba(0, 14, 83, 0.12) 0px 30px 25px, rgba(0, 14, 83, 0.05) 0px 5px 10px;
} }

22
frontend/src/routes/lang=[lang]/+page.svelte
View file

@ -57,12 +57,12 @@
topbar.style.height = "53px"; topbar.style.height = "53px";
topbar.style.backgroundColor = "#F8F1F1AE"; topbar.style.backgroundColor = "#F8F1F1AE";
topbar.style.boxShadow = "0px 8px 18px -1px #1d4a6560"; topbar.style.boxShadow = "0px 8px 18px -1px #1d4a6560";
buttonTopbar.style.display = "flex"; buttonTopbar.style.backgroundImage = "";
} else { } else {
topbar.style.height = ""; topbar.style.height = "";
topbar.style.backgroundColor = "#F8F1F100"; topbar.style.backgroundColor = "#F8F1F100";
topbar.style.boxShadow = ""; topbar.style.boxShadow = "";
buttonTopbar.style.display = "none"; buttonTopbar.style.backgroundImage = `url('${cv.info.profile_pic}')`;
} }
} }
@ -104,8 +104,16 @@
<!-- MOBILE TOP BAR --> <!-- MOBILE TOP BAR -->
{#if innerWidth < 1000} {#if innerWidth < 1000}
<div id="topbar" bind:this={topbar}> <div id="topbar" bind:this={topbar}>
<button on:click={() => showSidebar(true)} bind:this={buttonTopbar}> <button
<SvgIcon size="23" path={mdiAccount} type="mdi" /> class={scrollY <= 53
? "topbar-button topbar-button-big"
: "topbar-button"}
on:click={() => showSidebar(true)}
bind:this={buttonTopbar}
>
{#if scrollY > 53}
<SvgIcon size="23" path={mdiAccount} type="mdi" />
{/if}
</button> </button>
<h1 class={scrollY <= 53 ? "topbar-name" : "topbar-name-little"}> <h1 class={scrollY <= 53 ? "topbar-name" : "topbar-name-little"}>
{cv.info.full_name} {cv.info.full_name}
@ -134,7 +142,11 @@
reverse="true" reverse="true"
/> />
<Section icon={mdiWrench} title={text.projects} /> <Section icon={mdiWrench} title={text.projects} />
<SlideShow data={cv.skills.project} type={Projects} show_max_index={true} /> <SlideShow
data={cv.skills.project}
type={Projects}
show_max_index={true}
/>
<Section icon={mdiPencil} title={text.skills} /> <Section icon={mdiPencil} title={text.skills} />
<SubSection icon={mdiXml} title={text.programming_languages} /> <SubSection icon={mdiXml} title={text.programming_languages} />
<div class="subsection"> <div class="subsection">