updated cv

and can be expanded)

assets/css/style.css

@@ -11,7 +11,8 @@
 --------------------------------------------------------------*/
 :root {
     color-scheme: dark;
-  --highlight: #ffb727;
+    /* --highlight: #ffb727; */
+    --highlight: #f3a200;
     --highlight-alt: #ffc85a;
 
     --background: #fff;
@@ -111,9 +112,12 @@ h6 {
 }
 
 .prevent-select {
-  -webkit-user-select: none; /* Safari */
+    -webkit-user-select: none;
-  -ms-user-select: none; /* IE 10 and IE 11 */
+    /* Safari */
-  user-select: none; /* Standard syntax */
+    -ms-user-select: none;
+    /* IE 10 and IE 11 */
+    user-select: none;
+    /* Standard syntax */
 }
 
 /*--------------------------------------------------------------
@@ -195,7 +199,7 @@ h6 {
 
 .navbar a,
 .navbar a:focus,
-.navbar li > i {
+.navbar li>i {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -218,10 +222,10 @@ h6 {
 }
 
 .navbar a:hover,
-.navbar li > i:hover,
+.navbar li>i:hover,
 .navbar .active,
 .navbar .active:focus,
-.navbar li:hover > a {
+.navbar li:hover>a {
     color: var(--highlight);
     cursor: pointer;
 }
@@ -261,11 +265,11 @@ h6 {
 
 .navbar .dropdown ul a:hover,
 .navbar .dropdown ul .active:hover,
-.navbar .dropdown ul li:hover > a {
+.navbar .dropdown ul li:hover>a {
     color: var(--highlight);
 }
 
-.navbar .dropdown:hover > ul {
+.navbar .dropdown:hover>ul {
     opacity: 1;
     top: 100%;
     visibility: visible;
@@ -277,7 +281,7 @@ h6 {
     visibility: hidden;
 }
 
-.navbar .dropdown .dropdown:hover > ul {
+.navbar .dropdown .dropdown:hover>ul {
     opacity: 1;
     top: 0;
     left: 100%;
@@ -289,7 +293,7 @@ h6 {
         left: -90%;
     }
 
-  .navbar .dropdown .dropdown:hover > ul {
+    .navbar .dropdown .dropdown:hover>ul {
         left: -100%;
     }
 }
@@ -357,7 +361,7 @@ h6 {
 
 .navbar-mobile a:hover,
 .navbar-mobile .active,
-.navbar-mobile li:hover > a {
+.navbar-mobile li:hover>a {
     color: var(--highlight);
 }
 
@@ -392,11 +396,11 @@ h6 {
 
 .navbar-mobile .dropdown ul a:hover,
 .navbar-mobile .dropdown ul .active:hover,
-.navbar-mobile .dropdown ul li:hover > a {
+.navbar-mobile .dropdown ul li:hover>a {
     color: var(--highlight);
 }
 
-.navbar-mobile .dropdown > .dropdown-active {
+.navbar-mobile .dropdown>.dropdown-active {
     display: block;
 }
 
@@ -629,7 +633,7 @@ section {
 }
 
 .about .image {
-  background: url("../img/me.jpg") center center no-repeat;
+    background: url("../img/me2-low.jpg") top center no-repeat;
     background-size: cover;
     min-height: 500px;
 }
@@ -678,6 +682,45 @@ section {
     display: flex;
     flex-direction: column;
     align-items: center;
+    overflow: visible;
+}
+
+.resume-content {
+    max-height: 110vh;
+    overflow-y: hidden;
+}
+
+.resume-content.expanded {
+    display:block;
+    max-height: none;
+    overflow-y: visible;
+}
+
+.resume-fade {
+    position: absolute;
+    display:flex;
+    justify-content: center;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    background: linear-gradient(to bottom, transparent, var(--background) 50%);
+    pointer-events: none;
+}
+
+.resume-fade.expanded {
+    background: var(--background);
+}
+
+.resume-btn {
+    position: absolute;
+    bottom: 0;
+    font-size: 1em !important;
+
+    border: none;
+    text-align: center;
+    z-index: 100;
+    box-shadow: none !important;
+    pointer-events: auto;
 }
 
 .resume .resume-title {
@@ -690,7 +733,7 @@ section {
 
 .resume .resume-item {
     padding: 0 0 20px 20px;
-  margin-top: -2px;
+    margin-left: 8px;
     border-left: 2px solid var(--resume-border);
     position: relative;
 }
@@ -761,6 +804,7 @@ section {
 .skills #skills-filters {
     list-style: none;
     margin-bottom: 20px;
+    overflow-x: auto;
 }
 
 .skills #skills-filters li {
@@ -800,6 +844,7 @@ section {
 }
 
 .skills .icon-box p {
+    hyphens: auto;
     text-align: justify;
 }
 
@@ -966,6 +1011,15 @@ section {
     margin-bottom: 20px;
 }
 
+.portfolio video, .portfolio img{
+    max-width: 100%;
+}
+
+.portfolio video {
+    display: block; /* html video tags have a phantom bottom margin, this is the only way to remove it */
+    margin: auto; /* to center the video inside the container */
+}
+
 .portfolio #portfolio-flters li {
     cursor: pointer;
     display: inline-block;
