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

added left and right fades and made so that on

Browse Source 
mobiles it's just up
This commit is contained in:
Karma Riuk 2023-09-03 00:10:57 +02:00
parent 891fe84af8
commit bbf67c1221
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/js/main.js
View File

@ -238,6 +238,13 @@
true, true,
); );
} }
// let horizontal_aoss = document.querySelectorAll("[data-aos~='left'], [data-aos~='right']")
if (window.matchMedia("(max-width: 768px)").matches) {
let horizontal_aoss = document.querySelectorAll(
`[data-aos$="left"], [data-aos$="right"]`,
);
horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
}
AOS.init(); AOS.init();
}); });

10
index.html
View File

@ -86,12 +86,12 @@
</p> </p>
</div> </div>
<div class="row" data-aos="fade-up"> <div class="row">
<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" data-aos="fade-up-right">
</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"> data-aos="fade-up-left">
<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>
@ -210,7 +210,7 @@
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<div data-aos="fade-up"> <div data-aos="fade-up-right">
<h3 class="resume-title">Sumary</h3> <h3 class="resume-title">Sumary</h3>
<div class="resume-item pb-0"> <div class="resume-item pb-0">
<h4>Arnaud Fauconnet</h4> <h4>Arnaud Fauconnet</h4>
@ -263,7 +263,7 @@
</div> </div>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div data-aos="fade-up"> <div data-aos="fade-up-left">
<h3 class="resume-title">Professional Experience</h3> <h3 class="resume-title">Professional Experience</h3>
<div class="resume-item"> <div class="resume-item">
<h4>UROP</h4> <h4>UROP</h4>