Files
portifolio-evandrodevbr/app/components/cinematic/CinematicHome.tsx
T

91 lines
3.1 KiB
TypeScript

"use client";
import dynamic from "next/dynamic";
import { Suspense } from "react";
import Hero from "../Hero";
import { SectionLoading } from "../SectionLoading";
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 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>
);
}