127 lines
3.8 KiB
TypeScript
127 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import type {
|
|
PortfolioExperience,
|
|
PortfolioProject,
|
|
PortfolioSkillCategory,
|
|
} from "@/lib/portfolio-data";
|
|
import Hero from "../Hero";
|
|
import Projects from "../Projects";
|
|
import { SectionLoading } from "../SectionLoading";
|
|
import ScrollStory from "../story/ScrollStory";
|
|
import ReelDirector from "../story/ReelDirector";
|
|
import PrintReel from "../story/PrintReel";
|
|
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 LighthouseMetrics = dynamic(() => import("../LighthouseMetrics"), {
|
|
loading: () => <SectionLoading message="Carregando..." />,
|
|
});
|
|
const Footer = dynamic(() => import("../Footer"));
|
|
|
|
const ScrollVelocityText = dynamic(() => import("./ScrollVelocityText"), {
|
|
ssr: false,
|
|
});
|
|
const SectionDivider = dynamic(() => import("./SectionDivider"), {
|
|
ssr: false,
|
|
});
|
|
|
|
export default function CinematicHome({
|
|
projects,
|
|
experiences,
|
|
skillCategories,
|
|
}: {
|
|
projects: PortfolioProject[];
|
|
experiences: PortfolioExperience[];
|
|
skillCategories: PortfolioSkillCategory[];
|
|
}) {
|
|
return (
|
|
<div className="flex min-h-screen flex-col overflow-x-clip">
|
|
<main className="ds-main">
|
|
<ReelDirector />
|
|
<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>
|
|
|
|
{/* Reel scrollytelling: timeline scrubbed pelo scroll (estilo product-page) */}
|
|
<ScrollStory
|
|
projectsCount={projects.length}
|
|
experiencesCount={experiences.length}
|
|
skillsCount={skillCategories.reduce(
|
|
(acc, cat) => acc + cat.skills.length,
|
|
0,
|
|
)}
|
|
/>
|
|
|
|
{/* Palco 2: filmstrip horizontal pinado com prints reais dos deployments */}
|
|
<PrintReel />
|
|
|
|
<CinematicSection effect="parallax-depth">
|
|
<About />
|
|
</CinematicSection>
|
|
|
|
<SectionDivider variant="waveform" />
|
|
|
|
<CinematicSection effect="clip-reveal">
|
|
<Skills categories={skillCategories} />
|
|
</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 experiences={experiences} />
|
|
</CinematicSection>
|
|
|
|
<SectionDivider variant="gradient" />
|
|
|
|
<CinematicSection effect="rotate-in">
|
|
<Projects projects={projects} />
|
|
</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>
|
|
);
|
|
}
|