feat(about): add story sections and core values to About component

Enhance the About page with new story sections detailing personal journey and core values, including icons and structured content for better user engagement and self-presentation.

app/components/Skills.tsx

@@ -76,7 +76,13 @@ export default function Skills() {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 px-6 py-3 rounded-full mb-6 border border-cyan-400/20">
+            <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
+            <span className="text-sm font-medium text-cyan-300">
+              Tecnologias Dominadas
+            </span>
+          </div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
             Habilidades Técnicas
           </h2>
           <p className="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -96,7 +102,7 @@ export default function Skills() {
                 transition={{ duration: 0.8, delay: index * 0.1 }}
                 viewport={{ once: true }}
               >
-                <div className="p-6 space-y-4">
+                <div className="p-6 space-y-4 bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
                   {/* Header */}
                   <div className="flex items-center gap-3">
                     <div className={`p-3 rounded-lg ${category.bgColor}`}>