From 777284c5017e354d8d3741e8f0e9a35cf606ed0c Mon Sep 17 00:00:00 2001
From: Raydo Matthee <126121348+burnt-exe@users.noreply.github.com>
Date: Mon, 18 Mar 2024 03:22:25 +0200
Subject: [PATCH] Update skills.html

---
 skills.html | 122 ++++++++++++++--------------------------------------
 1 file changed, 33 insertions(+), 89 deletions(-)
diff --git a/skills.html b/skills.html
index cd060ea..0fbc039 100644
--- a/skills.html
+++ b/skills.html
@@ -3,114 +3,58 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Raydo Matthee | Professional Skills</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Skills - Raydo Matthee</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
 <body class="bg-gray-900 text-white font-sans">
 
-    <!-- Sticky Nav Menu -->
-    <nav class="bg-gray-800 w-full z-10 top-0 sticky shadow">
-        <div class="container mx-auto px-6 py-3 flex justify-between items-center">
-            <a href="#home" class="text-white text-3xl font-bold">Raydo Matthee</a>
-            <div>
-                <a href="#home" class="text-gray-300 text-lg hover:text-white px-3 py-2">Home</a>
-                <a href="#about" class="text-gray-300 text-lg hover:text-white px-3 py-2">About</a>
-                <a href="#professional-skills" class="text-gray-300 text-lg hover:text-white px-3 py-2">Professional Skills</a>
-                <a href="#technical-skills" class="text-gray-300 text-lg hover:text-white px-3 py-2">Technical Skills</a>
-                <a href="#contact" class="text-gray-300 text-lg hover:text-white px-3 py-2">Contact</a>
-            </div>
-        </div>
-    </nav>
+    <header class="text-center py-10">
+        <h1 class="text-4xl font-bold">Skills</h1>
+        <p class="text-xl mt-3">@burnt-exe</p>
+    </header>
 
-    <!-- Home Section -->
-    <section id="home" class="h-screen flex items-center justify-center bg-cover bg-center" style="background-image: url('path/to/your/background-image.jpg');">
-        <div class="text-center">
-            <h1 class="text-6xl font-bold mb-4">Welcome to Raydo Matthee's Portfolio</h1>
-            <p class="text-xl">Explore my professional journey and skills.</p>
-        </div>
-    </section>
-    
-<body class="bg-gray-900 text-white">
+    <nav class="bg-gray-800 py-3">
+        <ul class="flex justify-center space-x-4">
+            <li><a href="index.html" class="hover:text-blue-400">Home</a></li>
+            <li><a href="about.html" class="hover:text-blue-400">About</a></li>
+            <li><a href="experience.html" class="hover:text-blue-400">Experience</a></li>
+            <li><a href="education.html" class="hover:text-blue-400">Education</a></li>
+            <li><a href="skills.html" class="text-blue-400">Skills</a></li>
+            <li><a href="contact.html" class="hover:text-blue-400">Contact</a></li>
+        </ul>
+    </nav>
 
-    <!-- Professional Skills Section -->
     <section id="professional-skills" class="py-10">
         <div class="container mx-auto px-4">
-            <h2 class="text-4xl font-bold text-center mb-8">Professional Skills - Raydo Matthee</h2>
-            <div class="grid md:grid-cols-2 gap-8">
-                
-                <!-- Leadership -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Leadership</h3>
-                    <p class="mt-2">Experience leading teams and driving strategic initiatives.</p>
-                </div>
-                
-                <!-- Communication Skills -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Communication Skills</h3>
-                    <p class="mt-2">Strong written and verbal communication abilities.</p>
-                </div>
-                
-                <!-- Decision Making -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Decision Making</h3>
-                    <p class="mt-2">Ability to make informed decisions under pressure.</p>
-                </div>
-                
-                <!-- Problem Solving -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Problem Solving</h3>
-                    <p class="mt-2">Analytical skills to identify and solve complex problems.</p>
-                </div>
-                
-                <!-- Critical Thinking -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Critical Thinking</h3>
-                    <p class="mt-2">Capacity to analyze information objectively and make reasoned judgments.</p>
+            <h2 class="text-3xl font-bold mb-6">Professional Skills</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Sample Skill -->
+                <div class="bg-gray-700 p-6 rounded-lg shadow">
+                    <i class="fas fa-users fa-2x mb-3"></i>
+                    <h3 class="text-xl font-semibold mb-2">Leadership</h3>
+                    <p>Experience leading teams and driving strategic initiatives.</p>
                 </div>
+                <!-- Add more skills as needed -->
             </div>
         </div>
     </section>
 
-    <!-- Technical Skills Section -->
     <section id="technical-skills" class="py-10 bg-gray-800">
         <div class="container mx-auto px-4">
-            <h2 class="text-4xl font-bold text-center mb-8">Technical Skills</h2>
-            <div class="grid md:grid-cols-2 gap-8">
-                
-                <!-- Cloud Computing -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Cloud Computing</h3>
-                    <p class="mt-2">Proficient in cloud technologies and platforms.</p>
-                </div>
-                
-                <!-- Project Management -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Project Management</h3>
-                    <p class="mt-2">Experience in managing projects from initiation to completion.</p>
-                </div>
-                
-                <!-- Data Analysis -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Data Analysis</h3>
-                    <p class="mt-2">Ability to analyze and interpret data to derive insights.</p>
-                </div>
-                
-                <!-- Software Development -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">Software Development</h3>
-                    <p class="mt-2">Proficient in various programming languages and software development methodologies.</p>
-                </div>
-                
-                <!-- IT Infrastructure -->
-                <div class="bg-gray-700 p-6 rounded-lg shadow-lg">
-                    <h3 class="text-2xl font-semibold">IT Infrastructure</h3>
-                    <p class="mt-2">Understanding of IT infrastructure and networking concepts.</p>
+            <h2 class="text-3xl font-bold mb-6 text-white">Technical Skills</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Sample Technical Skill -->
+                <div class="bg-gray-700 p-6 rounded-lg shadow">
+                    <i class="fas fa-cloud fa-2x mb-3"></i>
+                    <h3 class="text-xl font-semibold mb-2">Cloud Computing</h3>
+                    <p>Proficient in cloud technologies and platforms.</p>
                 </div>
+                <!-- Add more technical skills as needed -->
             </div>
         </div>
     </section>
 
-    <!-- Footer -->
     <footer class="text-center py-6 border-t border-gray-800 mt-10">
         <p>&copy; 2024 burnt.exe. All rights reserved.</p>
         <p>Powered by Skunkworks creativity and innovation.</p>
