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

Compare commits

base: karma:1c4cdb515587f248bd784b0da64a498a0a9c7024
Branches Tags
karma:main
...
compare: karma:b17729e9c0dc77e788e86d613b2c50cc9cf90172
Branches Tags
karma:main

4 Commits
1c4cdb5155 ... b17729e9c0

Author SHA1 Message Date
Karma Riuk
b17729e9c0 fix: margins and displaying stuff for small 
screens
 2023-09-02 16:37:01 +02:00
Karma Riuk
fe83b657e1 started adding transitions 2023-09-02 16:36:58 +02:00
Karma Riuk
fae9c15584 added transitions library 2023-09-02 16:34:38 +02:00
Karma Riuk
a30c03c88c formatted main.js 2023-09-02 15:07:03 +02:00
2 changed files with 292 additions and 270 deletions
Show Stats Expand all files Collapse all files

212
assets/js/main.js
View File

@ -12,149 +12,162 @@
* Easy selector helper function * Easy selector helper function
*/ */
const select = (el, all = false) => { const select = (el, all = false) => {
el = el.trim() el = el.trim();
if (all) { if (all) {
return [...document.querySelectorAll(el)] return [...document.querySelectorAll(el)];
} else { } else {
return document.querySelector(el) return document.querySelector(el);
}
} }
};
/** /**
* Easy event listener function * Easy event listener function
*/ */
const on = (type, el, listener, all = false) => { const on = (type, el, listener, all = false) => {
let selectEl = select(el, all) let selectEl = select(el, all);
if (selectEl) { if (selectEl) {
if (all) { if (all) {
selectEl.forEach(e => e.addEventListener(type, listener)) selectEl.forEach((e) => e.addEventListener(type, listener));
} else { } else {
selectEl.addEventListener(type, listener) selectEl.addEventListener(type, listener);
}
} }
} }
};
/** /**
* Easy on scroll event listener * Easy on scroll event listener
*/ */
const onscroll = (el, listener) => { const onscroll = (el, listener) => {
el.addEventListener('scroll', listener) el.addEventListener("scroll", listener);
} };
/** /**
* Navbar links active state on scroll * Navbar links active state on scroll
*/ */
let navbarlinks = select('#navbar .scrollto', true) let navbarlinks = select("#navbar .scrollto", true);
const navbarlinksActive = () => { const navbarlinksActive = () => {
let position = window.scrollY + 200 let position = window.scrollY + 200;
navbarlinks.forEach(navbarlink => { navbarlinks.forEach((navbarlink) => {
if (!navbarlink.hash) return if (!navbarlink.hash) return;
let section = select(navbarlink.hash) let section = select(navbarlink.hash);
if (!section) return if (!section) return;
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) { if (
navbarlink.classList.add('active') position >= section.offsetTop &&
position <= section.offsetTop + section.offsetHeight
) {
navbarlink.classList.add("active");
} else { } else {
navbarlink.classList.remove('active') navbarlink.classList.remove("active");
} }
}) });
} };
window.addEventListener('load', navbarlinksActive) window.addEventListener("load", navbarlinksActive);
onscroll(document, navbarlinksActive) onscroll(document, navbarlinksActive);
/** /**
* Scrolls to an element with header offset * Scrolls to an element with header offset
*/ */
const scrollto = (el) => { const scrollto = (el) => {
let header = select('#header') let header = select("#header");
let offset = header.offsetHeight let offset = header.offsetHeight;
if (!header.classList.contains('header-scrolled')) { if (!header.classList.contains("header-scrolled")) {
offset -= 20 offset -= 20;
} }
let elementPos = select(el).offsetTop let elementPos = select(el).offsetTop;
window.scrollTo({ window.scrollTo({
top: elementPos - offset, top: elementPos - offset,
behavior: 'smooth' behavior: "smooth",
}) });
} };
/** /**
* Toggle .header-scrolled class to #header when page is scrolled * Toggle .header-scrolled class to #header when page is scrolled
*/ */
let selectHeader = select('#header') let selectHeader = select("#header");
if (selectHeader) { if (selectHeader) {
const headerScrolled = () => { const headerScrolled = () => {
if (window.scrollY > 100) { if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled') selectHeader.classList.add("header-scrolled");
} else { } else {
selectHeader.classList.remove('header-scrolled') selectHeader.classList.remove("header-scrolled");
} }
} };
window.addEventListener('load', headerScrolled) window.addEventListener("load", headerScrolled);
onscroll(document, headerScrolled) onscroll(document, headerScrolled);
} }
/** /**
* Back to top button * Back to top button
*/ */
let backtotop = select('.back-to-top') let backtotop = select(".back-to-top");
if (backtotop) { if (backtotop) {
const toggleBacktotop = () => { const toggleBacktotop = () => {
if (window.scrollY > 100) { if (window.scrollY > 100) {
backtotop.classList.add('active') backtotop.classList.add("active");
} else { } else {
backtotop.classList.remove('active') backtotop.classList.remove("active");
} }
} };
window.addEventListener('load', toggleBacktotop) window.addEventListener("load", toggleBacktotop);
onscroll(document, toggleBacktotop) onscroll(document, toggleBacktotop);
} }
/** /**
* Mobile nav toggle * Mobile nav toggle
*/ */
on('click', '.mobile-nav-toggle', function(e) { on("click", ".mobile-nav-toggle", function(e) {
select('#navbar').classList.toggle('navbar-mobile') select("#navbar").classList.toggle("navbar-mobile");
this.classList.toggle('bi-list') this.classList.toggle("bi-list");
this.classList.toggle('bi-x') this.classList.toggle("bi-x");
}) });
/** /**
* Mobile nav dropdowns activate * Mobile nav dropdowns activate
*/ */
on('click', '.navbar .dropdown > a', function(e) { on(
if (select('#navbar').classList.contains('navbar-mobile')) { "click",
e.preventDefault() ".navbar .dropdown > a",
this.nextElementSibling.classList.toggle('dropdown-active') function(e) {
if (select("#navbar").classList.contains("navbar-mobile")) {
e.preventDefault();
this.nextElementSibling.classList.toggle("dropdown-active");
} }
}, true) },
true,
);
/** /**
* Scrool with ofset on links with a class name .scrollto * Scrool with ofset on links with a class name .scrollto
*/ */
on('click', '.scrollto', function(e) { on(
"click",
".scrollto",
function(e) {
if (select(this.hash)) { if (select(this.hash)) {
e.preventDefault() e.preventDefault();
let navbar = select('#navbar') let navbar = select("#navbar");
if (navbar.classList.contains('navbar-mobile')) { if (navbar.classList.contains("navbar-mobile")) {
navbar.classList.remove('navbar-mobile') navbar.classList.remove("navbar-mobile");
let navbarToggle = select('.mobile-nav-toggle') let navbarToggle = select(".mobile-nav-toggle");
navbarToggle.classList.toggle('bi-list') navbarToggle.classList.toggle("bi-list");
navbarToggle.classList.toggle('bi-x') navbarToggle.classList.toggle("bi-x");
} }
scrollto(this.hash) scrollto(this.hash);
} }
}, true) },
true,
);
/** /**
* Scroll with ofset on page load with hash links in the url * Scroll with ofset on page load with hash links in the url
*/ */
window.addEventListener('load', () => { window.addEventListener("load", () => {
if (window.location.hash) { if (window.location.hash) {
if (select(window.location.hash)) { if (select(window.location.hash)) {
scrollto(window.location.hash) scrollto(window.location.hash);
} }
} }
}); });
@ -162,93 +175,96 @@
/** /**
* Skills animation * Skills animation
*/ */
let skilsContent = select('.skills-content'); let skilsContent = select(".skills-content");
if (skilsContent) { if (skilsContent) {
new Waypoint({ new Waypoint({
element: skilsContent, element: skilsContent,
offset: '80%', offset: "80%",
handler: function(direction) { handler: function(direction) {
let progress = select('.progress .progress-bar', true); let progress = select(".progress .progress-bar", true);
progress.forEach((el) => { progress.forEach((el) => {
el.style.width = el.getAttribute('aria-valuenow') + '%' el.style.width = el.getAttribute("aria-valuenow") + "%";
});
},
}); });
}
})
} }
/** /**
* Testimonials slider * Testimonials slider
*/ */
new Swiper('.testimonials-slider', { new Swiper(".testimonials-slider", {
speed: 600, speed: 600,
loop: true, loop: true,
autoplay: { autoplay: {
delay: 5000, delay: 5000,
disableOnInteraction: false disableOnInteraction: false,
}, },
slidesPerView: 'auto', slidesPerView: "auto",
pagination: { pagination: {
el: '.swiper-pagination', el: ".swiper-pagination",
type: 'bullets', type: "bullets",
clickable: true clickable: true,
} },
}); });
/** /**
* Porfolio isotope and filter * Porfolio isotope and filter
*/ */
window.addEventListener('load', () => { window.addEventListener("load", () => {
let portfolioContainer = select('.portfolio-container'); let portfolioContainer = select(".portfolio-container");
if (portfolioContainer) { if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, { let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item' itemSelector: ".portfolio-item",
}); });
let portfolioFilters = select('#portfolio-flters li', true); let portfolioFilters = select("#portfolio-flters li", true);
on('click', '#portfolio-flters li', function(e) { on(
"click",
"#portfolio-flters li",
function(e) {
e.preventDefault(); e.preventDefault();
portfolioFilters.forEach(function(el) { portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active'); el.classList.remove("filter-active");
}); });
this.classList.add('filter-active'); this.classList.add("filter-active");
portfolioIsotope.arrange({ portfolioIsotope.arrange({
filter: this.getAttribute('data-filter') filter: this.getAttribute("data-filter"),
}); });
},
}, true); true,
);
} }
AOS.init();
}); });
/** /**
* Initiate portfolio lightbox * Initiate portfolio lightbox
*/ */
const portfolioLightbox = GLightbox({ const portfolioLightbox = GLightbox({
selector: '.portfolio-lightbox' selector: ".portfolio-lightbox",
}); });
/** /**
* Portfolio details slider * Portfolio details slider
*/ */
new Swiper('.portfolio-details-slider', { new Swiper(".portfolio-details-slider", {
speed: 400, speed: 400,
loop: true, loop: true,
autoplay: { autoplay: {
delay: 5000, delay: 5000,
disableOnInteraction: false disableOnInteraction: false,
}, },
pagination: { pagination: {
el: '.swiper-pagination', el: ".swiper-pagination",
type: 'bullets', type: "bullets",
clickable: true clickable: true,
} },
}); });
/** /**
* Initiate Pure Counter * Initiate Pure Counter
*/ */
new PureCounter(); new PureCounter();
})();
})()

