updated cv

and can be expanded)

assets/css/style.css

@@ -11,7 +11,8 @@
 --------------------------------------------------------------*/
 :root {
     color-scheme: dark;
-    --highlight: #ffb727;
+    /* --highlight: #ffb727; */
+    --highlight: #f3a200;
     --highlight-alt: #ffc85a;
 
     --background: #fff;
@@ -681,6 +682,45 @@ section {
     display: flex;
     flex-direction: column;
     align-items: center;
+    overflow: visible;
+}
+
+.resume-content {
+    max-height: 110vh;
+    overflow-y: hidden;
+}
+
+.resume-content.expanded {
+    display:block;
+    max-height: none;
+    overflow-y: visible;
+}
+
+.resume-fade {
+    position: absolute;
+    display:flex;
+    justify-content: center;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    background: linear-gradient(to bottom, transparent, var(--background) 50%);
+    pointer-events: none;
+}
+
+.resume-fade.expanded {
+    background: var(--background);
+}
+
+.resume-btn {
+    position: absolute;
+    bottom: 0;
+    font-size: 1em !important;
+
+    border: none;
+    text-align: center;
+    z-index: 100;
+    box-shadow: none !important;
+    pointer-events: auto;
 }
 
 .resume .resume-title {
@@ -693,7 +733,7 @@ section {
 
 .resume .resume-item {
     padding: 0 0 20px 20px;
-    margin-top: -2px;
+    margin-left: 8px;
     border-left: 2px solid var(--resume-border);
     position: relative;
 }
@@ -971,6 +1011,15 @@ section {
     margin-bottom: 20px;
 }
 
+.portfolio video, .portfolio img{
+    max-width: 100%;
+}
+
+.portfolio video {
+    display: block; /* html video tags have a phantom bottom margin, this is the only way to remove it */
+    margin: auto; /* to center the video inside the container */
+}
+
 .portfolio #portfolio-flters li {
     cursor: pointer;
     display: inline-block;
@@ -996,7 +1045,10 @@ section {
 }
 
 .portfolio .portfolio-item .portfolio-img {
+    text-align: center;
     overflow: hidden;
+    border: 1px solid var(--background);
+    transition: 0.3s;
 }
 
 .portfolio .portfolio-item .portfolio-img img {
@@ -1007,11 +1059,11 @@ section {
     opacity: 0;
     position: absolute;
     left: 15px;
-    bottom: 0;
+    bottom: 3px;
     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.9);
     padding: 10px 15px;
 }
 
@@ -1057,8 +1109,9 @@ section {
     color: #ffc041;
 }
 
-.portfolio .portfolio-item:hover .portfolio-img img {
+.portfolio .portfolio-item:hover .portfolio-img {
-    transform: scale(1.2);
+    /* transform: scale(1.2); */
+    border-color: var(--highlight);
 }
 
 .portfolio .portfolio-item:hover .portfolio-info {

assets/js/main.js

@@ -161,6 +161,19 @@
     true
   );
 
+  on("click", "#resume-toggle", e => {
+      console.log("sup")
+      const sec = select("#resume-section");
+      const btn = e.target;
+      sec.classList.toggle("expanded");
+      select(".resume-fade").classList.toggle("expanded");
+      if (sec.classList.contains("expanded"))
+          btn.innerHTML = 'Hide <i class="bi bi-chevron-up"></i>';
+      else
+          btn.innerHTML = 'Expand <i class="bi bi-chevron-down"></i>';
+      AOS.refresh();
+  })
+
   /**
    * Scroll with ofset on page load with hash links in the url
    */

index.html

@@ -190,32 +190,49 @@
 
                 <!-- TODO: maybe use the language as filters? --> 
 
+                <!-- TODO: add the ray tracer project --> 
+
                 <div class="row portfolio-container" data-aos="fade-up">
 
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/flyingballs.gif" class="img-fluid" alt=""></div>
+                        <div class="portfolio-img"><video autoplay loop muted="true" src="assets/img/portfolio/maze-solver.mp4"></div>
                         <div class="portfolio-info">
-                            <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding
+                            <h4><a href="https://github.com/karma-riuk/maze-solver-go">Maze Solver</a></h4>
-                                    Polygons</a></h4>
                             <div>
                                 <p>
-                                    An extension of a physics engine to simulate polygons,
+                                    A simple maze solver that takes in various types of maze as input and
-                                    focusing on collision detection and effects in
+                                    outputs the solution.<span class="br"></span>
-                                    real-time, ensuring smooth
+                                    Language: Go
-                                    animations.<span class="br"></span>
-                                    Language: C++
                                 </p>
-                                <a href="https://github.com/karma-riuk/flying-balls" class="details-link"
+                                <a href="https://github.com/karma-riuk/maze-solver-go" 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"><video autoplay loop muted="true" src="assets/img/portfolio/stickfosh.mp4">
+                        </div>
+                        <div class="portfolio-info">
+                            <h4><a href="https://github.com/karma-riuk/stickfosh">Stickfosh</a></h4>
+                            <div>
+                                <p>
+                                    A chess engine written from scratch, just like stockfish but worse :)<span class="br"></span>
+                                    Languages: C++, Python
+                                </p>
+                                <a href="https://github.com/karma-riuk/stickfosh" 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/esim.jpg" class="img-fluid" alt="">
                         </div>
                         <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/hdr_esim">HDR ESIM</a></h4>
                             <div>
                                 <p>
                                     Extended a the simulation of an event camera in order to generate HDR
@@ -228,6 +245,24 @@
                         </div>
                     </div>
 
+                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
+                        <div class="portfolio-img"><video autoplay loop muted="true" src="assets/img/portfolio/paper-mosaik.mp4"></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>
+                            </div>
+                        </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>
@@ -244,38 +279,20 @@
                         </div>
                     </div>
 
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img
-                                src="assets/img/portfolio/papermosaik.gif" 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>
-                            </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-app">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/maze-solver.gif" class="img-fluid"
+                        <div class="portfolio-img"><video autoplay loop muted="true"><source src="assets/img/portfolio/flyingballs.mp4"/></video></div>
-                                alt=""></div>
                         <div class="portfolio-info">
-                            <h4><a href="https://github.com/karma-riuk/maze-solver-go">Maze Solver</a></h4>
+                            <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding Polygons</a></h4>
                             <div>
                                 <p>
-                                    A simple maze solver that takes in various types of maze as input and
+                                    An extension of a physics engine to simulate polygons,
-                                    outputs the solution.<span class="br"></span>
+                                    focusing on collision detection and effects in
-                                    Language: Go
+                                    real-time, ensuring smooth
+                                    animations.<span class="br"></span>
+                                    Language: C++
                                 </p>
-                                <a href="https://github.com/karma-riuk/maze-solver-go" class="details-link"
+                                <a href="https://github.com/karma-riuk/flying-balls" class="details-link"
                                     title="More Details"><i class="bx bx-link"></i></a>
                             </div>
                         </div>
@@ -398,7 +415,7 @@
                             <div class="resume-item">
                                 <h4>Master in Software &amp; Data Engineering</h4>
                                 <h5>2023 - Present</h5>
-                                <p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: 9.6/10</em></p>
+                                <p><em>Università della Svizzera Italiana, Lugano, CH <br> GPA: 9.59/10</em></p>
                                 <p>This program offers me a comprehensive education that delves deep into the latest
                                     software engineering techniques and data engineering principles. The curriculum is
                                     structured around four modules – Software Engineering, Data Engineering, Electives,
@@ -421,39 +438,33 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-6">
+
+                        <div class=" col-lg-6">
+
                             <div data-aos="fade-up-left">
                                 <h3 class="resume-title">Professional Experience</h3>
+                                <div class="resume-content" id="resume-section">
+                                    <div>
                                         <div class="resume-item">
-                                <h4>UROP</h4>
+                                            <h4>Research Lab Assistant</h4>
-                                <h5>Summer 2023</h5>
+                                            <h5>August 2024 - June 2024</h5>
-                                <p><em>Internship at Università della Svizzera Italiana, Lugano, CH</em></p>
+                                            <p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p>
                                             <p>
-                                    <a
+                                                Helped in various tasks in a the research lab of Prof. Laura Pozzi. This lab specializes in the
-                                        href="https://www.inf.usi.ch/en/informatics-research/internships/students">UROP</a>
+                                                automation of embedded processor customization, the design and compilation of innovative reconfigurable hardware, and
-                                    (Undergraduate Research Opportunities Program) is an internship offered to the top
+                                                techniques for Approximate Computing and Logic Synthesis. 
-                                    five students that apply and allows you to work with a research group of your
-                                    choice.
                                                 <ul>
-                                    <li>Worked under the tutelage of Prof. Didyk and PhD student Jorge Condor</li>
+                                                    <li>Made a case study to investigate various optimization methods to improve the performance of an established system</li>
-                                    <li>Brought my expertise to a project that aims to do HDR reconstruction using
+                                                    <li>Refactored an entire codebase to make it more modular, cleaner and easier to use and extend</li>
-                                        Neural Radiance Fields (NeRFs) in combination with event cameras</li>
-                                    <li>Extended a pre-existing event camera simulator to make it compute the data
-                                        wanted by my supervisors in order to generate synthetic data to train the NeRFs
-                                    </li>
-                                    <li>Learned how to use Unreal Engine 5 to create short sequences of a camera flying
-                                        around a scene</li>
-                                    <li>It was very instructive since neither of my supervisors knew the material I had
-                                        to work on, so I had to learn how to read code and understand it deeply in order
-                                        to complete the task required of me</li>
                                                 </ul>
                                             </p>
                                         </div>
                                     </div>
+
                                     <div data-aos="fade-up">
                                         <div class="resume-item">
                                             <h4>Teaching assistant</h4>
-                                <h5>2022 - present</h5>
+                                            <h5>2022 - 2025</h5>
                                             <p><em>Part-time job at Università della Svizzera Italiana, Lugano, CH</em></p>
                                             <p>
                                                 Helped teachers with grading assignments and exams. Tried to create a meaningful
@@ -462,6 +473,16 @@
                                                 sparkles in their eyes when they learned about concepts I taught them.
                                             </p>
                                         </div>
+                                        <div class="resume-item secondary">
+                                            <h4 style="font-weight: normal">TA - Automata and Formal Langauges</h4>
+                                            <h5>Autumn 2024</h5>
+                                            <p><em>3 ECTS - Prof. Matthias Hauswirth</em></p>
+                                            <ul>
+                                                <li>Teaches the theoretical foundations of computing, focusing on formal models like finite automata and pushdown
+                                                    automata, and their role in defining and analyzing regular and context-free languages</li>
+                                                <li>Closely participated in assignment and exam corrections</li>
+                                            </ul>
+                                        </div>
                                         <div class="resume-item secondary">
                                             <h4 style="font-weight: normal">TA - Programming Fundamentals 2</h4>
                                             <h5>Spring 2023 & 2024</h5>
@@ -486,6 +507,35 @@
                                             </p>
                                         </div>
                                     </div>
+
+                                    <div>
+                                    <div class="resume-item" data-aos="fade-up">
+                                        <h4>UROP</h4>
+                                        <h5>Summer 2023</h5>
+                                        <p><em>Internship at Università della Svizzera Italiana, Lugano, CH</em></p>
+                                        <p>
+                                            <a
+                                                href="https://www.inf.usi.ch/en/informatics-research/internships/students">UROP</a>
+                                            (Undergraduate Research Opportunities Program) is an internship offered to the top
+                                            five students that apply and allows you to work with a research group of your
+                                            choice.
+                                            <ul>
+                                                <li>Worked under the tutelage of Prof. Didyk and PhD student Jorge Condor</li>
+                                                <li>Brought my expertise to a project that aims to do HDR reconstruction using
+                                                    Neural Radiance Fields (NeRFs) in combination with event cameras</li>
+                                                <li>Extended a pre-existing event camera simulator to make it compute the data
+                                                    wanted by my supervisors in order to generate synthetic data to train the NeRFs
+                                                </li>
+                                                <li>Learned how to use Unreal Engine 5 to create short sequences of a camera flying
+                                                    around a scene</li>
+                                                <li>It was very instructive since neither of my supervisors knew the material I had
+                                                    to work on, so I had to learn how to read code and understand it deeply in order
+                                                    to complete the task required of me</li>
+                                            </ul>
+                                        </p>
+                                    </div>
+                                    </div>
+
                                     <div class="resume-item" data-aos="fade-up">
                                         <h4>Front-end Intern</h4>
                                         <h5>Autumn 2022</h5>
@@ -523,6 +573,12 @@
                                             </ul>
                                         </p>
                                     </div>
+
+                                    <div class="resume-fade">
+                                        <button id="resume-toggle" class="btn resume-btn">Expand <i class="bi bi-chevron-down"></i></button>
+                                        </div>
+                                </div>
+                            </div>
                         </div>
                     </div>