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

Compare commits

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

4 Commits
52786bd8d2 ... 5f772b1f78

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
Show Stats Expand all files Collapse all files

63
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,31 +1011,44 @@ 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, 0.5); background: rgba(0, 0, 0, 0.7);
padding: 10px 15px; padding: 10px 15px;
} }
.portfolio .portfolio-item .portfolio-info h4 { .portfolio .portfolio-item .portfolio-info h4 {
font-size: 18px; font-size: 18px;
color: var(--background); color: var(--text-color-alt);
font-weight: 600; font-weight: 600;
color: var(--background);
margin-bottom: 0px; margin-bottom: 0px;
} }
.portfolio .portfolio-item .portfolio-info p { .portfolio .portfolio-item .portfolio-info p {
color: rgba(255, 255, 255, 0.8); color: var(--text-color-alt);
font-size: 14px; font-size: 14px;
margin-bottom: 0; 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 .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link { .portfolio .portfolio-item .portfolio-info .details-link {
position: absolute;
right: 40px;
font-size: 24px; font-size: 24px;
top: calc(50% - 18px); color: var(--text-color-alt);
color: var(--background);
transition: 0.3s; transition: 0.3s;
} }
@ -1042,10 +1057,6 @@ section {
color: #ffc041; color: #ffc041;
} }
.portfolio .portfolio-item .portfolio-info .details-link {
right: 10px;
}
.portfolio .portfolio-item:hover .portfolio-img img { .portfolio .portfolio-item:hover .portfolio-img img {
transform: scale(1.2); transform: scale(1.2);
} }

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB

326
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> -->
@ -225,7 +226,7 @@
quality quality
assurance, data modeling, and decision support.</p> assurance, data modeling, and decision support.</p>
</div> </div>
<div class="resume-item" data-aos="fade-up"> <div class="resume-item">
<h4>Bachelor in Informatics</h4> <h4>Bachelor in Informatics</h4>
<h5>2020 - 2023</h5> <h5>2020 - 2023</h5>
<p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: 9.21/10</em></p> <p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: 9.21/10</em></p>
@ -268,8 +269,8 @@
</p> </p>
</div> </div>
</div> </div>
<div> <div data-aos="fade-up">
<div class="resume-item" data-aos="fade-up"> <div class="resume-item">
<h4>Teacher assistant</h4> <h4>Teacher assistant</h4>
<h5>2022 - present</h5> <h5>2022 - present</h5>
<p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p> <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. sparkles in their eyes when they learned about concepts I taught them.
</p> </p>
</div> </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> <h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4>
<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>
<div class="resume-item secondary" data-aos="fade-up"> <div class="resume-item secondary">
<h4 style="font-weight: normal">TA - Systems Programming</h4> <h4 style="font-weight: normal">TA - Systems Programming</h4>
<h5>Autumn 2022</h5> <h5>Autumn 2022</h5>
<p><em>6 ECTS - Prof. Antonio Carzaniga</em></p> <p><em>6 ECTS - Prof. Antonio Carzaniga</em></p>
@ -343,7 +346,7 @@
</div> </div>
</div> </div>
<a href="/assets/pdf/Fauconnet_Arnaud_CV.pdf" class="btn mt-lg-3" data-aos="fade-up">Download my CV </a> <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 --> </section><!-- End My Resume Section -->
<!-- ======= My Skills Section ======= --> <!-- ======= My Skills Section ======= -->
@ -358,16 +361,69 @@
<ul id="skills-filters" class="d-flex justify-content-lg-center" data-aos="fade-up"> <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="*" class="filter-active">All</li>
<li data-filter=".filter-prod">Productivity</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-web">Web</li>
<li data-filter=".filter-hobby">Hobbies</li> <li data-filter=".filter-hobby">Hobbies</li>
<li data-filter=".filter-other">Other</li>
</ul> </ul>
<!-- TODO: check the filter & link of each thing (normally the first <!-- TODO: check the filter & link of each thing (normally the first
line should be good) --> line should be good) -->
<div class="skills-container" data-aos="fade-up"> <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="row">
<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">
<div class="icon-box"> <div class="icon-box">
@ -390,18 +446,17 @@
<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>
<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-box">
<div class="icon"> <div class="icon">
<img src="assets/img/docker.png" alt="docker-logo" /> <img src="assets/img/docker.png" alt="docker-logo" />
@ -414,68 +469,15 @@
</p> </p>
</div> </div>
</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>
<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 --> </section><!-- End My Services Section -->
<!-- ======= Testimonials Section ======= --> <!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials"> <section id="testimonials" class="testimonials">
<div class="container position-relative"> <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-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
@ -502,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>
@ -520,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>
@ -546,7 +552,7 @@
<div class="section-title"> <div class="section-title">
<span class="prevent-select">My Portfolio</span> <span class="prevent-select">My Portfolio</span>
<h2>My Portfolio</h2> <h2>My Portfolio</h2>
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p> <p>The building blocks of my career</p>
</div> </div>
<ul id="portfolio-flters" class="d-flex justify-content-center"> <ul id="portfolio-flters" class="d-flex justify-content-center">
@ -558,121 +564,95 @@
<div class="row portfolio-container"> <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="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> alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4>App 1</h4> <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding
<p>App</p> Polygons</a></h4>
<a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery" <div>
class="portfolio-lightbox preview-link" title="App 1"><i class="bx bx-plus"></i></a> <p>
<a href="portfolio-details.html" class="details-link" title="More Details"><i An extension of a physics engine to simulate polygons,
class="bx bx-link"></i></a> 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>
<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/portfolio-2.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>Web 3</h4> <h4><a href="https://github.com/karma-riuk/flying-balls">HDR ESIM</a></h4>
<p>Web</p> <div>
<a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" <p>
class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a> Extended a the simulation of an event camera in order to generate HDR
<a href="portfolio-details.html" class="details-link" title="More Details"><i frames.<span class="br"></span>
class="bx bx-link"></i></a> 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> </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/portfolio-3.jpg" 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>App 2</h4> <h4><a href="https://github.com/karma-riuk/advent-of-code">Advent of Code</a></h4>
<p>App</p> <div>
<a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" <p>
class="portfolio-lightbox preview-link" title="App 2"><i class="bx bx-plus"></i></a> Fun coding challenges during christmas.<span class="br"></span>
<a href="portfolio-details.html" class="details-link" title="More Details"><i Languages: C++, Go, Python
class="bx bx-link"></i></a> </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> </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/portfolio-4.jpg" class="img-fluid" <div class="portfolio-img"><img src="assets/img/portfolio/paper-mosaik.png" class="img-fluid"
alt=""></div> alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4>Card 2</h4> <h4><a href="https://github.com/karma-riuk/PaperMosaik">PaperMosaik</a></h4>
<p>Card</p> <!-- TODO: makea good readme fo this project -->
<a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" <div>
class="portfolio-lightbox preview-link" title="Card 2"><i class="bx bx-plus"></i></a> <p>
<a href="portfolio-details.html" class="details-link" title="More Details"><i A visualization tool to represent reasearchers in terms of their papers
class="bx bx-link"></i></a> 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>
<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>
<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/portfolio-7.jpg" class="img-fluid" <div class="portfolio-img"><img src="assets/img/portfolio/maze-solver.gif" class="img-fluid"
alt=""></div> alt=""></div>
<div class="portfolio-info"> <div class="portfolio-info">
<h4>Card 1</h4> <h4><a href="https://github.com/karma-riuk/maze-sovler-go">Maze Solver</a></h4>
<p>Card</p> <div>
<a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" <p>
class="portfolio-lightbox preview-link" title="Card 1"><i class="bx bx-plus"></i></a> A simple maze solver that takes in various types of maze as input and
<a href="portfolio-details.html" class="details-link" title="More Details"><i outputs the solution.<span class="br"></span>
class="bx bx-link"></i></a> 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 class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-info">
<h4>Card 3</h4>
<p>Card</p>
<a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery"
class="portfolio-lightbox preview-link" title="Card 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="details-link" title="More Details"><i
class="bx bx-link"></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-img"><img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid"
alt=""></div>
<div class="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery"
class="portfolio-lightbox preview-link" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" class="details-link" title="More Details"><i
class="bx bx-link"></i></a>
</div>
</div> </div>
</div> </div>