From 6ec67c8f5a722319ceab22a4493de4fdccb8d843 Mon Sep 17 00:00:00 2001
From: Evandro Fonseca Junior <asemlk54@hotmail.com>
Date: Sat, 11 Oct 2025 18:25:41 -0300
Subject: [PATCH] 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/About.tsx          | 320 +++++++++++++++++++-------
 app/components/Contact.tsx        |  10 +-
 app/components/ContactForm.tsx    | 274 +++++++++++++++++------
 app/components/Experience.tsx     | 338 ++++++++++++++++++++++------
 app/components/Hero.tsx           |  64 ++++--
 app/components/Projects.tsx       | 311 ++++++++++++++++++++------
 app/components/Skills.tsx         |  10 +-
 app/components/WorkModalities.tsx | 359 +++++++++++++++++++++++++-----
 linkedin.md                       |  58 ++---
 pnpm-workspace.yaml               |   3 +
 public/portfolio-data.json        | 257 ++++++++++++++++-----
 11 files changed, 1540 insertions(+), 464 deletions(-)
 create mode 100644 pnpm-workspace.yaml

diff --git a/app/components/About.tsx b/app/components/About.tsx
index 9d72a01..d1ed834 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -3,108 +3,258 @@
 import { motion } from "motion/react";
 import { MagicCard } from "@/components/magicui/magic-card";
 import { TextReveal } from "@/components/magicui/text-reveal";
