Final Changes before launch

assets/css/style.css

@@ -738,34 +738,38 @@ section .container {
 }
 
 .icon-box .icon-small-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   width: 100%;
 }
 
 .icon-box .icon-small-grid .icon-small {
-  width: 65px;
-  height: 65px;
-  background: #f0f0f000;
+  width: 75px;
+  height: 75px;
+  background: transparent;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
+  margin-bottom: 10px;
 }
 
 .icon-box .icon-small-grid .icon-small:hover {
   background: #dbe3df;
 }
 
 .icon-box .icon-small-grid .icon-small img {
-  max-width: 60px;
-  max-height: 60px;
+  max-width: 70px;
+  max-height: 70px;
+  object-fit: contain;
 }
 
 
 
+
+
 .services .icon-box .icon i {
   color: #fff;
   font-size: 28px;

index.html

@@ -45,9 +45,9 @@ <h2>I'm a passionate <span>IT professional</span> from Sweden</h2>
           <li><a class="nav-link" href="#about">About</a></li>
           <li><a class="nav-link" href="#resume">Resume</a></li>
           <li><a class="nav-link" href="#services">Projects</a></li>
-          <li><a class="nav-link" href="#portfolio">Portfolio</a></li>
+         <!--  <li><a class="nav-link" href="#portfolio">Portfolio</a></li> -->
           <li><a class="nav-link" href="#contact">Contact</a></li>
-          <li><a class="nav-link" href="https://www.coursera.org/account/accomplishments/professional-cert/HTFB59BMWX3A">Recent Highlight</a></li>
+          <li><a class="nav-link" href="https://www.coursera.org/account/accomplishments/professional-cert/HTFB59BMWX3A" target="_blank">Recent Highlight</a></li>
         </ul>
         <i class="bi bi-list mobile-nav-toggle"></i>
       </nav><!-- .navbar -->
@@ -519,29 +519,30 @@ <h2>Projects</h2>
           <div class="icon-box">
             <div class="icon"><i class='bx bxl-python' ></i></i></i></div>
             <h4><a href="https://github.com/Kamiyumi/CS50x-Duck-Debug-Dash">CS50x Final Project</a></h4>
-            <p>My final project made as part of the CS50x Computer Science Certification. Made using the PyGame libary and Python to simulate a flappy bird clone.</p>
+            <p>My final project made as part of the CS50x Computer Science Certification. Made using the PyGame library and Python to simulate a flappy bird clone. Key features include responsive controls, allowing the bird to be controlled with the spacebar; randomized obstacles with pipes that have randomly generated gaps; real-time score tracking; accurate collision detection for obstacles and the ground; and a game over screen that displays the player's final score.</p>
+
+
 
             <div class="tech-stack">
-              <h5>Technology Stack</h5>
               <div class="icon-small-grid">
                 <div class="icon-small"><img src="assets\img\stack\python.png" alt="HTML5"></div>
                 <div class="icon-small"><img src="assets\img\stack\pygame_logo.png" alt="HTML5"></div>
-                <div class="icon-small"><img src="assets\img\stack\html5-logo-png-transparent.png" alt="HTML5"></div>
+                <div class="icon-small"><img src="assets\img\stack\Git-Icon-Black.png" alt="HTML5"></div>
               </div>
             </div>
           </div>
         </div>
 
         <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
           <div class="icon-box">
-            <div class="icon"><i class='bx bx-stats' ></i></i></i></div>
-            <h4><a href="https://lunicore.se/project/delvator/">Delvator Business Intelligence Project</a></h4>
+            <div class="icon"><i class='bx bxs-analyse'></i></div>
+            <h4><a href="https://lunicore.se/project/delvator/">Business Intelligence Project: Service Prediction Model</a></h4>
             <p>Developed a Power BI dashboard for Delvator, Sweden's Hitachi construction equipment distributor, to predict service needs. The project combined machine and workshop data to enable proactive customer service, showcasing the potential of data-driven decision making and laying groundwork for future AI integration.</p>
             <div class="tech-stack">
-              <h5>Technology Stack</h5>
               <div class="icon-small-grid">
                 <div class="icon-small"><img src="assets\img\stack\New_Power_BI_Logo.svg.png" alt="HTML5"></div>
-                <div class="icon-small"><img src="assets\img\stack\Power-Query-Original.png" alt="HTML5"></div>
+                <div class="icon-small"><img src="assets\img\stack\excel.png" alt="HTML5"></div>
+                <div class="icon-small"><img src="assets\img\stack\mssql.png" alt="HTML5"></div>
               </div>
             </div>
           </div>
@@ -550,40 +551,67 @@ <h5>Technology Stack</h5>
         <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
           <div class="icon-box">
             <div class="icon"><i class='bx bxl-django'></i></div>
-            <h4><a href="">API Backend Project</a></h4>
+            <h4><a href="https://github.com/Kamiyumi/API-Django-Project">API Backend Project</a></h4>
             <p>Developed a comprehensive Django-based API for Styrkelyftsförbundet in Sweden to manage powerlifting competitions. Utilized Python, PostgreSQL, and JavaScript to create features for event organization, participant registration, and result tracking. Managed stakeholders and implemented version control with Git, delivering a streamlined solution for competition administration.</p>
             <div class="tech-stack">
-            
+
               <div class="icon-small-grid">
                 <div class="icon-small"><img src="assets\img\stack\python.png" alt="HTML5"></div>
                 <div class="icon-small"><img src="assets\img\stack\dj.png" alt="HTML5"></div>
                 <div class="icon-small"><img src="assets\img\stack\PostgreSQL-Logo.wine.png" alt="HTML5"></div>
+
               </div>
             </div>
           </div>
         </div>
 
         <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
           <div class="icon-box">
-            <div class="icon"><i class="bx bx-world"></i></div>
-            <h4><a href="">Nemo Enim</a></h4>
-            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
+            <div class="icon"><i class='bx bxs-truck' ></i></div>
+            <h4><a href="https://github.com/Kamiyumi/Viking-Express-Logistics-Application">Viking Express Software Development Project</a></h4>
+            <p>Comprehensive vehicle orchestration application made as part of the first semester at Lund University's Bachelor of Science: Design of Information Systems</p>
+            <div class="tech-stack">
+            <div class="icon-small-grid">
+              <div class="icon-small"><img src="assets\img\stack\java.png" alt="Java"></div>
+              <div class="icon-small"><img src="assets\img\stack\css.png" alt="Java"></div>
+              <div class="icon-small"><img src="assets\img\stack\javaFX.png" alt="Java"></div>
+
+            </div>
+          </div>
           </div>
         </div>
 
         <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
           <div class="icon-box">
-            <div class="icon"><i class="bx bx-slideshow"></i></div>
-            <h4><a href="">Dele cardo</a></h4>
-            <p>Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur</p>
+            <div class="icon"><i class='bx bxs-file-html' ></i></div>
+            <h4><a href="https://github.com/Kamiyumi/simonbaas.com">www.simonbaas.com</a></h4>
+            <p>The source code for the website you are currently viewing. Built in HTML, CSS and JavaScript. Using Boxicons, Bootstrap and purecounter for visual elements. </p>
+            <div class="tech-stack">
+              <div class="icon-small-grid">
+                <div class="icon-small"><img src="assets\img\stack\html5-logo-png-transparent.png" alt="HTML"></div>
+                <div class="icon-small"><img src="assets\img\stack\css.png" alt="CSS"></div>
+                <div class="icon-small"><img src="assets\img\stack\js.png" alt="JS"></div>
+
+              </div>
+            </div>
+
           </div>
+
         </div>
 
         <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
           <div class="icon-box">
-            <div class="icon"><i class="bx bx-arch"></i></div>
-            <h4><a href="">Divera don</a></h4>
-            <p>Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur</p>
+            <div class="icon"><i class='bx bxl-product-hunt' ></i></div>
+            <h4><a href="https://drive.google.com/drive/folders/1e42qM9EUnGDkiS271kfulwjHmUkaeU0e?usp=sharing">Project Management Portfolio</a></h4>
+            <p>A selection of Project Management artifacts ranging from project charters, project plans and GANTT Charts to Executive summaries and Close-Out reports. Made as part of the Google Professional Project Management Certiification. Not all works are final.</p>
+            <div class="tech-stack">
+              <div class="icon-small-grid">
+                <div class="icon-small"><img src="assets\img\stack\google.png" alt="google"></div>
+                <div class="icon-small"><img src="assets\img\stack\asana.png" alt="Asana"></div>
+                <div class="icon-small"><img src="assets\img\stack\excel.png" alt="excel"></div>
+
+              </div>
+            </div>
           </div>
         </div>