@@ -991,7 +1045,10 @@ section {
 }
 
 .portfolio .portfolio-item .portfolio-img {
+    text-align: center;
     overflow: hidden;
+    border: 1px solid var(--background);
+    transition: 0.3s;
 }
 
 .portfolio .portfolio-item .portfolio-img img {
@@ -1002,35 +1059,48 @@ section {
     opacity: 0;
     position: absolute;
     left: 15px;
-  bottom: 0;
+    bottom: 3px;
     z-index: 3;
     right: 15px;
     transition: all ease-in-out 0.3s;
-  background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.9);
     padding: 10px 15px;
 }
 
 .portfolio .portfolio-item .portfolio-info h4 {
     font-size: 18px;
-  color: var(--background);
+    color: var(--text-color-alt);
     font-weight: 600;
-  color: var(--background);
     margin-bottom: 0px;
 }
 
 .portfolio .portfolio-item .portfolio-info p {
-  color: rgba(255, 255, 255, 0.8);
+    color: var(--text-color-alt);
     font-size: 14px;
     margin-bottom: 0;
 }
 
+.portfolio .portfolio-item .portfolio-info div {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.portfolio .portfolio-item .portfolio-info div a {
+    display: flex;
+    align-items: center;
+}
+
+.portfolio .portfolio-item .portfolio-info div p .br {
+    display: block;
+    margin-bottom: 0.5em;
+}
+
 .portfolio .portfolio-item .portfolio-info .preview-link,
 .portfolio .portfolio-item .portfolio-info .details-link {
-  position: absolute;
-  right: 40px;
     font-size: 24px;
-  top: calc(50% - 18px);
+    color: var(--text-color-alt);
-  color: var(--background);
     transition: 0.3s;
 }
 
@@ -1039,12 +1109,9 @@ section {
     color: #ffc041;
 }
 
-.portfolio .portfolio-item .portfolio-info .details-link {
+.portfolio .portfolio-item:hover .portfolio-img {
-  right: 10px;
+    /* transform: scale(1.2); */
-}
+    border-color: var(--highlight);
-
-.portfolio .portfolio-item:hover .portfolio-img img {
-  transform: scale(1.2);
 }
 
 .portfolio .portfolio-item:hover .portfolio-info {

assets/js/main.js

@@ -161,6 +161,19 @@
     true
   );
 
+  on("click", "#resume-toggle", e => {
+      console.log("sup")
+      const sec = select("#resume-section");
+      const btn = e.target;
+      sec.classList.toggle("expanded");
+      select(".resume-fade").classList.toggle("expanded");
+      if (sec.classList.contains("expanded"))
+          btn.innerHTML = 'Hide <i class="bi bi-chevron-up"></i>';
+      else
+          btn.innerHTML = 'Expand <i class="bi bi-chevron-down"></i>';
+      AOS.refresh();
+  })
+
   /**
    * Scroll with ofset on page load with hash links in the url
    */
@@ -308,6 +321,11 @@
   if (localStorage.getItem("theme") == "light") {
     toggleDarkMode();
   }
+
+    // Set age correctly (cuz sbatti farlo ogni
+    // anno, toi meme tu sais)
+    let age_span = document.querySelector("#age");
+    age_span.textContent = calculateAge("1999-10-15");
 })();
 
 function toggleDarkMode() {
@@ -321,3 +339,17 @@ function toggleDarkMode() {
   document.documentElement.style.setProperty("color-scheme", theme);
   localStorage.setItem("theme", theme);
 }
+
+function calculateAge(birthDate) {
+    const today = new Date();
+    const birth = new Date(birthDate);
+    let age = today.getFullYear() - birth.getFullYear();
+    const monthDifference = today.getMonth() - birth.getMonth();
+
+    // Check if the birthday has not occurred yet this year
+    if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birth.getDate())) {
+        age--;
+    }
+
+    return age;
+}

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en-US">
 
 <head>
     <meta charset="utf-8">
@@ -44,18 +44,17 @@
 <body class="dark">
 
     <!-- ======= 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">
             <ul>
                 <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="#portfolio">Portfolio</a></li>
                 <li><a class="nav-link scrollto" href="#resume">Resume</a></li>
-                <li><a class="nav-link scrollto" href="#skills">Skills</a></li>
+                <li><a class="nav-link scrollto" href="#skills">Interests</a></li>
-                <li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
                 <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
-                <li><i class="dark-mode bi icon-white bi-sun-fill" onClick="toggleDarkMode(event)"></i>
+                <li><i class="bi icon-white bi-sun-fill dark-mode" onClick="toggleDarkMode(event)"></i>
                 </li>
             </ul>
             <i class="bi bi-list mobile-nav-toggle"></i>
@@ -79,7 +78,7 @@
         <section id="about" class="about">
             <div class="container">
 
-                <div class="section-title" data-aos="fade-up">
+                <div class="section-title" data-aos="fade-in">
                     <span class="prevent-select">About Me</span>
                     <h2>About Me</h2>
                     <p>I have a deep passion for computer science and enjoy
@@ -92,13 +91,11 @@
                 </div>
 
                 <div class="row">
-                    <div class="image col-lg-4 d-flex align-items-stretch
+                    <div class="image col-lg-4 d-flex align-items-stretch justify-content-center justify-content-lg-start" data-aos="fade-up-right">
-                            justify-content-center justify-content-lg-start" data-aos="fade-up-right">
                     </div>
-                    <div class="content col-lg-8 ps-lg-4 d-flex flex-column
+                    <div class="content col-lg-8 ps-lg-4 d-flex flex-column align-items-stretch justify-content-evenly" data-aos="fade-up-left">
-                            align-items-stretch justify-content-evenly" data-aos="fade-up-left">
                         <div class="row">
