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

Compare commits

base: karma:b17729e9c0dc77e788e86d613b2c50cc9cf90172
Branches Tags
karma:main
...
compare: karma:c15c00b9abc1a138092791ac83213dbb6d0b96c1
Branches Tags
karma:main

2 Commits
b17729e9c0 ... c15c00b9ab

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
Show Stats Expand all files Collapse all files

12
assets/js/main.js
View File

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

10
index.html
View File

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