feat: Implement initial cinematic portfolio UI with animated components and page structure.

2026-03-18 06:45:42 -03:00
1 parent 9d779390e5
commit 2ede7e98f9
@@ -0,0 +1,90 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Suspense } from "react";
+import Hero from "../Hero";
+import { SectionLoading } from "../SectionLoading";
+
+const About = dynamic(() => import("../About"));
+const Skills = dynamic(() => import("../Skills"));
+const Experience = dynamic(() => import("../Experience"));
+const WorkModalities = dynamic(() => import("../WorkModalities").then(mod => mod.WorkModalities));
+const Contact = dynamic(() => import("../Contact"));
+const Projects = dynamic(() => import("../Projects"));
+const LighthouseMetrics = dynamic(() => import("../LighthouseMetrics"));
+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 });
+
+export default function CinematicHome() {
+  return (
+    <div className="flex min-h-screen flex-col overflow-x-hidden">
+      <main className="ds-main">
+        <Hero />
+
+        {/* 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}
+          />
+        </div>
+
+        <CinematicSection effect="parallax-depth">
+          <About />
+        </CinematicSection>
+
+        <SectionDivider variant="waveform" />
+
+        <CinematicSection effect="clip-reveal">
+          <Skills />
+        </CinematicSection>
+
+        <div className="overflow-hidden bg-[var(--ink)] py-4 text-[rgba(204,255,0,0.04)]">
+          <ScrollVelocityText
+            text="NEXT.JS  TAURI  RUST  NODE.JS  TYPESCRIPT"
+            baseVelocity={1}
+          />
+        </div>
+
+        <CinematicSection effect="fade-scale">
+          <Experience />
+        </CinematicSection>
+
+        <SectionDivider variant="gradient" />
+
+        <CinematicSection effect="rotate-in">
+          <Suspense
+            fallback={<SectionLoading message="Carregando projetos..." />}
+          >
+            <Projects />
+          </Suspense>
+        </CinematicSection>
+
+        <CinematicSection effect="clip-reveal">
+          <LighthouseMetrics />
+        </CinematicSection>
+
+        <SectionDivider variant="pulse" />
+
+        <CinematicSection effect="parallax-depth">
+          <WorkModalities />
+        </CinematicSection>
+
+        <div className="overflow-hidden bg-[var(--ink)] py-6 text-[rgba(244,242,237,0.05)]">
+          <ScrollVelocityText
+            text="VAMOS CONVERSAR"
+            baseVelocity={-2}
+          />
+        </div>
+
+        <CinematicSection effect="fade-scale">
+          <Contact />
+        </CinematicSection>
+      </main>
+      <Footer />
+    </div>
+  );
+}