-                            <div class="col-lg-6 mt-4 mt-lg-0">
+                            <div class="mt-4 col-lg-6 mt-lg-0">
                                 <ul>
                                     <li><i class="bi bi-chevron-right"></i>
                                         <strong>Name:</strong>
@@ -115,7 +112,8 @@
                             </div>
                             <div class="col-lg-6">
                                 <ul>
-                                    <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>23</span>
+                                    <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span
+                                            id="age">23</span>
                                     </li>
                                     <!-- <li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master in -->
                                     <!-- Software and Data Engineering </span> -->
@@ -133,35 +131,31 @@
                         <!-- End .content-->
 
 
-                        <div>
+                        <div data-aos="fade-up">
 
-                            <div class="progress" data-aos="fade-up">
+                            <div class="progress">
-                                <span class="skill"><i class="flag
+                                <span class="skill"><i class="flag flag-france"></i>French <i class="val">Native</i></span>
-                                    flag-france"></i>French <i class="val">Native</i></span>
                                 <div class="progress-bar-wrap">
                                     <div class="progress-bar" role="progressbar" aria-valuenow="7" aria-valuemin="0"
                                         aria-valuemax="7"></div>
                                 </div>
                             </div>
-                            <div class="progress" data-aos="fade-up">
+                            <div class="progress">
-                                <span class="skill"><i class="flag
+                                <span class="skill"><i class="flag flag-uk"></i>English <i class="val">Native</i></span>
-                                    flag-uk"></i>English <i class="val">Native</i></span>
                                 <div class="progress-bar-wrap">
                                     <div class="progress-bar" role="progressbar" aria-valuenow="7" aria-valuemin="0"
                                         aria-valuemax="7"></div>
                                 </div>
                             </div>
-                            <div class="progress" data-aos="fade-up">
+                            <div class="progress">
-                                <span class="skill"><i class="flag
+                                <span class="skill"><i class="flag flag-italy"></i>Italian <i class="val">C2</i></span>
-                                    flag-italy"></i>Italian <i class="val">C2</i></span>
                                 <div class="progress-bar-wrap">
                                     <div class="progress-bar" role="progressbar" aria-valuenow="6.5" aria-valuemin="0"
                                         aria-valuemax="7"></div>
                                 </div>
                             </div>
-                            <div class="progress" data-aos="fade-up">
+                            <div class="progress">
-                                <span class="skill"><i class="flag
+                                <span class="skill"><i class="flag flag-germany"></i>German <i class="val">B1</i></span>
-                                    flag-germany"></i>German <i class="val">B1</i></span>
                                 <div class="progress-bar-wrap">
                                     <div class="progress-bar" role="progressbar" aria-valuenow="3.5" aria-valuemin="0"
                                         aria-valuemax="7"></div>
@@ -177,11 +171,216 @@
             </div>
         </section><!-- End About Me Section -->
 
