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:1c4cdb515587f248bd784b0da64a498a0a9c7024
Branches Tags
karma:main

No commits in common. "b17729e9c0dc77e788e86d613b2c50cc9cf90172" and "1c4cdb515587f248bd784b0da64a498a0a9c7024" have entirely different histories.
b17729e9c0 ... 1c4cdb5155

2 changed files with 270 additions and 292 deletions
Show Stats Expand all files Collapse all files

212
assets/js/main.js
View File

@ -12,162 +12,149 @@
* 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 ( if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
position >= section.offsetTop && navbarlink.classList.add('active')
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( on('click', '.navbar .dropdown > a', function(e) {
"click", if (select('#navbar').classList.contains('navbar-mobile')) {
".navbar .dropdown > a", e.preventDefault()
function(e) { this.nextElementSibling.classList.toggle('dropdown-active')
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( on('click', '.scrollto', function(e) {
"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)
} }
} }
}); });
@ -175,96 +162,93 @@
/** /**
* 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( on('click', '#portfolio-flters li', function(e) {
"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,8 +9,6 @@
<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">
@ -42,10 +40,9 @@
<body> <body>
<!-- ======= Header ======= --> <!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex justify-content-center <header id="header" class="fixed-top d-flex justify-content-center align-items-center header-transparent">
align-items-center header-transparent">
<nav id="navbar" class="navbar" data-aos="fade-down" data-aos-delay="2000"> <nav id="navbar" class="navbar">
<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>
@ -62,17 +59,16 @@
<!-- ======= Hero Section ======= --> <!-- ======= Hero Section ======= -->
<section id="hero"> <section id="hero">
<div class="hero-container"> <div class="hero-container">
<h1 data-aos="zoom-in">Arnaud Fauconnet</h1> <h1>Arnaud Fauconnet</h1>
<h2 data-aos="fade" data-aos-delay="1000">I'm a Computer Science student</h2> <h2>I'm a Computer Science student</h2>
<span data-aos="fade-down" data-aos-delay="2000"><a href="#about" class="btn-scroll scrollto" title="Scroll <a href="#about" class="btn-scroll scrollto" title="Scroll Down"><i class="bx bx-chevron-down"></i></a>
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" data-aos="fade-up"> <section id="about" class="about">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title">
@ -87,13 +83,12 @@
</div> </div>
<div class="row"> <div class="row">
<div class="image col-lg-4 d-flex align-items-stretch <div
justify-content-center justify-content-lg-start"> class="image col-lg-4 d-flex align-items-stretch 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 mt-4 mt-lg-0"> <div class="col-lg-6">
<ul> <ul>
<li><i class="bi bi-chevron-right"></i> <li><i class="bi bi-chevron-right"></i>
<strong>Name:</strong> <strong>Name:</strong>
@ -127,14 +122,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-md-6"> <div class="progress col-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-md-6"> <div class="progress col-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"
@ -143,14 +138,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="progress col-md-6"> <div class="progress col-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-md-6"> <div class="progress col-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"
@ -159,14 +154,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="progress col-md-6"> <div class="progress col-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-md-6"> <div class="progress col-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"
@ -175,14 +170,14 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="progress col-md-6"> <div class="progress col-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-md-6"> <div class="progress col-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"
@ -556,7 +551,6 @@
<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>