40
index.html
View File

@ -9,6 +9,8 @@
<meta content="" name="description"> <meta content="" name="description">
<meta content="" name="keywords"> <meta content="" name="keywords">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Favicons --> <!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon"> <link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon"> <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
@ -40,9 +42,10 @@
<body> <body>
<!-- ======= Header ======= --> <!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex justify-content-center align-items-center header-transparent"> <header id="header" class="fixed-top d-flex justify-content-center
align-items-center header-transparent">
<nav id="navbar" class="navbar"> <nav id="navbar" class="navbar" data-aos="fade-down" data-aos-delay="2000">
<ul> <ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li> <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li> <li><a class="nav-link scrollto" href="#about">About</a></li>
@ -59,16 +62,17 @@
<!-- ======= Hero Section ======= --> <!-- ======= Hero Section ======= -->
<section id="hero"> <section id="hero">
<div class="hero-container"> <div class="hero-container">
<h1>Arnaud Fauconnet</h1> <h1 data-aos="zoom-in">Arnaud Fauconnet</h1>
<h2>I'm a Computer Science student</h2> <h2 data-aos="fade" data-aos-delay="1000">I'm a Computer Science student</h2>
<a href="#about" class="btn-scroll scrollto" title="Scroll Down"><i class="bx bx-chevron-down"></i></a> <span data-aos="fade-down" data-aos-delay="2000"><a href="#about" class="btn-scroll scrollto" title="Scroll
Down"><i class="bx bx-chevron-down"></i></a></span>
</div> </div>
</section><!-- End Hero --> </section><!-- End Hero -->
<main id="main"> <main id="main">
<!-- ======= About Me Section ======= --> <!-- ======= About Me Section ======= -->
<section id="about" class="about"> <section id="about" class="about" data-aos="fade-up">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title">
@ -83,12 +87,13 @@
</div> </div>
<div class="row"> <div class="row">
<div <div class="image col-lg-4 d-flex align-items-stretch
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">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6 mt-4 mt-lg-0">
<ul> <ul>
<li><i class="bi bi-chevron-right"></i> <li><i class="bi bi-chevron-right"></i>
<strong>Name:</strong> <strong>Name:</strong>
@ -122,14 +127,14 @@
<div class="skills-content ps-lg-4"> <div class="skills-content ps-lg-4">
<div class="row"> <div class="row">
<div class="progress col-6"> <div class="progress col-md-6">
<span class="skill">Python <i class="val">95%</i></span> <span class="skill">Python <i class="val">95%</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="95" <div class="progress-bar" role="progressbar" aria-valuenow="95"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
<div class="progress col-6"> <div class="progress col-md-6">
<span class="skill">Java <i class="val">90%</i></span> <span class="skill">Java <i class="val">90%</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" <div class="progress-bar" role="progressbar" aria-valuenow="90"
@ -138,14 +143,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="progress col-6"> <div class="progress col-md-6">
<span class="skill">C <i class="val">85%</i></span> <span class="skill">C <i class="val">85%</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="85" <div class="progress-bar" role="progressbar" aria-valuenow="85"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
<div class="progress col-6"> <div class="progress col-md-6">
<span class="skill">C++ <i class="val">95%</i></span> <span class="skill">C++ <i class="val">95%</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="95" <div class="progress-bar" role="progressbar" aria-valuenow="95"
@ -154,14 +159,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="progress col-6"> <div class="progress col-md-6">
<span class="skill">HTML/CSS <i class="val">100%</i></span> <span class="skill">HTML/CSS <i class="val">100%</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" <div class="progress-bar" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
<div class="progress col-6"> <div class="progress col-md-6">
<span class="skill">Javscript / Typescript <i class="val">95%</i></span> <span class="skill">Javscript / Typescript <i class="val">95%</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="95" <div class="progress-bar" role="progressbar" aria-valuenow="95"
@ -170,14 +175,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="progress col-6"> <div class="progress col-md-6">
<span class="skill">Bash <i class="val">90%</i></span> <span class="skill">Bash <i class="val">90%</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" <div class="progress-bar" role="progressbar" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
<div class="progress col-6"> <div class="progress col-md-6">
<span class="skill">Lua <i class="val">85%</i></span> <span class="skill">Lua <i class="val">85%</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="85" <div class="progress-bar" role="progressbar" aria-valuenow="85"
@ -551,6 +556,7 @@
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script> <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script> <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script> <script src="assets/vendor/php-email-form/validate.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<!-- Template Main JS File --> <!-- Template Main JS File -->
<script src="assets/js/main.js"></script> <script src="assets/js/main.js"></script>