Compare commits
No commits in common. "b17729e9c0dc77e788e86d613b2c50cc9cf90172" and "1c4cdb515587f248bd784b0da64a498a0a9c7024" have entirely different histories.
b17729e9c0
...
1c4cdb5155
@ -1,270 +1,254 @@
|
||||
/**
|
||||
* Template Name: Laura
|
||||
* Updated: Jul 27 2023 with Bootstrap v5.3.1
|
||||
* Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
|
||||
* Author: BootstrapMade.com
|
||||
* License: https://bootstrapmade.com/license/
|
||||
*/
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Easy selector helper function
|
||||
*/
|
||||
const select = (el, all = false) => {
|
||||
el = el.trim();
|
||||
if (all) {
|
||||
return [...document.querySelectorAll(el)];
|
||||
} else {
|
||||
return document.querySelector(el);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Easy event listener function
|
||||
*/
|
||||
const on = (type, el, listener, all = false) => {
|
||||
let selectEl = select(el, all);
|
||||
if (selectEl) {
|
||||
if (all) {
|
||||
selectEl.forEach((e) => e.addEventListener(type, listener));
|
||||
} else {
|
||||
selectEl.addEventListener(type, listener);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Easy on scroll event listener
|
||||
*/
|
||||
const onscroll = (el, listener) => {
|
||||
el.addEventListener("scroll", listener);
|
||||
};
|
||||
|
||||
/**
|
||||
* Navbar links active state on scroll
|
||||
*/
|
||||
let navbarlinks = select("#navbar .scrollto", true);
|
||||
const navbarlinksActive = () => {
|
||||
let position = window.scrollY + 200;
|
||||
navbarlinks.forEach((navbarlink) => {
|
||||
if (!navbarlink.hash) return;
|
||||
let section = select(navbarlink.hash);
|
||||
if (!section) return;
|
||||
if (
|
||||
position >= section.offsetTop &&
|
||||
position <= section.offsetTop + section.offsetHeight
|
||||
) {
|
||||
navbarlink.classList.add("active");
|
||||
} else {
|
||||
navbarlink.classList.remove("active");
|
||||
}
|
||||
});
|
||||
};
|
||||
window.addEventListener("load", navbarlinksActive);
|
||||
onscroll(document, navbarlinksActive);
|
||||
|
||||
/**
|
||||
* Scrolls to an element with header offset
|
||||
*/
|
||||
const scrollto = (el) => {
|
||||
let header = select("#header");
|
||||
let offset = header.offsetHeight;
|
||||
|
||||
if (!header.classList.contains("header-scrolled")) {
|
||||
offset -= 20;
|
||||
}
|
||||
|
||||
let elementPos = select(el).offsetTop;
|
||||
window.scrollTo({
|
||||
top: elementPos - offset,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle .header-scrolled class to #header when page is scrolled
|
||||
*/
|
||||
let selectHeader = select("#header");
|
||||
if (selectHeader) {
|
||||
const headerScrolled = () => {
|
||||
if (window.scrollY > 100) {
|
||||
selectHeader.classList.add("header-scrolled");
|
||||
} else {
|
||||
selectHeader.classList.remove("header-scrolled");
|
||||
}
|
||||
};
|
||||
window.addEventListener("load", headerScrolled);
|
||||
onscroll(document, headerScrolled);
|
||||
}
|
||||
|
||||
/**
|
||||
* Back to top button
|
||||
*/
|
||||
let backtotop = select(".back-to-top");
|
||||
if (backtotop) {
|
||||
const toggleBacktotop = () => {
|
||||
if (window.scrollY > 100) {
|
||||
backtotop.classList.add("active");
|
||||
} else {
|
||||
backtotop.classList.remove("active");
|
||||
}
|
||||
};
|
||||
window.addEventListener("load", toggleBacktotop);
|
||||
onscroll(document, toggleBacktotop);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mobile nav toggle
|
||||
*/
|
||||
on("click", ".mobile-nav-toggle", function(e) {
|
||||
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) {
|
||||
if (select("#navbar").classList.contains("navbar-mobile")) {
|
||||
e.preventDefault();
|
||||
this.nextElementSibling.classList.toggle("dropdown-active");
|
||||
}
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
||||
/**
|
||||
* Scrool with ofset on links with a class name .scrollto
|
||||
*/
|
||||
on(
|
||||
"click",
|
||||
".scrollto",
|
||||
function(e) {
|
||||
if (select(this.hash)) {
|
||||
e.preventDefault();
|
||||
|
||||
let navbar = select("#navbar");
|
||||
if (navbar.classList.contains("navbar-mobile")) {
|
||||
navbar.classList.remove("navbar-mobile");
|
||||
let navbarToggle = select(".mobile-nav-toggle");
|
||||
navbarToggle.classList.toggle("bi-list");
|
||||
navbarToggle.classList.toggle("bi-x");
|
||||
}
|
||||
scrollto(this.hash);
|
||||
}
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
||||
/**
|
||||
* Scroll with ofset on page load with hash links in the url
|
||||
*/
|
||||
window.addEventListener("load", () => {
|
||||
if (window.location.hash) {
|
||||
if (select(window.location.hash)) {
|
||||
scrollto(window.location.hash);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Skills animation
|
||||
*/
|
||||
let skilsContent = select(".skills-content");
|
||||
if (skilsContent) {
|
||||
new Waypoint({
|
||||
element: skilsContent,
|
||||
offset: "80%",
|
||||
handler: function(direction) {
|
||||
let progress = select(".progress .progress-bar", true);
|
||||
progress.forEach((el) => {
|
||||
el.style.width = el.getAttribute("aria-valuenow") + "%";
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Testimonials slider
|
||||
*/
|
||||
new Swiper(".testimonials-slider", {
|
||||
speed: 600,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
slidesPerView: "auto",
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
type: "bullets",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Porfolio isotope and filter
|
||||
*/
|
||||
window.addEventListener("load", () => {
|
||||
let portfolioContainer = select(".portfolio-container");
|
||||
if (portfolioContainer) {
|
||||
let portfolioIsotope = new Isotope(portfolioContainer, {
|
||||
itemSelector: ".portfolio-item",
|
||||
});
|
||||
|
||||
let portfolioFilters = select("#portfolio-flters li", true);
|
||||
|
||||
on(
|
||||
"click",
|
||||
"#portfolio-flters li",
|
||||
function(e) {
|
||||
e.preventDefault();
|
||||
portfolioFilters.forEach(function(el) {
|
||||
el.classList.remove("filter-active");
|
||||
});
|
||||
this.classList.add("filter-active");
|
||||
|
||||
portfolioIsotope.arrange({
|
||||
filter: this.getAttribute("data-filter"),
|
||||
});
|
||||
},
|
||||
true,
|
||||
);
|
||||
}
|
||||
AOS.init();
|
||||
});
|
||||
|
||||
/**
|
||||
* Initiate portfolio lightbox
|
||||
*/
|
||||
const portfolioLightbox = GLightbox({
|
||||
selector: ".portfolio-lightbox",
|
||||
});
|
||||
|
||||
/**
|
||||
* Portfolio details slider
|
||||
*/
|
||||
new Swiper(".portfolio-details-slider", {
|
||||
speed: 400,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
type: "bullets",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Initiate Pure Counter
|
||||
*/
|
||||
new PureCounter();
|
||||
})();
|
||||
* Template Name: Laura
|
||||
* Updated: Jul 27 2023 with Bootstrap v5.3.1
|
||||
* Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
|
||||
* Author: BootstrapMade.com
|
||||
* License: https://bootstrapmade.com/license/
|
||||
*/
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Easy selector helper function
|
||||
*/
|
||||
const select = (el, all = false) => {
|
||||
el = el.trim()
|
||||
if (all) {
|
||||
return [...document.querySelectorAll(el)]
|
||||
} else {
|
||||
return document.querySelector(el)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Easy event listener function
|
||||
*/
|
||||
const on = (type, el, listener, all = false) => {
|
||||
let selectEl = select(el, all)
|
||||
if (selectEl) {
|
||||
if (all) {
|
||||
selectEl.forEach(e => e.addEventListener(type, listener))
|
||||
} else {
|
||||
selectEl.addEventListener(type, listener)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Easy on scroll event listener
|
||||
*/
|
||||
const onscroll = (el, listener) => {
|
||||
el.addEventListener('scroll', listener)
|
||||
}
|
||||
|
||||
/**
|
||||
* Navbar links active state on scroll
|
||||
*/
|
||||
let navbarlinks = select('#navbar .scrollto', true)
|
||||
const navbarlinksActive = () => {
|
||||
let position = window.scrollY + 200
|
||||
navbarlinks.forEach(navbarlink => {
|
||||
if (!navbarlink.hash) return
|
||||
let section = select(navbarlink.hash)
|
||||
if (!section) return
|
||||
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
|
||||
navbarlink.classList.add('active')
|
||||
} else {
|
||||
navbarlink.classList.remove('active')
|
||||
}
|
||||
})
|
||||
}
|
||||
window.addEventListener('load', navbarlinksActive)
|
||||
onscroll(document, navbarlinksActive)
|
||||
|
||||
/**
|
||||
* Scrolls to an element with header offset
|
||||
*/
|
||||
const scrollto = (el) => {
|
||||
let header = select('#header')
|
||||
let offset = header.offsetHeight
|
||||
|
||||
if (!header.classList.contains('header-scrolled')) {
|
||||
offset -= 20
|
||||
}
|
||||
|
||||
let elementPos = select(el).offsetTop
|
||||
window.scrollTo({
|
||||
top: elementPos - offset,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle .header-scrolled class to #header when page is scrolled
|
||||
*/
|
||||
let selectHeader = select('#header')
|
||||
if (selectHeader) {
|
||||
const headerScrolled = () => {
|
||||
if (window.scrollY > 100) {
|
||||
selectHeader.classList.add('header-scrolled')
|
||||
} else {
|
||||
selectHeader.classList.remove('header-scrolled')
|
||||
}
|
||||
}
|
||||
window.addEventListener('load', headerScrolled)
|
||||
onscroll(document, headerScrolled)
|
||||
}
|
||||
|
||||
/**
|
||||
* Back to top button
|
||||
*/
|
||||
let backtotop = select('.back-to-top')
|
||||
if (backtotop) {
|
||||
const toggleBacktotop = () => {
|
||||
if (window.scrollY > 100) {
|
||||
backtotop.classList.add('active')
|
||||
} else {
|
||||
backtotop.classList.remove('active')
|
||||
}
|
||||
}
|
||||
window.addEventListener('load', toggleBacktotop)
|
||||
onscroll(document, toggleBacktotop)
|
||||
}
|
||||
|
||||
/**
|
||||
* Mobile nav toggle
|
||||
*/
|
||||
on('click', '.mobile-nav-toggle', function(e) {
|
||||
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) {
|
||||
if (select('#navbar').classList.contains('navbar-mobile')) {
|
||||
e.preventDefault()
|
||||
this.nextElementSibling.classList.toggle('dropdown-active')
|
||||
}
|
||||
}, true)
|
||||
|
||||
/**
|
||||
* Scrool with ofset on links with a class name .scrollto
|
||||
*/
|
||||
on('click', '.scrollto', function(e) {
|
||||
if (select(this.hash)) {
|
||||
e.preventDefault()
|
||||
|
||||
let navbar = select('#navbar')
|
||||
if (navbar.classList.contains('navbar-mobile')) {
|
||||
navbar.classList.remove('navbar-mobile')
|
||||
let navbarToggle = select('.mobile-nav-toggle')
|
||||
navbarToggle.classList.toggle('bi-list')
|
||||
navbarToggle.classList.toggle('bi-x')
|
||||
}
|
||||
scrollto(this.hash)
|
||||
}
|
||||
}, true)
|
||||
|
||||
/**
|
||||
* Scroll with ofset on page load with hash links in the url
|
||||
*/
|
||||
window.addEventListener('load', () => {
|
||||
if (window.location.hash) {
|
||||
if (select(window.location.hash)) {
|
||||
scrollto(window.location.hash)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Skills animation
|
||||
*/
|
||||
let skilsContent = select('.skills-content');
|
||||
if (skilsContent) {
|
||||
new Waypoint({
|
||||
element: skilsContent,
|
||||
offset: '80%',
|
||||
handler: function(direction) {
|
||||
let progress = select('.progress .progress-bar', true);
|
||||
progress.forEach((el) => {
|
||||
el.style.width = el.getAttribute('aria-valuenow') + '%'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Testimonials slider
|
||||
*/
|
||||
new Swiper('.testimonials-slider', {
|
||||
speed: 600,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
slidesPerView: 'auto',
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'bullets',
|
||||
clickable: true
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Porfolio isotope and filter
|
||||
*/
|
||||
window.addEventListener('load', () => {
|
||||
let portfolioContainer = select('.portfolio-container');
|
||||
if (portfolioContainer) {
|
||||
let portfolioIsotope = new Isotope(portfolioContainer, {
|
||||
itemSelector: '.portfolio-item'
|
||||
});
|
||||
|
||||
let portfolioFilters = select('#portfolio-flters li', true);
|
||||
|
||||
on('click', '#portfolio-flters li', function(e) {
|
||||
e.preventDefault();
|
||||
portfolioFilters.forEach(function(el) {
|
||||
el.classList.remove('filter-active');
|
||||
});
|
||||
this.classList.add('filter-active');
|
||||
|
||||
portfolioIsotope.arrange({
|
||||
filter: this.getAttribute('data-filter')
|
||||
});
|
||||
|
||||
}, true);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Initiate portfolio lightbox
|
||||
*/
|
||||
const portfolioLightbox = GLightbox({
|
||||
selector: '.portfolio-lightbox'
|
||||
});
|
||||
|
||||
/**
|
||||
* Portfolio details slider
|
||||
*/
|
||||
new Swiper('.portfolio-details-slider', {
|
||||
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
40
index.html
@ -9,8 +9,6 @@
|
||||
<meta content="" name="description">
|
||||
<meta content="" name="keywords">
|
||||
|
||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link href="assets/img/favicon.png" rel="icon">
|
||||
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
||||
@ -42,10 +40,9 @@
|
||||
<body>
|
||||
|
||||
<!-- ======= 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" data-aos="fade-down" data-aos-delay="2000">
|
||||
<nav id="navbar" class="navbar">
|
||||
<ul>
|
||||
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
|
||||
<li><a class="nav-link scrollto" href="#about">About</a></li>
|
||||
@ -62,17 +59,16 @@
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero">
|
||||
<div class="hero-container">
|
||||
<h1 data-aos="zoom-in">Arnaud Fauconnet</h1>
|
||||
<h2 data-aos="fade" data-aos-delay="1000">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
|
||||
Down"><i class="bx bx-chevron-down"></i></a></span>
|
||||
<h1>Arnaud Fauconnet</h1>
|
||||
<h2>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>
|
||||
</div>
|
||||
</section><!-- End Hero -->
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- ======= About Me Section ======= -->
|
||||
<section id="about" class="about" data-aos="fade-up">
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
@ -87,13 +83,12 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="image col-lg-4 d-flex align-items-stretch
|
||||
justify-content-center justify-content-lg-start">
|
||||
|
||||
<div
|
||||
class="image col-lg-4 d-flex align-items-stretch justify-content-center justify-content-lg-start">
|
||||
</div>
|
||||
<div class="content col-lg-8 ps-lg-4 d-flex flex-column align-items-stretch justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mt-4 mt-lg-0">
|
||||
<div class="col-lg-6">
|
||||
<ul>
|
||||
<li><i class="bi bi-chevron-right"></i>
|
||||
<strong>Name:</strong>
|
||||
@ -127,14 +122,14 @@
|
||||
|
||||
<div class="skills-content ps-lg-4">
|
||||
<div class="row">
|
||||
<div class="progress col-md-6">
|
||||
<div class="progress col-6">
|
||||
<span class="skill">Python <i class="val">95%</i></span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="95"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress col-md-6">
|
||||
<div class="progress col-6">
|
||||
<span class="skill">Java <i class="val">90%</i></span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="90"
|
||||
@ -143,14 +138,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="progress col-md-6">
|
||||
<div class="progress col-6">
|
||||
<span class="skill">C <i class="val">85%</i></span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="85"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress col-md-6">
|
||||
<div class="progress col-6">
|
||||
<span class="skill">C++ <i class="val">95%</i></span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="95"
|
||||
@ -159,14 +154,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="100"
|
||||
aria-valuemin="0" aria-valuemax="100"></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>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="95"
|
||||
@ -175,14 +170,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="progress col-md-6">
|
||||
<div class="progress col-6">
|
||||
<span class="skill">Bash <i class="val">90%</i></span>
|
||||
<div class="progress-bar-wrap">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="90"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress col-md-6">
|
||||
<div class="progress col-6">
|
||||
<span class="skill">Lua <i class="val">85%</i></span>
|
||||
<div class="progress-bar-wrap">
|
||||
<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/waypoints/noframework.waypoints.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 -->
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user