+        <!-- ======= My Portfolio Section ======= -->
+        <section id="portfolio" class="portfolio">
+            <div class="container">
+
+                <div class="section-title" data-aos="fade-in">
+                    <span class="prevent-select">My Portfolio</span>
+                    <h2>My Portfolio</h2>
+                    <p>The building blocks of my career</p>
+                </div>
+
+                <!-- <ul id="portfolio-flters" class="d-flex justify-content-center" data-aos="fade-up"> -->
+                <!--     <li data-filter="*" class="filter-active">All</li> -->
+                <!--     <li data-filter=".filter-app">App</li> -->
+                <!--     <li data-filter=".filter-card">Card</li> -->
+                <!--     <li data-filter=".filter-web">Web</li> -->
+                <!-- </ul> -->
+
+                <!-- TODO: maybe use the language as filters? --> 
+
+                <!-- TODO: add the ray tracer project --> 
+
+                <div class="row portfolio-container" data-aos="fade-up">
+
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
+                        <div class="portfolio-img"><video autoplay loop muted="true" src="assets/img/portfolio/maze-solver.mp4"></div>
+                        <div class="portfolio-info">
+                            <h4><a href="https://github.com/karma-riuk/maze-solver-go">Maze Solver</a></h4>
+                            <div>
+                                <p>
+                                    A simple maze solver that takes in various types of maze as input and
+                                    outputs the solution.<span class="br"></span>
+                                    Language: Go
+                                </p>
+                                <a href="https://github.com/karma-riuk/maze-solver-go" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+                        <div class="portfolio-img"><video autoplay loop muted="true" src="assets/img/portfolio/stickfosh.mp4">
+                        </div>
+                        <div class="portfolio-info">
+                            <h4><a href="https://github.com/karma-riuk/stickfosh">Stickfosh</a></h4>
+                            <div>
+                                <p>
+                                    A chess engine written from scratch, just like stockfish but worse :)<span class="br"></span>
+                                    Languages: C++, Python
+                                </p>
+                                <a href="https://github.com/karma-riuk/stickfosh" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
+                        </div>
+                    </div>
+
+
+
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-web">
+                        <div class="portfolio-img"><img src="assets/img/portfolio/esim.jpg" class="img-fluid" alt="">
+                        </div>
+                        <div class="portfolio-info">
+                            <h4><a href="https://github.com/karma-riuk/hdr_esim">HDR ESIM</a></h4>
+                            <div>
+                                <p>
+                                    Extended a the simulation of an event camera in order to generate HDR
+                                    frames.<span class="br"></span>
+                                    Language: C++
+                                </p>
+                                <a href="https://github.com/karma-riuk/hdr_esim" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
+                        <div class="portfolio-img"><video autoplay loop muted="true" src="assets/img/portfolio/paper-mosaik.mp4"></div>
+                        <div class="portfolio-info">
+                            <h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4>
+                            <!-- TODO: makea good readme fo this project -->
+                            <div>
+                                <p>
+                                    A visualization tool to represent reasearchers in terms of their papers
+                                    and their relationships to other
+                                    researchers.<span class="br"></span>
+                                    Language: Smalltalk (Pharo)
+                                </p>
+                                <a href="https://github.com/karma-riuk/PaperMosaik" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+                        <div class="portfolio-img"><img src="assets/img/portfolio/aoc.jpeg" class="img-fluid" alt="">
+                        </div>
+                        <div class="portfolio-info">
+                            <h4><a href="https://github.com/karma-riuk/advent-of-code">Advent of Code</a></h4>
+                            <div>
+                                <p>
+                                    Fun coding challenges during christmas.<span class="br"></span>
+                                    Languages: C++, Go, Python
+                                </p>
+                                <a href="https://github.com/karma-riuk/advent-of-code" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
+                        </div>
+                    </div>
+
+
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+                        <div class="portfolio-img"><video autoplay loop muted="true"><source src="assets/img/portfolio/flyingballs.mp4"/></video></div>
+                        <div class="portfolio-info">
+                            <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding Polygons</a></h4>
+                            <div>
+                                <p>
+                                    An extension of a physics engine to simulate polygons,
+                                    focusing on collision detection and effects in
+                                    real-time, ensuring smooth
+                                    animations.<span class="br"></span>
+                                    Language: C++
+                                </p>
+                                <a href="https://github.com/karma-riuk/flying-balls" class="details-link"
+                                    title="More Details"><i class="bx bx-link"></i></a>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+        </section><!-- End My Portfolio Section -->
+
+        <!-- ======= Testimonials Section ======= -->
+        <section id="testimonials" class="testimonials">
+            <div class="container position-relative">
+
+                <div class="testimonials-slider swiper" data-aos="fade-in">
+                    <div class="swiper-wrapper">
+
+                        <div class="swiper-slide">
+                            <div class="testimonial-item">
+                                <img src="assets/img/testimonials/hauswirth.jpg" class="testimonial-img" alt="">
+                                <h3>Matthias Hauswirth</h3>
+                                <h4>Associate Professor - USI</h4>
+                                <p>
+                                    <i class="bx bxs-quote-alt-left quote-icon-left"></i>
+                                    As an undergraduate teaching assistant for my “Programming Fundamentals 2” course,
+                                    Arnaud did a wonderful job. He filled a role often taken by graduate students, and
+                                    he excelled at doing so. Arnaud combines a strong conceptual understanding with
+                                    great social skills, which is essential for the role of a teaching assistant. He is
+                                    exceptionally proactive and independent, which makes him a great member of any team.
+                                    <i class="bx bxs-quote-alt-right quote-icon-right"></i>
+                                </p>
+                            </div>
+                        </div><!-- End testimonial item -->
+
+                        <div class="swiper-slide">
+                            <div class="testimonial-item">
+                                <img src="assets/img/testimonials/piotr.jpg" class="testimonial-img" alt="">
+                                <h3>Piotr Didyk</h3>
+                                <h4>Associate Professor - USI</h4>
+                                <p>
+                                    <i class="bx bxs-quote-alt-left quote-icon-left"></i>
+                                    I had the pleasure of meeting Arnaud when he enrolled in my computer graphics
+                                    course. He was a very bright, diligent, and active student who always showed a
+                                    desire to learn. In the summer of 2023, Arnaud worked with me on a research project
+                                    related to neuromorphic cameras. Despite being a relatively new topic for him,
+                                    Arnaud's skills in programming and his ability to grasp new concepts in the visual
+                                    computing field were impressive. He quickly became a valuable contributor to the
+                                    project. Collaborating with him on this project was truly enjoyable, and I always
+                                    appreciated his presence in my classes.
+                                    <i class="bx bxs-quote-alt-right quote-icon-right"></i>
+                                </p>
+                            </div>
+                        </div><!-- End testimonial item -->
+
+                        <div class="swiper-slide">
+                            <div class="testimonial-item">
+                                <img src="assets/img/testimonials/missing.png" class="testimonial-img" alt="">
+                                <h3>Davide Falchetti</h3>
+                                <h4>CFO - Zucchetti Switzerland</h4>
+                                <p>
+                                    <i class="bx bxs-quote-alt-left quote-icon-left"></i>
+                                    The student demonstrated an excellent basic preparation, a great interest in the
+                                    technologies used, a high degree of autonomy in organizing work schedules and in the
+                                    ability to acquire the necessary information, and a commendable ability to complete
+                                    the assigned project in an excellent manner within the allotted time.
+
+                                    We also note the student's active participation in periodic meetings of the business
+                                    team for planning activities, which also enabled him to acquire field skills in
+                                    project management strategies, particularly the SCRUM approach.
+                                    <i class="bx bxs-quote-alt-right quote-icon-right"></i>
+                                </p>
+                            </div>
+                        </div><!-- End testimonial item -->
+
+                    </div>
+                    <div class="swiper-pagination"></div>
+                </div>
+
+            </div>
+        </section><!-- End Testimonials Section -->
+
+
+
         <!-- ======= My Resume Section ======= -->
         <section id="resume" class="resume">
             <div class="container">
 
