<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Arnaud Fauconnet</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <link href="assets/vendor/aos/aos.css" rel="stylesheet">

    <!-- Favicons -->
    <link href="assets/img/favicon.png" rel="icon">
    <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Satisfy"
        rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="assets/vendor/mdb/mdb.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link href="assets/vendor/font-awesome/css/fontawesome.min.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- =======================================================
  * Template Name: Laura
  * Updated: Jul 27 2023 with Bootstrap v5.3.1
  * Template URL: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body class="dark">

    <!-- ======= Header ======= -->
    <header id="header" class="fixed-top d-flex justify-content-center
            align-items-center header-transparent">

        <nav id="navbar" class="navbar" data-aos="fade-down" data-aos-delay="2000">
            <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="#resume">Resume</a></li>
                <li><a class="nav-link scrollto" href="#skills">Skills</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>
            </ul>
            <i class="bi bi-list mobile-nav-toggle"></i>
        </nav><!-- .navbar -->

    </header><!-- End Header -->

    <!-- ======= Hero Section ======= -->
    <section id="hero">
        <div class="hero-container">
            <h1 data-aos="zoom-in">Arnaud Fauconnet</h1>
            <h2 data-aos="fade" data-aos-delay="1000">I'm a Computer Science graduate</h2>
            <span data-aos="fade-down" data-aos-delay="2000"><a href="#about" class="btn-scroll scrollto" title="Scroll
                    Down"><i class="bx bx-chevron-down"></i></a></span>
        </div>
    </section><!-- End Hero -->

    <main id="main">

        <!-- ======= About Me Section ======= -->
        <section id="about" class="about">
            <div class="container">

                <div class="section-title" data-aos="fade-up">
                    <span class="prevent-select">About Me</span>
                    <h2>About Me</h2>
                    <p>I have a deep passion for computer science and enjoy
                        engaging in in-depth discussions about it.<br />
                        I am self-reliant while also skilled in effective
                        communication and teamwork.<br />
                        I am inherently adaptable, consistently curious, and
                        eager to embrace new experiences.
                    </p>
                </div>

                <div class="row">
                    <div class="image col-lg-4 d-flex align-items-stretch
                            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
                            align-items-stretch justify-content-evenly" data-aos="fade-up-left">
                        <div class="row">
                            <div class="col-lg-6 mt-4 mt-lg-0">
                                <ul>
                                    <li><i class="bi bi-chevron-right"></i>
                                        <strong>Name:</strong>
                                        <span>Arnaud Fauconnet</span>
                                    </li>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Website:</strong>
                                        <a href="https://karma-riuk.com">karma-riuk.com</a>
                                    </li>
                                    <li><i class="bi bi-chevron-right"></i>
                                        <strong>City:</strong>
                                        <span>Lugano, CH</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-6">
                                <ul>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>23</span>
                                    </li>
                                    <!-- <li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master in -->
                                    <!-- Software and Data Engineering </span> -->
                                    <li><i class="bi bi-chevron-right"></i>
                                        <strong>Degree:</strong>
                                        <span>Bachelor in Computer Science</span>
                                    </li>
                                    <li><i class="bi bi-chevron-right"></i> <strong>Email:</strong>
                                        <a
                                            href="mailto:arnaud.fauconnet.pro@gmail.com">arnaud.fauconnet.pro@gmail.com</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- End .content-->


                        <div data-aos="fade-up">

                            <div class="progress">
                                <span class="skill"><i class="flag
                                    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">
                                <span class="skill"><i class="flag
                                    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">
                                <span class="skill"><i class="flag
                                    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">
                                <span class="skill"><i class="flag
                                    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>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>

            </div>
        </section><!-- End About Me Section -->

        <!-- ======= My Resume Section ======= -->
        <section id="resume" class="resume">
            <div class="container">

                <div class="section-title" data-aos="fade-up">
                    <span class="prevent-select">My Resume</span>
                    <h2>My Resume</h2>
                    <p>A brief overview of my professional experience and qualifications</p>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div data-aos="fade-up-right">
                            <h3 class="resume-title">Summary</h3>
                            <div class="resume-item pb-0">
                                <h4>Arnaud Fauconnet</h4>
                                <p><em>I'm a dedicated computer science enthusiast, fueled by a passion for programming
                                        and
                                        a knack for collaborating with others to craft exceptional software solutions.
                                        Currently pursuing my Master's degree in Software and Data Engineering, I'm on a
                                        continuous journey to turn my love for technology into impactful innovations.
                                    </em>
                                </p>
                                <p>
                                <ul>
                                    <li>Unversità della Svizzera Italiana</li>
                                    <li>Lugano, Ticino, CH</li>
                                    <li><a href="mailto:arnaud.fauconnet.pro@gmail.com">arno.fauconnet.pro@gmail.com</a>
                                    </li>
                                </ul>
                                </p>
                            </div>
                        </div>

                        <div data-aos="fade-up">
                            <h3 class="resume-title">Education</h3>
                            <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>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,
                                    and
                                    Master's Thesis – providing me with invaluable insights into software design,
                                    quality
                                    assurance, data modeling, and decision support.</p>
                            </div>
                            <div class="resume-item" data-aos="fade-up">
                                <h4>Bachelor in Informatics</h4>
                                <h5>2020 - 2023</h5>
                                <p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: 9.21/10</em></p>
                                <p>I completed my Bachelor's in Computer Science at USI, where I explored a diverse
                                    curriculum. My favorite courses included "Systems Programming," "Computer Graphics,"
                                    and "Image and Video Processing," which deepened my expertise in these areas. I
                                    excelled in my Bachelor Project (equivalent to a Thesis), earning a perfect score,
                                    highlighting my dedication and systematic problem-solving skills. My time at USI
                                    equipped me with a strong foundation and practical experience, preparing me for a
                                    successful journey in the field of computer science.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div data-aos="fade-up-left">
                            <h3 class="resume-title">Professional Experience</h3>
                            <div class="resume-item">
                                <h4>UROP</h4>
                                <h5>Summer 2023</h5>
                                <p><em>Internship at Università della Svizzera Italiana, Lugano, CH</em></p>
                                <p>
                                    <a
                                        href="https://www.inf.usi.ch/en/informatics-research/internships/students">UROP</a>
                                    (Undergraduate Research Opportunities Program) is an internship offered to the top
                                    five students that apply and allows you to work with a research group of your
                                    choice.
                                <ul>
                                    <li>Worked under the tutelage of Prof. Didyk and PhD student Jorge Condor</li>
                                    <li>Brought my expertise to a project that aims to do HDR reconstruction using
                                        Neural Radiance Fields (NeRFs) in combination with event cameras</li>
                                    <li>Extended a pre-existing event camera simulator to make it compute the data
                                        wanted by my supervisors in order to generate synthetic data to train the NeRFs
                                    </li>
                                    <li>Learned how to use Unreal Engine 5 to create short sequences of a camera flying
                                        around a scene</li>
                                    <li>It was very instructive since neither of my supervisors knew the material I had
                                        to work on, so I had to learn how to read code and understand it deeply in order
                                        to complete the task required of me</li>
                                </ul>
                                </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 & 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" 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>
                            <p><em>Internship at TCPOS SA - Zucchetti Switzerland, Mendrisio, CH</em></p>

                            <p>
                                This internship took place during the Autumn semester of the 3rd year of my Bachelor's
                                degree. It was part of the course "<a href="#">Software Atelier 5: Field Project</a>"
                                where students spend two days per week working for a company associated with USI.
                                <!-- TODO:  ask chatgpt to reformulate SA5 cuz I can't write :))))) -->
                            <ul>
                                <li>Worked under the tutelage of Stefano Sarina which
                                    <!-- TODO: come cazzo si dice che lo stimo un botto in inglese?? Non lo so ma si può chiedere a... chi lo sa? CHATGPT OF COURSE, let's goooooooooooo  -->
                                </li>
                                <li>Went through a full all of the major steps of creating a website:
                                    <ul class="mt-1">
                                        <li>Create a figma design (it was bad, I'm not a designer :) ) </li>
                                        <li>Develop a MVP (minimum viable product)</li>
                                        <li>Fully implement the website with calls to the API on the back-end and
                                            displaying the resulting data</li>
                                    </ul>
                                </li>
                                <li>Created a React app from scratch (without using <code>npm create-react-app</code>)
                                    to learn all about a React application was made of
                                </li>
                                <li>Worked with the following technologies:
                                    <ul class="mt-1">
                                        <li>React</li>
                                        <li>Webpack</li>
                                        <li>TypeScript</li>
                                        <li>SASS</li>
                                        <li>Material UI</li>
                                    </ul>
                                </li>
                            </ul>
                            </p>
                        </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>
        </section><!-- End My Resume Section -->

        <!-- ======= My Skills Section ======= -->
        <section id="skills" class="skills">
            <div class="container">

                <div class="section-title" data-aos="fade-up">
                    <span class="prevent-select">My Skills</span>
                    <h2>My Skills</h2>
                    <p>A blend of technical expertise and personal passions</p>
                </div>
                <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-hobby">Hobbies</li>
                    <li data-filter=".filter-other">Other</li>
                </ul>

                <!-- TODO: check the filter & link of each thing (normally the first
                    line should be good) -->
                <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="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/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
                                    I've
                                    come to appreciate. It's not for everyone, but if you value control and enjoy
                                    crafting
                                    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>
                            </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/docker.png" alt="docker-logo" />
                                </div>
                                <h4 class="title"><a href="https://www.docker.com">Docker</a></h4>
                                <p class="description">Docker is a practical tool for managing containers, which I find
                                    quite handy. It simplifies application deployment and scaling by encapsulating
                                    applications and their dependencies. With Docker, you can create, test, and deploy
                                    applications consistently, making it a valuable addition to any developer's toolkit.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-3 mb-5 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 class="col-md-6 col-lg-3 mb-5 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="col-md-6 col-lg-3 mb-5 skill-item filter-lang filter-web">
                            <div class="icon-box">
                                <div class="icon">
                                    <img src="assets/img/tsjs.png" alt="typescript-logo" />
                                </div>
                                <h4 class="title"><a href="https://www.typescriptlang.org">Javascript / Typescript</a></h4>
                                <p class="description">
                                        Through university courses and internships, I've developed a strong proficiency in TypeScript, an essential tool for
                                        modern web development. Its ability to enhance JavaScript with type safety and clearer code structure has made my
                                        projects more robust and maintainable, positioning me as a skilled developer in this area.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-3 mb-5 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>

                </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>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">
                    <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">
                    <span class="prevent-select">Contact Me</span>
                    <h2>Contact Me</h2>
                    <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
                                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>
                        </div>
                    </div>
                    <div class="col-md-6" data-aos="fade-up-left">
                        <div class="info-box">
                            <i class="bx bx-share-alt"></i>
                            <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>
                        </div>
                    </div>
                </div>

            </div>
        </section><!-- End Contact Me Section -->

    </main><!-- End #main -->

    <!-- ======= Footer ======= -->
    <footer id="footer">
        <div class="container">
            <h3>Arnaud Fauconnet</h3>
            <p>Thanks a lot for visiting my website, I hope you learned a little
                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
            </div>
            <div class="credits">
                <!-- All the links in the footer should remain intact. -->
                <!-- You can delete the links only if you purchased the pro version. -->
                <!-- Licensing information: https://bootstrapmade.com/license/ -->
                <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/laura-free-creative-bootstrap-theme/ -->
                Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
            </div>
        </div>
    </footer><!-- End Footer -->

    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <!-- Vendor JS Files -->
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
    <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
    <script src="assets/vendor/php-email-form/validate.js"></script>
    <script src="assets/vendor/aos/aos.js"></script>

    <!-- Template Main JS File -->
    <script src="assets/js/main.js"></script>

</body>

</html>