diff --git a/assets/css/style.css b/assets/css/style.css
index b5670ae..cbcd3c1 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1009,31 +1009,44 @@ section {
   z-index: 3;
   right: 15px;
   transition: all ease-in-out 0.3s;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, .7);
   padding: 10px 15px;
 }
 
 .portfolio .portfolio-item .portfolio-info h4 {
   font-size: 18px;
-  color: var(--background);
+  color: var(--text-color-alt);
   font-weight: 600;
-  color: var(--background);
   margin-bottom: 0px;
 }
 
 .portfolio .portfolio-item .portfolio-info p {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-color-alt);
   font-size: 14px;
   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: .5em;
+}
+
 .portfolio .portfolio-item .portfolio-info .preview-link,
 .portfolio .portfolio-item .portfolio-info .details-link {
-  position: absolute;
-  right: 40px;
   font-size: 24px;
-  top: calc(50% - 18px);
-  color: var(--background);
+  color: var(--text-color-alt);
   transition: 0.3s;
 }
 
@@ -1042,10 +1055,6 @@ section {
   color: #ffc041;
 }
 
-.portfolio .portfolio-item .portfolio-info .details-link {
-  right: 10px;
-}
-
 .portfolio .portfolio-item:hover .portfolio-img img {
   transform: scale(1.2);
 }
diff --git a/assets/img/portfolio/aoc.jpeg b/assets/img/portfolio/aoc.jpeg
new file mode 100644
index 0000000..2e113d7
Binary files /dev/null and b/assets/img/portfolio/aoc.jpeg differ
diff --git a/assets/img/portfolio/esim.jpg b/assets/img/portfolio/esim.jpg
new file mode 100644
index 0000000..64eefae
Binary files /dev/null and b/assets/img/portfolio/esim.jpg differ
diff --git a/assets/img/portfolio/flying-balls.png b/assets/img/portfolio/flying-balls.png
new file mode 100644
index 0000000..3cb4003
Binary files /dev/null and b/assets/img/portfolio/flying-balls.png differ
diff --git a/assets/img/portfolio/flying-balls2.png b/assets/img/portfolio/flying-balls2.png
new file mode 100644
index 0000000..4adbc91
Binary files /dev/null and b/assets/img/portfolio/flying-balls2.png differ
diff --git a/assets/img/portfolio/maze-solver.gif b/assets/img/portfolio/maze-solver.gif
new file mode 100644
index 0000000..83634e7
Binary files /dev/null and b/assets/img/portfolio/maze-solver.gif differ
diff --git a/assets/img/portfolio/maze-solver.png b/assets/img/portfolio/maze-solver.png
new file mode 100644
index 0000000..f3acd70
Binary files /dev/null and b/assets/img/portfolio/maze-solver.png differ
diff --git a/assets/img/portfolio/paper-mosaik.png b/assets/img/portfolio/paper-mosaik.png
new file mode 100644
index 0000000..cc07756
Binary files /dev/null and b/assets/img/portfolio/paper-mosaik.png differ
diff --git a/index.html b/index.html
index c7cea14..fdc0484 100644
--- a/index.html
+++ b/index.html
@@ -543,7 +543,7 @@
                 <div class="section-title">
                     <span class="prevent-select">My Portfolio</span>
                     <h2>My Portfolio</h2>
-                    <p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
+                    <p>The building blocks of my career</p>
                 </div>
 
                 <ul id="portfolio-flters" class="d-flex justify-content-center">
@@ -555,120 +555,86 @@
 
                 <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="portfolio-img"><img src="assets/img/portfolio/portfolio-1.jpg" 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">
-                            <h4>App 1</h4>
-                            <p>App</p>
-                            <a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="App 1"><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>
+                            <h4><a href="https://github.com/karma-riuk/flying-balls">From Flying Balls to Colliding Polygons</a></h4>
+                                <div>
+                            <p>
+                                        An extension of a physics engine to simulate polygons,
+                                        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 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=""></div>
                         <div class="portfolio-info">
-                            <h4>Web 3</h4>
-                            <p>Web</p>
-                            <a href="assets/img/portfolio/portfolio-2.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>
+                            <h4><a href="https://github.com/karma-riuk/flying-balls">HDR ESIM</a></h4>
+                            <div>
+                                <p>
+                                    Extended a the simulation of an event camera in order to generate HDR
+                                    frames.<span class="br" ></span>
+                                    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 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=""></div>
                         <div class="portfolio-info">
-                            <h4>App 2</h4>
-                            <p>App</p>
-                            <a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="App 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>
+                                <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-card">
-                        <div class="portfolio-img"><img src="assets/img/portfolio/portfolio-4.jpg" 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">
-                            <h4>Card 2</h4>
-                            <p>Card</p>
-                            <a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Card 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-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>
+                            <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="portfolio-img"><img src="assets/img/portfolio/portfolio-7.jpg" 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">
-                            <h4>Card 1</h4>
-                            <p>Card</p>
-                            <a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery"
-                                class="portfolio-lightbox preview-link" title="Card 1"><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-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>
+                            <h4><a href="https://github.com/karma-riuk/maze-sovler-go">Maze Solver</a></h4>
+                            <div>
+                                <p>
+                                        A simple maze solver that takes in various types of maze as input and
+                                        outputs the solution.<span class="br" ></span>
+                                    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>