heading gradients fixed

src/components/Expertise/index.tsx

@@ -10,12 +10,12 @@ const ExperienceCard: React.FC<ExperienceCardProps> = ({
   period,
   description,
   className = '',
-  gradientFrom // Add this to customize the icon color
+  gradientFrom
 }) => (
   <div className={`bg-gray-900 rounded-lg p-6 hover:bg-gray-800 transition-colors duration-300 ${className}`}>
     <div className="flex items-start gap-4">
       <div className={`p-3 bg-${gradientFrom}/10 rounded-lg`}>
-        <Icon className={`text-${gradientFrom}`} size={24} />
+        <Icon size={24} className={`text-${gradientFrom}`} />
       </div>
       <div>
         <h3 className="text-xl font-semibold text-white">{title}</h3>
@@ -86,14 +86,14 @@ const defaultNuclearExperience: ExperienceItem[] = [
 
 const defaultWeb3Experience: ExperienceItem[] = [
   {
-    title: "DAO Governance Lead",
+    title: "DAO Governance and Operations",
     company: "Public HAUS",
     period: "2022 - Present",
     description: "Secured $197K in grants through strategic partnerships with Moloch DAO, Optimism, and Public Nouns. Pioneering governance frameworks and community development initiatives.",
     icon: Users
   },
   {
-    title: "Web3 Innovation",
+    title: "Web3 Contributor",
     company: "DAO Masons & MetaCartel",
     period: "2022 - 2024",
     description: "Founded DAO Masons, led Grant Ships program distributing $100K ARB tokens. Active contributor to MetaCartel, driving Web3 adoption and innovation in DAOs.",
@@ -109,7 +109,6 @@ export const Expertise: React.FC<ExpertiseProps> = ({
   return (
     <div className={`min-h-screen bg-black text-white p-8 ${className}`}>
       <div className="max-w-6xl mx-auto space-y-16">
-        {/* Industry Section */}
         <Section
           id="industry"
           title="Industrial Expertise"
@@ -119,17 +118,15 @@ export const Expertise: React.FC<ExpertiseProps> = ({
           gradientTo="indigo-500"
         />
         
-        {/* Nuclear Section */}
         <Section
           id="nuclear"
           title="Nuclear Expertise"
           icon={Atom}
           items={nuclearExperience}
-          gradientFrom="blue-600"
+          gradientFrom="emerald-400"
-          gradientTo="emerald-400"
+          gradientTo="blue-500"
         />
 
-        {/* Web3 Section */}
         <Section
           id="web3"
           title="Web3 Innovation"

src/components/Skills/index.tsx

@@ -3,20 +3,20 @@ import { ChevronRight } from 'lucide-react';
 import type { SkillsProps, SkillCardProps, SkillBarProps, Skill } from './types';
 
 const SkillBar: FC<SkillBarProps> = ({
-  level,
+    level,
-  maxLevel = 5,
+    maxLevel = 5,
-  className = ''
+    className = ''
-}) => {
+  }) => {
-  const percentage = (level / maxLevel) * 100;
+    const percentage = (level / maxLevel) * 100;
-  return (
+    return (
-    <div className={`h-2 w-32 bg-gray-800 rounded-full overflow-hidden ${className}`}>
+      <div className={`h-2 w-32 bg-gray-800 rounded-full overflow-hidden ${className}`}>
-      <div
+        <div
-        className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transform origin-left transition-transform duration-1000 ease-out"
+          className="h-full bg-gradient-to-r from-emerald-400 to-cyan-500 rounded-full transform origin-left transition-transform duration-1000 ease-out"
-        style={{ transform: `scaleX(${percentage / 100})` }}
+          style={{ transform: `scaleX(${percentage / 100})` }}
-      />
+        />
-    </div>
+      </div>
-  );
+    );
-};
+  };
 
 const SkillCard: FC<SkillCardProps> = ({
   skill,
@@ -114,25 +114,25 @@ const defaultSkills: Skill[] = [
 ];
 
 export const Skills: FC<SkillsProps> = ({
-  className = '',
+    className = '',
-  skills = defaultSkills
+    skills = defaultSkills
-}) => {
+  }) => {
-  return (
+    return (
-    <section id="skills" className={`min-h-screen bg-black text-white p-8 ${className}`}>
+      <section id="skills" className={`min-h-screen bg-black text-white p-8 ${className}`}>
-      <div className="max-w-6xl mx-auto space-y-8">
+        <div className="max-w-6xl mx-auto space-y-8">
-        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-4">
-          <h2 className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
+            <h2 className="text-3xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-500 bg-clip-text text-transparent">
-            Professional Skills
+              Professional Skills
-          </h2>
+            </h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+            {skills.map((skill, index) => (
+              <SkillCard key={index} skill={skill} />
+            ))}
+          </div>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+      </section>
-          {skills.map((skill, index) => (
+    );
-            <SkillCard key={index} skill={skill} />
+  };
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
 
 export default Skills;

tailwind.config.js

@@ -4,6 +4,24 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  safelist: [
+    {
+      pattern: /from-(cyan|emerald|purple|blue|indigo|pink)-(400|500)/,
+      variants: ['hover', 'focus'],
+    },
+    {
+      pattern: /to-(indigo|blue|pink)-(400|500)/,
+      variants: ['hover', 'focus'],
+    },
+    {
+      pattern: /bg-(cyan|emerald|purple|blue|indigo|pink)-(400|500)\/10/,
+      variants: ['hover', 'focus'],
+    },
+    {
+      pattern: /text-(cyan|emerald|purple|blue|indigo|pink)-(400|500)/,
+      variants: ['hover', 'focus'],
+    },
+  ],
   theme: {
     extend: {
       fontFamily: {