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

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

    <!-- 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>

    <!-- ======= 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><button onclick="toggleDarkMode()">Dark</button> </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>

                            <div class="progress" data-aos="fade-up">
                                <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" data-aos="fade-up">
                                <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" data-aos="fade-up">
                                <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" data-aos="fade-up">
                                <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</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>
                            <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">
                    <span class="prevent-select">My Skills</span>
                    <h2>My Skills</h2>
                    <p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
                </div>

                <div class="row">
                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
                        <div class="icon-box">
                            <div class="icon"><i class="bx bxl-dribbble"></i></div>
                            <h4 class="title"><a href="">Lorem Ipsum</a></h4>
                            <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias
                                excepturi sint occaecati cupiditate non provident</p>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
                        <div class="icon-box">
                            <div class="icon"><i class="bx bx-file"></i></div>
                            <h4 class="title"><a href="">Sed ut perspiciatis</a></h4>
                            <p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                                dolore eu fugiat nulla pariatur</p>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
                        <div class="icon-box">
                            <div class="icon"><i class="bx bx-tachometer"></i></div>
                            <h4 class="title"><a href="">Magni Dolores</a></h4>
                            <p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                                officia deserunt mollit anim id est laborum</p>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
                        <div class="icon-box">
                            <div class="icon"><i class="bx bx-world"></i></div>
                            <h4 class="title"><a href="">Nemo Enim</a></h4>
                            <p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui
                                blanditiis praesentium voluptatum deleniti atque</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">
                    <span class="prevent-select">Contact Me</span>
                    <h2>Contact Me</h2>
                    <p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</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>