-                <div class="section-title" data-aos="fade-up">
+                <div class="section-title" data-aos="fade-in">
                     <span class="prevent-select">My Resume</span>
                     <h2>My Resume</h2>
                     <p>A brief overview of my professional experience and qualifications</p>
@@ -191,7 +390,7 @@
                     <div class="col-lg-6">
                         <div data-aos="fade-up-right">
                             <h3 class="resume-title">Summary</h3>
-                            <div class="resume-item pb-0">
+                            <div class="pb-0 resume-item">
                                 <h4>Arnaud Fauconnet</h4>
                                 <p><em>I'm a dedicated computer science enthusiast, fueled by a passion for programming
                                         and
@@ -216,7 +415,7 @@
                             <div class="resume-item">
                                 <h4>Master in Software &amp; Data Engineering</h4>
                                 <h5>2023 - Present</h5>
-                                <p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: n.a./10</em></p>
+                                <p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: 9.59/10</em></p>
                                 <p>This program offers me a comprehensive education that delves deep into the latest
                                     software engineering techniques and data engineering principles. The curriculum is
                                     structured around four modules – Software Engineering, Data Engineering, Electives,
@@ -225,7 +424,7 @@
                                     quality
                                     assurance, data modeling, and decision support.</p>
                             </div>
-                            <div class="resume-item" data-aos="fade-up">
+                            <div class="resume-item">
                                 <h4>Bachelor in Informatics</h4>
                                 <h5>2020 - 2023</h5>
                                 <p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: 9.21/10</em></p>
@@ -239,10 +438,78 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-6">
+
+                        <div class=" col-lg-6">
+
                             <div data-aos="fade-up-left">
                                 <h3 class="resume-title">Professional Experience</h3>
+                                <div class="resume-content" id="resume-section">
+                                    <div>
                                         <div class="resume-item">
+                                            <h4>Research Lab Assistant</h4>
+                                            <h5>August 2024 - June 2024</h5>
+                                            <p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p>
+                                            <p>
+                                                Helped in various tasks in a the research lab of Prof. Laura Pozzi. This lab specializes in the
+                                                automation of embedded processor customization, the design and compilation of innovative reconfigurable hardware, and
+                                                techniques for Approximate Computing and Logic Synthesis. 
+                                                <ul>
+                                                    <li>Made a case study to investigate various optimization methods to improve the performance of an established system</li>
+                                                    <li>Refactored an entire codebase to make it more modular, cleaner and easier to use and extend</li>
+                                                </ul>
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <div data-aos="fade-up">
+                                        <div class="resume-item">
+                                            <h4>Teaching assistant</h4>
+                                            <h5>2022 - 2025</h5>
+                                            <p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p>
+                                            <p>
+                                                Helped teachers with grading assignments and exams. Tried to create a meaningful
+                                                connection with students that needed my help to make them succeed in completing
+                                                their course. I loved being able to transmit my passion on to them and see the
+                                                sparkles in their eyes when they learned about concepts I taught them.
+                                            </p>
+                                        </div>
+                                        <div class="resume-item secondary">
+                                            <h4 style="font-weight: normal">TA - Automata and Formal Langauges</h4>
+                                            <h5>Autumn 2024</h5>
+                                            <p><em>3 ECTS - Prof. Matthias Hauswirth</em></p>
+                                            <ul>
+                                                <li>Teaches the theoretical foundations of computing, focusing on formal models like finite automata and pushdown
+                                                    automata, and their role in defining and analyzing regular and context-free languages</li>
+                                                <li>Closely participated in assignment and exam corrections</li>
+                                            </ul>
+                                        </div>
+                                        <div class="resume-item secondary">
+                                            <h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4>
+                                            <h5>Spring 2023 & 2024</h5>
+                                            <p><em>9 ECTS - Prof. Matthias Hauswirth</em></p>
+                                            <ul>
+                                                <li>One of the most important courses of the bachelor as it teaches first year
+                                                    students to write code in Java</li>
+                                                <li>Took care of students with special needs along the semester and during the exams
+                                                </li>
+                                                <li>Mentored and lead small groups of students in their end-of-semester project</li>
+                                            </ul>
+                                        </div>
+                                        <div class="resume-item secondary">
+                                            <h4 style="font-weight: normal">TA - Systems Programming</h4>
+                                            <h5>Autumn 2022</h5>
+                                            <p><em>6 ECTS - Prof. Antonio Carzaniga</em></p>
+                                            <p>
+                                                <ul>
+                                                    <li>Teaches fundamentals of C and C++ during the second year</li>
+                                                    <li>Closely participated in assignment and exam corrections</li>
+                                                </ul>
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <div>
+                                    <div class="resume-item" data-aos="fade-up">
                                         <h4>UROP</h4>
                                         <h5>Summer 2023</h5>
                                         <p><em>Internship at Università della Svizzera Italiana, Lugano, CH</em></p>
@@ -268,44 +535,7 @@
                                         </p>
                                     </div>
                                     </div>
