Compare commits

..

38 Commits

Author SHA1 Message Date
9ed9135208 updated cv 2025-03-24 12:17:41 +01:00
fafd7139e4 fixed final little detail about videos 2025-02-20 14:53:46 +01:00
0cab633f03 updated cv 2025-02-20 14:34:20 +01:00
ef84eec124 made videos better 2025-02-20 14:27:07 +01:00
bbeaf46b27 downscaled the footer background to load faster 2025-02-20 14:12:04 +01:00
1462461d70 moved from gifs to mp4 because gifs were heavy as fuck 2025-02-20 14:09:29 +01:00
598193d364 made images lazy to make loading faster 2025-02-20 12:11:55 +01:00
0a3332c9fe made hero lower res to make loading quicker 2025-02-20 12:11:43 +01:00
9f3e554624 made the resume better (is collpased by default,
and can be expanded)
2025-02-20 12:00:25 +01:00
3c5ce5c07a updated the resume 2025-02-20 09:51:22 +01:00
3d1943791e tried to fix the colour of higlight in light theme 2025-02-20 09:31:39 +01:00
d73e027641 fixed hover of portfolio 2025-02-19 15:38:36 +01:00
3c36906d86 moved the projects around 2025-02-19 15:26:32 +01:00
8a18029a0b updated cv 2025-02-19 15:18:44 +01:00
3132b4f325 added todo 2025-02-19 15:12:16 +01:00
cd7cfbbb7c added stickfosh to my portfolio 2025-02-19 15:10:41 +01:00
cd5330b92c updated cv 2025-02-19 14:10:27 +01:00
ed4b9a9a56 updated masters GPA 2025-02-19 13:13:00 +01:00
11c0688f6c moved stuff around 2025-01-28 13:20:35 +01:00
f9a9dfc653 commented out the filters for the projects section 2025-01-28 13:15:46 +01:00
8c3b3e501e removed instagram from socials 2025-01-28 13:11:06 +01:00
55467968bd fixed job title 2025-01-28 13:10:33 +01:00
5a92fd84ce added GPA of masters 2025-01-28 13:10:25 +01:00
161c033491 test was successful 2024-06-10 16:41:35 +02:00
662cda7ac4 testing somthing 2024-06-10 16:38:46 +02:00
c7fb1a68cd fix typo 2024-06-10 16:11:14 +02:00
4229a08c50 updated cv 2024-04-16 09:19:23 +02:00
4ddf0e4c6a updated cv 2024-04-16 09:18:13 +02:00
b7f3ce6899 updated cv 2024-04-16 09:04:35 +02:00
2c13c79d10 updated cv 2024-04-16 09:01:54 +02:00
e2950995fb updated cv 2024-04-03 17:49:16 +02:00
ad837910a3 updated cv 2024-04-03 17:47:03 +02:00
59bdd9b784 updated cv 2024-04-01 12:21:57 +02:00
516a944d22 updated cv 2024-04-01 12:20:15 +02:00
ab23d9e344 fixed skills title 2024-03-18 21:42:55 +01:00
b47c9ad995 removed the unessecary pics and modifies two gifs
to make them shorter
2024-03-17 09:08:17 +01:00
a4ba8c0c86 cleaned up the animations 2024-03-17 09:07:47 +01:00
ee3d06d939 formatted the tailwind classes 2024-03-16 10:25:53 +01:00
27 changed files with 527 additions and 413 deletions

View File

