feat: Add initial portfolio UI components and skill definitions.

app/components/cinematic/MagneticButton.tsx

@@ -9,11 +9,13 @@ interface MagneticButtonProps {
   href?: string;
   onClick?: () => void;
   strength?: number;
-  as?: "a" | "button";
+  as?: "a" | "button" | "div" | "span" | "li";
   target?: string;
   rel?: string;
-  download?: boolean;
+  download?: boolean | string;
   "data-cursor"?: string;
+  type?: "button" | "submit" | "reset";
+  wrapperClassName?: string;
 }
 
 export default function MagneticButton({
@@ -27,6 +29,8 @@ export default function MagneticButton({
   rel,
   download,
   "data-cursor": dataCursor,
+  type,
+  wrapperClassName = "",
 }: MagneticButtonProps) {
   const ref = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState({ x: 0, y: 0 });
@@ -49,15 +53,16 @@ export default function MagneticButton({
     setPosition({ x: 0, y: 0 });
   };
 
-  const Tag = as === "a" ? motion.a : motion.button;
+  const Tag = as === "a" ? motion.a : as === "button" ? motion.button : as === "div" ? motion.div : as === "span" ? motion.span : motion.li;
   const linkProps = as === "a" ? { href, target, rel, download } : {};
+  const buttonProps = as === "button" ? { type } : {};
 
   return (
     <div
       ref={ref}
       onMouseMove={handleMouse}
       onMouseLeave={handleMouseLeave}
-      className="inline-block"
+      className={`inline-block ${wrapperClassName}`.trim()}
     >
       <Tag
         className={className}
@@ -74,6 +79,7 @@ export default function MagneticButton({
           mass: 0.5,
         }}
         {...linkProps}
+        {...buttonProps}
       >
         {children}
       </Tag>