feat: Add initial portfolio UI components and skill definitions.

app/components/Header.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { Logo } from "./Logo";
+import MagneticButton from "./cinematic/MagneticButton";
 
 const navItems = [
   { href: "#home", label: "Home" },
@@ -30,12 +31,14 @@ export function Header() {
           <ul className="flex list-none items-center gap-sp-2">
             {navItems.map((item) => (
               <li key={item.href}>
-                <a
+                <MagneticButton
+                  as="a"
                   href={item.href}
                   className="ds-link rounded-sm px-sp-3 py-sp-2 text-white/85 transition-colors hover:bg-white/10 hover:text-white"
+                  strength={0.15}
                 >
                   {item.label}
-                </a>
+                </MagneticButton>
               </li>
             ))}
           </ul>
@@ -45,13 +48,15 @@ export function Header() {
           <span className="ds-metric hidden rounded-full border border-white/10 px-[10px] py-1 text-white/40 lg:inline-flex">
             v1.0 / 2026
           </span>
-          <a
+          <MagneticButton
+            as="a"
             href="/Profile.pdf"
             download="Evandro_Fonseca_Junior_CV.pdf"
             className="ds-link ds-link-accent hidden rounded-sm font-semibold transition-shadow hover:shadow-[0_0_0_1px_rgba(232,255,0,.8),0_8px_24px_rgba(232,255,0,.35)] lg:inline-flex"
+            strength={0.2}
           >
             Download CV
-          </a>
+          </MagneticButton>
           <button
             type="button"
             className="flex h-8 w-8 flex-col items-center justify-center gap-sp-2 border-none bg-transparent lg:hidden"
@@ -80,23 +85,27 @@ export function Header() {
             <ul className="flex list-none flex-col gap-sp-2">
               {navItems.map((item) => (
                 <li key={item.href}>
-                  <a
+                  <MagneticButton
+                    as="a"
                     href={item.href}
                     className="ds-link block rounded-sm py-sp-3 text-white/85 transition-all hover:pl-sp-2 hover:text-white"
                     onClick={() => setMobileMenuOpen(false)}
+                    strength={0.15}
                   >
                     {item.label}
-                  </a>
+                  </MagneticButton>
                 </li>
               ))}
               <li>
-                <a
+                <MagneticButton
+                  as="a"
                   href="/Profile.pdf"
                   download="Evandro_Fonseca_Junior_CV.pdf"
                   className="ds-link ds-link-accent mt-sp-2 inline-flex rounded-sm font-semibold"
+                  strength={0.15}
                 >
                   Download CV
-                </a>
+                </MagneticButton>
               </li>
             </ul>
           </nav>