karma/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: karma:5f772b1f78efe50ab96d4eb12d38c704dde35982
Branches Tags
karma:main
..
compare: karma:52786bd8d27508577e87499bfdb5f79c51209450
Branches Tags
karma:main

No commits in common. "5f772b1f78efe50ab96d4eb12d38c704dde35982" and "52786bd8d27508577e87499bfdb5f79c51209450" have entirely different histories.
5f772b1f78 ... 52786bd8d2

9 changed files with 818 additions and 809 deletions
Show Stats Expand all files Collapse all files

43
assets/css/style.css
View File

@ -111,12 +111,9 @@ h6 {
}
.prevent-select {
-webkit-user-select: none;
/* Safari */
-ms-user-select: none;
/* IE 10 and IE 11 */
user-select: none;
/* Standard syntax */
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
/*--------------------------------------------------------------
@ -762,6 +759,7 @@ section {
# My Skills
--------------------------------------------------------------*/
.skills #skills-filters {
list-style: none;
margin-bottom: 20px;
overflow-x: auto;
@ -1011,44 +1009,31 @@ section {
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.5);
padding: 10px 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {
font-size: 18px;
color: var(--text-color-alt);
color: var(--background);
font-weight: 600;
color: var(--background);
margin-bottom: 0px;
}
.portfolio .portfolio-item .portfolio-info p {
color: var(--text-color-alt);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-bottom: 0;
}
.portfolio .portfolio-item .portfolio-info div {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.portfolio .portfolio-item .portfolio-info div a {
display: flex;
align-items: center;
}
.portfolio .portfolio-item .portfolio-info div p .br {
display: block;
margin-bottom: 0.5em;
}
.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
position: absolute;
right: 40px;
font-size: 24px;
color: var(--text-color-alt);
top: calc(50% - 18px);
color: var(--background);
transition: 0.3s;
}
@ -1057,6 +1042,10 @@ section {
color: #ffc041;
}
.portfolio .portfolio-item .portfolio-info .details-link {
right: 10px;
}
.portfolio .portfolio-item:hover .portfolio-img img {
transform: scale(1.2);
}

BIN
assets/img/portfolio/aoc.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 71 KiB

BIN
assets/img/portfolio/esim.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 71 KiB

BIN
assets/img/portfolio/flying-balls.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
assets/img/portfolio/flying-balls2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
assets/img/portfolio/maze-solver.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 MiB

BIN
assets/img/portfolio/maze-solver.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

BIN
assets/img/portfolio/paper-mosaik.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 425 KiB

326
index.html
View File

@ -115,8 +115,7 @@
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span
id="age">23</span>
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span id="age">23</span>
</li>
<!-- <li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master in -->
<!-- Software and Data Engineering </span> -->
@ -226,7 +225,7 @@
quality
assurance, data modeling, and decision support.</p>
</div>
<div class="resume-item">
<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>
@ -269,8 +268,8 @@
</p>
</div>
</div>
<div data-aos="fade-up">
<div class="resume-item">
<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>
@ -281,19 +280,17 @@
sparkles in their eyes when they learned about concepts I taught them.
</p>
</div>
<div class="resume-item secondary">
<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>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">
<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>
@ -346,7 +343,7 @@
</div>
</div>
<a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-in">Download my CV </a>
<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 ======= -->
@ -361,69 +358,16 @@
<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-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">
@ -446,17 +390,18 @@
<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
<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>
computing environment.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod filter-web">
<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" />
@ -469,15 +414,68 @@
</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-in">
<div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
<div class="swiper-wrapper">
<div class="swiper-slide">
@ -504,14 +502,12 @@
<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 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>
@ -524,14 +520,12 @@
<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.
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.
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>
@ -552,7 +546,7 @@
<div class="section-title">
<span class="prevent-select">My Portfolio</span>
<h2>My Portfolio</h2>
<p>The building blocks of my career</p>
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
</div>
<ul id="portfolio-flters" class="d-flex justify-content-center">
@ -564,95 +558,121 @@
<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"
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding
Polygons</a></h4>
<div>
<p>
An extension of a physics engine to simulate polygons,
focusing on collision detection and effects in
real-time, ensuring smooth
animations.<span class="br"></span>
Language: C++
</p>
<a href="https://github.com/karma-riuk/flying-balls" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
<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/esim.jpg" class="img-fluid" alt="">
</div>
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-2.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>
<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/aoc.jpeg" class="img-fluid" alt="">
</div>
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-3.jpg" 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>
<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/paper-mosaik.png" class="img-fluid"
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-4.jpg" 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>
<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/maze-solver.gif" class="img-fluid"
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-7.jpg" 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>
<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>