feat: Add initial portfolio UI components and skill definitions.

app/components/Footer.tsx

@@ -36,6 +36,8 @@ const quickLinks = [
   },
 ];
 
+import MagneticButton from "./cinematic/MagneticButton";
+
 export default function Footer() {
   const currentYear = new Date().getFullYear();
 
@@ -60,12 +62,14 @@ export default function Footer() {
                 <p className="mb-2 text-[12px] tracking-[0.02em] text-[var(--meta)]">
                   E-mail direto
                 </p>
-                <a
+                <MagneticButton
+                  as="a"
                   href="mailto:[email protected]"
                   className="inline-block text-[18px] font-bold text-[var(--ink)] transition-colors duration-200 hover:text-[var(--slash)]"
+                  strength={0.2}
                 >
                   evandro@dev.br
-                </a>
+                </MagneticButton>
               </div>
             </div>
 
@@ -88,13 +92,15 @@ export default function Footer() {
 
               <div className="mt-sp-6 flex flex-col gap-sp-4">
                 {socialLinks.map((link) => (
-                  <a
+                  <MagneticButton
                     key={link.name}
+                    as="a"
                     href={link.href}
                     target="_blank"
                     rel="noopener noreferrer"
                     aria-label={link.ariaLabel}
                     className="group flex items-center justify-between rounded-[8px] border border-[var(--border)] bg-[rgba(10,10,10,0.02)] p-sp-4 transition-all duration-300 hover:border-[var(--slash)] hover:bg-[rgba(10,10,10,0.04)]"
+                    strength={0.15}
                   >
                     <div className="flex items-center gap-sp-3">
                       <svg
@@ -112,7 +118,7 @@ export default function Footer() {
                     <span className="text-[12px] tracking-[0.08em] text-[var(--meta)] transition-colors group-hover:text-[var(--slash)]">
                       abrir
                     </span>
-                  </a>
+                  </MagneticButton>
                 ))}
               </div>
 
@@ -120,13 +126,15 @@ export default function Footer() {
                 <div className="ds-kicker">Explorar</div>
                 <div className="mt-sp-4 grid gap-sp-3 md:grid-cols-2">
                   {quickLinks.map((link) => (
-                    <a
+                    <MagneticButton
                       key={link.href}
+                      as="a"
                       href={link.href}
                       className="rounded-[8px] border border-[var(--border)] bg-[rgba(10,10,10,0.02)] px-sp-4 py-sp-3 text-[13px] leading-6 text-[var(--ink-80)] transition-colors duration-200 hover:border-[var(--slash)] hover:text-[var(--ink)]"
+                      strength={0.15}
                     >
                       {link.label}
-                    </a>
+                    </MagneticButton>
                   ))}
                 </div>
               </div>