feat: Adiciona a estrutura inicial do portfólio com componentes para experiência, hero, sobre, habilidades, projetos, modalidades de trabalho e contato.

app/components/Hero.tsx

@@ -21,15 +21,14 @@ export default function Hero() {
   };
 
   return (
-    <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#030712] pt-28 md:pt-20">
+    <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden pt-28 md:pt-20">
       {/* 1. Background Engineering: Grid Pattern & Radial Shading */}
-      <div className="absolute inset-0 z-0">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-20" />
+      <div className="absolute inset-0 z-0 pointer-events-none">
         <div className="absolute inset-0 bg-radial-at-t from-blue-500/10 via-transparent to-transparent" />
       </div>
 
       <div className="relative z-10 w-full max-w-6xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
-        
+
         {/* Lado Esquerdo: Conteúdo Textual (80/20 do Impacto) */}
         <div className="lg:col-span-7 text-left">
           <motion.div
@@ -75,16 +74,16 @@ export default function Hero() {
                 <MessageCircle className="w-5 h-5" />
                 Iniciar Projeto
               </motion.a>
-              
+
               <div className="flex gap-4 px-4">
                 {[
                   { icon: Github, link: "https://github.com/evandrodevbr", rel: "me" },
                   { icon: Linkedin, link: "https://www.linkedin.com/in/evandro-fonseca-junior-0969aa1b0/", rel: "me" },
                   { icon: Mail, link: "mailto:[email protected]" }
                 ].map((social, i) => (
-                  <a 
-                    key={i} 
-                    href={social.link} 
+                  <a
+                    key={i}
+                    href={social.link}
                     rel={social.rel ? `${social.rel} noopener noreferrer` : "noopener noreferrer"}
                     target={social.link.startsWith("mailto:") ? undefined : "_blank"}
                     className="p-3 rounded-lg border border-slate-800 text-slate-400 hover:text-white hover:border-slate-600 transition-all"
@@ -113,7 +112,7 @@ export default function Hero() {
             {/* Elementos Orbitais (Vibe Engenharia) */}
             <div className="absolute inset-0 rounded-full border border-dashed border-blue-500/30 animate-[spin_20s_linear_infinite]" />
             <div className="absolute inset-10 rounded-full border border-blue-500/10 animate-[spin_15s_linear_infinite_reverse]" />
-            
+
             {/* Foto de Perfil com Masking de Engenharia */}
             <div className="relative z-10 w-full h-full rounded-[2.5rem] overflow-hidden border-2 border-slate-800 shadow-2xl">
               <div className="absolute inset-0 bg-blue-500/10 z-10 hover:opacity-0 transition-opacity duration-500" />
@@ -126,7 +125,7 @@ export default function Hero() {
                 fetchPriority="high"
               />
             </div>
-            
+
             {/* Floating Stats Badge */}
             <div className="absolute -bottom-6 -right-6 bg-slate-900 border border-slate-800 p-4 rounded-2xl shadow-2xl z-20 backdrop-blur-xl">
               <p className="text-xs text-slate-500 uppercase font-bold tracking-tighter">Exp. Level</p>