Making skills larger

assets/images/git.svg

@@ -0,0 +1 @@
+<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M251.172 116.594L139.4 4.828c-6.433-6.437-16.873-6.437-23.314 0l-23.21 23.21 29.443 29.443c6.842-2.312 14.688-.761 20.142 4.693 5.48 5.489 7.02 13.402 4.652 20.266l28.375 28.376c6.865-2.365 14.786-.835 20.269 4.657 7.663 7.66 7.663 20.075 0 27.74-7.665 7.666-20.08 7.666-27.749 0-5.764-5.77-7.188-14.235-4.27-21.336l-26.462-26.462-.003 69.637a19.82 19.82 0 0 1 5.188 3.71c7.663 7.66 7.663 20.076 0 27.747-7.665 7.662-20.086 7.662-27.74 0-7.663-7.671-7.663-20.086 0-27.746a19.654 19.654 0 0 1 6.421-4.281V94.196a19.378 19.378 0 0 1-6.421-4.281c-5.806-5.798-7.202-14.317-4.227-21.446L81.47 39.442l-76.64 76.635c-6.44 6.443-6.44 16.884 0 23.322l111.774 111.768c6.435 6.438 16.873 6.438 23.316 0l111.251-111.249c6.438-6.44 6.438-16.887 0-23.324" fill="#DE4C36"/></svg>

assets/styles/sections/skills.scss

@@ -10,11 +10,20 @@
       height: fit-content;
       padding: 0.7rem;
       padding-bottom: 0rem;
-      border-bottom: 0.0625rem solid rgba(get-light-color('accent-color'), 0.4);
+      // border-bottom: 0.0625rem solid rgba(get-light-color('accent-color'), 0.4);
 
       .card-img-xs {
         margin-right: 0.5rem;
-        margin-bottom: 0.75rem;
+        // margin-bottom: 0.75rem;
+      }
+
+      .card-title {
+        font-size: 2em;
+        font-weight: 500;
+        text-align: center;
+        margin: auto;
+        display: flex;
+        align-items: center;
       }
     }
 
@@ -31,6 +40,11 @@
     .container {
       max-width: 95%;
     }
+
+    .card-title {
+      font-size: 1rem;
+      /* Adjust font size for smaller screens */
+    }
   }
 }
 
@@ -39,8 +53,8 @@ html[data-theme='dark'] {
     .card {
       .card-head {
         background-color: get-dark-color('bg-card') !important;
-        border-bottom: 0.0625rem solid rgba(get-dark-color('accent-color'), 0.4);
+        // border-bottom: 0.0625rem solid rgba(get-dark-color('accent-color'), 0.4);
       }
     }
   }
-}
+}

data/en/sections/skillls.yaml

@@ -25,10 +25,10 @@ skills:
   logo: /images/python.png
 
 - name: Linux
-  logo: /images/linux.png
+  logo: /images/tux.svg
 
 - name: Git
-  logo: /images/git.png
+  logo: /images/git.svg
 
 - name: C++
   logo: /images/C++_logo.svg

layouts/partials/cards/skill.html

@@ -2,7 +2,7 @@
   data-category='all, {{ with .categories }}{{ delimit . ","}}{{ end }}'
 >
   <a class="text-decoration-none" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
-    <div class="card">
+    <div class="card" >
       <div class="card-head d-flex">
         {{ if .logo }}
           {{ $logoImage := resources.Get .logo }}
@@ -11,7 +11,7 @@
             {{ $logoImage = $logoImage.Fit "24x24" }}
           {{ end }}
         
-          <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
+          <img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" style="width: 80px; height: 80px;" />
           <h5 class="card-title">{{ .name }}</h5>
         {{ else if .icon }}
           {{ $iconName := .icon }}
@@ -20,9 +20,9 @@
           <h5 class="card-title">{{ .name }}</h5>
         {{ end }}
       </div>
-      <div class="card-body text-justify pt-1 pb-1">
+      <!-- <div class="card-body text-justify pt-1 pb-1">
         <p class="card-text">{{ .summary | markdownify }}</p>
-      </div>
+      </div> -->
     </div>
   </a>
 </div>