icons GH and Linkin

Author: nextinterfaces

apps/website-app/public/index.html

@@ -24,12 +24,14 @@ <h1>Hi, I'm Atanas 👋</h1>
 
             <p>I live in Vancouver, Canada.</p>
 
-            <p>Linkedin: <a href="https://linkedin.com/in/aroussev" target="_blank">in/aroussev</a></p>
-            <p>GitHub: <a href="https://github.com/nextinterfaces" target="_blank">nextinterfaces</a></p>
+            <p><a href="https://linkedin.com/in/aroussev" target="_blank" aria-label="LinkedIn">
+                <img class="icon-blue" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/linkedin.svg" alt="LinkedIn" width="20" height="20"></a> &nbsp; &nbsp; <a href="https://github.com/nextinterfaces" target="_blank" aria-label="GitHub">
+                <img class="icon-blue" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg" alt="GitHub" width="20" height="20">
+            </a></p>
         </article>
 
         <section class="profile-content">
-            <p>This <a href="https://app.roussev.com/">site</a> runs on a tiny 2gb kubernetes VM provisioned by Terraform and monitored using Grafana, Prometheus, Otel and Jaeger. It has some cool services running behind the scenes.</p>
+            <p>This <a href="https://app.roussev.com/">site</a> runs on a tiny 2gb kubernetes VM provisioned by Terraform and monitored using Grafana, Prometheus, Otel and Jaeger. It has some cool services running behind the scenes too.</p>
 
             <p>Few things I’ve built, none of which should be taken seriously or ready for use:</p>
             <p>• <a href="https://nextinterfaces.com/b/" target="_blank">NEXT</a> - Java framework for building native-looking HTML5 mobile apps</p>

apps/website-app/public/styles.css

@@ -96,6 +96,15 @@ body {
     text-decoration: underline;
 }
 
+.icon-blue {
+    filter: brightness(0) saturate(100%) invert(27%) sepia(94%) saturate(2158%) hue-rotate(195deg) brightness(94%) contrast(95%);
+    transition: filter 0.15s ease;
+}
+
+a:hover .icon-blue {
+    filter: brightness(0) saturate(100%) invert(40%) sepia(89%) saturate(1465%) hue-rotate(190deg) brightness(98%) contrast(98%);
+}
+
 /* Pinned Section */
 .pinned-section {
     margin-top: 32px;