Compare commits

...

2 Commits

Author SHA1 Message Date
Karma Riuk
c15c00b9ab added animations for about me section 2023-09-02 17:11:43 +02:00
Karma Riuk
f1a0f407bd fix: progress bar animations 2023-09-02 17:10:48 +02:00
2 changed files with 18 additions and 16 deletions

View File

@ -175,18 +175,20 @@
/**
* Skills animation
*/
let skilsContent = select(".skills-content");
if (skilsContent) {
let skillsContent = select(".skills-content .progress", true);
if (skillsContent) {
skillsContent.forEach((skill) => {
new Waypoint({
element: skilsContent,
offset: "80%",
element: skill,
offset: "100%",
handler: function(direction) {
let progress = select(".progress .progress-bar", true);
let progress = skill.querySelectorAll(".progress-bar");
progress.forEach((el) => {
el.style.width = el.getAttribute("aria-valuenow") + "%";
});
},
});
});
}
/**

View File

@ -72,10 +72,10 @@
<main id="main">
<!-- ======= About Me Section ======= -->
<section id="about" class="about" data-aos="fade-up">
<section id="about" class="about">
<div class="container">
<div class="section-title">
<div class="section-title" data-aos="fade-up">
<span>About Me</span>
<h2>About Me</h2>
<p> Passionate about computer science and love to have lengthy conversations
@ -86,12 +86,12 @@
</p>
</div>
<div class="row">
<div class="row" data-aos="fade-up">
<div class="image col-lg-4 d-flex align-items-stretch
justify-content-center justify-content-lg-start">
</div>
<div class="content col-lg-8 ps-lg-4 d-flex flex-column align-items-stretch justify-content-center">
<div class="content col-lg-8 ps-lg-4 d-flex flex-column align-items-stretch justify-content-center"
data-aos="fade-up">
<div class="row">
<div class="col-lg-6 mt-4 mt-lg-0">
<ul>