From 11c0688f6c95983f2392c79a60db47d7191ebcb1 Mon Sep 17 00:00:00 2001
From: Karma Riuk <riukkarma@gmail.com>
Date: Tue, 28 Jan 2025 13:20:19 +0100
Subject: [PATCH] moved stuff around

---
 index.html | 379 +++++++++++++++++++++++++++--------------------------
 1 file changed, 191 insertions(+), 188 deletions(-)

diff --git a/index.html b/index.html
index 6031df2..476fe5d 100644
--- a/index.html
+++ b/index.html
@@ -50,9 +50,9 @@
             <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">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="bi icon-white bi-sun-fill dark-mode" onClick="toggleDarkMode(event)"></i>
                 </li>
@@ -171,6 +171,194 @@
             </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? --> 
+
+                <div class="row portfolio-container" data-aos="fade-up">
+
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+                        <div class="portfolio-img"><img src="assets/img/portfolio/flyingballs.gif" class="img-fluid" alt=""></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 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/flying-balls">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-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-card">
+                        <div class="portfolio-img"><img
+                                src="assets/img/portfolio/papermosaik.gif" class="img-fluid"
+                                alt=""></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-card">
+                        <div class="portfolio-img"><img src="assets/img/portfolio/maze-solver.gif" class="img-fluid"
+                                alt=""></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>
+
+            </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">
@@ -342,6 +530,7 @@
             <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">
@@ -466,193 +655,7 @@
                 </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-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 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> -->
-
-                <div class="row portfolio-container" data-aos="fade-up">
-
-                    <!-- TODO: move this section right after the about me section -->
-
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/flyingballs.gif" class="img-fluid" alt=""></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 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/flying-balls">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-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-card">
-                        <div class="portfolio-img"><img
-                                src="assets/img/portfolio/papermosaik.gif" class="img-fluid"
-                                alt=""></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-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/maze-solver.gif" class="img-fluid"
-                                alt=""></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>
-
-            </div>
-        </section><!-- End My Portfolio Section -->
-
+        
         <!-- ======= Contact Me Section ======= -->
         <section id="contact" class="contact">
             <div class="container">