@ -11,7 +11,8 @@
--------------------------------------------------------------*/
:root {
color-scheme: dark;
--highlight: #ffb727;
/* --highlight: #ffb727; */
--highlight: #f3a200;
--highlight-alt: #ffc85a;
--background: #fff;
@ -681,6 +682,45 @@ section {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
}
.resume-content {
max-height: 110vh;
overflow-y: hidden;
}
.resume-content.expanded {
display:block;
max-height: none;
overflow-y: visible;
}
.resume-fade {
position: absolute;
display:flex;
justify-content: center;
bottom: 0;
width: 100%;
height: 50px;
background: linear-gradient(to bottom, transparent, var(--background) 50%);
pointer-events: none;
}
.resume-fade.expanded {
background: var(--background);
}
.resume-btn {
position: absolute;
bottom: 0;
font-size: 1em !important;
border: none;
text-align: center;
z-index: 100;
box-shadow: none !important;
pointer-events: auto;
}
.resume .resume-title {
@ -693,7 +733,7 @@ section {
.resume .resume-item {
padding: 0 0 20px 20px;
margin-top: -2px;
margin-left: 8px;
border-left: 2px solid var(--resume-border);
position: relative;
}
@ -971,6 +1011,15 @@ section {
margin-bottom: 20px;
}
.portfolio video, .portfolio img{
max-width: 100%;
}
.portfolio video {
display: block; /* html video tags have a phantom bottom margin, this is the only way to remove it */
margin: auto; /* to center the video inside the container */
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
@ -996,7 +1045,10 @@ section {
}
.portfolio .portfolio-item .portfolio-img {
text-align: center;
overflow: hidden;
border: 1px solid var(--background);
transition: 0.3s;
}
.portfolio .portfolio-item .portfolio-img img {
@ -1007,11 +1059,11 @@ section {
opacity: 0;
position: absolute;
left: 15px;
bottom: 0;
bottom: 3px;
z-index: 3;
right: 15px;
transition: all ease-in-out 0.3s;
background: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, 0.9);
padding: 10px 15px;
}
@ -1057,8 +1109,9 @@ section {
color: #ffc041;
}
.portfolio .portfolio-item:hover .portfolio-img img {
transform: scale(1.2);
.portfolio .portfolio-item:hover .portfolio-img {
/* transform: scale(1.2); */
border-color: var(--highlight);
}
.portfolio .portfolio-item:hover .portfolio-info {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 154 KiB

BIN
assets/img/hero-bg-2k.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 509 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 189 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

Binary file not shown.

View File

@ -161,6 +161,19 @@
true
);
on("click", "#resume-toggle", e => {
console.log("sup")
const sec = select("#resume-section");
const btn = e.target;
sec.classList.toggle("expanded");
select(".resume-fade").classList.toggle("expanded");
if (sec.classList.contains("expanded"))
btn.innerHTML = 'Hide <i class="bi bi-chevron-up"></i>';
else
btn.innerHTML = 'Expand <i class="bi bi-chevron-down"></i>';
AOS.refresh();
})
/**
* Scroll with ofset on page load with hash links in the url
*/

Binary file not shown.

View File

@ -44,18 +44,17 @@
<body class="dark">
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex justify-content-center
align-items-center header-transparent">
<header id="header" class="fixed-top d-flex justify-content-center align-items-center header-transparent">
<nav id="navbar" class="navbar" data-aos="fade-down" data-aos-delay="2000">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#resume">Resume</a></li>
<li><a class="nav-link scrollto" href="#skills">Skills</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#skills">Interests</a></li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<li><i class="dark-mode bi icon-white bi-sun-fill" onClick="toggleDarkMode(event)"></i>
<li><i class="bi icon-white bi-sun-fill dark-mode" onClick="toggleDarkMode(event)"></i>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
@ -79,7 +78,7 @@
<section id="about" class="about">
<div class="container">
<div class="section-title" data-aos="fade-up">
<div class="section-title" data-aos="fade-in">
<span class="prevent-select">About Me</span>
<h2>About Me</h2>
<p>I have a deep passion for computer science and enjoy
@ -92,13 +91,11 @@
</div>
<div class="row">
<div class="image col-lg-4 d-flex align-items-stretch
justify-content-center justify-content-lg-start" data-aos="fade-up-right">
<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="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">
<div class="mt-4 col-lg-6 mt-lg-0">
<ul>
<li><i class="bi bi-chevron-right"></i>
<strong>Name:</strong>
@ -137,32 +134,28 @@
<div data-aos="fade-up">
<div class="progress">
<span class="skill"><i class="flag
flag-france"></i>French <i class="val">Native</i></span>
<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>
<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>
<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>
<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>
@ -178,300 +171,137 @@
</div>
</section><!-- End About Me Section -->
<!-- ======= My Resume Section ======= -->
<section id="resume" class="resume">
<!-- ======= My Portfolio Section ======= -->
<section id="portfolio" class="portfolio">
<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 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>
<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>
<!-- <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 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">
<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>
<!-- TODO: maybe use the language as filters? -->
<!-- TODO: add the ray tracer project -->
<div class="row portfolio-container" data-aos="fade-up">
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-img"><video autoplay loop muted="true" src="assets/img/portfolio/maze-solver.mp4"></div>
<div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/maze-solver-go">Maze Solver</a></h4>
<div>
<p>
A simple maze solver that takes in various types of maze as input and
outputs the solution.<span class="br"></span>
Language: Go
</p>
<a href="https://github.com/karma-riuk/maze-solver-go" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-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 data-aos="fade-up">
<div class="resume-item">
<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">
<h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4>
<h5>Spring 2023 & 2024</h5>
<p><em>9 ECTS - Prof. Matthias Hauswirth</em></p>
<ul>
<li>One of the most important courses of the bachelor as it teaches first year
students to write code in Java</li>
<li>Took care of students with special needs along the semester and during the exams
</li>
<li>Mentored and lead small groups of students in their end-of-semester project</li>
</ul>
</div>
<div class="resume-item secondary">
<h4 style="font-weight: normal">TA - Systems Programming</h4>
<h5>Autumn 2022</h5>
<p><em>6 ECTS - Prof. Antonio Carzaniga</em></p>
<p>
<ul>
<li>Teaches fundamentals of C and C++ during the second year</li>
<li>Closely participated in assignment and exam corrections</li>
</ul>
</p>
</div>
</div>
<div 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 class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-img"><video autoplay loop muted="true" src="assets/img/portfolio/stickfosh.mp4">
</div>
<div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/stickfosh">Stickfosh</a></h4>
<div>
<p>
A chess engine written from scratch, just like stockfish but worse :)<span class="br"></span>
Languages: C++, Python
</p>
<a href="https://github.com/karma-riuk/stickfosh" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-img"><img src="assets/img/portfolio/esim.jpg" class="img-fluid" alt="">
</div>
<div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/hdr_esim">HDR ESIM</a></h4>
<div>
<p>
Extended a the simulation of an event camera in order to generate HDR
frames.<span class="br"></span>
Language: C++
</p>
<a href="https://github.com/karma-riuk/hdr_esim" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-img"><video autoplay loop muted="true" src="assets/img/portfolio/paper-mosaik.mp4"></div>
<div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4>
<!-- TODO: makea good readme fo this project -->
<div>
<p>
A visualization tool to represent reasearchers in terms of their papers
and their relationships to other
researchers.<span class="br"></span>
Language: Smalltalk (Pharo)
</p>
<a href="https://github.com/karma-riuk/PaperMosaik" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-img"><img src="assets/img/portfolio/aoc.jpeg" class="img-fluid" alt="">
</div>
<div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/advent-of-code">Advent of Code</a></h4>
<div>
<p>
Fun coding challenges during christmas.<span class="br"></span>
Languages: C++, Go, Python
</p>
<a href="https://github.com/karma-riuk/advent-of-code" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-img"><video autoplay loop muted="true"><source src="assets/img/portfolio/flyingballs.mp4"/></video></div>
<div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding Polygons</a></h4>
<div>
<p>
An extension of a physics engine to simulate polygons,
focusing on collision detection and effects in
real-time, ensuring smooth
animations.<span class="br"></span>
Language: C++
</p>
<a href="https://github.com/karma-riuk/flying-balls" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
</div>
<a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-in">Download my CV </a>
</section><!-- End My Resume Section -->
<!-- ======= My Skills Section ======= -->
<section id="skills" class="skills">
<div class="container">
<div class="section-title" 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-web">Web</li>
<li data-filter=".filter-hobby">Hobbies</li>
</ul>
<!-- TODO: check the filter & link of each thing (normally the first
line should be good) -->
<div class="skills-container" data-aos="fade-up">
<div class="row">
<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-hobby">
<div class="icon-box">
<div class="icon"><i class="fa fa-basketball"></i></div>
<h4 class="title"><a>Basketball</a></h4>
<p class="description">
I began my journey as a Table Official in basketball after frequently attending a
friend's matches, which led to my involvement with the SFT Lugano Tigers. Following
a brief training, I assumed the role, contributing to the game by managing scores
and timekeeping, blending my passion with responsibility.
</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby">
<div class="icon-box">
<div class="icon"><i class="fa fa-chess"></i></div>
<h4 class="title"><a>Chess</a></h4>
<p class="description">
Early in 2023, a friend introduced me to chess, sparking a passion that has grown
ever since. While I'm aware that I'm not the best player, I enjoy playing regularly
and am dedicated to improving my skills.
</p>
</div>
</div>
<div class="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>
<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 filter-web">
<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>
</div>
</section><!-- End My Services Section -->
</section><!-- End My Portfolio Section -->
<!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials">
@ -545,134 +375,355 @@
</section><!-- End Testimonials Section -->
<!-- ======= My Portfolio Section ======= -->
<section id="portfolio" class="portfolio">
<!-- ======= My Resume Section ======= -->
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<span class="prevent-select">My Portfolio</span>
<h2>My Portfolio</h2>
<p>The building blocks of my career</p>
<div class="section-title" data-aos="fade-in">
<span class="prevent-select">My Resume</span>
<h2>My Resume</h2>
<p>A brief overview of my professional experience and qualifications</p>
</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">
<!-- 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/flying-balls2.png" 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++
<div class="row">
<div class="col-lg-6">
<div data-aos="fade-up-right">
<h3 class="resume-title">Summary</h3>
<div class="pb-0 resume-item">
<h4>Arnaud Fauconnet</h4>
<p><em>I'm a dedicated computer science enthusiast, fueled by a passion for programming
and
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>
<a href="https://github.com/karma-riuk/flying-balls" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
<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: 9.59/10</em></p>
<p>This program offers me a comprehensive education that delves deep into the latest
software engineering techniques and data engineering principles. The curriculum is
structured around four modules Software Engineering, Data Engineering, Electives,
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">
<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-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 class=" col-lg-6">
<div data-aos="fade-up-left">
<h3 class="resume-title">Professional Experience</h3>
<div class="resume-content" id="resume-section">
<div>
<div class="resume-item">
<h4>Research Lab Assistant</h4>
<h5>August 2024 - June 2024</h5>
<p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p>
<p>
Helped in various tasks in a the research lab of Prof. Laura Pozzi. This lab specializes in the
automation of embedded processor customization, the design and compilation of innovative reconfigurable hardware, and
techniques for Approximate Computing and Logic Synthesis.
<ul>
<li>Made a case study to investigate various optimization methods to improve the performance of an established system</li>
<li>Refactored an entire codebase to make it more modular, cleaner and easier to use and extend</li>
</ul>
</p>
</div>
</div>
<div data-aos="fade-up">
<div class="resume-item">
<h4>Teaching assistant</h4>
<h5>2022 - 2025</h5>
<p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p>
<p>
Helped teachers with grading assignments and exams. Tried to create a meaningful
connection with students that needed my help to make them succeed in completing
their course. I loved being able to transmit my passion on to them and see the
sparkles in their eyes when they learned about concepts I taught them.
</p>
</div>
<div class="resume-item secondary">
<h4 style="font-weight: normal">TA - Automata and Formal Langauges</h4>
<h5>Autumn 2024</h5>
<p><em>3 ECTS - Prof. Matthias Hauswirth</em></p>
<ul>
<li>Teaches the theoretical foundations of computing, focusing on formal models like finite automata and pushdown
automata, and their role in defining and analyzing regular and context-free languages</li>
<li>Closely participated in assignment and exam corrections</li>
</ul>
</div>
<div class="resume-item secondary">
<h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4>
<h5>Spring 2023 & 2024</h5>
<p><em>9 ECTS - Prof. Matthias Hauswirth</em></p>
<ul>
<li>One of the most important courses of the bachelor as it teaches first year
students to write code in Java</li>
<li>Took care of students with special needs along the semester and during the exams
</li>
<li>Mentored and lead small groups of students in their end-of-semester project</li>
</ul>
</div>
<div class="resume-item secondary">
<h4 style="font-weight: normal">TA - Systems Programming</h4>
<h5>Autumn 2022</h5>
<p><em>6 ECTS - Prof. Antonio Carzaniga</em></p>
<p>
<ul>
<li>Teaches fundamentals of C and C++ during the second year</li>
<li>Closely participated in assignment and exam corrections</li>
</ul>
</p>
</div>
</div>
<div>
<div class="resume-item" data-aos="fade-up">
<h4>UROP</h4>
<h5>Summer 2023</h5>
<p><em>Internship at Università della Svizzera Italiana, Lugano, CH</em></p>
<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 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 class="resume-fade">
<button id="resume-toggle" class="btn resume-btn">Expand <i class="bi bi-chevron-down"></i></button>
</div>
</div>
</div>
</div>
</div>
<div 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/paper-mosaik.png" 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-sovler-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-sovler-go" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
</div>
</section><!-- End My Portfolio Section -->
<a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-in">Download my CV </a>
</section><!-- End My Resume Section -->
<!-- ======= My Skills Section ======= -->
<section id="skills" class="skills">
<div class="container">
<div class="section-title" data-aos="fade-in">
<span class="prevent-select">My Interests</span>
<h2>My Interests</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-web">Web</li>
<li data-filter=".filter-hobby">Hobbies</li>
</ul>
<!-- TODO: check the filter & link of each thing (normally the first
line should be good) -->
<div class="skills-container" data-aos="fade-up">
<div class="row">
<div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
<div class="icon-box">
<div class="icon"><i class="fa fa-masks-theater"></i></div>
<h4 class="title"><a>Theater</a></h4>
<p class="description">
For seven years, I've been part of a theater group focusing on physical theater,
telling stories through movement and dance instead of spoken words. This experience
has significantly sharpened my non-verbal communication skills and deepened my
understanding of storytelling.
</p>
</div>
</div>
<div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
<div class="icon-box">
<div class="icon"><i class="fa fa-basketball"></i></div>
<h4 class="title"><a>Basketball</a></h4>
<p class="description">
I began my journey as a Table Official in basketball after frequently attending a
friend's matches, which led to my involvement with the SFT Lugano Tigers. Following
a brief training, I assumed the role, contributing to the game by managing scores
and timekeeping, blending my passion with responsibility.
</p>
</div>
</div>
<div class="mb-5 col-md-6 col-lg-3 skill-item filter-hobby">
<div class="icon-box">
<div class="icon"><i class="fa fa-chess"></i></div>
<h4 class="title"><a>Chess</a></h4>
<p class="description">
Early in 2023, a friend introduced me to chess, sparking a passion that has grown
ever since. While I'm aware that I'm not the best player, I enjoy playing regularly
and am dedicated to improving my skills.
</p>
</div>
</div>
<div class="mb-5 col-md-6 col-lg-3 skill-item filter-web filter-prod filter-hobby">
<div class="icon-box">
<div class="icon"><i class="bx bx-server"></i></div>
<h4 class="title"><a>Server Management</a></h4>
<p class="description">
Since 2018, I've been diving into the world of server administration, experimenting
with various hardware setups. It's been an enriching journey that's expanded my
technical horizons. I've come to appreciate the art of keeping servers running
smoothly and securely. Additionally, delving into DevOps activities has allowed me
to bridge the gap between development and operations, streamlining processes and
improving overall efficiency.
</p>
</div>
</div>
</div>
<div class="row">
<div class="mb-5 col-md-6 col-lg-3 skill-item filter-prod">
<div class="icon-box">
<div class="icon">
<img src="assets/img/neovim.png" alt="neovim-logo" />
</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="mb-5 col-md-6 col-lg-3 skill-item filter-prod">
<div class="icon-box">
<div class="icon">
<img src="assets/img/arch.png" alt="arch-linux-logo" />
</div>
<h4 class="title"><a href="https://archlinux.org">Arch Linux</a></h4>
<p class="description">
Arch Linux is a minimalist, user-centric operating system that 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="mb-5 col-md-6 col-lg-3 skill-item filter-prod filter-web">
<div class="icon-box">
<div class="icon">
<img src="assets/img/docker.png" alt="docker-logo" />
</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>
</div>
</section><!-- End My Services Section -->
<!-- ======= Contact Me Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title" data-aos="fade-up">
<div class="section-title" data-aos="fade-in">
<span class="prevent-select">Contact Me</span>
<h2>Contact Me</h2>
<p>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">
<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>
@ -684,8 +735,6 @@
<h3>Social Profiles</h3>
<div class="social-links">
<a href="https://github.com/karma-riuk" class="github"><i class="bi bi-github"></i></a>
<a href="https://www.instagram.com/arno.fauconnet/" class="instagram"><i
class="bi bi-instagram"></i></a>
<a href="https://ch.linkedin.com/in/arnaud-fauconnet-01963b266" class="linkedin"><i
class="bi bi-linkedin"></i></a>
</div>
@ -706,13 +755,12 @@
bit about who I am and what I am capable of.</p>
<div class="social-links">
<a href="https://github.com/karma-riuk" class="github"><i class="bx bxl-github"></i></a>
<a href="https://www.instagram.com/arno.fauconnet/" class="instagram"><i
class="bx bxl-instagram"></i></a>
<a href="https://ch.linkedin.com/in/arnaud-fauconnet-01963b266" class="linkedin"><i
class="bx bxl-linkedin"></i></a>
</div>
<div class="copyright">
&copy; Copyright <strong><span>Laura</span></strong>. All Rights Reserved
&copy; Copyright <strong><span>Laura</span></strong>. All Rights
Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->