feat: Add initial portfolio UI components and skill definitions.

app/components/Projects.tsx

@@ -4,6 +4,7 @@ import { useMemo } from "react";
 import { motion, type Variants, useReducedMotion } from "framer-motion";
 import { usePortfolioData } from "@/lib/usePortfolioData";
 import { Section } from "./Section";
+import MagneticButton from "./cinematic/MagneticButton";
 import { DrawLine } from "./animations/DrawLine";
 import { SectionLoading } from "./SectionLoading";
 
@@ -91,45 +92,43 @@ export default function Projects() {
                   </p>
                 )}
               </div>
-              <span className="ds-tag">{project.status}</span>
+              <MagneticButton as="span" className="ds-tag" strength={0.15}>{project.status}</MagneticButton>
             </div>
 
             <p className="ds-copy">{project.description}</p>
 
             <ul className="ds-tags mt-sp-6">
               {project.technologies.slice(0, 5).map((tech: string) => (
-                <li key={tech} className="ds-tag">
+                <MagneticButton key={tech} as="li" className="ds-tag" strength={0.15}>
                   {tech}
-                </li>
+                </MagneticButton>
               ))}
             </ul>
 
             <div className="mt-sp-6 flex flex-wrap gap-sp-3">
               {project.githubUrl && (
-                <motion.a
+                <MagneticButton
+                  as="a"
                   href={project.githubUrl}
                   target="_blank"
                   rel="noreferrer"
                   className="ds-link ds-link-muted"
-                  whileHover={shouldReduceMotion ? undefined : { scale: 1.03 }}
-                  whileTap={shouldReduceMotion ? undefined : { scale: 0.97 }}
-                  transition={{ type: "spring", stiffness: 260, damping: 20 }}
+                  strength={0.25}
                 >
                   Ver codigo
-                </motion.a>
+                </MagneticButton>
               )}
               {project.demoUrl && (
-                <motion.a
+                <MagneticButton
+                  as="a"
                   href={project.demoUrl}
                   target="_blank"
                   rel="noreferrer"
                   className="ds-link ds-link-accent"
-                  whileHover={shouldReduceMotion ? undefined : { scale: 1.03 }}
-                  whileTap={shouldReduceMotion ? undefined : { scale: 0.97 }}
-                  transition={{ type: "spring", stiffness: 260, damping: 20 }}
+                  strength={0.25}
                 >
                   Abrir projeto
-                </motion.a>
+                </MagneticButton>
               )}
             </div>
           </motion.article>
@@ -137,12 +136,12 @@ export default function Projects() {
       </motion.div>
 
       <div className="mt-sp-8 flex flex-wrap gap-sp-3">
-        <a href="/cases" className="ds-link ds-link-accent">
+        <MagneticButton as="a" href="/cases" className="ds-link ds-link-accent" strength={0.2}>
           Explorar todos os cases
-        </a>
-        <a href="/servicos" className="ds-link ds-link-muted">
+        </MagneticButton>
+        <MagneticButton as="a" href="/servicos" className="ds-link ds-link-muted" strength={0.2}>
           Ver servicos relacionados
-        </a>
+        </MagneticButton>
       </div>
     </Section>
   );