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

Compare commits

base: karma:82fa1a76297284121142b4dbaa88d414785801c5
Branches Tags
karma:main
...
compare: karma:410d15d46a9e40039a904ffbe2aec8abca529160
Branches Tags
karma:main

8 Commits
82fa1a7629 ... 410d15d46a

Author SHA1 Message Date
Karma Riuk
410d15d46a added the missing testimonial pictures 2024-02-29 09:17:01 +01:00
Karma Riuk
d2ef0ef232 added some css rule to make it more responsive and 
look better with blocks of text
 2024-02-29 09:16:39 +01:00
Karma Riuk
66c7236788 updated subtitle of Contact Me 2024-02-29 09:14:30 +01:00
Karma Riuk
3e4d63872a updated testimonials by adding Didyk and Zucchetti 2024-02-29 09:14:13 +01:00
Karma Riuk
447972b0ad started updating the skills section 2024-02-29 09:13:40 +01:00
Karma Riuk
f12d1c8292 updated professional experience 2024-02-29 09:13:02 +01:00
Karma Riuk
e2fa5fa477 updated animation of the languages 2024-02-29 09:12:34 +01:00
Karma Riuk
fd029cefaf updated language of html 2024-02-29 09:12:09 +01:00
4 changed files with 57 additions and 71 deletions
Show Stats Expand all files Collapse all files

2
assets/css/style.css
View File

@ -761,6 +761,7 @@ section {
.skills #skills-filters { .skills #skills-filters {
list-style: none; list-style: none;
margin-bottom: 20px; margin-bottom: 20px;
overflow-x: auto;
} }
.skills #skills-filters li { .skills #skills-filters li {
@ -800,6 +801,7 @@ section {
} }
.skills .icon-box p { .skills .icon-box p {
hyphens: auto;
text-align: justify; text-align: justify;
} }

BIN
assets/img/testimonials/missing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/img/testimonials/piotr.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

