karma/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made the resume better (is collpased by default,

Browse Source 
and can be expanded)
This commit is contained in:
Karma Riuk 2025-02-20 12:00:25 +01:00
parent 3c5ce5c07a
commit 9f3e554624
3 changed files with 188 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
assets/css/style.css
View File

@ -682,6 +682,45 @@ section {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
}
.resume-content {
max-height: 110vh;
overflow-y: hidden;
}
.resume-content.expanded {
display:block;
max-height: none;
overflow-y: visible;
}
.resume-fade {
position: absolute;
display:flex;
justify-content: center;
bottom: 0;
width: 100%;
height: 50px;
background: linear-gradient(to bottom, transparent, var(--background) 50%);
pointer-events: none;
}
.resume-fade.expanded {
background: var(--background);
}
.resume-btn {
position: absolute;
bottom: 0;
font-size: 1em !important;
border: none;
text-align: center;
z-index: 100;
box-shadow: none !important;
pointer-events: auto;
}
.resume .resume-title {
@ -694,7 +733,7 @@ section {
.resume .resume-item {
padding: 0 0 20px 20px;
margin-top: -2px;
margin-left: 8px;
border-left: 2px solid var(--resume-border);
position: relative;
}

13
assets/js/main.js
View File

@ -161,6 +161,19 @@
true
);
on("click", "#resume-toggle", e => {
console.log("sup")
const sec = select("#resume-section");
const btn = e.target;
sec.classList.toggle("expanded");
select(".resume-fade").classList.toggle("expanded");
if (sec.classList.contains("expanded"))
btn.innerHTML = 'Hide <i class="bi bi-chevron-up"></i>';
else
btn.innerHTML = 'Expand <i class="bi bi-chevron-down"></i>';
AOS.refresh();
})
/**
* Scroll with ofset on page load with hash links in the url
*/

12
index.html
View File

@ -446,6 +446,8 @@
<div data-aos="fade-up-left">
<h3 class="resume-title">Professional Experience</h3>
<div class="resume-content" id="resume-section">
<div>
<div class="resume-item">
<h4>Research Lab Assistant</h4>
<h5>August 2024 - June 2024</h5>
@ -509,7 +511,8 @@
</div>
</div>
<div class="resume-item">
<div>
<div class="resume-item" data-aos="fade-up">
<h4>UROP</h4>
<h5>Summer 2023</h5>
<p><em>Internship at Università della Svizzera Italiana, Lugano, CH</em></p>
@ -534,6 +537,7 @@
</ul>
</p>
</div>
</div>
<div class="resume-item" data-aos="fade-up">
<h4>Front-end Intern</h4>
@ -572,6 +576,12 @@
</ul>
</p>
</div>
<div class="resume-fade">
<button id="resume-toggle" class="btn resume-btn">Expand <i class="bi bi-chevron-down"></i></button>
</div>
</div>
</div>
</div>
</div>