fix: margins and displaying stuff for small

screens

assets/js/main.js

@@ -1,254 +1,270 @@
 /**
-* 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/
-*/
+ * 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";
+    "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 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 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)
-  }
+    /**
+     * 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') + '%'
+    /**
+     * 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);
 
-  /**
-   * 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
-    }
-  });
+    /**
+     * Scrolls to an element with header offset
+     */
+    const scrollto = (el) => {
+        let header = select("#header");
+        let offset = header.offsetHeight;
 
-  /**
-   * Porfolio isotope and filter
-   */
-  window.addEventListener('load', () => {
-    let portfolioContainer = select('.portfolio-container');
-    if (portfolioContainer) {
-      let portfolioIsotope = new Isotope(portfolioContainer, {
-        itemSelector: '.portfolio-item'
-      });
+        if (!header.classList.contains("header-scrolled")) {
+            offset -= 20;
+        }
 
-      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');
+        let elementPos = select(el).offsetTop;
+        window.scrollTo({
+            top: elementPos - offset,
+            behavior: "smooth",
         });
-        this.classList.add('filter-active');
+    };
 
-        portfolioIsotope.arrange({
-          filter: this.getAttribute('data-filter')
+    /**
+     * 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") + "%";
+                });
+            },
         });
-
-      }, true);
     }
 
-  });
+    /**
+     * 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,
+        },
+    });
 
-  /**
-   * Initiate portfolio lightbox 
-   */
-  const portfolioLightbox = GLightbox({
-    selector: '.portfolio-lightbox'
-  });
+    /**
+     * Porfolio isotope and filter
+     */
+    window.addEventListener("load", () => {
+        let portfolioContainer = select(".portfolio-container");
+        if (portfolioContainer) {
+            let portfolioIsotope = new Isotope(portfolioContainer, {
+                itemSelector: ".portfolio-item",
+            });
 
-  /**
-   * 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
-    }
-  });
+            let portfolioFilters = select("#portfolio-flters li", true);
 
-  /**
-   * Initiate Pure Counter 
-   */
-  new PureCounter();
+            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();
+})(); 

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>
-            <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>
+            <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>
         </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
-                        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">
+                            <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>