126
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en-US">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -133,9 +133,9 @@
<!-- End .content--> <!-- End .content-->
<div> <div data-aos="fade-up">
<div class="progress" data-aos="fade-up"> <div class="progress">
<span class="skill"><i class="flag <span class="skill"><i class="flag
flag-france"></i>French <i class="val">Native</i></span> flag-france"></i>French <i class="val">Native</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
@ -143,7 +143,7 @@
aria-valuemax="7"></div> aria-valuemax="7"></div>
</div> </div>
</div> </div>
<div class="progress" data-aos="fade-up"> <div class="progress">
<span class="skill"><i class="flag <span class="skill"><i class="flag
flag-uk"></i>English <i class="val">Native</i></span> flag-uk"></i>English <i class="val">Native</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
@ -151,7 +151,7 @@
aria-valuemax="7"></div> aria-valuemax="7"></div>
</div> </div>
</div> </div>
<div class="progress" data-aos="fade-up"> <div class="progress">
<span class="skill"><i class="flag <span class="skill"><i class="flag
flag-italy"></i>Italian <i class="val">C2</i></span> flag-italy"></i>Italian <i class="val">C2</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
@ -159,7 +159,7 @@
aria-valuemax="7"></div> aria-valuemax="7"></div>
</div> </div>
</div> </div>
<div class="progress" data-aos="fade-up"> <div class="progress">
<span class="skill"><i class="flag <span class="skill"><i class="flag
flag-germany"></i>German <i class="val">B1</i></span> flag-germany"></i>German <i class="val">B1</i></span>
<div class="progress-bar-wrap"> <div class="progress-bar-wrap">
@ -282,16 +282,12 @@
</div> </div>
<div class="resume-item secondary" data-aos="fade-up"> <div class="resume-item secondary" data-aos="fade-up">
<h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4> <h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4>
<h5>Spring 2023</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> <li>One of the most important courses of the bachelor as it teaches first year students to write code in Java</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 <li>Mentored and lead small groups of students in their end-of-semester project</li>
write code in Java
</li>
<li>Mentored and lead three groups of two or three 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" data-aos="fade-up">
@ -354,23 +350,24 @@
<section id="skills" class="skills"> <section id="skills" class="skills">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title" data-aos="fade-up">
<span class="prevent-select">My Skills</span> <span class="prevent-select">My Skills</span>
<h2>My Skills</h2> <h2>My Skills</h2>
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p> <p>A blend of technical expertise and personal passions</p>
</div> </div>
<ul id="skills-filters" class="d-flex justify-content-center"> <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-lang">Languages</li>
<li data-filter=".filter-frame">Frameworks</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-other">Other</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"> <div class="skills-container" data-aos="fade-up">
<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">
@ -418,11 +415,10 @@
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-3 <div class="col-md-6 col-lg-3 mb-5 skill-item filter-web filter-prod filter-hobby">
mb-5 skill-item filter-web">
<div class="icon-box"> <div class="icon-box">
<div class="icon"><i class="bx bx-server"></i></div> <div class="icon"><i class="bx bx-server"></i></div>
<h4 class="title"><a href="">Server Management</a></h4> <h4 class="title"><a>Server Management</a></h4>
<p class="description">Since 2018, I've been diving into the world of server <p class="description">Since 2018, I've been diving into the world of server
administration, administration,
experimenting with various hardware setups. It's been an enriching journey that's experimenting with various hardware setups. It's been an enriching journey that's
@ -434,57 +430,39 @@
</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-hobby">
<div class="icon-box"> <div class="icon-box">
<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 href="https://neovim.io">Theater</a></h4> <h4 class="title"><a>Theater</a></h4>
<p class="description"> <p class="description">
Neovim is a versatile text editor that's become For seven years, I've been part of a theater group focusing on physical theater, telling stories through movement and
an integral part of my workflow. It dance instead of spoken words. This experience has significantly sharpened my non-verbal communication skills and
offers customization, plugin support, and version control integration, making it a deepened my understanding of storytelling.
reliable tool for my coding and writing tasks.
</p> </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-lang filter-web">
<div class="icon-box"> <div class="icon-box">
<div class="icon"> <div class="icon">
<img src="assets/img/tsjs.png" alt="neovim-logo" /> <img src="assets/img/tsjs.png" alt="typescript-logo" />
</div> </div>
<h4 class="title"><a href="https://neovim.io">Javascript / Typescript</a></h4> <h4 class="title"><a href="https://www.typescriptlang.org">Javascript / Typescript</a></h4>
<p class="description"> <p class="description">
Neovim is a versatile text editor that's become Through university courses and internships, I've developed a strong proficiency in TypeScript, an essential tool for
an integral part of my workflow. It modern web development. Its ability to enhance JavaScript with type safety and clearer code structure has made my
offers customization, plugin support, and version control integration, making it a projects more robust and maintainable, positioning me as a skilled developer in this area.
reliable tool for my coding and writing tasks.
</p> </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-hobby">
<div class="icon-box"> <div class="icon-box">
<div class="icon"> <div class="icon"><i class="fa fa-basketball"></i></div>
<img src="assets/img/neovim.png" alt="neovim-logo" /> <h4 class="title"><a>Basketball</a></h4>
</div>
<h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
<p class="description"> <p class="description">
Neovim is a versatile text editor that's become I began my journey as a Table Official in basketball after frequently attending a friend's matches, which led to my
an integral part of my workflow. It involvement with the SFT Lugano Tigers. Following a brief training, I assumed the role, contributing to the game by
offers customization, plugin support, and version control integration, making it a managing scores and timekeeping, blending my passion with responsibility.
reliable tool for my coding and writing tasks.
</p>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
<div class="icon-box">
<div class="icon">
<img src="assets/img/neovim.png" alt="neovim-logo" />
</div>
<h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
<p class="description">
Neovim is a versatile text editor that's become
an integral part of my workflow. It
offers customization, plugin support, and version control integration, making it a
reliable tool for my coding and writing tasks.
</p> </p>
</div> </div>
</div> </div>
@ -504,7 +482,7 @@
<div class="testimonial-item"> <div class="testimonial-item">
<img src="assets/img/testimonials/hauswirth.jpg" class="testimonial-img" alt=""> <img src="assets/img/testimonials/hauswirth.jpg" class="testimonial-img" alt="">
<h3>Matthias Hauswirth</h3> <h3>Matthias Hauswirth</h3>
<h4>Professor</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>
As an undergraduate teaching assistant for my “Programming Fundamentals 2” course, As an undergraduate teaching assistant for my “Programming Fundamentals 2” course,
@ -519,14 +497,17 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="testimonial-item"> <div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt=""> <img src="assets/img/testimonials/piotr.jpg" class="testimonial-img" alt="">
<h3>Sara Wilsson</h3> <h3>Piotr Didyk</h3>
<h4>Designer</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>
Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid I had the pleasure of meeting Arnaud when he enrolled in my computer graphics course. He was a very bright, diligent,
cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet and active student who always showed a desire to learn. In the summer of 2023, Arnaud worked with me on a research
legam anim culpa. 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> <i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p> </p>
</div> </div>
@ -534,14 +515,17 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="testimonial-item"> <div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt=""> <img src="assets/img/testimonials/missing.png" class="testimonial-img" alt="">
<h3>Jena Karlis</h3> <h3>Davide Falchetti</h3>
<h4>Store Owner</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>
Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem The student demonstrated an excellent basic preparation, a great interest in the technologies used, a high degree of
veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint autonomy in organizing work schedules and in the ability to acquire the necessary information, and a commendable ability
minim. 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.
<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>
@ -733,7 +717,7 @@
<div class="section-title" data-aos="fade-up"> <div class="section-title" data-aos="fade-up">
<span class="prevent-select">Contact Me</span> <span class="prevent-select">Contact Me</span>
<h2>Contact Me</h2> <h2>Contact Me</h2>
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p> <p>Feel free to reach out for collaborations or to learn more about my work.</p>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6" data-aos="fade-up-right"> <div class="col-md-6" data-aos="fade-up-right">