-                        <div>
+
-                            <div class="resume-item" data-aos="fade-up">
-                                <h4>Teacher assistant</h4>
-                                <h5>2022 - present</h5>
-                                <p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p>
-                                <p>
-                                    Helped teachers with grading assignments and exams. Tried to create a meaningful
-                                    connection with students that needed my help to make them succeed in completing
-                                    their course. I loved being able to transmit my passion on to them and see the
-                                    sparkles in their eyes when they learned about concepts I taught them.
-                                </p>
-                            </div>
-                            <div class="resume-item secondary" data-aos="fade-up">
-                                <h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4>
-                                <h5>Spring 2023</h5>
-                                <p><em>9 ECTS - Prof. Matthias Hauswirth</em></p>
-                                <ul>
-                                    <li>
-                                        One of the most important courses of the bachelor as it teaches first year
-                                        students to
-                                        write code in Java
-                                    </li>
-                                    <li>Mentored and lead three groups of two or three students in their end-of-semester
-                                        project</li>
-                                </ul>
-                            </div>
-                            <div class="resume-item secondary" data-aos="fade-up">
-                                <h4 style="font-weight: normal">TA - Systems Programming</h4>
-                                <h5>Autumn 2022</h5>
-                                <p><em>6 ECTS - Prof. Antonio Carzaniga</em></p>
-                                <p>
-                                <ul>
-                                    <li>Teaches fundamentals of C and C++ during the second year</li>
-                                    <li>Closely participated in assignment and exam corrections</li>
-                                </ul>
-                                </p>
-                            </div>
-                        </div>
                                     <div class="resume-item" data-aos="fade-up">
                                         <h4>Front-end Intern</h4>
                                         <h5>Autumn 2022</h5>
@@ -343,36 +573,97 @@
                                             </ul>
                                         </p>
                                     </div>
+
+                                    <div class="resume-fade">
+                                        <button id="resume-toggle" class="btn resume-btn">Expand <i class="bi bi-chevron-down"></i></button>
+                                        </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
 
             </div>
-            <a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-up">Download my CV </a>
+            <a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-in">Download my CV </a>
         </section><!-- End My Resume Section -->
 
+
         <!-- ======= My Skills Section ======= -->
         <section id="skills" class="skills">
             <div class="container">
 
-                <div class="section-title">
+                <div class="section-title" data-aos="fade-in">
-                    <span class="prevent-select">My Skills</span>
+                    <span class="prevent-select">My Interests</span>
-                    <h2>My Skills</h2>
+                    <h2>My Interests</h2>
-                    <p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
+                    <p>A blend of technical expertise and personal passions</p>
                 </div>
-                <ul id="skills-filters" class="d-flex justify-content-center">
+                <ul id="skills-filters" class="d-flex justify-content-lg-center" data-aos="fade-up">
                     <li data-filter="*" class="filter-active">All</li>
                     <li data-filter=".filter-prod">Productivity</li>
-                    <li data-filter=".filter-lang">Languages</li>
-                    <li data-filter=".filter-frame">Frameworks</li>
                     <li data-filter=".filter-web">Web</li>
-                    <li data-filter=".filter-other">Other</li>
+                    <li data-filter=".filter-hobby">Hobbies</li>
                 </ul>
 
                 <!-- TODO: check the filter & link of each thing (normally the first
                     line should be good) -->
-                <div class="skills-container">
+                <div class="skills-container" data-aos="fade-up">
                     <div class="row">
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
+
+                        <div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
+                            <div class="icon-box">
+                                <div class="icon"><i class="fa fa-masks-theater"></i></div>
+                                <h4 class="title"><a>Theater</a></h4>
+                                <p class="description">
+                                    For seven years, I've been part of a theater group focusing on physical theater,
+                                    telling stories through movement and dance instead of spoken words. This experience
+                                    has significantly sharpened my non-verbal communication skills and deepened my
+                                    understanding of storytelling.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
+                            <div class="icon-box">
+                                <div class="icon"><i class="fa fa-basketball"></i></div>
+                                <h4 class="title"><a>Basketball</a></h4>
+                                <p class="description">
+                                    I began my journey as a Table Official in basketball after frequently attending a
+                                    friend's matches, which led to my involvement with the SFT Lugano Tigers. Following
+                                    a brief training, I assumed the role, contributing to the game by managing scores
+                                    and timekeeping, blending my passion with responsibility.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
+                            <div class="icon-box">
+                                <div class="icon"><i class="fa fa-chess"></i></div>
+                                <h4 class="title"><a>Chess</a></h4>
+                                <p class="description">
+                                    Early in 2023, a friend introduced me to chess, sparking a passion that has grown
+                                    ever since. While I'm aware that I'm not the best player, I enjoy playing regularly
+                                    and am dedicated to improving my skills.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div class="mb-5 col-md-6 col-lg-3 skill-item filter-web filter-prod filter-hobby">
+                            <div class="icon-box">
+                                <div class="icon"><i class="bx bx-server"></i></div>
+                                <h4 class="title"><a>Server Management</a></h4>
+                                <p class="description">
+                                    Since 2018, I've been diving into the world of server administration, experimenting
+                                    with various hardware setups. It's been an enriching journey that's expanded my
+                                    technical horizons. I've come to appreciate the art of keeping servers running
+                                    smoothly and securely. Additionally, delving into DevOps activities has allowed me
+                                    to bridge the gap between development and operations, streamlining processes and
+                                    improving overall efficiency.
+                                </p>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="row">
+                        <div class="mb-5 col-md-6 col-lg-3 skill-item filter-prod">
                             <div class="icon-box">
                                 <div class="icon">
                                     <img src="assets/img/neovim.png" alt="neovim-logo" />
