fix: margins and displaying stuff for small

screens

assets/js/main.js

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

index.html

@@ -9,6 +9,8 @@
     <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">
@@ -40,9 +42,10 @@
 <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">
+        <nav id="navbar" class="navbar" data-aos="fade-down" data-aos-delay="2000">
             <ul>
                 <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
                 <li><a class="nav-link scrollto" href="#about">About</a></li>
@@ -59,16 +62,17 @@
     <!-- ======= Hero Section ======= -->
     <section id="hero">
         <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>
     </section><!-- End Hero -->
 
     <main id="main">
 
         <!-- ======= About Me Section ======= -->
-        <section id="about" class="about">
+        <section id="about" class="about" data-aos="fade-up">
             <div class="container">
 
                 <div class="section-title">
@@ -83,12 +87,13 @@
                 </div>
 
                 <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 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">
+                            <div class="col-lg-6 mt-4 mt-lg-0">
                                 <ul>
                                     <li><i class="bi bi-chevron-right"></i>
                                         <strong>Name:</strong>
@@ -122,14 +127,14 @@
 
                         <div class="skills-content ps-lg-4">
                             <div class="row">
-                                <div class="progress col-6">
+                                <div class="progress col-md-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-6">
+                                <div class="progress col-md-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"
@@ -138,14 +143,14 @@
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="progress col-6">
+                                <div class="progress col-md-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-6">
+                                <div class="progress col-md-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"
@@ -154,14 +159,14 @@
                                 </div>
                             </div>
                             <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>
                                     <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-6">
+                                <div class="progress col-md-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"
@@ -170,14 +175,14 @@
                                 </div>
                             </div>
                             <div class="row">
-                                <div class="progress col-6">
+                                <div class="progress col-md-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-6">
+                                <div class="progress col-md-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"
@@ -551,6 +556,7 @@
     <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>