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

formatted code

Browse Source
This commit is contained in:
Karma Riuk 2024-03-15 14:52:49 +01:00
parent 0f1535f0ec
commit 5f772b1f78
2 changed files with 723 additions and 704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
assets/css/style.css
View File

@ -111,9 +111,12 @@ h6 {
} }
.prevent-select { .prevent-select {
-webkit-user-select: none; /* Safari */ -webkit-user-select: none;
-ms-user-select: none; /* IE 10 and IE 11 */ /* Safari */
user-select: none; /* Standard syntax */ -ms-user-select: none;
/* IE 10 and IE 11 */
user-select: none;
/* Standard syntax */
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -195,7 +198,7 @@ h6 {
.navbar a, .navbar a,
.navbar a:focus, .navbar a:focus,
.navbar li > i { .navbar li>i {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -218,10 +221,10 @@ h6 {
} }
.navbar a:hover, .navbar a:hover,
.navbar li > i:hover, .navbar li>i:hover,
.navbar .active, .navbar .active,
.navbar .active:focus, .navbar .active:focus,
.navbar li:hover > a { .navbar li:hover>a {
color: var(--highlight); color: var(--highlight);
cursor: pointer; cursor: pointer;
} }
@ -261,11 +264,11 @@ h6 {
.navbar .dropdown ul a:hover, .navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover, .navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a { .navbar .dropdown ul li:hover>a {
color: var(--highlight); color: var(--highlight);
} }
.navbar .dropdown:hover > ul { .navbar .dropdown:hover>ul {
opacity: 1; opacity: 1;
top: 100%; top: 100%;
visibility: visible; visibility: visible;
@ -277,7 +280,7 @@ h6 {
visibility: hidden; visibility: hidden;
} }
.navbar .dropdown .dropdown:hover > ul { .navbar .dropdown .dropdown:hover>ul {
opacity: 1; opacity: 1;
top: 0; top: 0;
left: 100%; left: 100%;
@ -289,7 +292,7 @@ h6 {
left: -90%; left: -90%;
} }
.navbar .dropdown .dropdown:hover > ul { .navbar .dropdown .dropdown:hover>ul {
left: -100%; left: -100%;
} }
} }
@ -357,7 +360,7 @@ h6 {
.navbar-mobile a:hover, .navbar-mobile a:hover,
.navbar-mobile .active, .navbar-mobile .active,
.navbar-mobile li:hover > a { .navbar-mobile li:hover>a {
color: var(--highlight); color: var(--highlight);
} }
@ -392,11 +395,11 @@ h6 {
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a { .navbar-mobile .dropdown ul li:hover>a {
color: var(--highlight); color: var(--highlight);
} }
.navbar-mobile .dropdown > .dropdown-active { .navbar-mobile .dropdown>.dropdown-active {
display: block; display: block;
} }
@ -759,7 +762,6 @@ section {
# My Skills # My Skills
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.skills #skills-filters { .skills #skills-filters {
list-style: none; list-style: none;
margin-bottom: 20px; margin-bottom: 20px;
overflow-x: auto; overflow-x: auto;
@ -1009,7 +1011,7 @@ section {
z-index: 3; z-index: 3;
right: 15px; right: 15px;
transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;
background: rgba(0, 0, 0, .7); background: rgba(0, 0, 0, 0.7);
padding: 10px 15px; padding: 10px 15px;
} }
@ -1026,21 +1028,21 @@ section {
margin-bottom: 0; margin-bottom: 0;
} }
.portfolio .portfolio-item .portfolio-info div{ .portfolio .portfolio-item .portfolio-info div {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.portfolio .portfolio-item .portfolio-info div a{ .portfolio .portfolio-item .portfolio-info div a {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.portfolio .portfolio-item .portfolio-info div p .br{ .portfolio .portfolio-item .portfolio-info div p .br {
display: block; display: block;
margin-bottom: .5em; margin-bottom: 0.5em;
} }
.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .preview-link,

121
index.html
View File

@ -115,7 +115,8 @@
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<ul> <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>
<!-- <li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master in --> <!-- <li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>Master in -->
<!-- Software and Data Engineering </span> --> <!-- Software and Data Engineering </span> -->
@ -285,8 +286,10 @@
<h5>Spring 2023 & 2024</h5> <h5>Spring 2023 & 2024</h5>
<p><em>9 ECTS - Prof. Matthias Hauswirth</em></p> <p><em>9 ECTS - Prof. Matthias Hauswirth</em></p>
<ul> <ul>
<li>One of the most important courses of the bachelor as it teaches first year students to write code in Java</li> <li>One of the most important courses of the bachelor as it teaches first year
<li>Took care of students with special needs along the semester and during the exams</li> 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> <li>Mentored and lead small groups of students in their end-of-semester project</li>
</ul> </ul>
</div> </div>
@ -372,9 +375,10 @@
<div class="icon"><i class="fa fa-masks-theater"></i></div> <div class="icon"><i class="fa fa-masks-theater"></i></div>
<h4 class="title"><a>Theater</a></h4> <h4 class="title"><a>Theater</a></h4>
<p class="description"> <p class="description">
For seven years, I've been part of a theater group focusing on physical theater, telling stories through movement and For seven years, I've been part of a theater group focusing on physical theater,
dance instead of spoken words. This experience has significantly sharpened my non-verbal communication skills and telling stories through movement and dance instead of spoken words. This experience
deepened my understanding of storytelling. has significantly sharpened my non-verbal communication skills and deepened my
understanding of storytelling.
</p> </p>
</div> </div>
</div> </div>
@ -384,9 +388,10 @@
<div class="icon"><i class="fa fa-basketball"></i></div> <div class="icon"><i class="fa fa-basketball"></i></div>
<h4 class="title"><a>Basketball</a></h4> <h4 class="title"><a>Basketball</a></h4>
<p class="description"> <p class="description">
I began my journey as a Table Official in basketball after frequently attending a friend's matches, which led to my I began my journey as a Table Official in basketball after frequently attending a
involvement with the SFT Lugano Tigers. Following a brief training, I assumed the role, contributing to the game by friend's matches, which led to my involvement with the SFT Lugano Tigers. Following
managing scores and timekeeping, blending my passion with responsibility. a brief training, I assumed the role, contributing to the game by managing scores
and timekeeping, blending my passion with responsibility.
</p> </p>
</div> </div>
</div> </div>
@ -396,8 +401,9 @@
<div class="icon"><i class="fa fa-chess"></i></div> <div class="icon"><i class="fa fa-chess"></i></div>
<h4 class="title"><a>Chess</a></h4> <h4 class="title"><a>Chess</a></h4>
<p class="description"> <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 Early in 2023, a friend introduced me to chess, sparking a passion that has grown
not the best player, I enjoy playing regularly and am dedicated to improving my skills. 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> </p>
</div> </div>
</div> </div>
@ -407,11 +413,11 @@
<div class="icon"><i class="bx bx-server"></i></div> <div class="icon"><i class="bx bx-server"></i></div>
<h4 class="title"><a>Server Management</a></h4> <h4 class="title"><a>Server Management</a></h4>
<p class="description"> <p class="description">
Since 2018, I've been diving into the world of server administration, Since 2018, I've been diving into the world of server administration, experimenting
experimenting with various hardware setups. It's been an enriching journey that's with various hardware setups. It's been an enriching journey that's expanded my
expanded my technical horizons. I've come to appreciate the art of keeping servers technical horizons. I've come to appreciate the art of keeping servers running
running smoothly and securely. Additionally, delving into DevOps activities has allowed smoothly and securely. Additionally, delving into DevOps activities has allowed me
me to bridge the gap between development and operations, streamlining processes and to bridge the gap between development and operations, streamlining processes and
improving overall efficiency. improving overall efficiency.
</p> </p>
</div> </div>
@ -440,14 +446,13 @@
<img src="assets/img/arch.png" alt="arch-linux-logo" /> <img src="assets/img/arch.png" alt="arch-linux-logo" />
</div> </div>
<h4 class="title"><a href="https://archlinux.org">Arch Linux</a></h4> <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 <p class="description">
I've Arch Linux is a minimalist, user-centric operating system that I've come to
come to appreciate. It's not for everyone, but if you value control and enjoy appreciate. It's not for everyone, but if you value control and enjoy crafting your
crafting system to suit your needs, it's a solid choice. With a rolling release model and a
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 wealth of user-contributed packages, Arch Linux offers a clean slate to build your
computing environment.</p> computing environment.
</p>
</div> </div>
</div> </div>
@ -499,12 +504,14 @@
<h4>Associate Professor - USI</h4> <h4>Associate Professor - USI</h4>
<p> <p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i> <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, I had the pleasure of meeting Arnaud when he enrolled in my computer graphics
and active student who always showed a desire to learn. In the summer of 2023, Arnaud worked with me on a research course. He was a very bright, diligent, and active student who always showed a
project related to neuromorphic cameras. Despite being a relatively new topic for him, Arnaud's skills in programming desire to learn. In the summer of 2023, Arnaud worked with me on a research project
and his ability to grasp new concepts in the visual computing field were impressive. He quickly became a valuable related to neuromorphic cameras. Despite being a relatively new topic for him,
contributor to the project. Collaborating with him on this project was truly enjoyable, and I always appreciated his Arnaud's skills in programming and his ability to grasp new concepts in the visual
presence in my classes. 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> <i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p> </p>
</div> </div>
@ -517,12 +524,14 @@
<h4>CFO - Zucchetti Switzerland</h4> <h4>CFO - Zucchetti Switzerland</h4>
<p> <p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i> <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 The student demonstrated an excellent basic preparation, a great interest in the
autonomy in organizing work schedules and in the ability to acquire the necessary information, and a commendable ability technologies used, a high degree of autonomy in organizing work schedules and in the
to complete the assigned project in an excellent manner within the allotted time. 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 We also note the student's active participation in periodic meetings of the business
also enabled him to acquire field skills in project management strategies, particularly the SCRUM approach. 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> <i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p> </p>
</div> </div>
@ -558,9 +567,11 @@
<!-- TODO: move this section right after the about me section --> <!-- TODO: move this section right after the about me section -->
<div class="col-lg-4 col-md-6 portfolio-item filter-app"> <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-img"><img src="assets/img/portfolio/flying-balls2.png" class="img-fluid"
alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding Polygons</a></h4> <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding
Polygons</a></h4>
<div> <div>
<p> <p>
An extension of a physics engine to simulate polygons, An extension of a physics engine to simulate polygons,
@ -569,45 +580,48 @@
animations.<span class="br"></span> animations.<span class="br"></span>
Language: C++ Language: C++
</p> </p>
<a href="https://github.com/karma-riuk/flying-balls" class="details-link" title="More Details"><i class="bx bx-link"></i></a> <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> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web"> <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" <div class="portfolio-img"><img src="assets/img/portfolio/esim.jpg" class="img-fluid" alt="">
alt=""></div> </div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/flying-balls">HDR ESIM</a></h4> <h4><a href="https://github.com/karma-riuk/flying-balls">HDR ESIM</a></h4>
<div> <div>
<p> <p>
Extended a the simulation of an event camera in order to generate HDR Extended a the simulation of an event camera in order to generate HDR
frames.<span class="br" ></span> frames.<span class="br"></span>
Language: C++ Language: C++
</p> </p>
<a href="https://github.com/karma-riuk/hdr_esim" class="details-link" title="More Details"><i class="bx bx-link"></i></a> <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>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app"> <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" <div class="portfolio-img"><img src="assets/img/portfolio/aoc.jpeg" class="img-fluid" alt="">
alt=""></div> </div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/advent-of-code">Advent of Code</a></h4> <h4><a href="https://github.com/karma-riuk/advent-of-code">Advent of Code</a></h4>
<div> <div>
<p> <p>
Fun coding challenges during christmas.<span Fun coding challenges during christmas.<span class="br"></span>
class="br" ></span>
Languages: C++, Go, Python Languages: C++, Go, Python
</p> </p>
<a href="https://github.com/karma-riuk/advent-of-code" class="details-link" title="More Details"><i class="bx bx-link"></i></a> <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>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card"> <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-img"><img src="assets/img/portfolio/paper-mosaik.png" class="img-fluid"
alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4> <h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4>
<!-- TODO: makea good readme fo this project --> <!-- TODO: makea good readme fo this project -->
@ -615,25 +629,28 @@
<p> <p>
A visualization tool to represent reasearchers in terms of their papers A visualization tool to represent reasearchers in terms of their papers
and their relationships to other and their relationships to other
researchers.<span class="br" ></span> researchers.<span class="br"></span>
Language: Smalltalk (Pharo) Language: Smalltalk (Pharo)
</p> </p>
<a href="https://github.com/karma-riuk/PaperMosaik" class="details-link" title="More Details"><i class="bx bx-link"></i></a> <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>
</div> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card"> <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-img"><img src="assets/img/portfolio/maze-solver.gif" class="img-fluid"
alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4><a href="https://github.com/karma-riuk/maze-sovler-go">Maze Solver</a></h4> <h4><a href="https://github.com/karma-riuk/maze-sovler-go">Maze Solver</a></h4>
<div> <div>
<p> <p>
A simple maze solver that takes in various types of maze as input and A simple maze solver that takes in various types of maze as input and
outputs the solution.<span class="br" ></span> outputs the solution.<span class="br"></span>
Language: Go Language: Go
</p> </p>
<a href="https://github.com/karma-riuk/maze-sovler-go" class="details-link" title="More Details"><i class="bx bx-link"></i></a> <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> </div>