feat: revamp portfolio with case studies, curriculo page, and local SEO

Adds dynamic case study and curriculo routes, project health monitoring
for live demo status, and strengthens local SEO (structured data,
service-area targeting for Garuva/Joinville/Curitiba, a dedicated
"criação de sites" service page) so search results better match the
professional title (Engenheiro da Computação) and experience (5 anos).

Co-Authored-By: Claude Sonnet 5 <[email protected]>

app/components/cinematic/CinematicHome.tsx

@@ -1,24 +1,53 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { Suspense } from "react";
+import type {
+  PortfolioExperience,
+  PortfolioProject,
+  PortfolioSkillCategory,
+} from "@/lib/portfolio-data";
 import Hero from "../Hero";
+import Projects from "../Projects";
 import { SectionLoading } from "../SectionLoading";
+import CinematicSection from "./CinematicSection";
 
-const About = dynamic(() => import("../About"), { loading: () => <SectionLoading message="Carregando..." /> });
-const Skills = dynamic(() => import("../Skills"), { loading: () => <SectionLoading message="Carregando..." /> });
-const Experience = dynamic(() => import("../Experience"), { loading: () => <SectionLoading message="Carregando..." /> });
-const WorkModalities = dynamic(() => import("../WorkModalities").then(mod => mod.WorkModalities), { loading: () => <SectionLoading message="Carregando..." /> });
-const Contact = dynamic(() => import("../Contact"), { loading: () => <SectionLoading message="Carregando..." /> });
-const Projects = dynamic(() => import("../Projects"));
-const LighthouseMetrics = dynamic(() => import("../LighthouseMetrics"), { loading: () => <SectionLoading message="Carregando..." /> });
+const About = dynamic(() => import("../About"), {
+  loading: () => <SectionLoading message="Carregando..." />,
+});
+const Skills = dynamic(() => import("../Skills"), {
+  loading: () => <SectionLoading message="Carregando..." />,
+});
+const Experience = dynamic(() => import("../Experience"), {
+  loading: () => <SectionLoading message="Carregando..." />,
+});
+const WorkModalities = dynamic(
+  () => import("../WorkModalities").then((mod) => mod.WorkModalities),
+  { loading: () => <SectionLoading message="Carregando..." /> },
+);
+const Contact = dynamic(() => import("../Contact"), {
+  loading: () => <SectionLoading message="Carregando..." />,
+});
+const LighthouseMetrics = dynamic(() => import("../LighthouseMetrics"), {
+  loading: () => <SectionLoading message="Carregando..." />,
+});
 const Footer = dynamic(() => import("../Footer"));
 
-const CinematicSection = dynamic(() => import("./CinematicSection"), { ssr: false });
-const ScrollVelocityText = dynamic(() => import("./ScrollVelocityText"), { ssr: false });
-const SectionDivider = dynamic(() => import("./SectionDivider"), { ssr: false });
+const ScrollVelocityText = dynamic(() => import("./ScrollVelocityText"), {
+  ssr: false,
+});
+const SectionDivider = dynamic(() => import("./SectionDivider"), {
+  ssr: false,
+});
 
-export default function CinematicHome() {
+export default function CinematicHome({
+  projects,
+  experiences,
+  skillCategories,
+}: {
+  projects: PortfolioProject[];
+  experiences: PortfolioExperience[];
+  skillCategories: PortfolioSkillCategory[];
+}) {
   return (
     <div className="flex min-h-screen flex-col overflow-x-hidden">
       <main className="ds-main">
@@ -26,10 +55,7 @@ export default function CinematicHome() {
 
         {/* Marquee divider after hero */}
         <div className="overflow-hidden bg-[var(--ink)] py-6 text-[rgba(244,242,237,0.06)]">
-          <ScrollVelocityText
-            text="SOFTWARE ENGINEERING"
-            baseVelocity={-1.5}
-          />
+          <ScrollVelocityText text="SOFTWARE ENGINEERING" baseVelocity={-1.5} />
         </div>
 
         <CinematicSection effect="parallax-depth">
@@ -39,7 +65,7 @@ export default function CinematicHome() {
         <SectionDivider variant="waveform" />
 
         <CinematicSection effect="clip-reveal">
-          <Skills />
+          <Skills categories={skillCategories} />
         </CinematicSection>
 
         <div className="overflow-hidden bg-[var(--ink)] py-4 text-[rgba(204,255,0,0.04)]">
@@ -50,17 +76,13 @@ export default function CinematicHome() {
         </div>
 
         <CinematicSection effect="fade-scale">
-          <Experience />
+          <Experience experiences={experiences} />
         </CinematicSection>
 
         <SectionDivider variant="gradient" />
 
         <CinematicSection effect="rotate-in">
-          <Suspense
-            fallback={<SectionLoading message="Carregando projetos..." />}
-          >
-            <Projects />
-          </Suspense>
+          <Projects projects={projects} />
         </CinematicSection>
 
         <CinematicSection effect="clip-reveal">
@@ -74,10 +96,7 @@ export default function CinematicHome() {
         </CinematicSection>
 
         <div className="overflow-hidden bg-[var(--ink)] py-6 text-[rgba(244,242,237,0.05)]">
-          <ScrollVelocityText
-            text="VAMOS CONVERSAR"
-            baseVelocity={-2}
-          />
+          <ScrollVelocityText text="VAMOS CONVERSAR" baseVelocity={-2} />
         </div>
 
         <CinematicSection effect="fade-scale">