attempting to remove white backgrounds

Author: its-d

_data/skills.json

@@ -1,9 +1,9 @@
 [
-  { "name": "AWS", "icon": "/images/blog/skills/aws.png", "whiteBg": true },
-  { "name": "Terraform", "icon": "/images/blog/skills/terraform.jpg", "whiteBg": true },
-  { "name": "Python", "icon": "/images/blog/skills/python.png", "whiteBg": true },
-  { "name": "Docker", "icon": "/images/blog/skills/docker.jpg", "whiteBg": true },
+  { "name": "AWS", "icon": "/images/blog/skills/aws.png" },
+  { "name": "Terraform", "icon": "/images/blog/skills/terraform.jpg" },
+  { "name": "Python", "icon": "/images/blog/skills/python.png" },
+  { "name": "Docker", "icon": "/images/blog/skills/docker.jpg" },
   { "name": "GitHub", "icon": "/images/blog/skills/github.jpg" },
-  { "name": "Linux", "icon": "/images/blog/skills/linux.jpg", "whiteBg": true },
-  { "name": "SQL", "icon": "/images/blog/skills/sql.jpg", "whiteBg": true }
+  { "name": "Linux", "icon": "/images/blog/skills/linux.jpg" },
+  { "name": "SQL", "icon": "/images/blog/skills/sql.jpg" }
 ]

_includes/partials/skills.njk

@@ -6,7 +6,7 @@
     <div class="skill-item">
       <div class="skill-icon-wrap">
         {% if skill.icon %}
-        <img src="{{ skill.icon | url | absoluteUrl }}" alt="" class="skill-icon-img{% if skill.whiteBg %} skill-icon-img--multiply{% endif %}" loading="lazy">
+        <img src="{{ skill.icon | url | absoluteUrl }}" alt="" class="skill-icon-img" loading="lazy">
         {% else %}
         <span class="skill-icon" aria-hidden="true">{{ skillName[0] }}</span>
         {% endif %}

css/style.css

@@ -371,15 +371,16 @@ section {
   flex-direction: column;
   align-items: center;
   padding: 0.75rem;
-  background: var(--bg);
+  background: var(--card-bg);
   border: 1px solid var(--accent);
   border-radius: 8px;
-  transition: border-color 0.2s ease;
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s ease;
 }
 
 .skill-item:hover {
   border-color: var(--accent);
-  box-shadow: 0 0 0 1px rgba(239, 57, 36, 0.2);
+  box-shadow: 0 0 0 1px rgba(239, 57, 36, 0.25);
+  transform: translateY(-3px);
 }
 
 /* Square icon area – keeps proportions (e.g. Python not squished), compact size */
@@ -390,7 +391,7 @@ section {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #000;
+  background: var(--card-bg);
   border-radius: 8px;
   margin-bottom: 0.5rem;
 }
@@ -401,11 +402,6 @@ section {
   object-fit: contain;
 }
 
-/* Burn white to black so colored logos sit on dark; skip for dark icons (e.g. GitHub) */
-.skill-icon-wrap .skill-icon-img--multiply {
-  mix-blend-mode: multiply;
-}
-
 .skill-icon-wrap .skill-icon {
   font-size: 1.5rem;
   color: var(--text);