updated cv

assets/css/style.css

@@ -1011,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;

index.html

@@ -195,8 +195,7 @@
                 <div class="row portfolio-container" data-aos="fade-up">
 
                     <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img loading="lazy" src="assets/img/portfolio/maze-solver.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/maze-solver-go">Maze Solver</a></h4>
                             <div>
@@ -212,7 +211,7 @@
                     </div>
 
                     <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img loading="lazy" style="align-self: center;" src="assets/img/portfolio/stickfosh.gif" class="img-fluid" alt="">
+                        <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>
@@ -247,9 +246,7 @@
                     </div>
 
                     <div class="col-lg-4 col-md-6 portfolio-item filter-card">
-                        <div class="portfolio-img"><img loading="lazy"
-                                src="assets/img/portfolio/papermosaik.gif" class="img-fluid"
-                                alt=""></div>
+                        <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 -->
@@ -267,7 +264,24 @@
                     </div>
 
                     <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img loading="lazy" src="assets/img/portfolio/flyingballs.gif" 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><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-app">
+                        <div class="portfolio-img"><video autoplay loop muted="true"><source src="assets/img/portfolio/flyingballs.mp4"/></video></div>
                         <div class="portfolio-info">
                             <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding Polygons</a></h4>
                             <div>
@@ -284,23 +298,6 @@
                         </div>
                     </div>
 
-                    <div class="col-lg-4 col-md-6 portfolio-item filter-app">
-                        <div class="portfolio-img"><img loading="lazy" src="assets/img/portfolio/aoc.jpeg" class="img-fluid" alt="">
-                        </div>
-                        <div class="portfolio-info">
-                            <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>
 
             </div>