@@ -387,24 +678,23 @@
                             </div>
                         </div>
 
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
+                        <div class="mb-5 col-md-6 col-lg-3 skill-item filter-prod">
                             <div class="icon-box">
                                 <div class="icon">
                                     <img src="assets/img/arch.png" alt="arch-linux-logo" />
                                 </div>
                                 <h4 class="title"><a href="https://archlinux.org">Arch Linux</a></h4>
-                                <p class="description">Arch Linux is a minimalist, user-centric operating system that
+                                <p class="description">
-                                    I've
+                                    Arch Linux is a minimalist, user-centric operating system that I've come to
-                                    come to appreciate. It's not for everyone, but if you value control and enjoy
+                                    appreciate. It's not for everyone, but if you value control and enjoy crafting your
-                                    crafting
+                                    system to suit your needs, it's a solid choice. With a rolling release model and a
-                                    your system to suit your needs, it's a solid choice. With a rolling release model
-                                    and a
                                     wealth of user-contributed packages, Arch Linux offers a clean slate to build your
-                                    computing environment.</p>
+                                    computing environment.
+                                </p>
                             </div>
                         </div>
 
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
+                        <div class="mb-5 col-md-6 col-lg-3 skill-item filter-prod filter-web">
                             <div class="icon-box">
                                 <div class="icon">
                                     <img src="assets/img/docker.png" alt="docker-logo" />
@@ -417,328 +707,23 @@
                                 </p>
                             </div>
                         </div>
-
-                        <div class="col-md-6 col-lg-3
-                            mb-5 skill-item filter-web">
-                            <div class="icon-box">
-                                <div class="icon"><i class="bx bx-server"></i></div>
-                                <h4 class="title"><a href="">Server Management</a></h4>
-                                <p class="description">Since 2018, I've been diving into the world of server
-                                    administration,
-                                    experimenting with various hardware setups. It's been an enriching journey that's
-                                    expanded my technical horizons. I've come to appreciate the art of keeping servers
-                                    running smoothly and securely. Additionally, delving into DevOps activities has
-                                    allowed
-                                    me to bridge the gap between development and operations, streamlining processes and
-                                    improving overall efficiency.</p>
                     </div>
                 </div>
-
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
-                            <div class="icon-box">
-                                <div class="icon"><i class="fa fa-masks-theater"></i></div>
-                                <h4 class="title"><a href="https://neovim.io">Theater</a></h4>
-                                <p class="description">
-                                    Neovim is a versatile text editor that's become
-                                    an integral part of my workflow. It
-                                    offers customization, plugin support, and version control integration, making it a
-                                    reliable tool for my coding and writing tasks.
-                                </p>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
-                            <div class="icon-box">
-                                <div class="icon">
-                                    <img src="assets/img/tsjs.png" alt="neovim-logo" />
-                                </div>
-                                <h4 class="title"><a href="https://neovim.io">Javascript / Typescript</a></h4>
-                                <p class="description">
-                                    Neovim is a versatile text editor that's become
-                                    an integral part of my workflow. It
-                                    offers customization, plugin support, and version control integration, making it a
-                                    reliable tool for my coding and writing tasks.
-                                </p>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
-                            <div class="icon-box">
-                                <div class="icon">
-                                    <img src="assets/img/neovim.png" alt="neovim-logo" />
-                                </div>
-                                <h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
-                                <p class="description">
-                                    Neovim is a versatile text editor that's become
-                                    an integral part of my workflow. It
-                                    offers customization, plugin support, and version control integration, making it a
-                                    reliable tool for my coding and writing tasks.
-                                </p>
-                            </div>
-                        </div>
-                        <div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
-                            <div class="icon-box">
-                                <div class="icon">
-                                    <img src="assets/img/neovim.png" alt="neovim-logo" />
-                                </div>
-                                <h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
-                                <p class="description">
-                                    Neovim is a versatile text editor that's become
-                                    an integral part of my workflow. It
-                                    offers customization, plugin support, and version control integration, making it a
-                                    reliable tool for my coding and writing tasks.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
         </section><!-- End My Services Section -->
 
