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

522
assets/js/main.js
View File

@ -1,270 +1,254 @@
/** /**
* Template Name: Laura * Template Name: Laura
* Updated: Jul 27 2023 with Bootstrap v5.3.1 * Updated: Jul 27 2023 with Bootstrap v5.3.1
* Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/ * Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
* Author: BootstrapMade.com * Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/ * License: https://bootstrapmade.com/license/
*/ */
(function() { (function() {
"use strict"; "use strict";
/** /**
* 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 } else {
) { navbarlink.classList.remove('active')
navbarlink.classList.add("active"); }
} else { })
navbarlink.classList.remove("active"); }
} window.addEventListener('load', navbarlinksActive)
}); onscroll(document, navbarlinksActive)
};
window.addEventListener("load", navbarlinksActive); /**
onscroll(document, navbarlinksActive); * Scrolls to an element with header offset
*/
/** const scrollto = (el) => {
* Scrolls to an element with header offset let header = select('#header')
*/ let offset = header.offsetHeight
const scrollto = (el) => {
let header = select("#header"); if (!header.classList.contains('header-scrolled')) {
let offset = header.offsetHeight; offset -= 20
}
if (!header.classList.contains("header-scrolled")) {
offset -= 20; let elementPos = select(el).offsetTop
} window.scrollTo({
top: elementPos - offset,
let elementPos = select(el).offsetTop; behavior: 'smooth'
window.scrollTo({ })
top: elementPos - offset, }
behavior: "smooth",
}); /**
}; * Toggle .header-scrolled class to #header when page is scrolled
*/
/** let selectHeader = select('#header')
* Toggle .header-scrolled class to #header when page is scrolled if (selectHeader) {
*/ const headerScrolled = () => {
let selectHeader = select("#header"); if (window.scrollY > 100) {
if (selectHeader) { selectHeader.classList.add('header-scrolled')
const headerScrolled = () => { } else {
if (window.scrollY > 100) { selectHeader.classList.remove('header-scrolled')
selectHeader.classList.add("header-scrolled"); }
} else { }
selectHeader.classList.remove("header-scrolled"); window.addEventListener('load', headerScrolled)
} onscroll(document, headerScrolled)
}; }
window.addEventListener("load", headerScrolled);
onscroll(document, headerScrolled); /**
} * Back to top button
*/
/** let backtotop = select('.back-to-top')
* Back to top button if (backtotop) {
*/ const toggleBacktotop = () => {
let backtotop = select(".back-to-top"); if (window.scrollY > 100) {
if (backtotop) { backtotop.classList.add('active')
const toggleBacktotop = () => { } else {
if (window.scrollY > 100) { backtotop.classList.remove('active')
backtotop.classList.add("active"); }
} else { }
backtotop.classList.remove("active"); window.addEventListener('load', toggleBacktotop)
} onscroll(document, toggleBacktotop)
}; }
window.addEventListener("load", toggleBacktotop);
onscroll(document, toggleBacktotop); /**
} * Mobile nav toggle
*/
/** on('click', '.mobile-nav-toggle', function(e) {
* Mobile nav toggle select('#navbar').classList.toggle('navbar-mobile')
*/ this.classList.toggle('bi-list')
on("click", ".mobile-nav-toggle", function(e) { this.classList.toggle('bi-x')
select("#navbar").classList.toggle("navbar-mobile"); })
this.classList.toggle("bi-list");
this.classList.toggle("bi-x"); /**
}); * Mobile nav dropdowns activate
*/
/** on('click', '.navbar .dropdown > a', function(e) {
* Mobile nav dropdowns activate if (select('#navbar').classList.contains('navbar-mobile')) {
*/ e.preventDefault()
on( this.nextElementSibling.classList.toggle('dropdown-active')
"click", }
".navbar .dropdown > a", }, true)
function(e) {
if (select("#navbar").classList.contains("navbar-mobile")) { /**
e.preventDefault(); * Scrool with ofset on links with a class name .scrollto
this.nextElementSibling.classList.toggle("dropdown-active"); */
} on('click', '.scrollto', function(e) {
}, if (select(this.hash)) {
true, e.preventDefault()
);
let navbar = select('#navbar')
/** if (navbar.classList.contains('navbar-mobile')) {
* Scrool with ofset on links with a class name .scrollto navbar.classList.remove('navbar-mobile')
*/ let navbarToggle = select('.mobile-nav-toggle')
on( navbarToggle.classList.toggle('bi-list')
"click", navbarToggle.classList.toggle('bi-x')
".scrollto", }
function(e) { scrollto(this.hash)
if (select(this.hash)) { }
e.preventDefault(); }, true)
let navbar = select("#navbar"); /**
if (navbar.classList.contains("navbar-mobile")) { * Scroll with ofset on page load with hash links in the url
navbar.classList.remove("navbar-mobile"); */
let navbarToggle = select(".mobile-nav-toggle"); window.addEventListener('load', () => {
navbarToggle.classList.toggle("bi-list"); if (window.location.hash) {
navbarToggle.classList.toggle("bi-x"); if (select(window.location.hash)) {
} scrollto(window.location.hash)
scrollto(this.hash); }
} }
}, });
true,
); /**
* Skills animation
/** */
* Scroll with ofset on page load with hash links in the url let skilsContent = select('.skills-content');
*/ if (skilsContent) {
window.addEventListener("load", () => { new Waypoint({
if (window.location.hash) { element: skilsContent,
if (select(window.location.hash)) { offset: '80%',
scrollto(window.location.hash); handler: function(direction) {
} let progress = select('.progress .progress-bar', true);
} progress.forEach((el) => {
}); el.style.width = el.getAttribute('aria-valuenow') + '%'
});
/** }
* Skills animation })
*/ }
let skilsContent = select(".skills-content");
if (skilsContent) { /**
new Waypoint({ * Testimonials slider
element: skilsContent, */
offset: "80%", new Swiper('.testimonials-slider', {
handler: function(direction) { speed: 600,
let progress = select(".progress .progress-bar", true); loop: true,
progress.forEach((el) => { autoplay: {
el.style.width = el.getAttribute("aria-valuenow") + "%"; delay: 5000,
}); disableOnInteraction: false
}, },
}); slidesPerView: 'auto',
} pagination: {
el: '.swiper-pagination',
/** type: 'bullets',
* Testimonials slider clickable: true
*/ }
new Swiper(".testimonials-slider", { });
speed: 600,
loop: true, /**
autoplay: { * Porfolio isotope and filter
delay: 5000, */
disableOnInteraction: false, window.addEventListener('load', () => {
}, let portfolioContainer = select('.portfolio-container');
slidesPerView: "auto", if (portfolioContainer) {
pagination: { let portfolioIsotope = new Isotope(portfolioContainer, {
el: ".swiper-pagination", itemSelector: '.portfolio-item'
type: "bullets", });
clickable: true,
}, let portfolioFilters = select('#portfolio-flters li', true);
});
on('click', '#portfolio-flters li', function(e) {
/** e.preventDefault();
* Porfolio isotope and filter portfolioFilters.forEach(function(el) {
*/ el.classList.remove('filter-active');
window.addEventListener("load", () => { });
let portfolioContainer = select(".portfolio-container"); this.classList.add('filter-active');
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, { portfolioIsotope.arrange({
itemSelector: ".portfolio-item", filter: this.getAttribute('data-filter')
}); });
let portfolioFilters = select("#portfolio-flters li", true); }, true);
}
on(
"click", });
"#portfolio-flters li",
function(e) { /**
e.preventDefault(); * Initiate portfolio lightbox
portfolioFilters.forEach(function(el) { */
el.classList.remove("filter-active"); const portfolioLightbox = GLightbox({
}); selector: '.portfolio-lightbox'
this.classList.add("filter-active"); });
portfolioIsotope.arrange({ /**
filter: this.getAttribute("data-filter"), * Portfolio details slider
}); */
}, new Swiper('.portfolio-details-slider', {
true, speed: 400,
); loop: true,
} autoplay: {
AOS.init(); delay: 5000,
}); disableOnInteraction: false
},
/** pagination: {
* Initiate portfolio lightbox el: '.swiper-pagination',
*/ type: 'bullets',
const portfolioLightbox = GLightbox({ clickable: true
selector: ".portfolio-lightbox", }
}); });
/** /**
* Portfolio details slider * Initiate Pure Counter
*/ */
new Swiper(".portfolio-details-slider", { new PureCounter();
speed: 400,
loop: true, })()
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
},
});
/**
* Initiate Pure Counter
*/
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>