feat: Improved Specialties Section With Font Awesome Icons(#32)

Author: IamLRBA

public/index.html

@@ -57,17 +57,21 @@ <h3>About Pandas Who Code</h3>
                     Welcome to PandasWhoCode, a software development organization focused on open-source projects, and cutting-edge technology. We specialize in:
                 </p>
                 <ul class="specialties">
-                    <li><strong>💻 Open Source Contributions</strong>
-                        <ul>
-                            <li>Tools, libraries, and frameworks for modern software development.</li>
-                        </ul>
-                    </li>
-                    <li><strong>⚡ DevOps & CI/CD Solutions</strong>
-                        <ul>
-                            <li>Automation, workflows, and best practices for seamless development pipelines.</li>
-                        </ul>
-                    </li>
-                </ul>
+    <li>
+        <i class="fas fa-laptop-code icon-laptop"></i>
+        <strong>Open Source Contributions</strong>
+        <ul>
+            <li>Tools, libraries, and frameworks for modern software development.</li>
+        </ul>
+    </li>
+    <li>
+        <i class="fas fa-bolt icon-bolt"></i>
+        <strong>DevOps & CI/CD Solutions</strong>
+        <ul>
+            <li>Automation, workflows, and best practices for seamless development pipelines.</li>
+        </ul>
+    </li>
+</ul>
 
                 <h3 class="profile-section-header">Roger Barker</h3>
                 <a href="https://www.linkedin.com/in/roger-barker/" target="_blank" rel="noopener noreferrer" class="profile-image-link">

public/styles/index.css

@@ -43,12 +43,31 @@ h3 {
     opacity: 0.9;
 }
 
-.specialties, .specialties ul {
+/* Specialty list styles */
+.specialties,
+.specialties ul {
     list-style: none;
     padding-left: 0;
     margin-bottom: 2rem;
 }
 
+/* Icon styling */
+.specialties i {
+    margin-right: 6px;
+    font-size: 1.1rem; 
+    vertical-align: middle; 
+}
+
+/* Individual icon colors */
+.icon-laptop {
+    color: rgb(159, 228, 255);
+}
+
+.icon-bolt {
+    color: rgb(201, 11, 201);
+}
+
+
 .project-item {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 15px;