-        <!-- ======= Testimonials Section ======= -->
-        <section id="testimonials" class="testimonials">
-            <div class="container position-relative">
-
-                <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
-                    <div class="swiper-wrapper">
-
-                        <div class="swiper-slide">
-                            <div class="testimonial-item">
-                                <img src="assets/img/testimonials/hauswirth.jpg" class="testimonial-img" alt="">
-                                <h3>Matthias Hauswirth</h3>
-                                <h4>Professor</h4>
-                                <p>
-                                    <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                                    As an undergraduate teaching assistant for my “Programming Fundamentals 2” course,
-                                    Arnaud did a wonderful job. He filled a role often taken by graduate students, and
-                                    he excelled at doing so. Arnaud combines a strong conceptual understanding with
-                                    great social skills, which is essential for the role of a teaching assistant. He is
-                                    exceptionally proactive and independent, which makes him a great member of any team.
-                                    <i class="bx bxs-quote-alt-right quote-icon-right"></i>
-                                </p>
-                            </div>
-                        </div><!-- End testimonial item -->
-
-                        <div class="swiper-slide">
-                            <div class="testimonial-item">
-                                <img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
-                                <h3>Sara Wilsson</h3>
-                                <h4>Designer</h4>
-                                <p>
-                                    <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                                    Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid
-                                    cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet
-                                    legam anim culpa.
-                                    <i class="bx bxs-quote-alt-right quote-icon-right"></i>
-                                </p>
-                            </div>
-                        </div><!-- End testimonial item -->
-
-                        <div class="swiper-slide">
-                            <div class="testimonial-item">
-                                <img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
-                                <h3>Jena Karlis</h3>
-                                <h4>Store Owner</h4>
-                                <p>
-                                    <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                                    Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem
-                                    veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint
-                                    minim.
-                                    <i class="bx bxs-quote-alt-right quote-icon-right"></i>
-                                </p>
-                            </div>
-                        </div><!-- End testimonial item -->
-
-                        <div class="swiper-slide">
-                            <div class="testimonial-item">
-                                <img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
-                                <h3>Matt Brandon</h3>
-                                <h4>Freelancer</h4>
-                                <p>
-                                    <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                                    Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim
-                                    fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem
-                                    dolore labore illum veniam.
-                                    <i class="bx bxs-quote-alt-right quote-icon-right"></i>
-                                </p>
-                            </div>
-                        </div><!-- End testimonial item -->
-
-                        <div class="swiper-slide">
-                            <div class="testimonial-item">
-                                <img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt="">
-                                <h3>John Larson</h3>
-                                <h4>Entrepreneur</h4>
-                                <p>
-                                    <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                                    Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster
-                                    veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam
-                                    culpa fore nisi cillum quid.
-                                    <i class="bx bxs-quote-alt-right quote-icon-right"></i>
-                                </p>
-                            </div>
-                        </div><!-- End testimonial item -->
-
-                    </div>
-                    <div class="swiper-pagination"></div>
-                </div>
-
-            </div>
-        </section><!-- End Testimonials Section -->
-
-
-        <!-- ======= My Portfolio Section ======= -->
-        <section id="portfolio" class="portfolio">
-            <div class="container">
-
-                <div class="section-title">
-                    <span class="prevent-select">My Portfolio</span>
-                    <h2>My Portfolio</h2>
-                    <p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
-                </div>
-
-                <ul id="portfolio-flters" class="d-flex justify-content-center">
-                    <li data-filter="*" class="filter-active">All</li>
-                    <li data-filter=".filter-app">App</li>
-                    <li data-filter=".filter-card">Card</li>
-                    <li data-filter=".filter-web">Web</li>
-                </ul>
-
-                <div class="row portfolio-container">
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>App 1</h4>
-                            <p>App</p>
-                            <a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="App 1"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-web">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Web 3</h4>
-                            <p>Web</p>
-                            <a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>App 2</h4>
-                            <p>App</p>
-                            <a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="App 2"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Card 2</h4>
-                            <p>Card</p>
-                            <a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-web">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Web 2</h4>
-                            <p>Web</p>
-                            <a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Web 2"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>App 3</h4>
-                            <p>App</p>
-                            <a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="App 3"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Card 1</h4>
-                            <p>Card</p>
-                            <a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Card 1"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Card 3</h4>
-                            <p>Card</p>
-                            <a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Card 3"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-web">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid"
-                                alt=""></div>
-                        <div class="portfolio-info">
-                            <h4>Web 3</h4>
-                            <p>Web</p>
-                            <a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
-                            <a href="portfolio-details.html" class="details-link" title="More Details"><i
-                                    class="bx bx-link"></i></a>
-                        </div>
-                    </div>
-
-                </div>
-
-            </div>
-        </section><!-- End My Portfolio Section -->
         
         <!-- ======= Contact Me Section ======= -->
         <section id="contact" class="contact">
             <div class="container">
 
-                <div class="section-title" data-aos="fade-up">
+                <div class="section-title" data-aos="fade-in">
                     <span class="prevent-select">Contact Me</span>
                     <h2>Contact Me</h2>
-                    <p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
+                    <p>Feel free to reach out for collaborations or to learn more about my work.</p>
                 </div>
                 <div class="row">
                     <div class="col-md-6" data-aos="fade-up-right">
-                        <div class="email info-box h-100 d-flex flex-column
+                        <div class="email info-box h-100 d-flex flex-column justify-content-around">
-                                justify-content-around">
                             <i><i class="bx bx-envelope"></i></i>
                             <h3>Email Me</h3>
                             <a href="mailto:arnaud.fauconnet.pro@gmail.com">arnaud.fauconnet.pro@gmail.com</a>
@@ -750,8 +735,6 @@
                             <h3>Social Profiles</h3>
                             <div class="social-links">
                                 <a href="https://github.com/karma-riuk" class="github"><i class="bi bi-github"></i></a>
-                                <a href="https://www.instagram.com/arno.fauconnet/" class="instagram"><i
-                                        class="bi bi-instagram"></i></a>
                                 <a href="https://ch.linkedin.com/in/arnaud-fauconnet-01963b266" class="linkedin"><i
                                         class="bi bi-linkedin"></i></a>
                             </div>
@@ -772,13 +755,12 @@
                 bit about who I am and what I am capable of.</p>
             <div class="social-links">
                 <a href="https://github.com/karma-riuk" class="github"><i class="bx bxl-github"></i></a>
-                <a href="https://www.instagram.com/arno.fauconnet/" class="instagram"><i
-                        class="bx bxl-instagram"></i></a>
                 <a href="https://ch.linkedin.com/in/arnaud-fauconnet-01963b266" class="linkedin"><i
                         class="bx bxl-linkedin"></i></a>
             </div>
             <div class="copyright">
-                &copy; Copyright <strong><span>Laura</span></strong>. All Rights Reserved
+                &copy; Copyright <strong><span>Laura</span></strong>. All Rights
+                    Reserved
             </div>
             <div class="credits">
                 <!-- All the links in the footer should remain intact. -->