Compare commits

...

4 Commits

Author SHA1 Message Date
Karma Riuk
5f772b1f78 formatted code 2024-03-15 14:55:13 +01:00
Karma Riuk
0f1535f0ec added a bunch of projects with their respective images 2024-03-15 14:45:59 +01:00
Karma Riuk
d777587b29 tuned down the animations a lil 2024-03-12 14:35:31 +01:00
Karma Riuk
58626fec3a skills: removed some filters, added the chess
card and moved things around
2024-03-12 14:24:25 +01:00
9 changed files with 809 additions and 818 deletions

View File

@ -111,9 +111,12 @@ 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 */
}
/*--------------------------------------------------------------
@ -759,7 +762,6 @@ section {
# My Skills
--------------------------------------------------------------*/
.skills #skills-filters {
list-style: none;
margin-bottom: 20px;
overflow-x: auto;
@ -1009,31 +1011,44 @@ section {
z-index: 3;
right: 15px;
transition: all ease-in-out 0.3s;
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.7);
padding: 10px 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {
font-size: 18px;
color: var(--background);
color: var(--text-color-alt);
font-weight: 600;
color: var(--background);
margin-bottom: 0px;
}
.portfolio .portfolio-item .portfolio-info p {
color: rgba(255, 255, 255, 0.8);
color: var(--text-color-alt);
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;
top: calc(50% - 18px);
color: var(--background);
color: var(--text-color-alt);
transition: 0.3s;
}
@ -1042,10 +1057,6 @@ section {
color: #ffc041;
}
.portfolio .portfolio-item .portfolio-info .details-link {
right: 10px;
}
.portfolio .portfolio-item:hover .portfolio-img img {
transform: scale(1.2);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 425 KiB

View File

@ -115,7 +115,8 @@
</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> -->
@ -225,7 +226,7 @@
quality
assurance, data modeling, and decision support.</p>
</div>
<div class="resume-item" data-aos="fade-up">
<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>
@ -268,8 +269,8 @@
</p>
</div>
</div>
<div>
<div class="resume-item" data-aos="fade-up">
<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>
@ -280,17 +281,19 @@
sparkles in their eyes when they learned about concepts I taught them.
</p>
</div>
<div class="resume-item secondary" data-aos="fade-up">
<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>One of the most important courses of the bachelor as it teaches first year
students to write code in Java</li>
<li>Took care of students with special needs along the semester and during the exams
</li>
<li>Mentored and lead small groups of students in their end-of-semester project</li>
</ul>
</div>
<div class="resume-item secondary" data-aos="fade-up">
<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>
@ -343,7 +346,7 @@
</div>
</div>
<a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-up">Download my CV </a>
<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 ======= -->
@ -358,16 +361,69 @@
<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">
@ -390,18 +446,17 @@
<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">
<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" />
@ -414,68 +469,15 @@
</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-web filter-prod filter-hobby">
<div class="icon-box">
<div class="icon"><i class="bx bx-server"></i></div>
<h4 class="title"><a>Server Management</a></h4>
<p class="description">Since 2018, I've been diving into the world of server
administration,
experimenting with various hardware setups. It's been an enriching journey that's
expanded my technical horizons. I've come to appreciate the art of keeping servers
running smoothly and securely. Additionally, delving into DevOps activities has
allowed
me to bridge the gap between development and operations, streamlining processes and
improving overall efficiency.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby">
<div class="icon-box">
<div class="icon"><i class="fa fa-masks-theater"></i></div>
<h4 class="title"><a>Theater</a></h4>
<p class="description">
For seven years, I've been part of a theater group focusing on physical theater, telling stories through movement and
dance instead of spoken words. This experience has significantly sharpened my non-verbal communication skills and
deepened my understanding of storytelling.
</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-lang filter-web">
<div class="icon-box">
<div class="icon">
<img src="assets/img/tsjs.png" alt="typescript-logo" />
</div>
<h4 class="title"><a href="https://www.typescriptlang.org">Javascript / Typescript</a></h4>
<p class="description">
Through university courses and internships, I've developed a strong proficiency in TypeScript, an essential tool for
modern web development. Its ability to enhance JavaScript with type safety and clearer code structure has made my
projects more robust and maintainable, positioning me as a skilled developer in this area.
</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-hobby">
<div class="icon-box">
<div class="icon"><i class="fa fa-basketball"></i></div>
<h4 class="title"><a>Basketball</a></h4>
<p class="description">
I began my journey as a Table Official in basketball after frequently attending a friend's matches, which led to my
involvement with the SFT Lugano Tigers. Following a brief training, I assumed the role, contributing to the game by
managing scores and timekeeping, blending my passion with responsibility.
</p>
</div>
</div>
</div>
</div>
</section><!-- End My Services Section -->
<!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials">
<div class="container position-relative">
<div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
<div class="testimonials-slider swiper" data-aos="fade-in">
<div class="swiper-wrapper">
<div class="swiper-slide">
@ -502,12 +504,14 @@
<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>
@ -520,12 +524,14 @@
<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>
@ -546,7 +552,7 @@
<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>
<p>The building blocks of my career</p>
</div>
<ul id="portfolio-flters" class="d-flex justify-content-center">
@ -558,121 +564,95 @@
<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/portfolio-1.jpg" class="img-fluid"
<div class="portfolio-img"><img src="assets/img/portfolio/flying-balls2.png" 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>
<h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding
Polygons</a></h4>
<div>
<p>
An extension of a physics engine to simulate polygons,
focusing on collision detection and effects in
real-time, ensuring smooth
animations.<span class="br"></span>
Language: C++
</p>
<a href="https://github.com/karma-riuk/flying-balls" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-img"><img src="assets/img/portfolio/esim.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>
<h4><a href="https://github.com/karma-riuk/flying-balls">HDR ESIM</a></h4>
<div>
<p>
Extended a the simulation of an event camera in order to generate HDR
frames.<span class="br"></span>
Language: C++
</p>
<a href="https://github.com/karma-riuk/hdr_esim" class="details-link"
title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-img"><img src="assets/img/portfolio/aoc.jpeg" 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>
<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/portfolio-4.jpg" class="img-fluid"
<div class="portfolio-img"><img src="assets/img/portfolio/paper-mosaik.png" 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>
<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 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"
<div class="portfolio-img"><img src="assets/img/portfolio/maze-solver.gif" 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>
<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 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>