feat: Adiciona a estrutura inicial do portfólio com componentes para experiência, hero, sobre, habilidades, projetos, modalidades de trabalho e contato.

app/components/Projects.tsx

@@ -44,13 +44,13 @@ function getOperatingSystem(category: string): string {
 export default function Projects() {
   const { data, loading, error } = usePortfolioData();
 
-  const projects = useMemo(() => 
-    data?.projects.filter((p) => p.featured) || [], 
-  [data]);
+  const projects = useMemo(() =>
+    data?.projects.filter((p) => p.featured) || [],
+    [data]);
 
   const projectsJsonLd = useMemo(() => {
     if (!projects || projects.length === 0) return null;
-    
+
     return {
       "@context": "https://schema.org",
       "@type": "ItemList",
@@ -84,7 +84,7 @@ export default function Projects() {
   if (error) return <div className="py-20 text-center text-red-500">System_Error: Failed to sync projects.</div>;
 
   return (
-    <section id="projects" className="py-32 px-6 bg-[#030712] relative overflow-hidden">
+    <section id="projects" className="py-32 px-6 relative">
       {/* Background Decor */}
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-500/5 via-transparent to-transparent pointer-events-none" />
 
@@ -104,7 +104,7 @@ export default function Projects() {
         <BentoGrid className="grid-cols-1 md:grid-cols-3 gap-4">
           {projects.map((project, index) => {
             const theme = CATEGORY_THEMES[project.category.toLowerCase()] || CATEGORY_THEMES.web;
-            
+
             // Lógica de Grid Inteligente:
             // Index 0: NutriScan (Destaque - 2 colunas)
             // Index 1: Twins Lab (Complemento - 1 coluna)
@@ -128,7 +128,7 @@ export default function Projects() {
                         <p className="text-sm text-slate-500 font-medium">{project.subtitle}</p>
                       </div>
                     </div>
-                    
+
                     <div className="flex gap-2">
                       {project.githubUrl && <ProjectLink href={project.githubUrl} icon={Github} />}
                       {project.demoUrl && <ProjectLink href={project.demoUrl} icon={ExternalLink} highlight />}
@@ -188,9 +188,8 @@ function ProjectLink({ href, icon: Icon, highlight }: { href: string; icon: any;
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={`p-2 rounded-xl transition-all duration-300 hover:scale-110 ${
-        highlight ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'bg-slate-900 border border-slate-800 text-slate-500 hover:text-white'
-      }`}
+      className={`p-2 rounded-xl transition-all duration-300 hover:scale-110 ${highlight ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'bg-slate-900 border border-slate-800 text-slate-500 hover:text-white'
+        }`}
     >
       <Icon className="w-4 h-4" />
     </a>