feat: Implement initial portfolio website structure and core components including main page, header, hero, contact, and work modalities.

app/components/ui/NumberIcons.tsx

@@ -1,5 +1,5 @@
 // src/components/ui/NumberIcons.tsx
-import React from 'react';
+import React from "react";
 
 interface NumberIconProps extends React.SVGProps<SVGSVGElement> {
   /** Tamanho em pixels. Escala mantendo o viewBox 80x80 */
@@ -9,9 +9,9 @@ interface NumberIconProps extends React.SVGProps<SVGSVGElement> {
 }
 
 const baseProps = {
-  fill: 'none',
-  xmlns: 'http://www.w3.org/2000/svg',
-  viewBox: '0 0 80 80',
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 80 80",
 };
 
 /**
@@ -22,44 +22,53 @@ const GraphicShell = () => (
   <>
     {/* Base Background */}
     <rect width="80" height="80" rx="8" className="fill-[#0A0A0A]" />
-    
+
     {/* Borda reativa ao hover */}
-    <rect 
-      x="1" y="1" width="78" height="78" rx="7" 
-      className="stroke-white/5 transition-colors duration-400 ease-[var(--ease-out)] group-hover:stroke-white/15" 
-      strokeWidth="1" 
+    <rect
+      x="1"
+      y="1"
+      width="78"
+      height="78"
+      rx="7"
+      className="stroke-white/5 transition-colors duration-400 ease-[var(--ease-out)] group-hover:stroke-white/15"
+      strokeWidth="1"
     />
-    
+
     {/* Grid de background sutil (Cyberpunk/Tech feel) */}
     <g className="stroke-white/[0.03]" strokeWidth="1">
       <path d="M0 20H80M0 60H80M20 0V80M60 0V80" />
     </g>
 
     {/* Brand Slash (Acento) com Motion */}
-    <polygon 
-      points="58,66 62,66 70,50 66,50" 
-      className="fill-[#E8FF00] transition-transform duration-400 ease-[var(--ease-out)] origin-bottom-right group-hover:-translate-y-1 group-hover:scale-110" 
+    <polygon
+      points="58,66 62,66 70,50 66,50"
+      className="fill-[#E8FF00] transition-transform duration-400 ease-[var(--ease-out)] origin-bottom-right group-hover:-translate-y-1 group-hover:scale-110"
     />
   </>
 );
 
-export const NumberOne = ({ size = 80, className = '', ...props }: NumberIconProps) => (
-  <svg 
-    width={size} 
-    height={size} 
-    className={`group ${className}`} 
-    role="img" 
-    aria-label="Passo 1" 
-    {...baseProps} 
+export const NumberOne = ({
+  size = 80,
+  className = "",
+  ...props
+}: NumberIconProps) => (
+  <svg
+    width={size}
+    height={size}
+    className={`group ${className}`}
+    role="img"
+    aria-label="Passo 1"
+    {...baseProps}
     {...props}
   >
     <GraphicShell />
-    <text 
-      x="40" y="54" 
-      fontFamily="Syne, sans-serif" 
-      fontSize="40" 
-      fontWeight="800" 
-      textAnchor="middle" 
+    <text
+      x="40"
+      y="54"
+      fontFamily="Syne, sans-serif"
+      fontSize="40"
+      fontWeight="800"
+      textAnchor="middle"
       className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
     >
       1
@@ -67,23 +76,28 @@ export const NumberOne = ({ size = 80, className = '', ...props }: NumberIconPro
   </svg>
 );
 
-export const NumberTwo = ({ size = 80, className = '', ...props }: NumberIconProps) => (
-  <svg 
-    width={size} 
-    height={size} 
-    className={`group ${className}`} 
-    role="img" 
-    aria-label="Passo 2" 
-    {...baseProps} 
+export const NumberTwo = ({
+  size = 80,
+  className = "",
+  ...props
+}: NumberIconProps) => (
+  <svg
+    width={size}
+    height={size}
+    className={`group ${className}`}
+    role="img"
+    aria-label="Passo 2"
+    {...baseProps}
     {...props}
   >
     <GraphicShell />
-    <text 
-      x="40" y="54" 
-      fontFamily="Syne, sans-serif" 
-      fontSize="40" 
-      fontWeight="800" 
-      textAnchor="middle" 
+    <text
+      x="40"
+      y="54"
+      fontFamily="Syne, sans-serif"
+      fontSize="40"
+      fontWeight="800"
+      textAnchor="middle"
       className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
     >
       2
@@ -91,23 +105,28 @@ export const NumberTwo = ({ size = 80, className = '', ...props }: NumberIconPro
   </svg>
 );
 
-export const NumberThree = ({ size = 80, className = '', ...props }: NumberIconProps) => (
-  <svg 
-    width={size} 
-    height={size} 
-    className={`group ${className}`} 
-    role="img" 
-    aria-label="Passo 3" 
-    {...baseProps} 
+export const NumberThree = ({
+  size = 80,
+  className = "",
+  ...props
+}: NumberIconProps) => (
+  <svg
+    width={size}
+    height={size}
+    className={`group ${className}`}
+    role="img"
+    aria-label="Passo 3"
+    {...baseProps}
     {...props}
   >
     <GraphicShell />
-    <text 
-      x="40" y="54" 
-      fontFamily="Syne, sans-serif" 
-      fontSize="40" 
-      fontWeight="800" 
-      textAnchor="middle" 
+    <text
+      x="40"
+      y="54"
+      fontFamily="Syne, sans-serif"
+      fontSize="40"
+      fontWeight="800"
+      textAnchor="middle"
       className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
     >
       3
@@ -115,23 +134,28 @@ export const NumberThree = ({ size = 80, className = '', ...props }: NumberIconP
   </svg>
 );
 
-export const NumberFour = ({ size = 80, className = '', ...props }: NumberIconProps) => (
-  <svg 
-    width={size} 
-    height={size} 
-    className={`group ${className}`} 
-    role="img" 
-    aria-label="Passo 4" 
-    {...baseProps} 
+export const NumberFour = ({
+  size = 80,
+  className = "",
+  ...props
+}: NumberIconProps) => (
+  <svg
+    width={size}
+    height={size}
+    className={`group ${className}`}
+    role="img"
+    aria-label="Passo 4"
+    {...baseProps}
     {...props}
   >
     <GraphicShell />
-    <text 
-      x="40" y="54" 
-      fontFamily="Syne, sans-serif" 
-      fontSize="40" 
-      fontWeight="800" 
-      textAnchor="middle" 
+    <text
+      x="40"
+      y="54"
+      fontFamily="Syne, sans-serif"
+      fontSize="40"
+      fontWeight="800"
+      textAnchor="middle"
       className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
     >
       4