+import {
+  Brain,
+  Zap,
+  Target,
+  Rocket,
+  Users,
+  Lightbulb,
+  Code,
+  Shield,
+} from "lucide-react";
 
 export default function About() {
+  const storySections = [
+    {
+      icon: Brain,
+      title: "A Curiosidade que Me Define",
+      content:
+        "Sempre fui fascinado por problemas que outros consideravam 'complicados demais'. Essa curiosidade me levou ao desenvolvimento web, onde descobri meu superpoder: transformar complexidade em clareza, caos em sistemas elegantes.",
+      color: "from-blue-500 to-purple-600",
+      bgColor: "bg-blue-500/10",
+      iconColor: "text-blue-400",
+    },
+    {
+      icon: Zap,
+      title: "Três Anos de Transformação",
+      content:
+        "Nos últimos três anos, enfrentei dezenas de desafios técnicos que pareciam impossíveis no início: arquiteturas que precisavam escalar, integrações que ninguém conseguia fazer funcionar, prazos que pareciam irreais. Cada batalha me transformou. Cada projeto me tornou mais forte.",
+      color: "from-purple-500 to-pink-600",
+      bgColor: "bg-purple-500/10",
+      iconColor: "text-purple-400",
+    },
+    {
+      icon: Target,
+      title: "Fundamentação + Experiência",
+      content:
+        "Hoje, como estudante de Engenharia da Computação, combino fundamentação acadêmica rigorosa com experiência real de mercado. Domino o arsenal completo do desenvolvimento full-stack moderno — computação em nuvem, IA, arquiteturas escaláveis — mas minha verdadeira expertise está em escolher a ferramenta certa para cada missão.",
+      color: "from-pink-500 to-red-600",
+      bgColor: "bg-pink-500/10",
+      iconColor: "text-pink-400",
+    },
+    {
+      icon: Rocket,
+      title: "Soluções que Fazem Diferença",
+      content:
+        "Não entrego apenas código; entrego soluções que fazem diferença mensurável. Procuro meu próximo grande desafio: um time onde colaboração, ética e inovação não sejam buzzwords, mas valores praticados diariamente.",
+      color: "from-red-500 to-orange-600",
+      bgColor: "bg-red-500/10",
+      iconColor: "text-red-400",
+    },
+    {
+      icon: Lightbulb,
+      title: "Construindo Legados",
+      content:
+        "Onde minha dedicação à excelência técnica e aprendizado constante possam gerar impacto real. Porque tecnologia sem propósito é apenas sintaxe — e eu construo legados.",
+      color: "from-orange-500 to-yellow-600",
+      bgColor: "bg-orange-500/10",
+      iconColor: "text-orange-400",
+    },
+  ];
+
+  const coreValues = [
+    {
+      icon: Code,
+      title: "Excelência Técnica",
+      description: "Código limpo, arquiteturas escaláveis e soluções elegantes",
+    },
+    {
+      icon: Brain,
+      title: "Aprendizado Constante",
+      description: "Sempre evoluindo, sempre buscando o próximo desafio",
+    },
+    {
+      icon: Users,
+      title: "Colaboração Genuína",
+      description: "Trabalho em equipe baseado em respeito e propósito comum",
+    },
+    {
+      icon: Shield,
+      title: "Ética Profissional",
+      description: "Valores sólidos que guiam cada decisão técnica",
+    },
+  ];
+
   return (
-    <section id="about" className="py-20 px-4">
-      <div className="max-w-6xl mx-auto">
+    <section id="about" className="py-20 px-4 relative">
+      <div className="max-w-7xl mx-auto relative z-10">
+        {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-center mb-16"
+          className="text-center mb-20"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">Sobre Mim</h2>
+          <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">
+              Minha Jornada
+            </span>
+          </div>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 via-blue-400 to-blue-500 bg-clip-text text-transparent">
+            Sobre Mim
+          </h2>
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
+            Uma jornada de transformação através da tecnologia, onde cada
+            desafio se tornou uma oportunidade de crescimento e inovação
+          </p>
         </motion.div>
 
-        <div className="grid md:grid-cols-2 gap-12 items-center">
-          {/* Main Description */}
-          <motion.div
-            initial={{ opacity: 0, x: -30 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            viewport={{ once: true }}
-          >
-            <div className="p-8 space-y-6">
-              <TextReveal>
-                Desenvolvedor Full-Stack com 3+ anos de experiência,
-                especializado em soluções web modernas e inovadoras. Cursando
-                Engenharia da Computação, com conhecimentos em computação em
-                nuvem e inteligência artificial. Busco constantemente novos
-                desafios onde possa aplicar minha paixão por tecnologia e
-                resolver problemas de forma criativa.
-              </TextReveal>
+        {/* Story Timeline */}
+        <div className="space-y-12 mb-20">
+          {storySections.map((section, index) => {
+            const IconComponent = section.icon;
+            const isEven = index % 2 === 0;
 
-              <TextReveal>
-                Meu objetivo é entregar soluções de alta qualidade, sempre
-                priorizando colaboração, ética e inovação. Acredito no poder da
-                tecnologia para fazer a diferença e estou comprometido com o
-                aprendizado contínuo e a excelência técnica.
-              </TextReveal>
-            </div>
-          </motion.div>
-
-          {/* Soft Skills */}
-          <motion.div
-            initial={{ opacity: 0, x: 30 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.8, delay: 0.4 }}
-            viewport={{ once: true }}
-            className="space-y-6"
-          >
-            <h3 className="text-2xl font-semibold mb-6 text-cyan-400">
-              Soft Skills
-            </h3>
-
-            <div className="space-y-4">
-              {[
-                { skill: "Comunicação", level: 90 },
-                { skill: "Trabalho em Equipe", level: 85 },
-                // { skill: "Resolução de Problemas", level: 95 },
-                { skill: "Aprendizado Contínuo", level: 90 },
-                { skill: "Adaptabilidade", level: 85 },
-              ].map((item) => (
-                <div key={item.skill} className="space-y-2">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-300">{item.skill}</span>
-                    <span className="text-cyan-400">{item.level}%</span>
-                  </div>
-                  <div className="w-full bg-white/10 rounded-full h-2">
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, x: isEven ? -50 : 50 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.8, delay: index * 0.2 }}
+                viewport={{ once: true }}
+                className={`flex flex-col ${
+                  isEven ? "md:flex-row" : "md:flex-row-reverse"
+                } items-center gap-8`}
+              >
+                {/* Content */}
+                <div className={`flex-1 ${isEven ? "md:pr-12" : "md:pl-12"}`}>
+                  <div className="relative">
                     <div
-                      className="bg-gradient-to-r from-cyan-400 to-blue-500 h-2 rounded-full transition-all duration-1000"
-                      style={{ width: `${item.level}%` }}
-                    />
+                      className={`absolute inset-0 bg-gradient-to-r ${section.color} opacity-10 rounded-2xl blur-xl`}
+                    ></div>
+                    <div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8">
+                      <div className="flex items-center gap-4 mb-6">
+                        <div className={`p-4 rounded-xl ${section.bgColor}`}>
+                          <IconComponent
+                            className={`w-8 h-8 ${section.iconColor}`}
+                          />
+                        </div>
+                        <h3 className="text-2xl font-bold text-white">
+                          {section.title}
+                        </h3>
+                      </div>
+                      <p className="text-gray-300 leading-relaxed text-lg">
+                        {section.content}
+                      </p>
+                    </div>
                   </div>
                 </div>
-              ))}
-            </div>
 
-            <div className="mt-8">
-              <h4 className="text-lg font-semibold mb-4 text-blue-400">
-                Destaques
-              </h4>
-              <ul className="space-y-2 text-gray-300">
-                <li className="flex items-center gap-2">
-                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
-                  3+ anos de experiência
-                </li>
-                <li className="flex items-center gap-2">
-                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
-                  Engenheiro da Computação
-                </li>
-                <li className="flex items-center gap-2">
-                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
-                  Conhecimento em Cloud e IA
-                </li>
-                <li className="flex items-center gap-2">
-                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
-                  Ampla gama de conhecimentos
-                </li>
-              </ul>
-            </div>
-          </motion.div>
+                {/* Timeline Indicator */}
+                <div className="flex flex-col items-center">
+                  <div
+                    className={`w-16 h-16 rounded-full ${section.bgColor} border-4 border-white/20 flex items-center justify-center`}
+                  >
+                    <span className="text-2xl font-bold text-white">
+                      {index + 1}
+                    </span>
+                  </div>
+                  {index < storySections.length - 1 && (
+                    <div className="w-1 h-16 bg-gradient-to-b from-white/20 to-transparent mt-4"></div>
+                  )}
+                </div>
+
+                {/* Spacer */}
+                <div className="flex-1 hidden md:block"></div>
+              </motion.div>
+            );
+          })}
         </div>
+
+        {/* Core Values */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          viewport={{ once: true }}
+          className="mb-16"
+        >
+          <div className="text-center mb-12">
+            <h3 className="text-3xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+              Meus Valores Fundamentais
+            </h3>
+            <p className="text-gray-400 text-lg">
+              Os princípios que guiam cada decisão e projeto
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {coreValues.map((value, index) => {
+              const IconComponent = value.icon;
+              return (
+                <motion.div
+                  key={value.title}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  viewport={{ once: true }}
+                  className="group"
+                >
+                  <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 h-full hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
+                    <div className="p-3 rounded-lg bg-blue-500/20 w-fit mb-4 group-hover:bg-blue-500/30 transition-colors">
+                      <IconComponent className="w-6 h-6 text-blue-400" />
+                    </div>
+                    <h4 className="text-lg font-semibold text-white mb-3">
+                      {value.title}
+                    </h4>
+                    <p className="text-gray-400 text-sm leading-relaxed">
+                      {value.description}
+                    </p>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        </motion.div>
+
+        {/* Call to Action */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center"
+        >
+          <div className="relative max-w-4xl mx-auto">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-2xl blur-xl"></div>
+            <div className="relative bg-gradient-to-r from-blue-500/5 to-purple-500/5 border border-blue-500/20 rounded-2xl p-8 backdrop-blur-sm">
+              <h4 className="text-2xl font-bold text-white mb-4">
+                Pronto para o Próximo Grande Desafio
+              </h4>
+              <p className="text-gray-300 text-lg mb-6">
+                Busco uma equipe onde posso aplicar toda essa experiência e
+                paixão para criar soluções que realmente importam
+              </p>
+              <div className="flex flex-wrap justify-center gap-4">
+                <span className="px-4 py-2 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium border border-blue-500/30">
+                  🚀 Inovação Contínua
+                </span>
+                <span className="px-4 py-2 bg-purple-500/20 text-purple-400 rounded-full text-sm font-medium border border-purple-500/30">
+                  🤝 Colaboração Genuína
+                </span>
+                <span className="px-4 py-2 bg-pink-500/20 text-pink-400 rounded-full text-sm font-medium border border-pink-500/30">
+                  ⚡ Excelência Técnica
+                </span>
+                <span className="px-4 py-2 bg-green-500/20 text-green-400 rounded-full text-sm font-medium border border-green-500/30">
+                  🎯 Impacto Real
+                </span>
+              </div>
+            </div>
+          </div>
+        </motion.div>
       </div>
     </section>
   );
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index 5a6bd20..b86eb8e 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -43,7 +43,13 @@ export default function Contact() {
           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">
+              Vamos Conversar
+            </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">
             Vamos Conversar
           </h2>
           <p className="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -72,7 +78,7 @@ export default function Contact() {
               </h3>
               <div className="overflow-hidden rounded-lg shadow-lg">
                 <iframe
-                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3557.1999999999996!2d-48.77891484804123!3d-26.087801635807004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjbCsDA1JzE2LjEiUyA0OMKwNDYnNDQuMSJX!5e0!3m2!1spt-BR!2sbr!4v1700000000000!5m2!1spt-BR!2sbr"
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d41412.34944306462!2d-48.8485392!3d-26.0388466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dc04ecd7709991%3A0x91fa53b8c6ced1e0!2sGaruva%2C%20SC%2C%2089248-000!5e1!3m2!1spt-BR!2sbr!4v1760215413380!5m2!1spt-BR!2sbr"
                   width="100%"
                   height="450"
                   style={{ border: 0 }}
diff --git a/app/components/ContactForm.tsx b/app/components/ContactForm.tsx
index af22181..10ae958 100644
--- a/app/components/ContactForm.tsx
+++ b/app/components/ContactForm.tsx
@@ -297,73 +297,81 @@ ${userName}`;
   };
 
   const getEstimatedValue = () => {
-    let value = 0;
-    // Lógica de estimativa baseada nas respostas
+    let hours = 0;
+    let hourlyRate = 55; // Taxa base R$ 55/h
+
+    // Estimativa de horas baseada no tipo de projeto
     switch (projectType) {
       case "web-app":
-        value += 10000;
+        hours += 80; // Aplicação web completa
         break;
       case "landing-page":
-        value += 2000;
+        hours += 16; // Landing page simples
         break;
       case "mvp":
-        value += 5000;
+        hours += 40; // MVP básico
         break;
       case "iot-app":
-        value += 15000;
+        hours += 120; // Aplicação IoT complexa
         break;
       case "integracao":
-        value += 7000;
+        hours += 32; // Integração de sistemas
         break;
       case "manutencao":
-        value += 1000;
+        hours += 8; // Manutenção pontual
         break;
       case "consultoria":
-        value += 500;
+        hours += 4; // Consultoria inicial
         break;
       default:
         break;
     }
 
+    // Ajuste de horas baseado no prazo
     switch (desiredDeadline) {
       case "1-3-weeks":
-        value *= 1.2; // Urgência aumenta o valor
+        hours *= 1.3; // Urgência aumenta horas
         break;
       case "1-2-months":
-        value *= 1.1;
+        hours *= 1.1;
         break;
       case "6-plus-months":
-        value *= 0.9; // Prazo longo pode reduzir o valor
+        hours *= 0.9; // Prazo longo pode reduzir horas
         break;
       default:
         break;
     }
 
+    // Ajuste de horas baseado na complexidade
     switch (technicalComplexity) {
       case "alta":
-        value *= 1.3;
+        hours *= 1.4;
+        hourlyRate = 65; // Taxa maior para alta complexidade
         break;
       case "muito-alta":
-        value *= 1.5;
+        hours *= 1.7;
+        hourlyRate = 70; // Taxa máxima para muito alta complexidade
+        break;
+      case "media":
+        hourlyRate = 50; // Taxa média
         break;
       default:
         break;
     }
 
     if (hasInternalTeam === "nao") {
-      value *= 1.1; // Sem equipe interna pode indicar mais trabalho
+      hours *= 1.2; // Sem equipe interna = mais horas necessárias
     }
 
-    // Ajustar pelo valor do orçamento, se aplicável
-    if (budgetValue) {
-      const parsedBudget = parseFloat(budgetValue.replace(/\D/g, ""));
-      if (!isNaN(parsedBudget)) {
-        // Se o valor estimado for maior que o orçamento fornecido, ajusta para o orçamento
-        value = Math.min(value, parsedBudget);
-      }
+    const totalValue = hours * hourlyRate;
+
+    if (totalValue > 0) {
+      return `Estimativa: ${Math.round(
+        hours
+      )}h × R$ ${hourlyRate}/h = R$ ${totalValue.toFixed(0)}`;
     }
 
-    return value > 0 ? `Estimativa: R$ ${value.toFixed(2)}` : "Estimativa: N/A";
+    return "Estimativa: Solicite orçamento personalizado";
   };
 
   return (
@@ -374,7 +382,7 @@ ${userName}`;
       viewport={{ once: true }}
       className="space-y-4"
     >
-      <h3 className="text-2xl font-semibold mb-6 text-blue-primary">
+      <h3 className="text-2xl font-semibold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
         Preencha o Formulário
       </h3>
 
@@ -384,8 +392,8 @@ ${userName}`;
           onClick={() => setFormType("simple")}
           className={`py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
             formType === "simple"
-              ? "bg-blue-primary text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
-              : "bg-gray-700 text-gray-300 opacity-50 cursor-pointer"
+              ? "bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
+              : "bg-gray-700 text-gray-300 hover:bg-gray-600 cursor-pointer"
           }`}
         >
           Formulário Simples
@@ -395,8 +403,8 @@ ${userName}`;
           onClick={() => setFormType("advanced")}
           className={`py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${
             formType === "advanced"
-              ? "bg-blue-primary text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
-              : "bg-gray-700 text-gray-300 opacity-50 cursor-pointer"
+              ? "bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
+              : "bg-gray-700 text-gray-300 hover:bg-gray-600 cursor-pointer"
           }`}
         >
           Formulário Avançado
@@ -430,7 +438,7 @@ ${userName}`;
               id="simple-user-name"
               className={`w-full p-3 rounded-lg bg-white/5 border ${
                 nameError ? "border-red-500" : "border-white/10"
-              } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+              } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
               placeholder="Seu nome"
               value={userName}
               onChange={handleNameChange}
@@ -485,7 +493,7 @@ ${userName}`;
                   id="user-name"
                   className={`w-full p-3 rounded-lg bg-white/5 border ${
                     nameError ? "border-red-500" : "border-white/10"
-                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
                   placeholder="Seu nome completo"
                   value={userName}
                   onChange={handleNameChange}
@@ -508,7 +516,7 @@ ${userName}`;
                   id="user-email"
                   className={`w-full p-3 rounded-lg bg-white/5 border ${
                     emailError ? "border-red-500" : "border-white/10"
-                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
                   placeholder="seu.email@empresa.com"
                   value={userEmail}
                   onChange={handleEmailChange}
@@ -531,7 +539,7 @@ ${userName}`;
                   id="user-phone"
                   className={`w-full p-3 rounded-lg bg-white/5 border ${
                     phoneError ? "border-red-500" : "border-white/10"
-                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+                  } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
                   placeholder="(XX) XXXXX-XXXX"
                   value={userPhone}
                   onChange={handlePhoneChange}
@@ -552,7 +560,7 @@ ${userName}`;
                 <input
                   type="text"
                   id="user-company"
-                  className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                  className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                   placeholder="Nome da empresa, sua posição"
                   value={userCompany}
                   onChange={handleCompanyChange}
@@ -567,16 +575,34 @@ ${userName}`;
                 </label>
                 <select
                   id="how-found"
-                  className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                  className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                  style={{
+                    backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                    backgroundPosition: "right 12px center",
+                    backgroundRepeat: "no-repeat",
+                    backgroundSize: "16px",
+                  }}
                   value={howFound}
                   onChange={handleHowFoundChange}
                 >
-                  <option value="">Selecione uma opção</option>
-                  <option value="linkedin">LinkedIn</option>
-                  <option value="github">GitHub</option>
-                  <option value="indicacao">Indicação</option>
-                  <option value="pesquisa">Pesquisa Online</option>
-                  <option value="outro">Outro</option>
+                  <option value="" className="bg-gray-800 text-white">
+                    Selecione uma opção
+                  </option>
+                  <option value="linkedin" className="bg-gray-800 text-white">
+                    LinkedIn
+                  </option>
+                  <option value="github" className="bg-gray-800 text-white">
+                    GitHub
+                  </option>
+                  <option value="indicacao" className="bg-gray-800 text-white">
+                    Indicação
+                  </option>
+                  <option value="pesquisa" className="bg-gray-800 text-white">
+                    Pesquisa Online
+                  </option>
+                  <option value="outro" className="bg-gray-800 text-white">
+                    Outro
+                  </option>
                 </select>
               </div>
             </div>
@@ -631,19 +657,55 @@ ${userName}`;
                   </label>
                   <select
                     id="project-type"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 12px center",
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "16px",
+                    }}
                     value={projectType}
                     onChange={handleProjectTypeChange}
                   >
-                    <option value="">Selecione o tipo</option>
-                    <option value="web-app">Aplicação Web Completa</option>
-                    <option value="landing-page">Landing Page</option>
-                    <option value="mvp">MVP (Produto Mínimo Viável)</option>
-                    <option value="iot-app">Aplicação IoT</option>
-                    <option value="integracao">Integração de Sistemas</option>
-                    <option value="manutencao">Manutenção/Ajustes</option>
-                    <option value="consultoria">Consultoria/Mentoria</option>
-                    <option value="outro">Outro</option>
+                    <option value="" className="bg-gray-800 text-white">
+                      Selecione o tipo
+                    </option>
+                    <option value="web-app" className="bg-gray-800 text-white">
+                      Aplicação Web Completa
+                    </option>
+                    <option
+                      value="landing-page"
+                      className="bg-gray-800 text-white"
+                    >
+                      Landing Page
+                    </option>
+                    <option value="mvp" className="bg-gray-800 text-white">
+                      MVP (Produto Mínimo Viável)
+                    </option>
+                    <option value="iot-app" className="bg-gray-800 text-white">
+                      Aplicação IoT
+                    </option>
+                    <option
+                      value="integracao"
+                      className="bg-gray-800 text-white"
+                    >
+                      Integração de Sistemas
+                    </option>
+                    <option
+                      value="manutencao"
+                      className="bg-gray-800 text-white"
+                    >
+                      Manutenção/Ajustes
+                    </option>
+                    <option
+                      value="consultoria"
+                      className="bg-gray-800 text-white"
+                    >
+                      Consultoria/Mentoria
+                    </option>
+                    <option value="outro" className="bg-gray-800 text-white">
+                      Outro
+                    </option>
                   </select>
                 </div>
                 {projectType === "outro" && (
@@ -661,7 +723,7 @@ ${userName}`;
                         otherProjectTypeError
                           ? "border-red-500"
                           : "border-white/10"
-                      } text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent`}
+                      } text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent`}
                       placeholder="Ex: Desenvolvimento de Plugin, Automação de Processos"
                       value={otherProjectType}
                       onChange={(e) => {
@@ -687,16 +749,49 @@ ${userName}`;
                   </label>
                   <select
                     id="desired-deadline"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 12px center",
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "16px",
+                    }}
                     value={desiredDeadline}
                     onChange={handleDesiredDeadlineChange}
                   >
-                    <option value="">Selecione o prazo</option>
-                    <option value="1-3-weeks">1-3 Semanas</option>
-                    <option value="1-2-months">1-2 Meses</option>
-                    <option value="2-4-months">2-4 Meses</option>
-                    <option value="4-6-months">4-6 Meses</option>
-                    <option value="6-plus-months">Mais de 6 Meses</option>
+                    <option value="" className="bg-gray-800 text-white">
+                      Selecione o prazo
+                    </option>
+                    <option
+                      value="1-3-weeks"
+                      className="bg-gray-800 text-white"
+                    >
+                      1-3 Semanas
+                    </option>
+                    <option
+                      value="1-2-months"
+                      className="bg-gray-800 text-white"
+                    >
+                      1-2 Meses
+                    </option>
+                    <option
+                      value="2-4-months"
+                      className="bg-gray-800 text-white"
+                    >
+                      2-4 Meses
+                    </option>
+                    <option
+                      value="4-6-months"
+                      className="bg-gray-800 text-white"
+                    >
+                      4-6 Meses
+                    </option>
+                    <option
+                      value="6-plus-months"
+                      className="bg-gray-800 text-white"
+                    >
+                      Mais de 6 Meses
+                    </option>
                   </select>
                 </div>
                 <div>
@@ -709,7 +804,7 @@ ${userName}`;
                   <input
                     type="text"
                     id="budget-value"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                     placeholder="Ex: 5000, 10000, A Combinar"
                     value={budgetValue}
                     onChange={handleBudgetValueChange}
@@ -724,15 +819,34 @@ ${userName}`;
                   </label>
                   <select
                     id="technical-complexity"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 12px center",
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "16px",
+                    }}
                     value={technicalComplexity}
                     onChange={handleTechnicalComplexityChange}
                   >
-                    <option value="">Selecione a complexidade</option>
-                    <option value="baixa">Baixa</option>
-                    <option value="media">Média</option>
-                    <option value="alta">Alta</option>
-                    <option value="muito-alta">Muito Alta</option>
+                    <option value="" className="bg-gray-800 text-white">
+                      Selecione a complexidade
+                    </option>
+                    <option value="baixa" className="bg-gray-800 text-white">
+                      Baixa
+                    </option>
+                    <option value="media" className="bg-gray-800 text-white">
+                      Média
+                    </option>
+                    <option value="alta" className="bg-gray-800 text-white">
+                      Alta
+                    </option>
+                    <option
+                      value="muito-alta"
+                      className="bg-gray-800 text-white"
+                    >
+                      Muito Alta
+                    </option>
                   </select>
                 </div>
                 <div>
@@ -744,14 +858,28 @@ ${userName}`;
                   </label>
                   <select
                     id="has-internal-team"
-                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-blue-primary focus:border-transparent"
+                    className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white focus:ring-2 focus:ring-cyan-500 focus:border-transparent appearance-none"
+                    style={{
+                      backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
+                      backgroundPosition: "right 12px center",
+                      backgroundRepeat: "no-repeat",
+                      backgroundSize: "16px",
+                    }}
                     value={hasInternalTeam}
                     onChange={handleHasInternalTeamChange}
                   >
-                    <option value="">Selecione</option>
-                    <option value="sim">Sim</option>
-                    <option value="nao">Não</option>
-                    <option value="parcial">Parcialmente</option>
+                    <option value="" className="bg-gray-800 text-white">
+                      Selecione
+                    </option>
+                    <option value="sim" className="bg-gray-800 text-white">
+                      Sim
+                    </option>
+                    <option value="nao" className="bg-gray-800 text-white">
+                      Não
+                    </option>
+                    <option value="parcial" className="bg-gray-800 text-white">
+                      Parcialmente
+                    </option>
                   </select>
                 </div>
               </div>
@@ -768,7 +896,7 @@ ${userName}`;
               <textarea
                 id="custom-message"
                 rows={4}
-                className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-full p-3 rounded-lg bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                 placeholder="Descreva seu projeto ou suas necessidades aqui..."
                 value={customMessage}
                 onChange={handleMessageChange}
@@ -780,13 +908,13 @@ ${userName}`;
           <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
             <button
               type="submit"
-              className="w-full py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 bg-blue-primary hover:bg-blue-primary/90 text-white shadow-lg shadow-blue-primary/25 border-2 border-blue-500"
+              className="w-full py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 border-2 border-cyan-500"
             >
               {getCtaMessage()}
             </button>
           </motion.div>
           {projectType && desiredDeadline && budgetValue && (
-            <p className="text-center text-lg font-semibold text-blue-400 mt-4">
+            <p className="text-center text-lg font-semibold text-cyan-400 mt-4">
               {getEstimatedValue()}
             </p>
           )}
diff --git a/app/components/Experience.tsx b/app/components/Experience.tsx
index 6b67aa0..1845c8d 100644
--- a/app/components/Experience.tsx
+++ b/app/components/Experience.tsx
@@ -1,8 +1,16 @@
 "use client";
 
 import { motion } from "motion/react";
-import { BentoGrid, BentoGridItem } from "@/components/magicui/bento-grid";
-import { Calendar, MapPin, Briefcase } from "lucide-react";
+import {
+  Calendar,
+  MapPin,
+  Briefcase,
+  Zap,
+  TrendingUp,
+  Users,
+  Award,
+  ExternalLink,
+} from "lucide-react";
 import { usePortfolioData } from "@/lib/usePortfolioData";
 
 export default function Experience() {
@@ -11,7 +19,7 @@ export default function Experience() {
   if (loading) {
     return (
       <section id="experience" className="py-20 px-4">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-7xl mx-auto text-center">
           <div className="animate-pulse">
             <div className="h-8 bg-gray-700 rounded w-1/3 mx-auto mb-4"></div>
             <div className="h-4 bg-gray-700 rounded w-1/2 mx-auto"></div>
@@ -24,99 +32,293 @@ export default function Experience() {
   if (error || !data) {
     return (
       <section id="experience" className="py-20 px-4">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-7xl mx-auto text-center">
           <p className="text-red-400">Erro ao carregar dados de experiência.</p>
         </div>
       </section>
     );
   }
 
-  const experiences = data.experiences.filter((exp) => exp.featured);
+  const experiences = data.experiences
+    .filter((exp) => exp.featured)
+    .sort((a, b) => {
+      // Extrair ano de início de cada experiência
+      const getStartYear = (period: string) => {
+        const yearMatch = period.match(/(\d{4})/);
+        return yearMatch ? parseInt(yearMatch[1]) : 0;
+      };
+
+      const yearA = getStartYear(a.period);
+      const yearB = getStartYear(b.period);
+
+      // Ordenar da mais antiga para a mais nova
+      return yearA - yearB;
+    });
+
+  // Configuração de cores por empresa/tipo
+  const experienceConfig = {
+    "innovo-tecnologia": {
+      color: "from-blue-500 to-cyan-600",
+      bgColor: "bg-blue-500/10",
+      borderColor: "border-blue-500/20",
+      iconColor: "text-blue-400",
+      accent: "blue",
+    },
+    "apolo-energia": {
+      color: "from-green-500 to-emerald-600",
+      bgColor: "bg-green-500/10",
+      borderColor: "border-green-500/20",
+      iconColor: "text-green-400",
+      accent: "green",
+    },
+  };
+
+  const getExperienceConfig = (company: string) => {
+    const key = company
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^a-z0-9-]/g, "");
+    return (
+      experienceConfig[key as keyof typeof experienceConfig] ||
+      experienceConfig["innovo-tecnologia"]
+    );
+  };
+
+  const formatDuration = (period: string) => {
+    // Extrair meses da string de período (ex: "3 meses")
+    const monthsMatch = period.match(/(\d+)\s*meses?/i);
+    if (monthsMatch) {
+      const months = parseInt(monthsMatch[1]);
+      if (months < 12) {
+        return `${months} ${months === 1 ? "mês" : "meses"}`;
+      } else {
+        const years = Math.floor(months / 12);
+        const remainingMonths = months % 12;
+        if (remainingMonths === 0) {
+          return `${years} ${years === 1 ? "ano" : "anos"}`;
+        } else {
+          return `${years} ${
+            years === 1 ? "ano" : "anos"
+          } e ${remainingMonths} ${remainingMonths === 1 ? "mês" : "meses"}`;
+        }
+      }
+    }
+
+    // Extrair anos da string de período (ex: "3 anos 5 meses")
+    const yearsMatch = period.match(/(\d+)\s*anos?/i);
+    if (yearsMatch) {
+      const years = parseInt(yearsMatch[1]);
+      return `${years}+ ${years === 1 ? "ano" : "anos"}`;
+    }
+
+    return "Experiência relevante";
+  };
 
   return (
-    <section
-      id="experience"
-      className="py-20 px-4 bg-gradient-to-b from-transparent to-black/20 mx-auto"
-    >
-      <div className="max-w-6xl mx-auto">
+    <section id="experience" className="py-20 px-4 relative">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="text-center mb-16"
+          className="text-center mb-20"
         >
-          <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">
+              Jornada Profissional
+            </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">
             Experiência Profissional
           </h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
-            Minha jornada profissional em desenvolvimento de software e soluções
-            tecnológicas
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
+            Uma trajetória de crescimento técnico e impacto real, onde cada
+            projeto representou um novo nível de desafio e aprendizado
           </p>
         </motion.div>
 
-        <BentoGrid className="gap-6">
-          {experiences.map((exp, index) => (
-            <BentoGridItem
-              key={exp.id}
-              colSpan={index === 0 ? 2 : 1}
-              className="group hover:scale-[1.02] transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10"
-            >
-              <div className="space-y-4">
-                {/* Header */}
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <h3 className="text-xl font-semibold text-white mb-1">
-                      {exp.title}
-                    </h3>
-                    <p className="text-blue-400 font-medium">{exp.company}</p>
-                    <div className="flex flex-wrap items-center gap-2 text-sm text-gray-400 mt-2">
-                      <div className="flex items-center gap-1">
-                        <Calendar className="w-4 h-4" />
-                        {exp.period}
+        {/* Experience Cards Grid */}
+        <div className="grid lg:grid-cols-2 gap-8">
+          {experiences.map((exp, index) => {
+            const config = getExperienceConfig(exp.company);
+
+            return (
+              <motion.div
+                key={exp.id}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, delay: index * 0.2 }}
+                viewport={{ once: true }}
+                className="relative"
+              >
+                {/* Content Card */}
+                <div className="h-full">
+                  <div className="relative group">
+                    {/* Background Glow */}
+                    <div
+                      className={`absolute inset-0 bg-gradient-to-r ${config.color} opacity-10 rounded-2xl blur-xl group-hover:opacity-20 transition-opacity duration-500`}
+                    ></div>
+
+                    {/* Main Card */}
+                    <div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
+                      {/* Header */}
+                      <div className="flex items-start justify-between mb-6">
+                        <div className="flex-1">
+                          <div className="flex items-center gap-3 mb-3">
+                            <div className={`p-3 rounded-xl ${config.bgColor}`}>
+                              <Briefcase
+                                className={`w-6 h-6 ${config.iconColor}`}
+                              />
+                            </div>
+                            <div>
+                              <h3 className="text-2xl font-bold text-white mb-1">
+                                {exp.title}
+                              </h3>
+                              <p
+                                className={`text-lg font-semibold ${config.iconColor}`}
+                              >
+                                {exp.company}
+                              </p>
+                            </div>
+                          </div>
+
+                          {/* Meta Info */}
+                          <div className="flex flex-wrap gap-4 text-sm text-gray-400 mb-4">
+                            <div className="flex items-center gap-2">
+                              <Calendar className="w-4 h-4" />
+                              <span>{exp.period}</span>
+                            </div>
+                            {exp.location && (
+                              <div className="flex items-center gap-2">
+                                <MapPin className="w-4 h-4" />
+                                <span>{exp.location}</span>
+                              </div>
+                            )}
+                            <div className="flex items-center gap-2">
+                              <Users className="w-4 h-4" />
+                              <span>{exp.type}</span>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Duration Badge */}
+                        <div
+                          className={`px-4 py-2 rounded-full ${config.bgColor} border ${config.borderColor}`}
+                        >
+                          <span
+                            className={`text-sm font-bold ${config.iconColor}`}
+                          >
+                            {formatDuration(exp.period)}
+                          </span>
+                        </div>
                       </div>
-                      {exp.location && (
-                        <div className="flex items-center gap-1">
-                          <MapPin className="w-4 h-4" />
-                          {exp.location}
+
+                      {/* Description */}
+                      <p className="text-gray-300 leading-relaxed mb-6 text-lg">
+                        {exp.description}
+                      </p>
+
+                      {/* Achievements */}
+                      {exp.achievements && exp.achievements.length > 0 && (
+                        <div className="mb-6">
+                          <h4 className="text-sm font-semibold text-gray-400 mb-4 uppercase tracking-wide flex items-center gap-2">
+                            <Award className="w-4 h-4 text-yellow-400" />
+                            Principais Conquistas
+                          </h4>
+                          <div className="grid gap-3">
+                            {exp.achievements.map((achievement, idx) => (
+                              <div
+                                key={idx}
+                                className="flex items-start gap-3 p-3 rounded-lg bg-white/5 border border-white/5 hover:border-blue-500/20 transition-colors"
+                              >
+                                <div className="w-2 h-2 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span className="text-gray-300 text-sm leading-relaxed">
+                                  {achievement}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Technologies */}
+                      {exp.technologies && exp.technologies.length > 0 && (
+                        <div>
+                          <h4 className="text-sm font-semibold text-gray-400 mb-3 uppercase tracking-wide flex items-center gap-2">
+                            <Zap className="w-4 h-4 text-orange-400" />
+                            Stack Tecnológica
+                          </h4>
+                          <div className="flex flex-wrap gap-2">
+                            {exp.technologies.slice(0, 6).map((tech) => (
+                              <span
+                                key={tech}
+                                className="px-3 py-1 bg-gray-800/50 text-gray-300 text-xs rounded-full border border-gray-700/50 hover:border-blue-500/30 transition-colors"
+                              >
+                                {tech}
+                              </span>
+                            ))}
+                            {exp.technologies.length > 6 && (
+                              <span className="px-3 py-1 bg-gray-800/30 text-gray-500 text-xs rounded-full">
+                                +{exp.technologies.length - 6}
+                              </span>
+                            )}
+                          </div>
                         </div>
                       )}
-                      <div className="flex items-center gap-1">
-                        <Briefcase className="w-4 h-4" />
-                        {exp.type}
-                      </div>
                     </div>
                   </div>
                 </div>
+              </motion.div>
+            );
+          })}
+        </div>
 
-                {/* Description */}
-                <p className="text-gray-300 leading-relaxed">
-                  {exp.description}
-                </p>
-
-                {/* Achievements */}
-                {exp.achievements.length > 0 && (
-                  <div>
-                    <h4 className="text-sm font-semibold text-blue-400 mb-2">
-                      Principais Conquistas:
-                    </h4>
-                    <ul className="space-y-1">
-                      {exp.achievements.map((achievement, idx) => (
-                        <li
-                          key={idx}
-                          className="text-sm text-gray-400 flex items-center gap-2"
-                        >
-                          <div className="w-1.5 h-1.5 bg-blue-400 rounded-full" />
-                          {achievement}
-                        </li>
-                      ))}
-                    </ul>
+        {/* Summary Stats */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          viewport={{ once: true }}
+          className="mt-20"
+        >
+          <div className="relative max-w-4xl mx-auto">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-green-500/10 rounded-2xl blur-xl"></div>
+            <div className="relative bg-gradient-to-r from-blue-500/5 to-green-500/5 border border-blue-500/20 rounded-2xl p-8 backdrop-blur-sm">
+              <h4 className="text-2xl font-bold text-white mb-6 text-center">
+                Impacto e Crescimento
+              </h4>
+              <div className="grid md:grid-cols-3 gap-6">
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-blue-400 mb-2">
+                    3+
                   </div>
-                )}
+                  <div className="text-gray-400 text-sm">
+                    Anos de Experiência
+                  </div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-purple-400 mb-2">
+                    2
+                  </div>
+                  <div className="text-gray-400 text-sm">
+                    Empresas Diferentes
+                  </div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-green-400 mb-2">
+                    10+
+                  </div>
+                  <div className="text-gray-400 text-sm">
+                    Tecnologias Dominadas
+                  </div>
+                </div>
               </div>
-            </BentoGridItem>
-          ))}
-        </BentoGrid>
+            </div>
+          </div>
+        </motion.div>
       </div>
     </section>
   );
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 31e972f..64e2e8c 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import { AuroraText } from "@/components/magicui/aurora-text";
 import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
 import { useEffect } from "react";
-import { RotatingText } from "@/components/RotatingText";
+import TextType from "@/components/TextType";
 
 export default function Hero() {
   const getGreetingMessage = () => {
@@ -50,17 +50,40 @@ export default function Hero() {
           className="mb-8"
         >
           <div className="relative w-48 h-48 mx-auto mb-8 mt-10">
-            <Image
-              src="/edev.jpeg"
-              alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
-              fill
-              className="rounded-lg object-cover"
-              priority
-              sizes="(max-width: 768px) 192px, 192px"
-              quality={85}
-              placeholder="blur"
-              blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
-            />
+            {/* Glow Effect */}
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 opacity-20 rounded-lg blur-xl animate-pulse"></div>
+
+            {/* Gradient Border */}
+            <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg p-1">
+              <div className="w-full h-full bg-black rounded-lg">
+                <Image
+                  src="/edev.jpeg"
+                  alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
+                  fill
+                  className="rounded-lg object-cover"
+                  priority
+                  sizes="(max-width: 768px) 192px, 192px"
+                  quality={85}
+                  placeholder="blur"
+                  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
+                />
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Badge */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mb-8"
+        >
+          <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">
+              Disponível para Trabalho
+            </span>
           </div>
         </motion.div>
 
@@ -71,18 +94,23 @@ export default function Hero() {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="mb-8"
         >
-          <h1 className="text-3xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
             Evandro Fonseca Junior
           </h1>
-          <RotatingText
-            words={[
+          <TextType
+            text={[
               "Full-Stack Developer",
               "Cloud Solutions",
               "UI/UX Focused",
               "Performance Focused",
             ]}
-            className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent"
-            interval={4000}
+            className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent"
+            typingSpeed={80}
+            deletingSpeed={50}
+            pauseDuration={2000}
+            loop={true}
+            showCursor={true}
+            cursorCharacter="|"
           />
         </motion.div>
 
@@ -184,7 +212,7 @@ export default function Hero() {
         >
           <a
             href="#contact"
-            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
+            className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 hover:scale-105 shadow-lg shadow-cyan-500/25"
           >
             Vamos Trabalhar Juntos
           </a>
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index 24cba8f..9f8ae99 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -2,16 +2,100 @@
 
 import { motion } from "motion/react";
 import { BentoGrid, BentoGridItem } from "@/components/magicui/bento-grid";
-import { ExternalLink, Github } from "lucide-react";
+import {
+  ExternalLink,
+  Github,
+  Star,
+  Zap,
+  Globe,
+  Cpu,
+  Code2,
+} from "lucide-react";
 import { usePortfolioData } from "@/lib/usePortfolioData";
 
+// Configuração de cores e ícones por categoria
+const categoryConfig = {
+  "full-stack": {
+    color: "from-blue-500 to-blue-600",
+    bgColor: "bg-blue-500/10",
+    borderColor: "border-blue-500/20",
+    icon: Globe,
+    iconColor: "text-blue-400",
+  },
+  iot: {
+    color: "from-purple-500 to-purple-600",
+    bgColor: "bg-purple-500/10",
+    borderColor: "border-purple-500/20",
+    icon: Cpu,
+    iconColor: "text-purple-400",
+  },
+  api: {
+    color: "from-orange-500 to-orange-600",
+    bgColor: "bg-orange-500/10",
+    borderColor: "border-orange-500/20",
+    icon: Code2,
+    iconColor: "text-orange-400",
+  },
+  web: {
+    color: "from-green-500 to-green-600",
+    bgColor: "bg-green-500/10",
+    borderColor: "border-green-500/20",
+    icon: Globe,
+    iconColor: "text-green-400",
+  },
+  desktop: {
+    color: "from-emerald-500 to-emerald-600",
+    bgColor: "bg-emerald-500/10",
+    borderColor: "border-emerald-500/20",
+    icon: Code2,
+    iconColor: "text-emerald-400",
+  },
+};
+
+// Função para gerar estrelas de complexidade
+const ComplexityStars = ({ complexity }: { complexity: number }) => {
+  return (
+    <div className="flex items-center gap-1">
+      {[...Array(5)].map((_, i) => (
+        <Star
+          key={i}
+          className={`w-3 h-3 ${
+            i < complexity ? "text-yellow-400 fill-yellow-400" : "text-gray-600"
+          }`}
+        />
+      ))}
+    </div>
+  );
+};
+
+// Componente de Badge
+const ProjectBadge = ({ badge, index }: { badge: string; index: number }) => {
+  const badgeColors = [
+    "bg-blue-500/20 text-blue-400 border-blue-500/30",
+    "bg-green-500/20 text-green-400 border-green-500/30",
+    "bg-purple-500/20 text-purple-400 border-purple-500/30",
+    "bg-orange-500/20 text-orange-400 border-orange-500/30",
+    "bg-red-500/20 text-red-400 border-red-500/30",
+  ];
+
+  return (
+    <span
+      className={`px-2 py-1 text-xs font-medium rounded-full border ${
+        badgeColors[index % badgeColors.length]
+      }`}
+    >
+      {badge}
+    </span>
+  );
+};
+
 export default function Projects() {
   const { data, loading, error } = usePortfolioData();
 
   if (loading) {
     return (
       <section id="projects" className="py-20 px-4">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-7xl mx-auto text-center">
           <div className="animate-pulse">
             <div className="h-8 bg-gray-700 rounded w-1/3 mx-auto mb-4"></div>
             <div className="h-4 bg-gray-700 rounded w-1/2 mx-auto"></div>
@@ -24,7 +108,7 @@ export default function Projects() {
   if (error || !data) {
     return (
       <section id="projects" className="py-20 px-4">
-        <div className="max-w-6xl mx-auto text-center">
+        <div className="max-w-7xl mx-auto text-center">
           <p className="text-red-400">Erro ao carregar dados de projetos.</p>
         </div>
       </section>
@@ -35,7 +119,7 @@ export default function Projects() {
 
   return (
     <section id="projects" className="py-20 px-4 mx-auto">
-      <div className="max-w-6xl mx-auto">
+      <div className="max-w-7xl mx-auto">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -43,91 +127,174 @@ export default function Projects() {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+          <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">
             Projetos em Destaque
           </h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
-            Alguns dos projetos que desenvolvi, demonstrando minhas habilidades
-            e paixão por tecnologia
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
+            Uma seleção dos projetos que desenvolvi, demonstrando minha evolução
+            técnica e capacidade de entregar soluções completas em diferentes
+            domínios
           </p>
         </motion.div>
 
         <BentoGrid className="gap-6">
-          {projects.map((project, index) => (
-            <BentoGridItem
-              key={project.id}
-              colSpan={index === 0 ? 2 : 1}
-              className="group hover:scale-[1.02] transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10"
-            >
-              <div className="space-y-4">
-                {/* Header */}
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <h3 className="text-xl font-semibold text-white mb-2">
-                      {project.title}
-                    </h3>
-                    <div className="flex flex-wrap gap-2 mb-3">
-                      {project.technologies.map((tech) => (
+          {projects.map((project, index) => {
+            const config =
+              categoryConfig[project.category as keyof typeof categoryConfig] ||
+              categoryConfig["web"];
+            const IconComponent = config.icon;
+
+            return (
+              <BentoGridItem
+                key={project.id}
+                colSpan={index <= 1 ? 2 : 1} // NutriScan e Twins Lab em destaque
+                className={`group hover:scale-105 transition-all duration-300 hover:shadow-2xl ${config.borderColor} border-2 bg-white/5 backdrop-blur-sm`}
+              >
+                <motion.div
+                  className="space-y-5 h-full"
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  viewport={{ once: true }}
+                >
+                  {/* Header com ícone e badges */}
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className={`p-3 rounded-xl ${config.bgColor}`}>
+                        <IconComponent
+                          className={`w-6 h-6 ${config.iconColor}`}
+                        />
+                      </div>
+                      <div>
+                        <h3 className="text-xl font-bold text-white mb-1">
+                          {project.title}
+                        </h3>
+                        <p className="text-sm text-gray-400 font-medium">
+                          {project.subtitle}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="flex gap-2">
+                      {project.demoUrl && (
+                        <a
+                          href={project.demoUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-2 rounded-lg bg-green-500/20 text-green-400 hover:bg-green-500/30 transition-all duration-300 hover:scale-110"
+                          aria-label="Ver demo"
+                        >
+                          <ExternalLink className="w-4 h-4" />
+                        </a>
+                      )}
+                      {project.githubUrl && (
+                        <a
+                          href={project.githubUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-2 rounded-lg bg-gray-500/20 text-gray-400 hover:bg-gray-500/30 transition-all duration-300 hover:scale-110"
+                          aria-label="Ver código"
+                        >
+                          <Github className="w-4 h-4" />
+                        </a>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Badges */}
+                  <div className="flex flex-wrap gap-2">
+                    {project.badges.map((badge, idx) => (
+                      <ProjectBadge key={badge} badge={badge} index={idx} />
+                    ))}
+                  </div>
+
+                  {/* Description */}
+                  <p className="text-gray-300 leading-relaxed text-sm">
+                    {project.description}
+                  </p>
+
+                  {/* Tecnologias principais */}
+                  <div>
+                    <h4 className="text-xs font-semibold text-gray-400 mb-2 uppercase tracking-wide">
+                      Stack Principal
+                    </h4>
+                    <div className="flex flex-wrap gap-1">
+                      {project.technologies.slice(0, 4).map((tech) => (
                         <span
                           key={tech}
-                          className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full border border-blue-500/30"
+                          className="px-2 py-1 bg-gray-800/50 text-gray-300 text-xs rounded border border-gray-700/50"
                         >
                           {tech}
                         </span>
                       ))}
+                      {project.technologies.length > 4 && (
+                        <span className="px-2 py-1 bg-gray-800/30 text-gray-500 text-xs rounded">
+                          +{project.technologies.length - 4}
+                        </span>
+                      )}
                     </div>
                   </div>
-                  <div className="flex gap-2">
-                    <a
-                      href={project.demoUrl}
-                      className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
-                      aria-label="Ver demo"
-                    >
-                      <ExternalLink className="w-4 h-4" />
-                    </a>
-                    <a
-                      href={project.githubUrl}
-                      className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
-                      aria-label="Ver código"
-                    >
-                      <Github className="w-4 h-4" />
-                    </a>
+
+                  {/* Features principais */}
+                  <div>
+                    <h4 className="text-xs font-semibold text-gray-400 mb-2 uppercase tracking-wide">
+                      Destaques
+                    </h4>
+                    <ul className="space-y-1">
+                      {project.features.slice(0, 3).map((feature, idx) => (
+                        <li
+                          key={idx}
+                          className="text-xs text-gray-400 flex items-start gap-2"
+                        >
+                          <Zap className="w-3 h-3 text-yellow-400 mt-0.5 flex-shrink-0" />
+                          <span>{feature}</span>
+                        </li>
+                      ))}
+                    </ul>
                   </div>
-                </div>
 
-                {/* Description */}
-                <p className="text-gray-300 leading-relaxed">
-                  {project.description}
-                </p>
-
-                {/* Features */}
-                <div>
-                  <h4 className="text-sm font-semibold text-blue-400 mb-2">
-                    Funcionalidades:
-                  </h4>
-                  <ul className="space-y-1">
-                    {project.features.map((feature, idx) => (
-                      <li
-                        key={idx}
-                        className="text-sm text-gray-400 flex items-center gap-2"
-                      >
-                        <div className="w-1.5 h-1.5 bg-blue-400 rounded-full" />
-                        {feature}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-
-                {/* Status */}
-                <div className="pt-2 border-t border-white/10">
-                  <span className="text-xs text-blue-400 font-medium">
-                    {project.status}
-                  </span>
-                </div>
-              </div>
-            </BentoGridItem>
-          ))}
+                  {/* Footer com complexidade e status */}
+                  <div className="pt-4 border-t border-white/10 flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-gray-500">
+                        Complexidade:
+                      </span>
+                      <ComplexityStars
+                        complexity={project.metrics?.complexity || 3}
+                      />
+                    </div>
+                    <span
+                      className={`text-xs font-medium px-2 py-1 rounded-full ${
+                        project.status === "Em Produção"
+                          ? "bg-green-500/20 text-green-400 border border-green-500/30"
+                          : "bg-blue-500/20 text-blue-400 border border-blue-500/30"
+                      }`}
+                    >
+                      {project.status}
+                    </span>
+                  </div>
+                </motion.div>
+              </BentoGridItem>
+            );
+          })}
         </BentoGrid>
+
+        {/* Call to Action */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+          viewport={{ once: true }}
+          className="text-center mt-16"
+        >
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500/10 to-purple-500/10 px-6 py-3 rounded-full border border-blue-500/20">
+            <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
+            <span className="text-sm text-blue-300 font-medium">
+              Todos os projetos são desenvolvidos individualmente, demonstrando
+              capacidade full-stack completa
+            </span>
+          </div>
+        </motion.div>
       </div>
     </section>
   );
diff --git a/app/components/Skills.tsx b/app/components/Skills.tsx
index 07077d7..f8d4bea 100644
--- a/app/components/Skills.tsx
+++ b/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}`}>
diff --git a/app/components/WorkModalities.tsx b/app/components/WorkModalities.tsx
index 2aa5ee8..a36b607 100644
--- a/app/components/WorkModalities.tsx
+++ b/app/components/WorkModalities.tsx
@@ -1,64 +1,94 @@
 "use client";
 
 import { motion } from "motion/react";
-import { Briefcase, Clock, DollarSign, HardHat, Lightbulb } from "lucide-react";
+import {
+  Briefcase,
+  Clock,
+  DollarSign,
+  HardHat,
+  Lightbulb,
+  Building2,
+  Users,
+  User,
+  Star,
+} from "lucide-react";
 
 const WorkModalitiesData = [
   {
-    title: "Desenvolvimento por Demanda",
-    value: "A partir de R$ 50/hora",
+    title: "Consultoria por Hora",
+    value: "R$ 35 - 70/hora",
+    badge: "RECOMENDADO",
     idealFor:
-      "Empresas que buscam otimização rápida, startups com necessidades urgentes ou projetos que exigem intervenção especializada e focada.",
+      "Empresas que buscam flexibilidade máxima, startups testando soluções ou projetos que exigem expertise especializada sem compromissos longos.",
     description:
-      "Soluções ágeis e focadas para desafios específicos. Ideal para otimizar recursos e obter resultados rápidos sem compromissos de longo prazo. Sua visão, minha expertise, entregas pontuais.",
-    icon: Clock,
+      "Transparência total: você paga apenas pelas horas efetivamente trabalhadas. Sem surpresas, com estimativas claras antes de iniciar. Ideal para testar soluções, resolver problemas específicos ou ter acesso a expertise sênior sem o custo de consultorias tradicionais (R$ 100-200/h).",
+    benefits: [
+      "✓ Transparência total - pague apenas pelo que usar",
+      "✓ Sem surpresas - estimativas claras antes de iniciar",
+      "✓ Flexibilidade - ajuste conforme sua necessidade evolui",
+      "✓ Melhor custo-benefício - 50% menos que consultorias tradicionais",
+      "✓ Experiência comprovada - 3+ anos + Eng. Computação",
+    ],
+    icon: Lightbulb,
     color: "blue",
+    featured: true,
   },
   {
-    title: "Retainer Mensal",
-    value: "Sob consulta (pacotes personalizados)",
+    title: "Pacotes de Horas",
+    value: "Descontos até 21%",
     idealFor:
-      "Negócios que valorizam estabilidade, crescimento planejado e acesso contínuo a um especialista dedicado para impulsionar sua inovação.",
+      "Clientes que já testaram o serviço e querem economizar com comprometimento antecipado, garantindo disponibilidade e preços favoráveis.",
     description:
-      "Parceria estratégica para evolução contínua e suporte prioritário. Garanta acesso exclusivo à minha expertise para manutenção, novas funcionalidades e consultoria estratégica, com um compromisso de longo prazo que otimiza seu investimento.",
+      "Invista antecipadamente e economize significativamente: 10h (R$ 65/h), 20h (R$ 60/h) ou 40h+ (R$ 55/h). Garanta prioridade na agenda e preços fixos por 6 meses, mesmo se o mercado subir.",
+    benefits: [
+      "✓ 10 horas: R$ 65/h (economia de 7%)",
+      "✓ 20 horas: R$ 60/h (economia de 14%)",
+      "✓ 40+ horas: R$ 55/h (economia de 21%)",
+      "✓ Preço fixo por 6 meses",
+      "✓ Prioridade na agenda",
+    ],
     icon: Briefcase,
     color: "green",
   },
   {
-    title: "Consultoria Especializada",
-    value: "Sob consulta (projetos de alto impacto)",
+    title: "Retainer Mensal",
+    value: "A partir de R$ 2.800/mês",
     idealFor:
-      "Líderes de tecnologia e empresas visionárias que enfrentam gargalos técnicos ou buscam validação e aprimoramento de suas estratégias de desenvolvimento.",
+      "Negócios que valorizam estabilidade, crescimento planejado e acesso prioritário a um especialista dedicado para impulsionar sua inovação contínua.",
     description:
-      "Direcionamento estratégico e técnico para desafios complexos. Minha experiência em arquitetura de sistemas, IoT e otimização de performance é o diferencial para transformar suas ideias em soluções robustas e escaláveis. Ideal para quem busca excelência e inovação.",
-    icon: Lightbulb,
+      "Parceria estratégica com acesso prioritário e horas incluídas. Ideal para empresas que precisam de suporte contínuo, manutenção preventiva e consultoria estratégica regular. Transforme sua empresa em parceiro VIP.",
+    benefits: [
+      "✓ Acesso prioritário e exclusivo",
+      "✓ Horas incluídas mensalmente",
+      "✓ Suporte preventivo e consultoria estratégica",
+      "✓ Relacionamento de longo prazo",
+      "✓ Previsibilidade financeira",
+    ],
+    icon: Clock,
     color: "purple",
   },
   {
-    title: "Desenvolvimento Completo",
-    value: "A partir de R$ 5.000 (investimento inicial)",
+    title: "Desenvolvimento Sob Demanda",
+    value: "Estimativa em horas",
     idealFor:
-      "Empreendedores e empresas que precisam de um parceiro para construir soluções digitais do zero, com a garantia de um produto de alta qualidade e impacto.",
+      "Empreendedores e empresas com projetos específicos que precisam de estimativas transparentes e controle total sobre investimento e escopo.",
     description:
-      "Da concepção à entrega, seu projeto ganha vida com uma solução completa e personalizada. Garanto um processo transparente, com foco em performance, segurança e escalabilidade, para que você tenha um produto final que realmente se destaque no mercado.",
+      "Projetos customizados com estimativas claras baseadas em horas. Da concepção à entrega, seu projeto ganha vida com transparência total. Pague apenas pelo desenvolvimento necessário, sem valores fixos surpresas.",
+    benefits: [
+      "✓ Estimativas transparentes em horas",
+      "✓ Controle total sobre investimento",
+      "✓ Sem valores fixos surpresas",
+      "✓ Escopo ajustável conforme evolução",
+      "✓ Foco em performance e escalabilidade",
+    ],
     icon: HardHat,
     color: "orange",
   },
-  {
-    title: "Projetos Fechados",
-    value: "A partir de R$ 5.000 (soluções sob medida)",
-    idealFor:
-      "Clientes com necessidades claras e orçamentos específicos, que buscam uma entrega eficiente e sem surpresas para projetos de médio porte.",
-    description:
-      "Soluções com escopo e prazo definidos para resultados previsíveis. Ideal para quem busca agilidade e clareza no investimento, com a certeza de uma entrega que atende exatamente às suas expectativas e impulsiona seus objetivos.",
-    icon: DollarSign,
-    color: "red",
-  },
 ];
 
 export function WorkModalities() {
   return (
-    <section className="py-16 px-4">
+    <section className="py-20 px-4">
       <motion.div
         initial={{ opacity: 0, y: 30 }}
         whileInView={{ opacity: 1, y: 0 }}
@@ -66,7 +96,13 @@ export function WorkModalities() {
         viewport={{ once: true }}
         className="text-center mb-12"
       >
-        <h2 className="text-4xl md:text-5xl font-bold mb-4">
+        <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">
+            Flexibilidade Total
+          </span>
+        </div>
+        <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
           Minhas Modalidades de Trabalho
         </h2>
         <p className="text-xl text-gray-300 max-w-2xl mx-auto">
@@ -74,7 +110,176 @@ export function WorkModalities() {
         </p>
       </motion.div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto justify-center">
+      {/* Seção de Comparação de Mercado Refinada */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="relative overflow-hidden bg-gradient-to-br from-gray-900/80 via-blue-900/30 to-purple-900/40 rounded-2xl p-8 mb-12 max-w-5xl mx-auto border border-blue-500/30 shadow-2xl"
+      >
+        {/* Background Pattern */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.1),transparent_50%)]"></div>
+
+        {/* Header */}
+        <div className="relative text-center mb-8">
+          <div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-4">
+            <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+            <span className="text-sm font-medium text-blue-300">
+              Análise de Mercado 2025
+            </span>
+          </div>
+          <h3 className="text-3xl font-bold mb-2 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+            Compare com o Mercado
+          </h3>
+          <p className="text-gray-300 text-lg">
+            Veja como nossa proposta se destaca da concorrência
+          </p>
+        </div>
+
+        {/* Comparison Grid */}
+        <div className="relative grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {/* Agências Tradicionais */}
+          <div className="group relative bg-red-500/5 border border-red-500/20 rounded-xl p-6 hover:border-red-400/40 transition-all duration-300">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
+                <Building2 className="w-6 h-6 text-red-500" />
+              </div>
+              <div>
+                <h4 className="font-semibold text-red-300">
+                  Agências Tradicionais
+                </h4>
+                <p className="text-xs text-red-400/70">Projetos fechados</p>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="text-2xl font-bold text-red-400">R$ 15k - 50k</p>
+              <div className="space-y-1 text-xs text-gray-400">
+                <p>• Escopo fixo</p>
+                <p>• Sem flexibilidade</p>
+                <p>• Equipe grande</p>
+                <p>• Processo lento</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Consultorias Corporativas */}
+          <div className="group relative bg-orange-500/5 border border-orange-500/20 rounded-xl p-6 hover:border-orange-400/40 transition-all duration-300">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 bg-orange-500/20 rounded-lg flex items-center justify-center">
+                <Users className="w-6 h-6 text-orange-500" />
+              </div>
+              <div>
+                <h4 className="font-semibold text-orange-300">
+                  Consultorias Corporativas
+                </h4>
+                <p className="text-xs text-orange-400/70">Por hora</p>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="text-2xl font-bold text-orange-400">
+                R$ 150 - 300/h
+              </p>
+              <div className="space-y-1 text-xs text-gray-400">
+                <p>• Apenas consultoria</p>
+                <p>• Sem desenvolvimento</p>
+                <p>• Muito caro</p>
+                <p>• Foco corporativo</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Freelancers Generalistas */}
+          <div className="group relative bg-yellow-500/5 border border-yellow-500/20 rounded-xl p-6 hover:border-yellow-400/40 transition-all duration-300">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center">
+                <User className="w-6 h-6 text-yellow-500" />
+              </div>
+              <div>
+                <h4 className="font-semibold text-yellow-300">
+                  Freelancers Generalistas
+                </h4>
+                <p className="text-xs text-yellow-400/70">Por hora</p>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="text-2xl font-bold text-yellow-400">R$ 40 - 80/h</p>
+              <div className="space-y-1 text-xs text-gray-400">
+                <p>• Competitivo</p>
+                <p>• Sem especialização</p>
+                <p>• Qualidade variável</p>
+                <p>• Sem garantias</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Comigo - Evandro */}
+          <div className="group relative bg-gradient-to-br from-green-500/10 to-emerald-500/10 border-2 border-green-500/40 rounded-xl p-6 hover:border-green-400/60 transition-all duration-300 shadow-lg shadow-green-500/10">
+            <div className="absolute -top-2 -right-2">
+              <span className="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold shadow-lg">
+                RECOMENDADO
+              </span>
+            </div>
+
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
+                <Star className="w-6 h-6 text-green-400" />
+              </div>
+              <div>
+                <h4 className="font-bold text-green-300">Comigo</h4>
+                <p className="text-xs text-green-400/70">Evandro Fonseca</p>
+              </div>
+            </div>
+            <div className="space-y-3">
+              <div className="flex items-baseline gap-2">
+                <p className="text-2xl font-bold text-green-400">
+                  R$ 35 - 70/h
+                </p>
+                <span className="text-xs bg-green-500/20 text-green-300 px-2 py-1 rounded">
+                  -50% vs mercado
+                </span>
+              </div>
+              <div className="space-y-1 text-xs text-gray-300">
+                <p className="flex items-center gap-2">
+                  <span className="text-green-400">✓</span>
+                  <span>Full-Stack + IoT + Cloud</span>
+                </p>
+                <p className="flex items-center gap-2">
+                  <span className="text-green-400">✓</span>
+                  <span>Transparência total</span>
+                </p>
+                <p className="flex items-center gap-2">
+                  <span className="text-green-400">✓</span>
+                  <span>Flexibilidade máxima</span>
+                </p>
+                <p className="flex items-center gap-2">
+                  <span className="text-green-400">✓</span>
+                  <span>Experiência comprovada</span>
+                </p>
+              </div>
+
+              {/* Call to Action */}
+              <div className="mt-4 pt-3 border-t border-green-500/20">
+                <p className="text-xs text-green-300 font-medium text-center">
+                  🎯 Melhor custo-benefício do mercado
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom CTA */}
+        <div className="relative mt-8 text-center">
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500/10 to-purple-500/10 px-6 py-3 rounded-full border border-blue-500/20">
+            <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
+            <span className="text-sm text-blue-300 font-medium">
+              Economia média de R$ 15.000 por projeto vs agências tradicionais
+            </span>
+          </div>
+        </div>
+      </motion.div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto justify-center">
         {WorkModalitiesData.map((modality, index) => (
           <motion.div
             key={modality.title}
@@ -82,38 +287,76 @@ export function WorkModalities() {
             whileInView={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.5, delay: index * 0.1 }}
             viewport={{ once: true }}
-            className={`bg-white/5 p-6 rounded-lg shadow-lg border border-white/10 ${
-              modality.color === "blue" ? "hover:border-blue-500" : ""
-            } ${modality.color === "green" ? "hover:border-green-500" : ""} ${
-              modality.color === "purple" ? "hover:border-purple-500" : ""
-            } ${modality.color === "orange" ? "hover:border-orange-500" : ""} ${
+            className={`relative bg-white/5 p-6 rounded-lg shadow-lg border-2 ${
+              modality.featured
+                ? "border-blue-500/50 bg-blue-500/5"
+                : "border-white/10"
+            } ${modality.color === "blue" ? "hover:border-blue-500" : ""} ${
+              modality.color === "green" ? "hover:border-green-500" : ""
+            } ${modality.color === "purple" ? "hover:border-purple-500" : ""} ${
+              modality.color === "orange" ? "hover:border-orange-500" : ""
+            } ${
               modality.color === "red" ? "hover:border-red-500" : ""
             } transition-all duration-300 cursor-pointer`}
           >
-            <div
-              className={`p-3 rounded-full ${
-                modality.color === "blue" ? "bg-blue-500/20" : ""
-              } ${modality.color === "green" ? "bg-green-500/20" : ""} ${
-                modality.color === "purple" ? "bg-purple-500/20" : ""
-              } ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
-                modality.color === "red" ? "bg-red-500/20" : ""
-              } inline-block mb-4`}
-            >
-              <modality.icon
-                className={`w-8 h-8 ${
-                  modality.color === "blue" ? "text-blue-400" : ""
-                } ${modality.color === "green" ? "text-green-400" : ""} ${
-                  modality.color === "purple" ? "text-purple-400" : ""
-                } ${modality.color === "orange" ? "text-orange-400" : ""} ${
-                  modality.color === "red" ? "text-red-400" : ""
+            {modality.badge && (
+              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                <span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-bold">
+                  {modality.badge}
+                </span>
+              </div>
+            )}
+
+            <div className="flex items-center gap-4 mb-4">
+              <div
+                className={`p-3 rounded-full ${
+                  modality.color === "blue" ? "bg-blue-500/20" : ""
+                } ${modality.color === "green" ? "bg-green-500/20" : ""} ${
+                  modality.color === "purple" ? "bg-purple-500/20" : ""
+                } ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
+                  modality.color === "red" ? "bg-red-500/20" : ""
                 }`}
-              />
+              >
+                <modality.icon
+                  className={`w-8 h-8 ${
+                    modality.color === "blue" ? "text-blue-400" : ""
+                  } ${modality.color === "green" ? "text-green-400" : ""} ${
+                    modality.color === "purple" ? "text-purple-400" : ""
+                  } ${modality.color === "orange" ? "text-orange-400" : ""} ${
+                    modality.color === "red" ? "text-red-400" : ""
+                  }`}
+                />
+              </div>
+              <div>
+                <h3 className="text-2xl font-semibold mb-1">
+                  {modality.title}
+                </h3>
+                <p
+                  className={`text-lg font-bold ${
+                    modality.featured ? "text-blue-400" : "text-gray-200"
+                  }`}
+                >
+                  {modality.value}
+                </p>
+              </div>
             </div>
-            <h3 className="text-2xl font-semibold mb-2">{modality.title}</h3>
-            <p className="text-lg font-medium text-gray-200 mb-2">
-              {modality.value}
-            </p>
+
             <p className="text-gray-400 mb-4">{modality.description}</p>
+
+            {modality.benefits && (
+              <div className="space-y-2 mb-4">
+                {modality.benefits.map((benefit, idx) => (
+                  <p
+                    key={idx}
+                    className="text-sm text-gray-300 flex items-start gap-2"
+                  >
+                    <span className="text-green-400 mt-0.5">✓</span>
+                    <span>{benefit.replace("✓ ", "")}</span>
+                  </p>
+                ))}
+              </div>
+            )}
+
             <p className="text-sm text-gray-500">
               <span className="font-semibold">Ideal para:</span>{" "}
               {modality.idealFor}
diff --git a/linkedin.md b/linkedin.md
index f6636b7..b989e55 100644
--- a/linkedin.md
+++ b/linkedin.md
@@ -17,45 +17,47 @@ Meu objetivo é entregar soluções de alta qualidade que superem expectativas,
 
 ## Experiência Profissional
 
-### **Desenvolvedor Full Stack | Innovo Tecnologia Da Informação Ltda.**
+### **Desenvolvedor Fullstack | Innovo Tecnologia Da Informacao Ltda.**
 
-_Dezembro 2024 - Fevereiro 2025 (3 meses) | Tempo Integral_
+_Dezembro 2024 - Fevereiro 2025 (3 meses) | Tempo Integral | Joinville, Santa Catarina, Brasil (Híbrido)_
 
-### **Desenvolvedor Full Stack | Julia Beauty Lashes**
-
-_Julho 2024 - Presente (1 ano 3 meses) | Freelance | Balneário Camboriú, SC_
-
-- **Liderança Técnica**: Arquitetei e desenvolvi sistema web completo para estúdio de beleza especializado em extensão de cílios
-- **Tecnologias**: Next.js, TypeScript, Tailwind CSS, Firebase, Jest, React Testing Library
-- **Resultados Mensuráveis**:
-  - Redução de 40% no tempo de marcação de horários com sistema de agendamento automatizado
-  - Aumento de 25% na taxa de conversão através de interface responsiva otimizada
-  - Pontuação 90+ no Google Lighthouse para SEO e performance
-  - Cobertura de testes acima de 80%
-- **Integração e Automação**: Implementei pipeline CI/CD com GitHub Actions, deploy automatizado na Vercel, e integração com APIs de pagamento e WhatsApp
-- **Segurança**: Desenvolvimento de sistema robusto de autenticação e autorização com Firebase Authentication
+- **Desenvolvimento Front-end**: Criação de componentes utilizando Angular com foco em reutilização e qualidade de código
+- **Desenvolvimento Back-end**: Implementação de lógica de negócio com Node.js e JavaScript
+- **Bancos de Dados**: Integração e gestão de dados com PostgreSQL e MySQL
+- **Metodologias Ágeis**: Atuação em Scrum para otimizar processos de desenvolvimento
+- **Bibliotecas Internas**: Contribuição ativa na criação e manutenção de libs internas para garantir reutilização de código
+- **Sistemas Legados**: Garantia de qualidade técnica e manutenção de sistemas existentes
 
 ### **Desenvolvedor Full Stack | Apolo Energia**
 
-_Junho 2022 - Presente (3 anos 4 meses) | Autônomo | Curitiba, PR_
+_Junho 2022 - Presente (3 anos 5 meses) | Autônomo | Curitiba, Paraná, Brasil (Remota)_
 
-**Responsabilidades Principais**:
+**Desenvolvimento de Aplicações**:
+- Entrega de aplicações Web e Mobile que sustentam rotinas internas da Apolo Energia
+- Desenvolvimento com responsividade e capacidade de crescer sem perda de qualidade
+- Criação de painéis para operação e controle em processos de energia renovável
 
-- Desenvolvimento de aplicações web e mobile responsivas e escaláveis
-- Criação e implementação de APIs RESTful eficientes
-- Otimização de performance de aplicações e bancos de dados
-- Implementação de práticas avançadas de segurança de dados
-- Integração com sistemas terceiros e APIs externas
-- Colaboração com equipes multidisciplinares (UX/UI, dados, IoT)
-- Code reviews e garantia de qualidade de código
+**APIs e Integrações**:
+- Desenho e implementação de APIs REST com contratos claros, testes e versionamento
+- Simplificação de integrações com terceiros e sistemas internos
+- Integração de plataformas e dispositivos (IoT) para troca confiável de dados entre serviços e parceiros
 
-**Especialização em Energia Renovável**:
+**Performance e Segurança**:
+- Melhoria de desempenho em rotas e consultas críticas por meio de análise de gargalos, indexação e cache
+- Fortalecimento da segurança de dados com autenticação/autorização adequadas, criptografia em trânsito e práticas seguras de armazenamento
 
-- Desenvolvimento de soluções para geração, armazenamento e gestão de energia
-- Criação de sistemas de automação para otimização de eficiência industrial
-- Implementação de soluções IoT para comunicação entre dispositivos
+**Colaboração e Qualidade**:
+- Colaboração com equipes UX/UI e dados, realizando code reviews e pactuando padrões
+- Manutenção de qualidade em ciclos de entrega
+- Automação de rotinas para apoiar processos de energia renovável e monitoramento
+
+**Arquitetura e Planejamento**:
+- Participação no planejamento e na arquitetura de novas soluções
+- Contribuição nas decisões técnicas de curto e médio prazo
 - Participação ativa no planejamento e arquitetura de projetos
 
+**Stack Tecnológica**: PHP, Laravel, JavaScript, MySQL, IoT, APIs REST
+
 ---
 
 ## Principais Competências Técnicas
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..82625ff
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - '@tailwindcss/oxide'
+  - sharp
diff --git a/public/portfolio-data.json b/public/portfolio-data.json
index 50cc9e0..d2aa366 100644
--- a/public/portfolio-data.json
+++ b/public/portfolio-data.json
@@ -11,18 +11,26 @@
   },
   "experiences": [
     {
-      "id": "julia-beauty",
-      "title": "Desenvolvedor Full Stack",
-      "company": "Julia Beauty Lashes",
-      "period": "Julho 2024 - Presente",
-      "location": "Balneário Camboriú, SC",
-      "type": "Freelance",
-      "description": "Sistema web completo para estúdio de beleza especializado em extensão de cílios. Tecnologias: Next.js, TypeScript, Tailwind CSS, Firebase.",
+      "id": "innovo-tecnologia",
+      "title": "Desenvolvedor Fullstack",
+      "company": "Innovo Tecnologia Da Informacao Ltda.",
+      "period": "Dezembro 2024 - Fevereiro 2025",
+      "location": "Joinville, Santa Catarina, Brasil",
+      "type": "Tempo Integral · Híbrido",
+      "description": "Desenvolvimento de componentes Front-end utilizando Angular e implementação da lógica de Back-end com Node.js, integrando bancos de dados PostgreSQL e MySQL. Atuação em metodologias ágeis, especialmente Scrum, colaborando para otimizar processos de desenvolvimento.",
       "achievements": [
-        "Redução de 40% no tempo de marcação de horários",
-        "Aumento de 25% na taxa de conversão"
+        "Contribuição ativa na criação e manutenção de bibliotecas (libs) internas",
+        "Garantia de reutilização de código e qualidade técnica dos sistemas legados",
+        "Otimização de processos de desenvolvimento com metodologias ágeis"
+      ],
+      "technologies": [
+        "Angular",
+        "Node.js",
+        "JavaScript",
+        "PostgreSQL",
+        "MySQL",
+        "Scrum"
       ],
-      "technologies": ["Next.js", "TypeScript", "Tailwind CSS", "Firebase"],
       "featured": true
     },
     {
@@ -30,65 +38,196 @@
       "title": "Desenvolvedor Full Stack",
       "company": "Apolo Energia",
       "period": "Junho 2022 - Presente",
-      "location": "Curitiba, PR",
-      "type": "Autônomo",
-      "description": "Soluções em energia renovável e IoT. Desenvolvimento web/mobile responsivo.",
-      "achievements": ["Foco em sustentabilidade e automação industrial"],
-      "technologies": ["React", "Node.js", "IoT", "Cloud"],
+      "location": "Curitiba, Paraná, Brasil",
+      "type": "Autônomo · Remota",
+      "description": "Entrega de aplicações Web e Mobile que sustentam rotinas internas da Apolo Energia, com responsividade e capacidade de crescer sem perda de qualidade. Desenho e implementação de APIs REST com contratos claros, testes e versionamento, simplificando integrações com terceiros e sistemas internos.",
+      "achievements": [
+        "Melhoria de desempenho em rotas e consultas críticas por meio de análise de gargalos, indexação e cache",
+        "Fortalecimento da segurança de dados com autenticação/autorização adequadas e criptografia em trânsito",
+        "Integração de plataformas e dispositivos (IoT) para troca confiável de dados entre serviços e parceiros",
+        "Automação de rotinas e criação de painéis para operação e controle em processos de energia renovável",
+        "Participação no planejamento e na arquitetura de novas soluções com decisões técnicas estratégicas"
+      ],
+      "technologies": [
+        "PHP",
+        "Laravel",
+        "JavaScript",
+        "MySQL",
+        "IoT",
+        "APIs REST"
+      ],
       "featured": true
-    },
-    {
-      "id": "innovo-tecnologia",
-      "title": "Desenvolvedor Fullstack",
-      "company": "Innovo Tecnologia",
-      "period": "Dezembro 2024 - Fevereiro 2025",
-      "location": "",
-      "type": "Tempo Integral",
-      "description": "Desenvolvimento de soluções empresariais.",
-      "achievements": [],
-      "technologies": ["Angular", "PHP", "MySQL"],
-      "featured": false
     }
   ],
   "projects": [
     {
-      "id": "heaven-time-tracker",
-      "title": "Heaven Time Tracker",
-      "description": "Ferramenta moderna de gestão de tempo e produtividade com dashboard personalizado, análises detalhadas e sistema de metas.",
-      "longDescription": "Uma aplicação completa para rastreamento de tempo com recursos avançados de análise e relatórios. Inclui dashboard interativo, sistema de metas personalizáveis e integração com ferramentas de produtividade.",
-      "technologies": ["Next.js 14", "TypeScript", "Tailwind CSS"],
-      "features": [
-        "Dashboard personalizado",
-        "Análises detalhadas",
-        "Sistema de metas",
-        "Relatórios avançados",
-        "Interface claro/escuro"
+      "id": "nutriscan",
+      "title": "NutriScan",
+      "subtitle": "Análise Nutricional Inteligente",
+      "description": "Aplicação web PWA para análise nutricional de produtos com integração Open Food Facts, busca por código de barras e modo offline completo.",
+      "longDescription": "Plataforma completa de análise nutricional que permite aos usuários escanear códigos de barras e obter informações detalhadas sobre produtos alimentícios, incluindo análise NutriScore, gráficos de nutrientes e sistema de filtros avançados.",
+      "technologies": [
+        "Next.js 14",
+        "TypeScript",
+        "MongoDB",
+        "PWA",
+        "Tailwind CSS",
+        "Open Food Facts API"
       ],
-      "status": "Versão 1.0.0 em produção",
-      "demoUrl": "#",
-      "githubUrl": "#",
-      "imageUrl": "/projects/heaven-time-tracker.jpg",
+      "features": [
+        "Busca por código de barras com scanner",
+        "Análise nutricional com NutriScore",
+        "Modo offline com Service Worker",
+        "Gráficos interativos de nutrientes",
+        "Sistema avançado de filtros",
+        "Cache inteligente de dados"
+      ],
+      "category": "full-stack",
+      "level": "senior",
+      "status": "Em Produção",
+      "demoUrl": "https://nutriscan.evandro.dev.br",
+      "githubUrl": "https://github.com/evandrodevbr/nutriscan",
+      "badges": ["PWA", "Em Produção", "Open Source"],
       "featured": true,
-      "category": "produtividade"
+      "metrics": {
+        "complexity": 5,
+        "teamSize": "Individual"
+      }
     },
     {
-      "id": "mingw-downloader",
-      "title": "MinGW Downloader and Installer",
-      "description": "Aplicativo Python para automação de instalação de ambiente de desenvolvimento Windows.",
-      "longDescription": "Ferramenta automatizada para desenvolvedores Windows que simplifica a instalação e configuração do ambiente MinGW. Inclui verificação de compatibilidade e integração automática com o PATH do sistema.",
-      "technologies": ["Python", "Tkinter", "Requests", "Threading"],
-      "features": [
-        "Download automatizado",
-        "Verificação de compatibilidade",
-        "Integração com PATH",
-        "Interface gráfica intuitiva"
+      "id": "twins-lab",
+      "title": "Twins Lab",
+      "subtitle": "Plataforma IoT Industrial",
+      "description": "Sistema IoT para monitoramento e controle de reatores industriais com análise preditiva, streaming de dados em tempo real e dashboards interativos.",
+      "longDescription": "Plataforma avançada de monitoramento industrial que integra dispositivos IoT, oferece controle em tempo real de reatores, análise preditiva com IA e sistema completo de autenticação para múltiplos usuários.",
+      "technologies": [
+        "Next.js",
+        "TypeScript",
+        "NextAuth",
+        "WebSockets",
+        "OpenRouter AI",
+        "Docker",
+        "Real-time APIs"
       ],
-      "status": "Concluído",
-      "demoUrl": "#",
-      "githubUrl": "#",
-      "imageUrl": "/projects/mingw-installer.jpg",
+      "features": [
+        "Controle de dispositivos IoT em tempo real",
+        "Dashboards com gráficos dinâmicos",
+        "Sistema de autenticação completo",
+        "Análise preditiva com IA",
+        "Streaming de dados em tempo real",
+        "Sistema administrativo completo"
+      ],
+      "category": "iot",
+      "level": "senior",
+      "status": "Em Produção",
+      "demoUrl": "https://twins.evandro.dev.br",
+      "githubUrl": "https://github.com/evandrodevbr/twins-lab",
+      "badges": ["IoT", "Real-time", "AI/ML", "Em Produção"],
       "featured": true,
-      "category": "ferramenta"
+      "metrics": {
+        "complexity": 5,
+        "teamSize": "Individual"
+      }
+    },
+    {
+      "id": "reddit-explorer",
+      "title": "Reddit Posts Explorer",
+      "subtitle": "Análise de Conteúdo IA",
+      "description": "Explorador de posts do Reddit focado em Inteligência Artificial com busca, filtros avançados e análise de conteúdo do r/artificial.",
+      "longDescription": "Aplicação web que consome a API do Reddit para buscar, filtrar e analisar posts relacionados à Inteligência Artificial, oferecendo interface intuitiva para descoberta de conteúdo relevante.",
+      "technologies": [
+        "Astro.js",
+        "MongoDB",
+        "Mongoose",
+        "TypeScript",
+        "TailwindCSS",
+        "Reddit API"
+      ],
+      "features": [
+        "Integração com Reddit API",
+        "Sistema de cache com MongoDB",
+        "Filtragem por data e ordenação",
+        "Interface responsiva",
+        "API REST própria",
+        "Busca em tempo real"
+      ],
+      "category": "api",
+      "level": "pleno",
+      "status": "Concluído",
+      "demoUrl": null,
+      "githubUrl": "https://github.com/evandrodevbr/reddit-search",
+      "badges": ["API Integration", "MongoDB", "Real-time"],
+      "featured": true,
+      "metrics": {
+        "complexity": 3,
+        "teamSize": "Individual"
+      }
+    },
+    {
+      "id": "sc-plus",
+      "title": "SC Plus Aquicultura",
+      "subtitle": "Landing Page Institucional",
+      "description": "Landing page moderna para empresa de aquicultura com foco em sustentabilidade, tecnologia e inovação.",
+      "longDescription": "Site institucional responsivo desenvolvido com as mais recentes tecnologias web, otimizado para performance e SEO, apresentando os serviços e valores da empresa de aquicultura sustentável.",
+      "technologies": [
+        "Next.js 15",
+        "React 19",
+        "Tailwind CSS 4",
+        "TypeScript"
+      ],
+      "features": [
+        "Design moderno e responsivo",
+        "Performance otimizada",
+        "SEO otimizado",
+        "Interface intuitiva",
+        "Carregamento rápido"
+      ],
+      "category": "web",
+      "level": "pleno",
+      "status": "Em Produção",
+      "demoUrl": "https://scplus.evandro.dev.br",
+      "githubUrl": "https://github.com/evandrodevbr/scplus",
+      "badges": ["Responsive", "SEO", "Modern Stack"],
+      "featured": true,
+      "metrics": {
+        "complexity": 2,
+        "teamSize": "Individual"
+      }
+    },
+    {
+      "id": "gcc-installer",
+      "title": "MinGW GCC Installer",
+      "subtitle": "Ferramenta de Desenvolvimento",
+      "description": "Aplicação desktop Python para automação completa de download, instalação e configuração de ambientes de desenvolvimento MinGW no Windows.",
+      "longDescription": "Ferramenta automatizada que simplifica drasticamente o processo de configuração de ambiente de desenvolvimento GCC no Windows, incluindo verificação de compatibilidade, download automático e integração com o sistema.",
+      "technologies": [
+        "Python",
+        "Tkinter",
+        "Requests",
+        "Watchdog",
+        "Win32 API",
+        "7-Zip",
+        "Threading"
+      ],
+      "features": [
+        "Interface gráfica intuitiva",
+        "Download assíncrono com progresso",
+        "Verificação de compatibilidade",
+        "Integração automática com PATH",
+        "Monitoramento em tempo real",
+        "Instalação automática de dependências"
+      ],
+      "category": "desktop",
+      "level": "pleno",
+      "status": "Concluído",
+      "demoUrl": null,
+      "githubUrl": "https://github.com/evandrodevbr/gcc-installer",
+      "badges": ["Desktop", "Automation", "System Integration"],
+      "featured": true,
+      "metrics": {
+        "complexity": 4,
+        "teamSize": "Individual"
+      }
     }
   ],
   "skills": {
@@ -114,7 +253,9 @@
         "skills": [
           "Node.js",
           "PHP",
+          "Laravel",
           "MySQL",
+          "PostgreSQL",
           "Python",
           "APIs RESTful",
           "Firebase"