Feat(UI): Red theme.

index.html

@@ -12,11 +12,26 @@
     <style>
         /* Modern CSS reset and variables */
         :root {
+            /* Claude dark blue / grey theme
+            --text-color: #1a202c;
             --primary-color: #2d3748;
             --secondary-color: #4a5568;
             --accent-color: #4299e1;
             --background-color: #f7fafc;
-            --text-color: #1a202c;
+            */
+            /* Purple theme - https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff
+            --text-color: #10002B; /* very dark * /
+            --primary-color: #240046; /* medium dark * /
+            --secondary-color: #3C096C; /* dark * /
+            --accent-color: #C77DFF; /* light * /
+            --background-color: #E0AAFF; /* very light * /
+            */
+            /* Red theme */
+            --text-color: #2B0000;
+            --primary-color: #740000;
+            --secondary-color: #B50000;
+            --accent-color: #E35053;
+            --background-color: #F6CACC;
         }
 
         * {
@@ -118,8 +133,10 @@
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
 
-        .project-card h3 {
-            color: var(--accent-color);
+        .expertise-card h3,
+        .project-card h3,
+        .experience-card h3 {
+            color: var(--secondary-color);
         }
 
         .button {
@@ -148,7 +165,7 @@
             margin-bottom: 0;
         }
         .experience-date {
-            color: var(--secondary-color);
+            color: var(--primary-color);
             font-size: 0.9rem;
             width: 50%;
             min-width: 50%;