diff --git a/app/cases/[slug]/page.test.tsx b/app/cases/[slug]/page.test.tsx
index 02f0285..be3a76f 100644
--- a/app/cases/[slug]/page.test.tsx
+++ b/app/cases/[slug]/page.test.tsx
@@ -209,7 +209,7 @@ it("renders the authorized detailed case in order with traceable sources", async
});
it("keeps the fallback concise and links its declared services", async () => {
- const caseStudy = getCase("gcc-installer");
+ const caseStudy = getCase("sc-plus");
expect(caseStudy.detail).toBeUndefined();
const ui = await CasePage({
params: Promise.resolve({ slug: caseStudy.id }),
@@ -222,7 +222,9 @@ it("keeps the fallback concise and links its declared services", async () => {
for (const technology of caseStudy.stack) {
expect(screen.getByText(technology)).toBeVisible();
}
- expect(screen.queryByRole("link", { name: "Abrir demonstração" })).toBeNull();
+ expect(
+ screen.getByRole("link", { name: "Abrir demonstração" }),
+ ).toHaveAttribute("href", caseStudy.demoUrl);
expect(screen.getByRole("link", { name: "Ver código" })).toHaveAttribute(
"href",
caseStudy.githubUrl,
diff --git a/app/cases/[slug]/page.tsx b/app/cases/[slug]/page.tsx
index 5c6c558..b1a1a72 100644
--- a/app/cases/[slug]/page.tsx
+++ b/app/cases/[slug]/page.tsx
@@ -35,10 +35,11 @@ export async function generateMetadata({
const url = `${siteUrl}/cases/${caseStudy.id}`;
return {
- title: `${caseStudy.title} | Case de Engenharia de Software`,
+ title: `${caseStudy.title} | Case de Engenharia`,
description: caseStudy.summary,
alternates: { canonical: url },
openGraph: {
+ locale: "pt_BR",
title: caseStudy.title,
description: caseStudy.summary,
url,
@@ -109,6 +110,14 @@ export default async function CasePage({ params }: CasePageProps) {
{caseStudy.detail?.answer.text ?? caseStudy.summary}
+ {caseStudy.role ? (
+
+
+ Minha participação:
+ {" "}
+ {caseStudy.role}
+
+ ) : null}
{!caseStudy.detail ? (
{caseStudy.impact}
diff --git a/app/cases/page.tsx b/app/cases/page.tsx
index 5948699..5fadb4a 100644
--- a/app/cases/page.tsx
+++ b/app/cases/page.tsx
@@ -18,6 +18,7 @@ export const metadata: Metadata = {
canonical: pageUrl,
},
openGraph: {
+ locale: "pt_BR",
title: pageTitle,
description: pageDescription,
url: pageUrl,
diff --git a/app/components/Footer.test.tsx b/app/components/Footer.test.tsx
index 8c9e174..d42b1dc 100644
--- a/app/components/Footer.test.tsx
+++ b/app/components/Footer.test.tsx
@@ -2,12 +2,13 @@ import { render, screen } from "@testing-library/react";
import Footer from "./Footer";
describe("Footer contact and navigation", () => {
- it("offers project contact and a direct mailto link", () => {
+ it("offers a direct mailto link without repeating the contact call to action", () => {
render();
+ // o convite principal fica na secao Contato, logo acima do rodape
expect(
- screen.getByRole("link", { name: "Conversar sobre meu projeto" }),
- ).toHaveAttribute("href", "/#contact");
+ screen.queryByRole("link", { name: "Conversar sobre meu projeto" }),
+ ).not.toBeInTheDocument();
const emailLink = screen.getByRole("link", {
name: "evandrofonsecajunior@gmail.com",
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 59b6703..a15d033 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -52,31 +52,14 @@ export default function Footer() {
Contato
-
- Vamos conversar sobre o software que seu negócio precisa?
-
-
- Conte o que você quer construir, integrar ou melhorar. Podemos
- discutir o contexto, as prioridades e o escopo antes de definir
- os próximos passos.
-
-
- Conversar sobre meu projeto
-
-
-
+
E-mail direto
evandrofonsecajunior@gmail.com
diff --git a/app/components/GoogleAnalytics.tsx b/app/components/GoogleAnalytics.tsx
index a091fe1..9ddf67b 100644
--- a/app/components/GoogleAnalytics.tsx
+++ b/app/components/GoogleAnalytics.tsx
@@ -246,7 +246,10 @@ function GoogleAnalyticsConsent() {
className={`${buttonClassName} fixed bottom-sp-4 right-sp-4 z-[9980] border-white/25 bg-[var(--ink)] text-white shadow-[4px_4px_0_var(--slash)]`}
onClick={() => setPreferencesOpen((open) => !open)}
>
- Preferências de analytics
+ Preferências de analytics
+
+ Cookies
+
{preferencesOpen && (
{
within(navigation)
.getAllByRole("link")
.map((link) => link.getAttribute("href")),
- ).toEqual(["/#modalities", "/cases", "/#process", "/#about"]);
+ ).toEqual([
+ "/#modalities",
+ "/cases",
+ "/#process",
+ "/#about",
+ "/#experience",
+ ]);
const contactLink = screen
.getAllByRole("link")
.find((link) => link.getAttribute("href") === "/#contact");
@@ -68,7 +74,14 @@ describe("Header", () => {
within(mobileNavigation)
.getAllByRole("link")
.map((link) => link.getAttribute("href")),
- ).toEqual(["/#modalities", "/cases", "/#process", "/#about", "/#contact"]);
+ ).toEqual([
+ "/#modalities",
+ "/cases",
+ "/#process",
+ "/#about",
+ "/#experience",
+ "/#contact",
+ ]);
expect(
within(mobileNavigation).queryByRole("link", {
name: /currículo|download cv/i,
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index f77ede1..0a185b1 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -38,7 +38,7 @@ export function Header() {
return (
{
"href",
"/cases",
);
- expect(screen.getByRole("link", { name: /nutriscan/i })).toHaveAttribute(
- "href",
- "/cases/nutriscan",
+ });
+
+ it("keeps the headline as one readable sentence despite the per-word animation", () => {
+ render(
-
-
-
+
+
+
+
+ {/* Legendas do mergulho: aparecem enquanto a câmera atravessa cada camada (só no hero fixo, telas grandes). */}
+
+ {CAPTIONS.map(([title, text], index) => (
+
+ {title}
+ {text}
+
+ ))}
+
+
+
+
+
-
- Sistemas sob medida para operações que não cabem em soluções
- prontas.
+ {/* Sem opacity:0: as palavras pintam no primeiro quadro (LCP); a entrada anima só posição e foco. */}
+
+ {TITLE.map((word, index) => (
+
+
+ {word}
+ {" "}
+
+ ))}
-
+
Projeto e desenvolvo sistemas web, aplicativos e integrações, do
entendimento do negócio à arquitetura e à entrega em produção.
-
+
Conversar sobre meu projeto
+
+
Ver projetos entregues
-
- Santa Catarina · Atendimento remoto
+
+
+
+
+ {items.length > 0 && (
+
+ {items.map(([value, label]) => (
+
+
+ {label}
+
+
+ {value}
+
+
+ ))}
+
+ )}
+ {/* no celular, serviços e redes ficam no menu e no rodapé: assim o hero cabe numa tela e pode ficar fixo */}
+
+
+ {["Sistemas web", "Aplicativos", "Integrações"].map(
+ (service) => (
+
+
+ ),
+ )}
+
+
+ {SOCIAL_LINKS.map((link) => (
+
+ {link.label}
+
+ ))}
+
+ Santa Catarina · Atendimento remoto
+
+
+
+
+
+ Role para mergulhar
+
-
-
-
-
- {["Sistemas web", "Aplicativos", "Integrações"].map((service) => (
-
-
- ))}
-
-
-
-
+
);
}
diff --git a/app/components/ProjectCover.tsx b/app/components/ProjectCover.tsx
new file mode 100644
index 0000000..1b309e4
--- /dev/null
+++ b/app/components/ProjectCover.tsx
@@ -0,0 +1,56 @@
+import Image from "next/image";
+
+type CoverProject = { id: string; title: string };
+
+/** Capturas de tela publicadas dos projetos que têm interface pública. */
+const SCREENSHOTS: Record
= {
+ nutriscan: "/assets/notebook/nutriscan.webp",
+ "sc-plus": "/assets/notebook/sc-plus.webp",
+ "sev-modaintima": "/assets/notebook/sev-modaintima.webp",
+ "as-servicos": "/assets/notebook/as-servicos.webp",
+};
+
+function initials(title: string) {
+ return title
+ .split(/\s+/)
+ .filter((word) => word.length > 2 || /^[A-Z]/.test(word))
+ .slice(0, 2)
+ .map((word) => word[0])
+ .join("")
+ .toUpperCase();
+}
+
+/**
+ * Capa do card de projeto: a captura de tela real quando existe; sem captura, um painel gerado em código
+ * (só o monograma, sem repetir a stack que já aparece nas tags do card) em vez de uma imagem inventada.
+ */
+export function ProjectCover({
+ project,
+ priority = false,
+}: {
+ project: CoverProject;
+ priority?: boolean;
+}) {
+ const src = SCREENSHOTS[project.id];
+
+ if (src) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {initials(project.title)}
+
+ );
+}
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index a41d635..e4e48a2 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -6,6 +6,7 @@ import type { PortfolioProjectView } from "@/lib/portfolio-data";
import { caseStudies } from "@/lib/site-content";
import { DrawLine } from "./animations/DrawLine";
import MagneticButton from "./cinematic/MagneticButton";
+import { ProjectCover } from "./ProjectCover";
import { Section } from "./Section";
export default function Projects({
@@ -35,7 +36,7 @@ export default function Projects({
dark
disableChildrenAnimation
>
-
+
{projects.map((project) => {
const caseStudy = caseStudies.find(
(entry) => entry.id === project.id,
@@ -59,6 +60,7 @@ export default function Projects({
whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
transition={{ type: "spring", stiffness: 170, damping: 18 }}
>
+
{project.category}
@@ -89,6 +91,12 @@ export default function Projects({
{caseStudy.impact}
)}
+ {caseStudy?.role && (
+
+
Minha participação
+
{caseStudy.role}
+
+ )}
{project.technologies.slice(0, 5).map((tech) => (
diff --git a/app/components/WorkModalities.tsx b/app/components/WorkModalities.tsx
index 6db6137..12afc77 100644
--- a/app/components/WorkModalities.tsx
+++ b/app/components/WorkModalities.tsx
@@ -165,7 +165,7 @@ function TierCard({ tier }: Readonly<{ tier: Tier }>) {
{tier.pricing}
-
@@ -253,10 +253,10 @@ export function WorkModalities() {
href={service.href}
className="min-w-0 rounded-[8px] border border-[var(--border)] bg-white/70 px-sp-4 py-sp-4 transition-colors duration-200 hover:border-[var(--slash)] hover:bg-white"
>
-
+
{service.label}
-
+
{service.description}
diff --git a/app/components/animations/TextDiffuseReveal.reducedMotion.test.tsx b/app/components/animations/TextDiffuseReveal.reducedMotion.test.tsx
deleted file mode 100644
index 5189e17..0000000
--- a/app/components/animations/TextDiffuseReveal.reducedMotion.test.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { render } from "@testing-library/react";
-import type { ReactNode } from "react";
-
-import { TextDiffuseReveal } from "./TextDiffuseReveal";
-
-let mockReducedMotion = false;
-let mockInView = true;
-let mockAnimations: Array<{ animate?: Record
}> = [];
-jest.mock("motion/react", () => {
- const React = require("react");
-
- return {
- motion: {
- span: ({
- children,
- initial: _initial,
- animate,
- transition: _transition,
- onAnimationComplete: _onAnimationComplete,
- ...props
- }: {
- children?: ReactNode;
- initial?: unknown;
- animate?: Record;
- transition?: unknown;
- onAnimationComplete?: () => void;
- } & Record) => {
- mockAnimations.push({ animate });
- return React.createElement("span", props, children);
- },
- },
- useInView: () => mockInView,
- useReducedMotion: () => mockReducedMotion,
- };
-});
-
-describe("TextDiffuseReveal reduced motion", () => {
- beforeEach(() => {
- mockReducedMotion = false;
- mockInView = true;
- mockAnimations = [];
- });
-
- it("clears blur and scale when reduced motion resolves after mount", () => {
- const { rerender } = render() {
const ref = useRef(null);
- const shouldReduceMotion = useReducedMotion();
const isInView = useInView(ref, { once, amount });
- const [staggerDelay, setStaggerDelay] = useState(0.03);
- const [completedChars, setCompletedChars] = useState(0);
-
- useEffect(() => {
- const media = window.matchMedia("(max-width: 768px)");
- const updateStagger = () => setStaggerDelay(media.matches ? 0.015 : 0.03);
-
- updateStagger();
- media.addEventListener("change", updateStagger);
- return () => media.removeEventListener("change", updateStagger);
- }, []);
-
- const tokens = useMemo(() => {
- let offset = 0;
- return text
- .split(/(\n|\s+)/)
- .filter(Boolean)
- .map((value) => {
- const key = `${offset}:${value}`;
- offset += value.length;
- return { key, value };
- });
- }, [text]);
- const animatedChars = useMemo(
- () =>
- Array.from(text).filter((char) => char !== "\n" && char !== " ").length,
- [text],
- );
-
- useEffect(() => {
- if (!isInView) {
- setCompletedChars(0);
- }
- }, [isInView]);
-
- const hasActiveWillChange =
- !shouldReduceMotion && isInView && completedChars < animatedChars;
-
- let animatedIndex = 0;
+ let word = 0;
return (
{text}
- {tokens.map(({ key, value: token }) => {
- if (token === "\n") {
- return {token.replace(/ /g, "\u00A0")} ;
- }
-
- return (
-
- {Array.from(token).map((char) => {
- const currentIndex = animatedIndex;
- animatedIndex += 1;
-
- return (
- {
- if (!shouldReduceMotion) {
- setCompletedChars((count) =>
- count < animatedChars ? count + 1 : count,
- );
- }
- }}
- >
- {char}
-
- );
- })}
-
- );
- })}
+ {text
+ .split(/(\n|\s+)/)
+ .filter(Boolean)
+ .map((token, index) => {
+ const key = `${index}:${token}`;
+ if (token === "\n") return
+ {token}
+
+ );
+ })}
);
diff --git a/app/components/cinematic/CinematicEffects.test.tsx b/app/components/cinematic/CinematicEffects.test.tsx
index 3360dad..671231e 100644
--- a/app/components/cinematic/CinematicEffects.test.tsx
+++ b/app/components/cinematic/CinematicEffects.test.tsx
@@ -1,103 +1,13 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
import FilmGrain from "./FilmGrain";
-import ScrollVelocityText from "./ScrollVelocityText";
-import SectionDivider from "./SectionDivider";
-
-function mockReducedMotion(matches: boolean) {
- Object.defineProperty(window, "matchMedia", {
- writable: true,
- value: jest.fn().mockImplementation((query: string) => ({
- matches: query.includes("prefers-reduced-motion") ? matches : false,
- media: query,
- onchange: null,
- addListener: jest.fn(),
- removeListener: jest.fn(),
- addEventListener: jest.fn(),
- removeEventListener: jest.fn(),
- dispatchEvent: jest.fn(),
- })),
- });
-}
describe("static cinematic effects", () => {
- beforeEach(() => mockReducedMotion(false));
-
- it("renders grain and every divider without a canvas", () => {
+ it("renders grain without a canvas", () => {
const grain = render(
- Establish notebook layout
+ Establish layout
Sobre
Contato
@@ -42,7 +42,7 @@ afterEach(() => {
});
describe("home fragment navigation", () => {
- it("starts an unfragmented visit at the top after the notebook establishes layout", () => {
+ it("starts an unfragmented visit at the top after the home establishes layout", () => {
let restoredPosition = 3200;
jest
.spyOn(window, "scrollTo")
@@ -52,7 +52,7 @@ describe("home fragment navigation", () => {
});
render((null);
+ useCinematicScroll(mainRef);
+ // o layout da home é estável na montagem: a chegada por fragmento (#contato etc.) já pode ser resolvida
+ useEffect(() => onLayoutReady(), [onLayoutReady]);
return (
-
-
-
-
- é uma cena; useCinematicScroll liga as passagens entre elas. */}
+
+
+
-
-
-
-
- Experiência e tecnologias por trás das entregas
-
-
-
-
-
+
-
+
+
+
setOpen(event.currentTarget.open)}
+ className="ds-section !pt-0"
+ >
+
+ Experiência e tecnologias por trás das entregas
+
+ {children}
+
+ );
+}
diff --git a/app/components/cinematic/HeroField.tsx b/app/components/cinematic/HeroField.tsx
new file mode 100644
index 0000000..e0d52dc
--- /dev/null
+++ b/app/components/cinematic/HeroField.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { HeroFieldSceneProps } from "./HeroFieldScene";
+
+/** Etiquetas presas às camadas da cena (a cena calcula a posição de cada uma a cada quadro). */
+const TAGS = [
+ ["A tela", "o que sua equipe e seus clientes usam"],
+ ["As integrações", "seus sistemas conversando entre si"],
+ ["Os dados", "suas informações organizadas"],
+] as const;
+
+const Scene = dynamic(() => import("./HeroFieldScene"), {
+ ssr: false,
+});
+
+function supportsWebGL2() {
+ if (typeof window.WebGL2RenderingContext === "undefined") return false;
+ try {
+ const context = document.createElement("canvas").getContext("webgl2");
+ context?.getExtension("WEBGL_lose_context")?.loseContext();
+ return context !== null;
+ } catch {
+ return false;
+ }
+}
+
+/**
+ * Fundo do hero: liga a rolagem do hero à variável CSS --hero-p (0 no topo, 1 no fim do mergulho)
+ * e monta a cena WebGL só quando a página fica ociosa, com WebGL2 e sem preferência por movimento reduzido.
+ */
+export default function HeroField() {
+ const rootRef = useRef(null);
+ const progressRef = useRef(0);
+ const labelsRef = useRef<(HTMLElement | null)[]>([]);
+ const [mount, setMount] = useState(false);
+ const [visible, setVisible] = useState(false);
+ const [ready, setReady] = useState(false);
+ const [failed, setFailed] = useState(false);
+ // fim do mergulho: a cena já está no escuro e o hero se dissolve; parar o desenho poupa a GPU
+ const [done, setDone] = useState(false);
+
+ useEffect(() => {
+ const section = rootRef.current?.closest(".hero");
+ if (!section) return;
+ let frame = 0;
+ const update = () => {
+ frame = 0;
+ const rect = section.getBoundingClientRect();
+ const span = Math.max(rect.height - window.innerHeight, window.innerHeight * 0.8);
+ const p = Math.min(1, Math.max(0, -rect.top / span));
+ progressRef.current = p;
+ section.style.setProperty("--hero-p", p.toFixed(4));
+ setDone(p >= 0.999);
+ };
+ const queue = () => {
+ if (!frame) frame = requestAnimationFrame(update);
+ };
+ update();
+ window.addEventListener("scroll", queue, { passive: true });
+ window.addEventListener("resize", queue);
+
+ let intersecting = false;
+ const sync = () => setVisible(intersecting && !document.hidden);
+ const observer = new IntersectionObserver(([entry]) => {
+ intersecting = entry.isIntersecting;
+ sync();
+ });
+ observer.observe(section);
+ document.addEventListener("visibilitychange", sync);
+ return () => {
+ cancelAnimationFrame(frame);
+ window.removeEventListener("scroll", queue);
+ window.removeEventListener("resize", queue);
+ observer.disconnect();
+ document.removeEventListener("visibilitychange", sync);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+ if (!supportsWebGL2()) return;
+ // Título, botões e hidratação vêm primeiro; o Three.js entra quando o navegador fica ocioso.
+ if (typeof window.requestIdleCallback === "function") {
+ const id = window.requestIdleCallback(() => setMount(true), { timeout: 2500 });
+ return () => window.cancelIdleCallback(id);
+ }
+ const id = setTimeout(() => setMount(true), 1200);
+ return () => clearTimeout(id);
+ }, []);
+
+ const handleReady = useCallback(() => setReady(true), []);
+ const handleError = useCallback(() => setFailed(true), []);
+
+ return (
+
+ {mount && !failed && (
+ {
+ labelsRef.current[index] = element;
+ }}
+ className="hero-tag"
+ >
+ {title}
+ {text}
+
+ ))}
+
+ );
+}
diff --git a/app/components/cinematic/HeroFieldScene.tsx b/app/components/cinematic/HeroFieldScene.tsx
new file mode 100644
index 0000000..9c8859d
--- /dev/null
+++ b/app/components/cinematic/HeroFieldScene.tsx
@@ -0,0 +1,514 @@
+"use client";
+
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import {
+ Component,
+ type ReactNode,
+ type RefObject,
+ useEffect,
+ useMemo,
+ useRef,
+} from "react";
+import * as THREE from "three";
+
+export type HeroFieldSceneProps = {
+ progressRef: RefObject;
+ /** etiquetas em HTML presas às camadas (tela, integrações, dados), posicionadas a cada quadro */
+ labelsRef: RefObject<(HTMLElement | null)[]>;
+ visible: boolean;
+ onReady: () => void;
+ onError: () => void;
+};
+
+/*
+ * Um sistema desenhado com pontos, em três camadas que um leigo reconhece:
+ * em cima, a TELA de um aplicativo (janela, título, botão, cards); no meio, as INTEGRAÇÕES (sistemas
+ * ligados a uma central, com mensagens correndo pelas linhas); embaixo, os DADOS (uma tabela).
+ * Colunas de partículas sobem da tabela até a tela: a informação chegando a quem usa.
+ * Na entrada, os pontos saem de uma nuvem e se organizam; ao rolar, as camadas se afastam, ficam de
+ * frente e a câmera atravessa uma a uma (as legendas de HeroField explicam cada camada nessa hora).
+ * Tudo se move no vertex shader; o JavaScript só atualiza alguns uniforms por quadro.
+ */
+
+type Layer = 1 | 0 | -1; // 1 = tela, 0 = integrações, -1 = dados
+type PointStyle = { tone?: number; size?: number; alpha?: number };
+
+class FieldBuilder {
+ base: number[] = [];
+ to: number[] = [];
+ move: number[] = [];
+ tone: number[] = [];
+ size: number[] = [];
+ alpha: number[] = [];
+ constructor(private density: number) {}
+
+ point(x: number, y: number, z: number, style: PointStyle = {}, to?: [number, number, number]) {
+ this.base.push(x, y, z);
+ this.to.push(...(to ?? [x, y, z]));
+ this.move.push(to ? 1 : 0);
+ this.tone.push(style.tone ?? 0);
+ this.size.push(style.size ?? 0.02);
+ this.alpha.push(style.alpha ?? 0.7);
+ }
+ line(y: Layer, x0: number, z0: number, x1: number, z1: number, step: number, style?: PointStyle) {
+ const s = step * this.density;
+ const n = Math.max(1, Math.round(Math.hypot(x1 - x0, z1 - z0) / s));
+ for (let i = 0; i <= n; i++) this.point(x0 + ((x1 - x0) * i) / n, y, z0 + ((z1 - z0) * i) / n, style);
+ }
+ rect(y: Layer, x0: number, z0: number, x1: number, z1: number, step: number, style?: PointStyle) {
+ this.line(y, x0, z0, x1, z0, step, style);
+ this.line(y, x1, z0, x1, z1, step, style);
+ this.line(y, x1, z1, x0, z1, step, style);
+ this.line(y, x0, z1, x0, z0, step, style);
+ }
+ fill(y: Layer, x0: number, z0: number, x1: number, z1: number, step: number, style?: PointStyle) {
+ const s = step * this.density;
+ for (let x = x0; x <= x1 + 1e-6; x += s)
+ for (let z = z0; z <= z1 + 1e-6; z += s)
+ this.point(x + (Math.random() - 0.5) * s * 0.3, y, z + (Math.random() - 0.5) * s * 0.3, style);
+ }
+ ring(y: Layer, cx: number, cz: number, r: number, step: number, style?: PointStyle) {
+ const n = Math.max(8, Math.round((Math.PI * 2 * r) / (step * this.density)));
+ for (let i = 0; i < n; i++) {
+ const a = (i / n) * Math.PI * 2;
+ this.point(cx + Math.cos(a) * r, y, cz + Math.sin(a) * r, style);
+ }
+ }
+ disc(y: Layer, cx: number, cz: number, r: number, step: number, style?: PointStyle) {
+ for (let rr = r; rr > 0.005; rr -= step * this.density) this.ring(y, cx, cz, rr, step, style);
+ this.point(cx, y, cz, style);
+ }
+ /** partículas que correm de a até b (a posição é calculada no shader) */
+ flow(a: [number, number, number], b: [number, number, number], count: number, style?: PointStyle) {
+ const n = Math.max(2, Math.round(count / this.density));
+ for (let i = 0; i < n; i++) this.point(...a, style, b);
+ }
+}
+
+// z negativo = topo da tela quando a camada fica de frente para a câmera
+function drawScreen(f: FieldBuilder) {
+ const y: Layer = 1;
+ f.fill(y, -2.1, -1.4, 2.1, 1.4, 0.1, { alpha: 0.1 }); // superfície da tela
+ f.rect(y, -2.1, -1.4, 2.1, 1.4, 0.026, { alpha: 0.95 });
+ f.line(y, -2.1, -1.05, 2.1, -1.05, 0.03, { alpha: 0.6 }); // barra do navegador
+ for (const x of [-1.9, -1.72, -1.54]) f.disc(y, x, -1.23, 0.05, 0.025, { alpha: 0.8 });
+ f.rect(y, -1.1, -1.32, 1.3, -1.14, 0.035, { alpha: 0.45 }); // endereço
+ f.fill(y, -1.8, -0.82, 0.25, -0.58, 0.03, { alpha: 0.85 }); // título
+ f.line(y, -1.8, -0.38, 0.75, -0.38, 0.04, { alpha: 0.5 }); // texto
+ f.line(y, -1.8, -0.24, 0.35, -0.24, 0.04, { alpha: 0.5 });
+ f.fill(y, -1.8, -0.02, -0.75, 0.2, 0.028, { tone: 1, alpha: 0.95, size: 0.022 }); // botão
+ f.rect(y, 0.6, -0.82, 1.8, 0.2, 0.035, { alpha: 0.6 }); // imagem
+ f.fill(y, 0.6, -0.82, 1.8, 0.2, 0.08, { alpha: 0.25 });
+ for (const [x0, x1] of [
+ [-1.8, -0.7],
+ [-0.55, 0.55],
+ [0.7, 1.8],
+ ]) {
+ f.rect(y, x0, 0.45, x1, 1.2, 0.035, { alpha: 0.55 }); // cards
+ f.line(y, x0 + 0.12, 0.62, x1 - 0.3, 0.62, 0.045, { alpha: 0.5 });
+ f.line(y, x0 + 0.12, 0.76, x1 - 0.5, 0.76, 0.045, { alpha: 0.35 });
+ }
+}
+
+/** posições dos sistemas ligados à central; as colunas de dados sobem por eles */
+const NODES: [number, number][] = Array.from({ length: 6 }, (_, k) => {
+ const a = (k / 6) * Math.PI * 2 + Math.PI / 6;
+ return [Math.cos(a) * 1.7, Math.sin(a) * 1.05];
+});
+
+function drawIntegrations(f: FieldBuilder) {
+ const y: Layer = 0;
+ f.ring(y, 0, 0, 0.34, 0.02, { tone: 1, alpha: 0.95, size: 0.024 }); // central
+ f.disc(y, 0, 0, 0.2, 0.035, { tone: 1, alpha: 0.5 });
+ NODES.forEach(([x, z], k) => {
+ f.ring(y, x, z, 0.2, 0.02, { tone: 1, alpha: 0.9, size: 0.022 });
+ f.disc(y, x, z, 0.1, 0.03, { alpha: 0.6 });
+ const len = Math.hypot(x, z);
+ const ux = x / len;
+ const uz = z / len;
+ // linha da central até o sistema, e mensagens correndo nos dois sentidos
+ f.line(y, ux * 0.38, uz * 0.38, x - ux * 0.24, z - uz * 0.24, 0.06, { alpha: 0.35 });
+ f.flow([ux * 0.38, y, uz * 0.38], [x - ux * 0.24, y, z - uz * 0.24], 10, { tone: 1, alpha: 0.95, size: 0.026 });
+ f.flow([x - ux * 0.24, y, z - uz * 0.24], [ux * 0.38, y, uz * 0.38], 6, { alpha: 0.9, size: 0.024 });
+ const [nx, nz] = NODES[(k + 1) % NODES.length];
+ f.line(y, x, z, nx, nz, 0.08, { alpha: 0.15 });
+ });
+}
+
+function drawData(f: FieldBuilder) {
+ const y: Layer = -1;
+ const x0 = -2;
+ const x1 = 2;
+ const z0 = -1.3;
+ const z1 = 1.3;
+ const cols = [x0, -0.9, 0.2, 1.1, x1];
+ f.rect(y, x0, z0, x1, z1, 0.03, { alpha: 0.8 });
+ f.fill(y, x0, z0, x1, z0 + 0.32, 0.045, { tone: 0.6, alpha: 0.45 }); // cabeçalho da tabela
+ for (let z = z0 + 0.32; z < z1; z += 0.33) f.line(y, x0, z, x1, z, 0.04, { alpha: 0.4 });
+ for (const x of cols.slice(1, -1)) f.line(y, x, z0, x, z1, 0.04, { alpha: 0.4 });
+ for (let z = z0 + 0.48; z < z1; z += 0.33) {
+ for (let c = 0; c < cols.length - 1; c++) {
+ const start = cols[c] + 0.12;
+ const width = (cols[c + 1] - cols[c] - 0.24) * (0.35 + Math.random() * 0.6);
+ f.line(y, start, z, start + width, z, 0.045, { alpha: 0.55 }); // valores nas células
+ }
+ }
+}
+
+function buildField(dense: boolean) {
+ const f = new FieldBuilder(dense ? 1 : 1.5);
+ drawScreen(f);
+ drawIntegrations(f);
+ drawData(f);
+ // colunas: a informação sobe dos dados, passa pelos sistemas e chega à tela
+ for (const [x, z] of [[0, 0] as [number, number], ...NODES])
+ f.flow([x, -1, z], [x, 1, z], 40, { tone: 1, alpha: 0.6, size: 0.022 });
+
+ const count = f.move.length;
+ const scatter = new Float32Array(count * 3);
+ const rand = new Float32Array(count * 4);
+ for (let n = 0; n < count; n++) {
+ const u = Math.random() * 2 - 1;
+ const t = Math.random() * Math.PI * 2;
+ const s = Math.sqrt(1 - u * u);
+ const d = 4 + Math.random() * 7;
+ scatter.set([Math.cos(t) * s * d, u * d, Math.sin(t) * s * d], n * 3);
+ rand.set([Math.random(), Math.random(), Math.random(), Math.random()], n * 4);
+ }
+ const geometry = new THREE.BufferGeometry();
+ geometry.setAttribute("position", new THREE.Float32BufferAttribute(f.base, 3));
+ geometry.setAttribute("aTo", new THREE.Float32BufferAttribute(f.to, 3));
+ geometry.setAttribute("aMove", new THREE.Float32BufferAttribute(f.move, 1));
+ geometry.setAttribute("aTone", new THREE.Float32BufferAttribute(f.tone, 1));
+ geometry.setAttribute("aSize", new THREE.Float32BufferAttribute(f.size, 1));
+ geometry.setAttribute("aAlpha", new THREE.Float32BufferAttribute(f.alpha, 1));
+ geometry.setAttribute("aScatter", new THREE.BufferAttribute(scatter, 3));
+ geometry.setAttribute("aRand", new THREE.BufferAttribute(rand, 4));
+ geometry.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 12);
+ return geometry;
+}
+
+const vertexShader = /* glsl */ `
+ uniform float uTime;
+ uniform float uIntro;
+ uniform float uSpread;
+ uniform float uScroll;
+ uniform float uScale;
+ uniform float uFocus;
+ uniform float uFade;
+ uniform vec2 uMouse;
+ uniform float uMouseAmt;
+ attribute vec3 aTo;
+ attribute float aMove;
+ attribute float aTone;
+ attribute float aSize;
+ attribute float aAlpha;
+ attribute vec3 aScatter;
+ attribute vec4 aRand;
+ varying vec3 vColor;
+ varying float vAlpha;
+ varying float vSoft;
+
+ const vec3 PAPER = vec3(0.957, 0.949, 0.929);
+ const vec3 LIME = vec3(0.8, 1.0, 0.0);
+
+ void main() {
+ // partículas em movimento correm de position até aTo e recomeçam
+ float f = fract(uTime * (0.1 + aRand.x * 0.08) + aRand.y);
+ vec3 b = mix(position, aTo, aMove * f);
+ vec3 p = vec3(b.x, b.y * uSpread, b.z);
+ float still = 1.0 - aMove;
+
+ float wave = sin(b.x * 1.7 + uTime * 0.55 + b.y * 2.1) * cos(b.z * 1.3 - uTime * 0.4);
+ p.y += wave * (0.02 + uScroll * 0.2) * still;
+
+ // cursor: uma onda que levanta a camada e acende os pontos em verde
+ float d = length(b.xz - uMouse);
+ float lift = exp(-d * d * 2.2) * uMouseAmt * still;
+ p.y += lift * 0.3 + sin(d * 7.0 - uTime * 3.5) * lift * 0.05;
+
+ // entrada: cada ponto sai da nuvem com atraso próprio
+ float t = clamp((uIntro - aRand.z * 0.4) / 0.6, 0.0, 1.0);
+ float e = 1.0 - pow(1.0 - t, 4.0);
+ p = mix(aScatter, p, e);
+
+ vec4 mv = modelViewMatrix * vec4(p, 1.0);
+ gl_Position = projectionMatrix * mv;
+ float depth = -mv.z;
+
+ float blur = clamp(abs(depth - uFocus) * 0.3, 0.0, 1.6);
+ float size = aSize * (0.8 + aRand.w * 0.4);
+ gl_PointSize = min(size * uScale / max(depth, 0.05) * (1.0 + blur * 1.3), 64.0);
+
+ float alpha = aAlpha * mix(1.0, sin(f * 3.14159), aMove);
+ alpha *= (0.25 + 0.75 * e) / (1.0 + blur * 1.5);
+ alpha *= smoothstep(0.25, 1.6, depth) * uFade;
+ vAlpha = alpha;
+ vSoft = clamp(0.35 + blur * 0.45, 0.35, 1.0);
+ vColor = mix(PAPER, LIME, clamp(aTone + lift * 1.6, 0.0, 1.0));
+ }
+`;
+
+const fragmentShader = /* glsl */ `
+ varying vec3 vColor;
+ varying float vAlpha;
+ varying float vSoft;
+ void main() {
+ float r = length(gl_PointCoord - 0.5) * 2.0;
+ float a = 1.0 - smoothstep(1.0 - vSoft, 1.0, r);
+ if (a <= 0.0) discard;
+ gl_FragColor = vec4(vColor, a * vAlpha);
+ }
+`;
+
+const smooth = (a: number, b: number, x: number) => {
+ const t = Math.min(1, Math.max(0, (x - a) / (b - a)));
+ return t * t * (3 - 2 * t);
+};
+
+/** Interpola entre quadros-chave [progresso, valor] com suavização em cada trecho. */
+function keyframes(frames: readonly (readonly [number, number])[], p: number) {
+ if (p <= frames[0][0]) return frames[0][1];
+ for (let i = 1; i < frames.length; i++) {
+ const [p1, v1] = frames[i];
+ if (p <= p1) {
+ const [p0, v0] = frames[i - 1];
+ return v0 + (v1 - v0) * smooth(p0, p1, p);
+ }
+ }
+ return frames[frames.length - 1][1];
+}
+
+/** Distância mínima entre as camadas no fim do mergulho: cada uma vira um "cômodo" que a câmera visita. */
+const SPREAD = 5.5;
+/** Distância para enquadrar uma camada inteira numa tela larga. */
+const FRAME = 5.2;
+
+/*
+ * Coreografia da câmera (z): afasta para enquadrar a tela inteira, atravessa, enquadra as integrações,
+ * atravessa, enquadra os dados, atravessa. As legendas de Hero.tsx (--from/--to em globals.css) seguem
+ * estes mesmos intervalos: tela 0,26–0,46; integrações 0,52–0,71; dados 0,76–0,92.
+ * Em tela vertical (celular) a distância de enquadramento cresce para a camada caber na largura, e as
+ * camadas se afastam mais para a câmera caber entre elas.
+ */
+function cameraFrames(rest: number, spread: number, frame: number) {
+ return [
+ [0, rest],
+ [0.28, spread + frame],
+ [0.44, spread + frame * 0.87],
+ [0.5, spread - 0.3],
+ [0.55, frame],
+ [0.69, frame * 0.87],
+ [0.74, -0.3],
+ [0.78, -spread + frame],
+ [0.89, -spread + frame * 0.87],
+ [0.95, -spread - 0.3],
+ [1, -spread - 2],
+ ] as const;
+}
+
+// ponto de cada camada onde a etiqueta se prende (canto direito da frente), na ordem tela, integrações, dados
+const LABEL_ANCHORS: [number, Layer, number][] = [
+ [2.1, 1, 1.4],
+ [1.95, 0, 0.9],
+ [2, -1, 1.3],
+];
+
+function Field({ progressRef, labelsRef, onReady, onError }: HeroFieldSceneProps) {
+ const { gl, camera, size } = useThree();
+ const group = useRef(null);
+ const dense = useMemo(
+ () => window.innerWidth >= 900 && (navigator.hardwareConcurrency ?? 4) >= 4,
+ [],
+ );
+ const geometry = useMemo(() => buildField(dense), [dense]);
+ const material = useMemo(
+ () =>
+ new THREE.ShaderMaterial({
+ vertexShader,
+ fragmentShader,
+ transparent: true,
+ depthWrite: false,
+ blending: THREE.AdditiveBlending,
+ uniforms: {
+ uTime: { value: 0 },
+ uIntro: { value: 0 },
+ uSpread: { value: 1.05 },
+ uScroll: { value: 0 },
+ uScale: { value: 1 },
+ uFocus: { value: 9 },
+ uFade: { value: 1 },
+ uMouse: { value: new THREE.Vector2(9, 9) },
+ uMouseAmt: { value: 0 },
+ },
+ }),
+ [],
+ );
+ const state = useRef({
+ progress: 0,
+ pointer: new THREE.Vector2(),
+ lastMove: -10,
+ mouse: new THREE.Vector2(),
+ tilt: new THREE.Vector2(),
+ frames: 0,
+ });
+ const helpers = useMemo(
+ () => ({
+ ray: new THREE.Raycaster(),
+ plane: new THREE.Plane(),
+ hit: new THREE.Vector3(),
+ anchor: new THREE.Vector3(),
+ zero: new THREE.Vector2(),
+ target: new THREE.Vector2(),
+ }),
+ [],
+ );
+
+ useEffect(() => {
+ const onMove = (event: PointerEvent) => {
+ if (event.pointerType !== "mouse") return;
+ const s = state.current;
+ s.pointer.set(
+ (event.clientX / window.innerWidth) * 2 - 1,
+ -(event.clientY / window.innerHeight) * 2 + 1,
+ );
+ s.lastMove = performance.now() / 1000;
+ };
+ const onLost = (event: Event) => {
+ event.preventDefault();
+ onError();
+ };
+ window.addEventListener("pointermove", onMove, { passive: true });
+ gl.domElement.addEventListener("webglcontextlost", onLost);
+ return () => {
+ window.removeEventListener("pointermove", onMove);
+ gl.domElement.removeEventListener("webglcontextlost", onLost);
+ geometry.dispose();
+ material.dispose();
+ };
+ }, [gl, geometry, material, onError]);
+
+ useFrame((frame, delta) => {
+ const g = group.current;
+ if (!g) return;
+ const dt = Math.min(delta, 1 / 20);
+ const s = state.current;
+ const u = material.uniforms;
+ const time = frame.clock.elapsedTime;
+
+ // rolagem amortecida: o mergulho segue o dedo com um leve atraso de câmera
+ s.progress += ((progressRef.current ?? 0) - s.progress) * (1 - Math.exp(-dt * 5));
+ const p = s.progress;
+ const aspect = size.width / size.height;
+ const wide = aspect > 1.1;
+ const tanHalf = Math.tan(THREE.MathUtils.degToRad((camera as THREE.PerspectiveCamera).fov / 2));
+ // enquadramento pela largura: a camada (4,2 de largura) com margem cabe na tela, inclusive em pé
+ const frameDist = Math.max(FRAME, 2.35 / (tanHalf * aspect));
+ const spreadMax = Math.max(SPREAD, frameDist + 0.6);
+ const rest = Math.max(9, frameDist * 1.1);
+
+ u.uTime.value = time;
+ u.uIntro.value = Math.min(1, u.uIntro.value + dt / 2.6);
+ u.uScroll.value = p;
+ // as camadas só se afastam enquanto ficam de frente: inclinadas e afastadas sairiam do quadro
+ const face = smooth(0.02, 0.28, p);
+ u.uSpread.value = 1.05 + (spreadMax - 1.05) * face * face;
+ u.uFade.value = 1 - smooth(0.93, 1, p);
+ // com a câmera mais longe (celular), os pontos crescem um pouco para o desenho não sumir
+ u.uScale.value =
+ ((gl.getPixelRatio() * size.height * 0.5) / tanHalf) * Math.sqrt(frameDist / FRAME);
+
+ // sem mouse (toque, ou mouse parado), um cursor fantasma percorre a tela
+ const mouseActive = time - s.lastMove < 2.5 && s.lastMove > 0 ? 1 : 0;
+ s.tilt.lerp(mouseActive ? s.pointer : helpers.zero, 1 - Math.exp(-dt * 3));
+
+ // em repouso, vista de três quartos que balança devagar; ao mergulhar, as camadas ficam de frente e retas
+ g.rotation.set(
+ 0.42 + (Math.PI / 2 - 0.42) * face - s.tilt.y * 0.08,
+ (-0.45 + Math.sin(time * 0.2) * 0.08) * (1 - face) + s.tilt.x * 0.15 * (1 - face),
+ 0,
+ );
+ const settle = 1 - smooth(0, 0.28, p);
+ // em repouso: à direita do texto na tela larga; no celular, mais abaixo, atrás dos botões
+ g.position.set(wide ? 1.7 * settle : 0, (wide ? -0.1 : -rest * tanHalf * 0.38) * settle, 0);
+ camera.position.z = keyframes(cameraFrames(rest, spreadMax, frameDist), p);
+ // foco na próxima camada à frente da câmera (as de trás desfocam como em uma lente)
+ const spread = u.uSpread.value;
+ const ahead = [spread, 0, -spread].find((z) => z < camera.position.z - 0.2) ?? -spread;
+ u.uFocus.value = Math.max(1.5, camera.position.z - ahead);
+ g.updateMatrixWorld();
+
+ if (mouseActive) {
+ helpers.ray.setFromCamera(s.pointer, camera);
+ helpers.plane
+ .set(new THREE.Vector3(0, 1, 0), -u.uSpread.value)
+ .applyMatrix4(g.matrixWorld);
+ if (helpers.ray.ray.intersectPlane(helpers.plane, helpers.hit)) {
+ g.worldToLocal(helpers.hit);
+ s.mouse.lerp(helpers.target.set(helpers.hit.x, helpers.hit.z), 1 - Math.exp(-dt * 10));
+ }
+ } else {
+ s.mouse.lerp(
+ helpers.target.set(Math.sin(time * 0.31) * 1.5, Math.sin(time * 0.23 + 1.3) * 1.1),
+ 1 - Math.exp(-dt * 1.5),
+ );
+ }
+ u.uMouse.value.copy(s.mouse);
+ const targetAmt = (mouseActive ? 0.8 : 0.4) * (1 - smooth(0.05, 0.3, p));
+ u.uMouseAmt.value += (targetAmt - u.uMouseAmt.value) * (1 - Math.exp(-dt * 4));
+
+ // etiquetas: projeta o canto de cada camada na tela e as esconde quando o mergulho começa
+ const labels = labelsRef.current ?? [];
+ const shown = smooth(0.75, 1, u.uIntro.value) * (1 - smooth(0.04, 0.16, p));
+ LABEL_ANCHORS.forEach(([x, layer, z], index) => {
+ const label = labels[index];
+ if (!label) return;
+ helpers.anchor.set(x, layer * u.uSpread.value, z).applyMatrix4(g.matrixWorld).project(camera);
+ const px = ((helpers.anchor.x + 1) / 2) * size.width;
+ const py = ((1 - helpers.anchor.y) / 2) * size.height;
+ label.style.transform = `translate3d(${px.toFixed(1)}px, ${py.toFixed(1)}px, 0)`;
+ label.style.opacity = shown.toFixed(3);
+ });
+
+ if (++s.frames === 2) onReady();
+ });
+
+ return (
+
+
+ );
+}
+
+class SceneBoundary extends Component<
+ { children: ReactNode; onError: () => void },
+ { failed: boolean }
+> {
+ state = { failed: false };
+ static getDerivedStateFromError() {
+ return { failed: true };
+ }
+ componentDidCatch() {
+ this.props.onError();
+ }
+ render() {
+ return this.state.failed ? null : this.props.children;
+ }
+}
+
+export default function HeroFieldScene(props: HeroFieldSceneProps) {
+ return (
+
+
+
+
+ );
+}
diff --git a/app/components/cinematic/HeroSystem.tsx b/app/components/cinematic/HeroSystem.tsx
deleted file mode 100644
index ac8ee0e..0000000
--- a/app/components/cinematic/HeroSystem.tsx
+++ /dev/null
@@ -1,325 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import Image from "next/image";
-import Link from "next/link";
-import type { PointerEvent } from "react";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-import type { HeroSystemLayer, HeroSystemSceneProps } from "./HeroSystemScene";
-
-const DynamicScene = dynamic(
- () => import("./HeroSystemScene"),
- { ssr: false },
-);
-
-const LAYERS: { id: HeroSystemLayer; label: string; description: string }[] = [
- {
- id: "overview",
- label: "Visão geral",
- description:
- "Da tela ao que acontece por trás: interface, integrações e dados trabalhando juntos.",
- },
- {
- id: "interface",
- label: "Interface",
- description:
- "A parte que as pessoas usam. Aqui, uma tela real do NutriScan, projeto do portfólio.",
- },
- {
- id: "integrations",
- label: "Integrações",
- description:
- "Conexões entre sistemas para levar informações de uma etapa da operação à próxima.",
- },
- {
- id: "data",
- label: "Dados",
- description:
- "A base que organiza e guarda as informações de que a operação precisa.",
- },
-];
-
-const REST_POSE = { x: 0, y: 0 };
-type Gesture = {
- id: number;
- x: number;
- y: number;
- startPose: number;
- width: number;
- dragging: boolean;
-};
-
-export default function HeroSystem() {
- const descriptionId = useId();
- const viewportRef = useRef(null);
- const frameRef = useRef(null);
- const nextPoseRef = useRef(REST_POSE);
- const gestureRef = useRef(null);
- const suppressClickRef = useRef(false);
- const [activeLayer, setActiveLayer] = useState("overview");
- const [pose, setPose] = useState(REST_POSE);
- const [canRender, setCanRender] = useState(false);
- const [ready, setReady] = useState(false);
- const [failed, setFailed] = useState(false);
- const [visible, setVisible] = useState(false);
- const renderScene = canRender && !failed;
- const sceneActive = renderScene && ready;
-
- useEffect(() => {
- const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
- let supported: boolean | undefined;
- const updateCapability = () => {
- if (preference.matches) {
- setCanRender(false);
- setReady(false);
- return;
- }
- if (supported === undefined) {
- if (typeof window.WebGL2RenderingContext === "undefined") {
- supported = false;
- } else {
- try {
- const canvas = document.createElement("canvas");
- const context = canvas.getContext("webgl2");
- supported = context !== null;
- context?.getExtension("WEBGL_lose_context")?.loseContext();
- } catch {
- supported = false;
- }
- }
- }
- setCanRender(supported);
- };
- updateCapability();
- preference.addEventListener("change", updateCapability);
- return () => preference.removeEventListener("change", updateCapability);
- }, []);
-
- useEffect(() => {
- const viewport = viewportRef.current;
- if (!viewport) return;
- let intersecting = false;
- const updateVisibility = () => {
- setVisible(intersecting && document.visibilityState === "visible");
- };
- const observer = new IntersectionObserver(([entry]) => {
- intersecting = entry.isIntersecting;
- updateVisibility();
- });
- observer.observe(viewport);
- document.addEventListener("visibilitychange", updateVisibility);
- return () => {
- observer.disconnect();
- document.removeEventListener("visibilitychange", updateVisibility);
- };
- }, []);
-
- const queuePose = useCallback((x: number, y: number) => {
- nextPoseRef.current = {
- x: Math.max(-1, Math.min(1, x)),
- y: Math.max(-1, Math.min(1, y)),
- };
- if (frameRef.current !== null) return;
- frameRef.current = window.requestAnimationFrame(() => {
- frameRef.current = null;
- setPose(nextPoseRef.current);
- });
- }, []);
-
- const releaseGesture = useCallback(() => {
- const gesture = gestureRef.current;
- gestureRef.current = null;
- const viewport = viewportRef.current;
- if (gesture && viewport?.hasPointerCapture(gesture.id)) {
- viewport.releasePointerCapture(gesture.id);
- }
- }, []);
-
- useEffect(() => {
- if (!sceneActive || !visible) {
- releaseGesture();
- if (frameRef.current !== null)
- window.cancelAnimationFrame(frameRef.current);
- frameRef.current = null;
- nextPoseRef.current = REST_POSE;
- setPose(REST_POSE);
- }
- return () => {
- releaseGesture();
- if (frameRef.current !== null)
- window.cancelAnimationFrame(frameRef.current);
- frameRef.current = null;
- };
- }, [sceneActive, visible, releaseGesture]);
-
- const handleReady = useCallback(() => setReady(true), []);
- const handleError = useCallback(() => {
- setFailed(true);
- setReady(false);
- }, []);
- const selectSceneLayer = useCallback((layer: HeroSystemLayer) => {
- if (!suppressClickRef.current) setActiveLayer(layer);
- }, []);
-
- const handlePointerDown = (event: PointerEvent) => {
- if (!sceneActive || !visible || !event.isPrimary || event.button !== 0)
- return;
- suppressClickRef.current = false;
- gestureRef.current = {
- id: event.pointerId,
- x: event.clientX,
- y: event.clientY,
- startPose: nextPoseRef.current.x,
- width: event.currentTarget.clientWidth,
- dragging: false,
- };
- };
-
- const handlePointerMove = (event: PointerEvent) => {
- if (!sceneActive || !visible) return;
- const gesture = gestureRef.current;
- if (gesture && gesture.id === event.pointerId) {
- const dx = event.clientX - gesture.x;
- const dy = event.clientY - gesture.y;
- if (!gesture.dragging) {
- if (Math.abs(dy) > 7 && Math.abs(dy) > Math.abs(dx)) {
- releaseGesture();
- return;
- }
- if (Math.abs(dx) < 7) return;
- gesture.dragging = true;
- suppressClickRef.current = true;
- event.currentTarget.setPointerCapture(event.pointerId);
- }
- queuePose(gesture.startPose + (dx / Math.max(gesture.width, 1)) * 3, 0);
- return;
- }
- if (event.pointerType !== "mouse" || event.buttons !== 0) return;
- const bounds = event.currentTarget.getBoundingClientRect();
- queuePose(
- ((event.clientX - bounds.left) / Math.max(bounds.width, 1)) * 2 - 1,
- ((event.clientY - bounds.top) / Math.max(bounds.height, 1)) * 2 - 1,
- );
- };
-
- const cancelGesture = () => {
- releaseGesture();
- if (sceneActive && visible) queuePose(0, 0);
- };
-
- return (
-
-
{
- if (!gestureRef.current?.dragging) cancelGesture();
- }}
- onClickCapture={(event) => {
- if (suppressClickRef.current) event.stopPropagation();
- }}
- >
-
-
-
-
- Interface real: NutriScan
-
-
-
-
-
-
- {renderScene && (
-
-
- )}
- {sceneActive && (
-
-
- Mova ou arraste para explorar
-
-
- Arraste para os lados para explorar
-
-
- )}
-
-
-
-
- {LAYERS.map((layer) => (
- {
- suppressClickRef.current = false;
- setActiveLayer(layer.id);
- if (layer.id === "overview" && sceneActive && visible)
- queuePose(0, 0);
- }}
- className={`min-h-11 rounded-sm px-sp-2 py-sp-2 text-[12px] font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)] motion-reduce:transition-none sm:text-[13px] ${activeLayer === layer.id ? "bg-[var(--slash)] text-[var(--ink)]" : "bg-white/5 text-white/75 hover:bg-white/10 hover:text-white"}`}
- >
- {layer.label}
-
- ))}
-
-
- {LAYERS.find((layer) => layer.id === activeLayer)?.description}
-
-
-
- Camadas ilustrativas de um sistema
-
-
- Interface real: NutriScan
-
-
-
-
= {
- overview: [
- [-0.38, -0.42, 0.9, 1],
- [0.12, 0.25, 0, 1],
- [0.65, 0.92, -0.9, 1],
- ],
- interface: [
- [-0.1, -0.15, 1.3, 1.04],
- [0.36, 0.6, -0.45, 0.91],
- [0.8, 1.08, -1.25, 0.88],
- ],
- integrations: [
- [-0.82, -1.05, 1.05, 0.77],
- [0.12, 0.55, 0.55, 1.02],
- [0.76, 1.16, -1, 0.88],
- ],
- data: [
- [-0.9, -1.25, 1.02, 0.68],
- [-0.44, -0.48, 0.18, 0.81],
- [0.38, 1.08, 0.55, 1.02],
- ],
-};
-const NODE_X = [-1.28, 0, 1.28];
-const SERVER_ROWS = [-0.47, -0.17, 0.13];
-
-function canvasContext(width: number, height: number) {
- const canvas = document.createElement("canvas");
- canvas.width = width;
- canvas.height = height;
- const context = canvas.getContext("2d");
- if (!context) throw new Error("Canvas 2D is unavailable");
- return { canvas, context };
-}
-
-function asTexture(canvas: HTMLCanvasElement) {
- const texture = new THREE.CanvasTexture(canvas);
- texture.colorSpace = THREE.SRGBColorSpace;
- texture.anisotropy = 4;
- return texture;
-}
-
-function createBoardTexture(layer: "integrations" | "data") {
- const { canvas, context: ctx } = canvasContext(1024, 640);
- ctx.fillStyle = "#121a1b";
- ctx.fillRect(0, 0, 1024, 640);
- ctx.strokeStyle = "#293737";
- ctx.lineWidth = 1;
- for (let x = 32; x < 1024; x += 40) {
- for (let y = 32; y < 640; y += 40) {
- ctx.beginPath();
- ctx.moveTo(x - 2, y);
- ctx.lineTo(x + 2, y);
- ctx.stroke();
- }
- }
- ctx.fillStyle = "#edf0e6";
- ctx.font = "500 32px sans-serif";
- ctx.fillText(layer === "integrations" ? "Integrações" : "Dados", 46, 61);
- ctx.fillStyle = LIME;
- ctx.fillRect(932, 43, 42, 5);
- ctx.strokeStyle = "#455c50";
- ctx.lineWidth = 3;
- const endpoints = [175, 512, 849];
- for (const x of endpoints) {
- ctx.beginPath();
- ctx.moveTo(x, 132);
- ctx.lineTo(x, 231);
- ctx.lineTo(512, 300);
- ctx.lineTo(512, 490);
- ctx.lineTo(x, 490);
- ctx.lineTo(x, 556);
- ctx.stroke();
- ctx.fillStyle = LIME;
- ctx.beginPath();
- ctx.arc(x, 556, 6, 0, Math.PI * 2);
- ctx.fill();
- }
- ctx.strokeStyle = "#a6c748";
- ctx.lineWidth = 2;
- ctx.beginPath();
- ctx.moveTo(52, 342);
- ctx.lineTo(125, 342);
- ctx.lineTo(206, 422);
- ctx.lineTo(820, 422);
- ctx.lineTo(899, 342);
- ctx.lineTo(972, 342);
- ctx.stroke();
- return asTexture(canvas);
-}
-
-function useSceneTextures(onError: () => void) {
- const [textures, setTextures] = useState(null);
- useEffect(() => {
- let cancelled = false;
- const owned: THREE.Texture[] = [];
- const image = new Image();
- image.decoding = "async";
- image.onload = () => {
- if (cancelled) return;
- try {
- const { canvas, context } = canvasContext(1600, 800);
- // Keep the actual product interface; exclude the old metrics footer.
- context.drawImage(image, 0, 0, 1600, 800, 0, 0, 1600, 800);
- const screen = asTexture(canvas);
- owned.push(screen);
- const integrations = createBoardTexture("integrations");
- owned.push(integrations);
- const data = createBoardTexture("data");
- owned.push(data);
- setTextures({ screen, integrations, data });
- } catch {
- onError();
- }
- };
- image.onerror = () => {
- if (!cancelled) onError();
- };
- image.src = "/assets/notebook/nutriscan.webp";
- return () => {
- cancelled = true;
- image.onload = null;
- image.onerror = null;
- image.removeAttribute("src");
- for (const texture of owned) texture.dispose();
- };
- }, [onError]);
- return textures;
-}
-
-function Plate({ selected }: { selected: boolean }) {
- return (
- <>
-
-
-
-
-
-
- {[-1.96, 1.96].map((x) => (
-
-
- ))}
-
- );
-}
-
-function InterfacePlate({ texture }: { texture: THREE.Texture }) {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-function IntegrationNodes() {
- return (
- <>
- {NODE_X.map((x) => (
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
- {[-0.15, 0, 0.15].map((y) => (
-
-
- ))}
-
- );
-}
-
-function DataVolumes() {
- return (
- <>
- {[-1.25, 0].map((x) => (
-
-
-
- {SERVER_ROWS.map((y) => (
-
-
-
-
-
-
-
-
- ))}
-
- ))}
-
- {[-0.2, 0, 0.2].map((y) => (
-
-
-
-
-
-
- ))}
-
-
- );
-}
-
-function SystemAssembly(
- props: HeroSystemSceneProps & {
- textures: SceneTextures;
- reducedMotion: boolean;
- },
-) {
- const { textures, reducedMotion } = props;
- const root = useRef(null);
- const plates = useRef<(THREE.Group | null)[]>([]);
- const entrance = useRef(0);
- const ready = useRef(false);
- const failed = useRef(false);
- const { camera, gl, invalidate, size } = useThree();
-
- useLayoutEffect(() => {
- if (!(camera instanceof THREE.PerspectiveCamera)) return;
- camera.zoom = Math.min(1.1, size.width / Math.max(size.height, 1) / 1.12);
- camera.updateProjectionMatrix();
- if (props.visible) invalidate();
- }, [camera, invalidate, props.visible, size.height, size.width]);
-
- useEffect(() => {
- if (props.visible) invalidate();
- }, [invalidate, props]);
-
- // Render on demand and stop scheduling as soon as every transform settles.
- useFrame((state, delta) => {
- if (
- !props.visible ||
- document.hidden ||
- failed.current ||
- !root.current ||
- gl.getContext().isContextLost()
- )
- return;
- const dt = Math.min(delta, 1 / 30);
- entrance.current = reducedMotion
- ? 1
- : Math.min(1, entrance.current + dt / 1.05);
- const assembly = (1 - entrance.current) ** 3;
- const alpha = reducedMotion ? 1 : 1 - Math.exp(-11 * dt);
- const targetX = -0.12 + Math.max(-1, Math.min(1, props.pose.y)) * 0.11;
- const targetY = -0.36 + Math.max(-1, Math.min(1, props.pose.x)) * 0.16;
- let moving = entrance.current < 1;
- const rotation = root.current.rotation;
- rotation.x += (targetX - rotation.x) * alpha;
- rotation.y += (targetY - rotation.y) * alpha;
- if (
- Math.abs(targetX - rotation.x) + Math.abs(targetY - rotation.y) >
- 0.0004
- )
- moving = true;
- else {
- rotation.x = targetX;
- rotation.y = targetY;
- }
- const targets = LAYER_POSES[props.activeLayer];
- for (let index = 0; index < LAYERS.length; index++) {
- const plate = plates.current[index];
- if (!plate) continue;
- const target = targets[index];
- const x = target[0] + (index - 1) * assembly * 0.65;
- const y = target[1] + (index - 1) * assembly * 0.5;
- const z = target[2] - (3 - index) * assembly * 0.8;
- plate.position.x += (x - plate.position.x) * alpha;
- plate.position.y += (y - plate.position.y) * alpha;
- plate.position.z += (z - plate.position.z) * alpha;
- const scale = plate.scale.x + (target[3] - plate.scale.x) * alpha;
- plate.scale.setScalar(scale);
- const remaining =
- Math.abs(x - plate.position.x) +
- Math.abs(y - plate.position.y) +
- Math.abs(z - plate.position.z) +
- Math.abs(target[3] - scale);
- if (remaining > 0.0008) moving = true;
- else {
- plate.position.set(x, y, z);
- plate.scale.setScalar(target[3]);
- }
- }
- try {
- gl.render(state.scene, camera);
- if (!ready.current && !gl.getContext().isContextLost()) {
- ready.current = true;
- props.onReady();
- }
- } catch {
- failed.current = true;
- props.onError();
- return;
- }
- if (moving) invalidate();
- }, 1);
-
- return (
- <>
-
- {LAYERS.map((layer, index) => (
- {
- plates.current[index] = group;
- }}
- position={[
- LAYER_POSES.overview[index][0],
- LAYER_POSES.overview[index][1] + (index - 1) * 0.5,
- LAYER_POSES.overview[index][2] - (3 - index) * 0.8,
- ]}
- onPointerUp={(event) => {
- event.stopPropagation();
- props.onSelectLayer(layer);
- }}
- >
-
-
- {layer === "integrations" ? (
-
- ))}
-
-
- );
-}
-
-function SceneContent(
- props: HeroSystemSceneProps & { reducedMotion: boolean },
-) {
- const textures = useSceneTextures(props.onError);
- const gl = useThree((state) => state.gl);
- useEffect(() => {
- const canvas = gl.domElement;
- const handleContextLost = (event: Event) => {
- event.preventDefault();
- props.onError();
- };
- canvas.addEventListener("webglcontextlost", handleContextLost);
- return () =>
- canvas.removeEventListener("webglcontextlost", handleContextLost);
- }, [gl, props.onError]);
- return textures ?
-
-
-
-
-
- );
-}
diff --git a/app/components/cinematic/ScrollVelocityText.tsx b/app/components/cinematic/ScrollVelocityText.tsx
deleted file mode 100644
index 43e78a0..0000000
--- a/app/components/cinematic/ScrollVelocityText.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-
-import { useEffect, useId, useState } from "react";
-
-interface ScrollVelocityTextProps {
- text: string;
- direction: "left" | "right";
- className?: string;
-}
-
-const GROUPS = [0, 1] as const;
-
-export default function ScrollVelocityText({
- text,
- direction,
- className = "",
-}: ScrollVelocityTextProps) {
- const trackId = useId();
- const [isPaused, setIsPaused] = useState(false);
- const [shouldReduceMotion, setShouldReduceMotion] = useState(false);
-
- useEffect(() => {
- const media = window.matchMedia("(prefers-reduced-motion: reduce)");
- setShouldReduceMotion(media.matches);
- const updatePreference = (event: MediaQueryListEvent) => {
- setShouldReduceMotion(event.matches);
- };
- media.addEventListener("change", updatePreference);
- return () => media.removeEventListener("change", updatePreference);
- }, []);
-
- const animationPaused = shouldReduceMotion || isPaused;
-
- return (
-
-
-
- {GROUPS.map((group) => (
-
-
- {text}
-
- •
-
-
-
- ))}
-
-
-
- {!shouldReduceMotion ? (
-
setIsPaused((paused) => !paused)}
- >
- {isPaused ? "Retomar animação" : "Pausar animação"}
-
- ) : null}
-
-
- );
- }
-
- if (variant === "pulse") {
- return (
-
- {PULSE_DOTS.map((dot) => (
-
- );
- }
-
- return (
-
-
- Divisor decorativo
-
-
recebe scale (o R3F mede o canvas com getBoundingClientRect);
+ * - a seção que saiu fica invisível depois da passagem, para não aparecer atrás de transparências.
+ * Os valores são funções para serem recalculados quando a janela muda de tamanho (invalidateOnRefresh).
+ */
+
+const vh = () => window.innerHeight;
+// origem no meio da parte visível da seção que sai (a última altura de tela dela)
+const visibleCenter = (el: HTMLElement) => () => `50% ${el.offsetHeight - vh() / 2}px`;
+
+/** Topo do elemento na página pelo layout (offsetTop ignora os transforms das transições, getBoundingClientRect não). */
+export function pageTop(el: HTMLElement) {
+ let top = 0;
+ for (let node: HTMLElement | null = el; node; node = node.offsetParent as HTMLElement | null)
+ top += node.offsetTop;
+ return top;
+}
+
+// a seção que sai fica parada na tela enquanto a próxima entra
+const holdPrev = (tl: gsap.core.Timeline, prev: HTMLElement) =>
+ tl.fromTo(prev, { y: 0 }, { y: vh }, 0);
+// a seção que entra também fica parada no topo: a transição acontece "no lugar"
+const holdNext = (tl: gsap.core.Timeline, next: HTMLElement) =>
+ tl.fromTo(next, { y: () => -vh() }, { y: 0 }, 0);
+
+// uma linguagem diferente por passagem, na ordem das seções da home
+const TRANSITIONS: Transition[] = [
+ // hero → projetos: o mergulho termina no escuro, o hero some e os projetos abrem como tela de cinema
+ (tl, prev, next) => {
+ holdPrev(tl, prev);
+ holdNext(tl, next);
+ const band = (open: number) => () =>
+ `inset(${(vh() * (1 - open)) / 2}px 0px ${next.offsetHeight - vh() + (vh() * (1 - open)) / 2}px 0px)`;
+ tl.fromTo(prev, { autoAlpha: 1 }, { autoAlpha: 0, duration: 0.4 }, 0).fromTo(
+ next,
+ { opacity: 0, clipPath: band(0.36) },
+ { opacity: 1, clipPath: band(1), duration: 0.65 },
+ 0.35,
+ );
+ },
+ // projetos → modalidades: uma íris abre do centro enquanto a anterior avança contra a câmera
+ (tl, prev, next) => {
+ holdPrev(tl, prev);
+ holdNext(tl, next);
+ const center = () => `at 50% ${vh() / 2}px`;
+ tl.fromTo(
+ prev,
+ { scale: 1, opacity: 1, transformOrigin: visibleCenter(prev) },
+ { scale: 1.18, opacity: 0.2 },
+ 0,
+ )
+ // power1.in: o círculo cresce devagar no começo, sem tomar a tela antes do fim da passagem
+ .fromTo(
+ next,
+ { clipPath: () => `circle(0px ${center()})` },
+ {
+ clipPath: () => `circle(${Math.hypot(window.innerWidth / 2, vh() / 2)}px ${center()})`,
+ ease: "power1.in",
+ },
+ 0,
+ );
+ },
+ // modalidades → IA: corte lateral, uma tela empurra a outra
+ (tl, prev, next) => {
+ holdPrev(tl, prev);
+ holdNext(tl, next);
+ tl.fromTo(prev, { xPercent: 0, opacity: 1 }, { xPercent: -35, opacity: 0.3 }, 0).fromTo(
+ next,
+ { xPercent: 100 },
+ { xPercent: 0, ease: "power2.out" },
+ 0,
+ );
+ },
+ // IA → qualidade: a seção sobe mais rápido que a rolagem, como um cartão, sobre a anterior que escurece.
+ // Só translate/opacity: recorte animado, escala (o Chrome rasteriza de novo a cada novo tamanho) e o
+ // desenho do diagrama a cada quadro dobravam o custo de pintura desta passagem. O diagrama se desenha
+ // uma vez, em CSS, quando a passagem começa (classe is-drawing, ver onEnter).
+ (tl, prev, next) => {
+ holdPrev(tl, prev);
+ tl.fromTo(prev, { opacity: 1 }, { opacity: 0.2 }, 0).fromTo(
+ next,
+ { yPercent: 0, y: () => vh() * 0.35 },
+ { y: 0, ease: "power2.out" },
+ 0,
+ );
+ },
+ // qualidade → sobre: a página entra girando pela esquerda, como uma folha virando (só transform)
+ (tl, prev, next) => {
+ holdPrev(tl, prev);
+ holdNext(tl, next);
+ tl.fromTo(prev, { opacity: 1, xPercent: 0 }, { opacity: 0.25, xPercent: 20 }, 0).fromTo(
+ next,
+ { xPercent: -100, rotation: -7, transformOrigin: "0% 0%" },
+ { xPercent: 0, rotation: 0, ease: "power2.out" },
+ 0,
+ );
+ },
+ // sobre → contato: o contato cresce do centro, como um zoom de câmera
+ (tl, prev, next) => {
+ holdPrev(tl, prev);
+ holdNext(tl, next);
+ tl.fromTo(
+ prev,
+ { scale: 1, opacity: 1, transformOrigin: visibleCenter(prev) },
+ { scale: 0.92, opacity: 0.2 },
+ 0,
+ )
+ .fromTo(
+ next,
+ {
+ scale: 0.55,
+ clipPath: "inset(0% round 56px)",
+ transformOrigin: () => `50% ${vh() / 2}px`,
+ },
+ { scale: 1, clipPath: "inset(0% round 0px)", ease: "power2.out" },
+ 0,
+ )
+ .fromTo(next, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.2 }, 0);
+ },
+];
+
+const easeInOutCubic = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
+
+export function useCinematicScroll(mainRef: RefObject) {
+ useEffect(() => {
+ const main = mainRef.current;
+ if (!main) return;
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+ let cancelled = false;
+ let cleanup = () => {};
+
+ (async () => {
+ const [{ gsap }, { ScrollTrigger }, { default: Lenis }] = await Promise.all([
+ import("gsap"),
+ import("gsap/ScrollTrigger"),
+ import("lenis"),
+ ]);
+ if (cancelled) return;
+ gsap.registerPlugin(ScrollTrigger);
+
+ const lenis = new Lenis({ lerp: 0.075, wheelMultiplier: 0.85 });
+ lenis.on("scroll", ScrollTrigger.update);
+ const tick = (time: number) => lenis.raf(time * 1000);
+ gsap.ticker.add(tick);
+ gsap.ticker.lagSmoothing(0);
+
+ const scenes = Array.from(main.children) as HTMLElement[];
+ const context = gsap.context(() => {
+ scenes.forEach((scene, index) => {
+ // quem entra fica por cima; o hero, que sai por dissolução, fica por cima da cena seguinte
+ gsap.set(scene, { position: "relative", zIndex: index === 0 ? 30 : index + 1 });
+ });
+ TRANSITIONS.forEach((transition, index) => {
+ const prev = scenes[index];
+ const next = scenes[index + 1];
+ if (!prev || !next) return;
+ const tl = gsap.timeline({
+ defaults: { ease: "none", duration: 1 },
+ scrollTrigger: {
+ trigger: next,
+ start: () => pageTop(next) - vh(),
+ end: () => pageTop(next),
+ scrub: true,
+ invalidateOnRefresh: true,
+ // passagem concluída: o recorte já cobre a tela inteira; sem ele a seção pinta normalmente
+ onLeave: () => gsap.set(next, { clipPath: "none" }),
+ // diagrama de qualidade: desenha uma vez quando a seção começa a entrar
+ onEnter: () => next.classList.add("is-drawing"),
+ },
+ });
+ transition(tl, prev, next);
+ });
+ }, main);
+
+ // Visibilidade pela posição da rolagem, não pelo estado inicial dos tweens: cada cena só existe na
+ // tela da transição em que entra até a transição em que sai. Antes ela não vaza por cima da anterior;
+ // depois não aparece atrás de transparências, e o navegador não pinta o que está coberto.
+ let tops: number[] = [];
+ const syncVisibility = () => {
+ const y = window.scrollY;
+ scenes.forEach((scene, index) => {
+ const from = index === 0 ? -Infinity : tops[index] - vh();
+ const to = index === scenes.length - 1 ? Infinity : tops[index + 1];
+ const visibility = y >= from && y <= to ? "" : "hidden";
+ if (scene.style.visibility !== visibility) scene.style.visibility = visibility;
+ });
+ };
+ const measure = () => {
+ tops = scenes.map(pageTop);
+ syncVisibility();
+ };
+ measure();
+ ScrollTrigger.addEventListener("refresh", measure);
+ window.addEventListener("scroll", syncVisibility, { passive: true });
+
+ // botões e links internos: em vez do salto, a página "avança o vídeo" até o destino
+ const onClick = (event: MouseEvent) => {
+ if (
+ event.defaultPrevented ||
+ event.button !== 0 ||
+ event.metaKey ||
+ event.ctrlKey ||
+ event.shiftKey ||
+ event.altKey
+ )
+ return;
+ const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+ if (!(link instanceof HTMLAnchorElement) || (link.target && link.target !== "_self")) return;
+ const url = new URL(link.href);
+ if (url.origin !== location.origin || url.pathname !== location.pathname || !url.hash)
+ return;
+ let target: HTMLElement | null = null;
+ try {
+ target = document.getElementById(decodeURIComponent(url.hash.slice(1)));
+ } catch {}
+ if (!target) return;
+ event.preventDefault();
+ // nunca para no meio de uma passagem: no mínimo onde termina a entrada da cena que contém o alvo;
+ // alvos internos descontam o cabeçalho fixo
+ const scene = scenes.find((candidate) => candidate.contains(target));
+ const offset =
+ Number.parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop) || 0;
+ const top =
+ !scene || scene === scenes[0]
+ ? 0
+ : Math.max(pageTop(scene), scene === target ? 0 : pageTop(target) - offset);
+ if (location.hash !== url.hash) history.pushState(null, "", url.hash);
+ lenis.scrollTo(top, {
+ duration: Math.min(2.8, 1 + Math.abs(top - window.scrollY) / 8000),
+ easing: easeInOutCubic,
+ // o foco vai depois: antes de a cena entrar ela está invisível e não aceita foco
+ onComplete: () => {
+ if (!target.hasAttribute("tabindex")) target.tabIndex = -1;
+ target.focus({ preventScroll: true });
+ },
+ });
+ };
+ document.addEventListener("click", onClick, true);
+
+ cleanup = () => {
+ document.removeEventListener("click", onClick, true);
+ ScrollTrigger.removeEventListener("refresh", measure);
+ window.removeEventListener("scroll", syncVisibility);
+ context.revert();
+ for (const scene of scenes) scene.style.visibility = "";
+ gsap.ticker.remove(tick);
+ lenis.destroy();
+ };
+ })();
+
+ return () => {
+ cancelled = true;
+ cleanup();
+ };
+ }, [mainRef]);
+}
diff --git a/app/components/story/NotebookBrowser.test.tsx b/app/components/story/NotebookBrowser.test.tsx
deleted file mode 100644
index 716d9db..0000000
--- a/app/components/story/NotebookBrowser.test.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { getFeaturedProjects } from "@/lib/portfolio-data";
-import NotebookBrowser, { type NotebookBrowserProps } from "./NotebookBrowser";
-import { selectNotebookProjects } from "./notebookProjects";
-
-const projects = selectNotebookProjects(getFeaturedProjects(null));
-const frame: NotebookBrowserProps["frame"] = {
- cursorVisible: true,
- cursorX: 0.4,
- cursorY: 0.6,
- cursorClicking: false,
-};
-
-function renderBrowser(overrides: Partial = {}) {
- return render(
- ((resolve) => {
- finishDecode = resolve;
- }),
- );
- await act(async () => {
- fireEvent.load(imageFor(view.container, 1));
- });
- expect(screen.getByRole("img")).toHaveAccessibleName(/NutriScan/i);
-
- view.rerender(
- (
- '[role="tab"]',
- );
-
- tabs[0].focus();
- await user.keyboard("{ArrowRight}");
-
- expect(document.activeElement).toBe(tabs[1]);
- });
-
- it("removes the closed browser from the accessibility tree", () => {
- renderBrowser({ interactive: false });
-
- const browser = screen.getByTestId("notebook-browser");
- expect(browser).toHaveAttribute("aria-hidden", "true");
- expect(browser).toHaveAttribute("inert");
- });
-
- it("bounds arrow navigation at the first and last tab", async () => {
- const user = userEvent.setup();
- const onSelectTab = jest.fn();
- renderBrowser({ onSelectTab });
- const tabs = screen.getAllByRole("tab");
-
- await user.click(tabs[0]);
- await user.keyboard("{ArrowLeft}");
- await user.click(tabs.at(-1) as HTMLElement);
- await user.keyboard("{ArrowRight}");
-
- expect(onSelectTab).toHaveBeenNthCalledWith(2, 0);
- expect(onSelectTab).toHaveBeenNthCalledWith(4, projects.length - 1);
- });
-
- it("keeps an unknown demo link and announces its state", () => {
- const unknownProjects = projects.map((project, index) =>
- index === 0
- ? {
- ...project,
- demoAvailability: "unknown" as const,
- demoCheckedAt: null,
- }
- : project,
- );
- renderBrowser({ projects: unknownProjects });
-
- const link = screen.getByRole("link", {
- name: /abrir projeto.*disponibilidade não verificada/i,
- });
- expect(link).toHaveAttribute("href", projects[0].demoUrl);
- expect(link).toHaveAttribute("target", "_blank");
- expect(link).toHaveAttribute("rel", "noopener noreferrer");
- });
-
- it("renders an unavailable demo as non-navigable text", () => {
- const unavailableProjects = projects.map((project, index) =>
- index === 0
- ? {
- ...project,
- demoAvailability: "unavailable" as const,
- demoCheckedAt: "2026-09-04T12:00:00.000Z",
- }
- : project,
- );
- renderBrowser({ projects: unavailableProjects });
-
- const unavailable = screen.getByText(
- "Demo indisponível na última verificação",
- );
- expect(unavailable).toHaveAttribute("aria-disabled", "true");
- expect(unavailable.closest("a")).toBeNull();
- expect(
- screen.queryByRole("link", { name: /abrir projeto/i }),
- ).not.toBeInTheDocument();
- });
-
- it("renders no demo action for a project without a demo", () => {
- const noDemoProjects = [
- {
- ...projects[0],
- demoUrl: null,
- demoAvailability: "none",
- demoCheckedAt: null,
- },
- ] as unknown as NotebookBrowserProps["projects"];
- renderBrowser({ projects: noDemoProjects });
-
- expect(screen.queryByText(/abrir projeto/i)).not.toBeInTheDocument();
- expect(
- screen.queryByText("Demo indisponível na última verificação"),
- ).not.toBeInTheDocument();
- });
-
- it("uses the selected tab to label the panel and decoded screenshot", async () => {
- const view = renderBrowser({ activeIndex: 2 });
- await act(async () => {
- fireEvent.load(imageFor(view.container, 2));
- });
-
- const tab = screen.getAllByRole("tab")[2];
- const panel = screen.getByRole("tabpanel");
- const image = screen.getByRole("img");
-
- expect(tab).toHaveAttribute("aria-controls", panel.id);
- expect(panel).toHaveAttribute("aria-labelledby", tab.id);
- expect(image).toHaveAccessibleName(/SEV Moda Íntima/i);
- expect(image).toHaveProperty(
- "src",
- new URL(projects[2].screenshotSrc, document.baseURI).href,
- );
- });
-});
diff --git a/app/components/story/NotebookBrowser.tsx b/app/components/story/NotebookBrowser.tsx
deleted file mode 100644
index 79fa9ff..0000000
--- a/app/components/story/NotebookBrowser.tsx
+++ /dev/null
@@ -1,427 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import {
- type Ref,
- useCallback,
- useEffect,
- useImperativeHandle,
- useLayoutEffect,
- useRef,
- useState,
-} from "react";
-import type { NotebookProject } from "./notebookProjects";
-import type { NotebookFrame } from "./notebookTimeline";
-
-type CursorFrame = Pick<
- NotebookFrame,
- "cursorVisible" | "cursorX" | "cursorY" | "cursorClicking"
->;
-export type NotebookBrowserHandle = {
- updateFrame: (frame: CursorFrame) => void;
-};
-
-export type NotebookBrowserProps = {
- projects: NotebookProject[];
- activeIndex: number;
- frame: CursorFrame;
- ref?: Ref;
- onSelectTab: (index: number) => void;
- interactive?: boolean;
-};
-
-function clampIndex(index: number, length: number): number {
- if (length < 1) return -1;
- return Math.min(Math.max(index, 0), length - 1);
-}
-
-function toDomId(value: string): string {
- return value.replace(/[^a-zA-Z0-9_-]/g, "-");
-}
-
-export default function NotebookBrowser({
- projects,
- activeIndex,
- frame,
- onSelectTab,
- interactive = true,
- ref,
-}: NotebookBrowserProps) {
- const selectedIndex = clampIndex(activeIndex, projects.length);
- const selectedProject =
- selectedIndex >= 0 ? projects[selectedIndex] : undefined;
- const rootRef = useRef(null);
- const cursorRef = useRef(null);
- const cursorFrame = useRef(frame);
- const tabPoints = useRef>([]);
- const browserSize = useRef({ width: 0, height: 0 });
- const [displayed, setDisplayed] = useState(null);
- const [outgoing, setOutgoing] = useState(null);
- const [failedSrc, setFailedSrc] = useState(null);
- const requestedSrc = selectedProject?.screenshotSrc;
- const requestRef = useRef(requestedSrc);
- const requestVersion = useRef(0);
- const displayedRef = useRef(displayed);
- const mounted = useRef(true);
- useLayoutEffect(() => {
- requestRef.current = requestedSrc;
- requestVersion.current += 1;
- setFailedSrc(null);
- }, [requestedSrc]);
- useEffect(() => {
- mounted.current = true;
- return () => {
- mounted.current = false;
- };
- }, []);
-
- // Only the immediate neighbours are fetched; the browser cache handles reuse.
- useEffect(() => {
- const images = [projects[selectedIndex - 1], projects[selectedIndex + 1]]
- .filter((project): project is NotebookProject => Boolean(project))
- .map((project) => {
- const image = new window.Image();
- image.decoding = "async";
- image.src = project.screenshotSrc;
- return image;
- });
- return () => {
- images.forEach((image) => {
- image.removeAttribute("src");
- });
- };
- }, [projects, selectedIndex]);
-
- const updateFrame = useCallback((next: CursorFrame) => {
- cursorFrame.current = next;
- const cursor = cursorRef.current;
- const points = tabPoints.current;
- if (!cursor || points.length === 0) return;
- const position = Math.max(
- 0,
- Math.min(points.length - 1, next.cursorX * points.length - 0.5),
- );
- const left = Math.floor(position);
- const right = Math.min(left + 1, points.length - 1);
- const blend = position - left;
- const entry = Math.max(0, Math.min(1, (0.95 - next.cursorY) / 0.65));
- const tabX = points[left].x + (points[right].x - points[left].x) * blend;
- const tabY = points[left].y + (points[right].y - points[left].y) * blend;
- const x = browserSize.current.width * 0.5 * (1 - entry) + tabX * entry;
- const y = browserSize.current.height * 0.95 * (1 - entry) + tabY * entry;
- cursor.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${next.cursorClicking ? 0.88 : 1})`;
- cursor.style.opacity = next.cursorVisible ? "1" : "0";
- cursor.classList.toggle("is-clicking", next.cursorClicking);
- }, []);
- useImperativeHandle(ref, () => ({ updateFrame }), [updateFrame]);
- useLayoutEffect(() => {
- const root = rootRef.current;
- if (!root) return undefined;
- const measure = () => {
- browserSize.current = {
- width: root.clientWidth,
- height: root.clientHeight,
- };
- const points = [];
- for (const project of projects) {
- const tab: HTMLButtonElement | null =
- root.querySelector(
- `#notebook-tab-${toDomId(project.id)}`,
- );
- if (!tab) continue;
- let x = tab.offsetWidth / 2;
- let y = tab.offsetHeight / 2;
- let element: HTMLElement | null = tab;
- while (element && element !== root) {
- x += element.offsetLeft;
- y += element.offsetTop;
- element = element.offsetParent as HTMLElement | null;
- }
- points.push({ x, y });
- }
- tabPoints.current = points;
- updateFrame(cursorFrame.current);
- };
- measure();
- if (!("ResizeObserver" in window)) return undefined;
- const observer = new ResizeObserver(measure);
- observer.observe(root);
- return () => observer.disconnect();
- }, [projects, updateFrame]);
- useLayoutEffect(() => {
- updateFrame(frame);
- }, [frame, updateFrame]);
-
- const revealImage = useCallback(
- async (image: HTMLImageElement, project: NotebookProject) => {
- const version = requestVersion.current;
- try {
- if (typeof image.decode === "function") await image.decode();
- } catch {
- if (
- mounted.current &&
- version === requestVersion.current &&
- requestRef.current === project.screenshotSrc
- ) {
- setFailedSrc(project.screenshotSrc);
- }
- return;
- }
- if (
- !mounted.current ||
- version !== requestVersion.current ||
- requestRef.current !== project.screenshotSrc
- )
- return;
- if (displayedRef.current?.screenshotSrc === project.screenshotSrc) return;
- setOutgoing(
- window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
- ? null
- : displayedRef.current,
- );
- displayedRef.current = project;
- setDisplayed(project);
- setFailedSrc(null);
- },
- [],
- );
- useLayoutEffect(() => {
- if (!selectedProject) return;
- // A quick reversal can select the still-mounted outgoing image: no new load event.
- const source = new URL(selectedProject.screenshotSrc, document.baseURI)
- .href;
- const image = Array.from(
- rootRef.current?.querySelectorAll("img") ?? [],
- ).find((item) => item.src === source);
- if (image?.complete && image.naturalWidth > 0) {
- void revealImage(image, selectedProject);
- }
- }, [selectedProject, revealImage]);
-
- const imageProjects = [outgoing, displayed, selectedProject].filter(
- (project, index, list): project is NotebookProject =>
- Boolean(project) &&
- list.findIndex(
- (item) => item?.screenshotSrc === project?.screenshotSrc,
- ) === index,
- );
- const waiting = displayed?.screenshotSrc !== requestedSrc;
- const interactionProps = interactive
- ? {}
- : {
- "aria-hidden": true,
- inert: true,
- };
-
- function handleTabKeyDown(
- event: React.KeyboardEvent,
- index: number,
- ) {
- if (projects.length < 1) return;
-
- let nextIndex: number | null = null;
- if (event.key === "ArrowRight" || event.key === "ArrowDown") {
- nextIndex = Math.min(index + 1, projects.length - 1);
- } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
- nextIndex = Math.max(index - 1, 0);
- } else if (event.key === "Home") {
- nextIndex = 0;
- } else if (event.key === "End") {
- nextIndex = projects.length - 1;
- }
-
- if (nextIndex === null) return;
- event.preventDefault();
- event.currentTarget.parentElement
- ?.querySelectorAll('[role="tab"]')
- [nextIndex]?.focus({ preventScroll: true });
- onSelectTab(nextIndex);
- }
-
- if (!selectedProject) {
- return (
-
-
Nenhum projeto disponível para esta cena.
-
-
-
- evandro.dev.br / projetos
-
-
-
-
-
- Projetos em produção
-
- {String(selectedIndex + 1).padStart(2, "0")} /{" "}
- {String(projects.length).padStart(2, "0")}
-
-
-
- Projeto ativo: {selectedProject.title}
-
-
-
- {projects.map((project, index) => {
- const tabId = `notebook-tab-${toDomId(project.id)}`;
- const isSelected = index === selectedIndex;
-
- return (
- onSelectTab(index)}
- onKeyDown={(event) => handleTabKeyDown(event, index)}
- role="tab"
- tabIndex={isSelected ? 0 : -1}
- type="button"
- >
-
- {String(index + 1).padStart(2, "0")}
-
- {project.title}
-
- );
- })}
-
-
-
-
-
-
- {imageProjects.map((project) => {
- const current =
- project.screenshotSrc === displayed?.screenshotSrc;
- const previous =
- project.screenshotSrc === outgoing?.screenshotSrc;
- return (
-
{
- void revealImage(event.currentTarget, project);
- }}
- onError={() => {
- if (project.screenshotSrc === requestRef.current)
- setFailedSrc(project.screenshotSrc);
- }}
- onAnimationEnd={() => {
- if (current) setOutgoing(null);
- }}
- />
- );
- })}
- {waiting ? (
-
- {failedSrc === requestedSrc
- ? `Não foi possível carregar a captura de ${selectedProject.title}.`
- : `Carregando captura de ${selectedProject.title}…`}
- {displayed
- ? ` Exibindo ${displayed.title} enquanto isso.`
- : null}
-
- ) : null}
-
-
-
-
- Cursor decorativo
-
-
-
-
Interface em produção
-
- Navegue pelos projetos com as abas abaixo. A experiência permanece
- completa sem movimento ou WebGL.
-
-
-
{
- setActiveIndex(index);
- onSelectTab?.(index);
- }}
- projects={projects}
- />
-
- {children}
-
-));
-
-jest.mock("@react-three/fiber", () => ({
- Canvas: (props: MockCanvasProps) => mockCanvas(props),
- useFrame: jest.fn(),
-}));
-
-jest.mock("@react-three/drei", () => ({
- Html: ({ children }: { children: React.ReactNode }) => (
- {children}
- ),
- RoundedBox: () =>
,
-}));
-
-const projects = selectNotebookProjects(getFeaturedProjects(null));
-const props: NotebookStage3DProps = {
- activeIndex: 0,
- isVisible: true,
- onSelectTab: jest.fn(),
- progress: { current: 0.56 },
- requestRender: { current: null },
- projects,
-};
-
-describe("getNotebookLidRotation", () => {
- it("keeps the lid closed at rest and opens around the hinge", () => {
- expect(getNotebookLidRotation(0)).toBe(0);
- expect(getNotebookLidRotation(112)).toBeCloseTo(
- -THREE.MathUtils.degToRad(112),
- 6,
- );
- expect(getNotebookLidRotation(56)).toBeCloseTo(
- -THREE.MathUtils.degToRad(56),
- 6,
- );
- });
-
- it("clamps angles outside the physical hinge range", () => {
- expect(getNotebookLidRotation(-10)).toBe(0);
- expect(getNotebookLidRotation(200)).toBe(getNotebookLidRotation(180));
- });
-});
-
-it("keeps browser corners on the physical LCD after opening and resizing", () => {
- const matrix = new THREE.Matrix4();
- const rig = new THREE.Group();
- rig.position.set(0, -0.45, 0);
- const hinge = new THREE.Group();
- hinge.position.set(0, 0.16, -1.06);
- rig.add(hinge);
- const lcd = new THREE.Object3D();
- lcd.position.set(0, -0.028, 1.1);
- lcd.rotation.x = Math.PI / 2;
- hinge.add(lcd);
- const domWidth = 800;
- const domHeight = (domWidth * 1.86) / 2.8;
-
- for (const size of [
- { width: 939.390625, height: 738, lidAngle: 74 },
- { width: 1123.375, height: 629.75, lidAngle: 112 },
- ]) {
- const camera = new THREE.PerspectiveCamera(30, size.width / size.height);
- camera.position.set(0, 1.65, 5.7);
- camera.rotation.x = -0.19;
- hinge.rotation.x = getNotebookLidRotation(size.lidAngle);
- updateNotebookScreenMatrix(matrix, lcd, camera, size);
-
- for (const [u, v] of [
- [0, 0],
- [1, 0],
- [1, 1],
- [0, 1],
- ]) {
- const expected = new THREE.Vector3((u - 0.5) * 2.8, (0.5 - v) * 1.86, 0)
- .applyMatrix4(lcd.matrixWorld)
- .project(camera);
- const actual = new THREE.Vector3(
- u * domWidth,
- v * domHeight,
- 0,
- ).applyMatrix4(matrix);
- expect(actual.x).toBeCloseTo(((expected.x + 1) * size.width) / 2, 6);
- expect(actual.y).toBeCloseTo(((1 - expected.y) * size.height) / 2, 6);
- }
- }
-});
-
-describe("NotebookStage3D", () => {
- beforeEach(() => {
- jest.spyOn(console, "error").mockImplementation(() => undefined);
- });
-
- afterEach(() => {
- jest.restoreAllMocks();
- });
-
- it("returns usable browser content when the stage boundary fails", () => {
- const onStageError = jest.fn();
- mockCanvas.mockImplementation(() => {
- throw new Error("canvas failed");
- });
-
- render((null);
- const positions = useMemo(() => {
- const list: Array<[number, number]> = [];
- const startX = (-(KEY_COLUMNS - 1) * KEY_GAP_X) / 2;
- for (let row = 0; row < KEY_ROWS; row += 1) {
- for (let column = 0; column < KEY_COLUMNS; column += 1) {
- list.push([
- startX + column * KEY_GAP_X,
- KEYBOARD_Z_START + row * KEY_GAP_Z,
- ]);
- }
- }
- return list;
- }, []);
-
- useLayoutEffect(() => {
- const mesh = ref.current;
- if (!(mesh instanceof THREE.InstancedMesh)) return;
-
- const matrix = new THREE.Matrix4();
- positions.forEach(([x, z], index) => {
- matrix.makeTranslation(x, KEYBOARD_Y, z);
- mesh.setMatrixAt(index, matrix);
- });
- mesh.instanceMatrix.needsUpdate = true;
- }, [positions]);
-
- return (
-
-
- );
-}
-
-function LaptopBase({ materials }: { materials: LaptopMaterials }) {
- return (
-
-
-
-
-
-
- );
-}
-
-function LaptopLid({ materials }: { materials: LaptopMaterials }) {
- return (
-
-
- );
-}
-
-function ScreenSurface({
- frame,
- material,
- projects,
- activeIndex,
- onSelectTab,
-}: {
- frame: RefObject;
- material: THREE.MeshStandardMaterial;
- projects: NotebookProject[];
- activeIndex: number;
- onSelectTab: (index: number) => void;
-}) {
- const screen = useRef(null);
- const surface = useRef(null);
- const browser = useRef(null);
- const projection = useMemo(() => new THREE.Matrix4(), []);
- useFrame(({ camera, size }) => {
- if (surface.current && screen.current) {
- updateNotebookScreenMatrix(projection, screen.current, camera, size);
- surface.current.style.transform = `matrix3d(${projection.elements.join(",")})`;
- surface.current.style.opacity = String(frame.current.screenOpacity);
- surface.current.inert = frame.current.screenOpacity < 0.95;
- surface.current.setAttribute(
- "aria-hidden",
- String(frame.current.screenOpacity < 0.95),
- );
- }
- browser.current?.updateFrame(frame.current);
- });
- return (
-
-
-
-
-
-
-
-
- );
-}
-
-function NotebookScene({
- activeIndex,
- onSelectTab,
- progress,
- projects,
- requestRender,
- isVisible,
- onStageError,
-}: NotebookSceneProps) {
- const lidRig = useRef(null);
- const frame = useRef(getNotebookFrame(progress.current, projects.length));
- const materials = useMemo(createLaptopMaterials, []);
- const { camera, gl, size, invalidate } = useThree();
-
- useLayoutEffect(() => {
- if (!(camera instanceof THREE.PerspectiveCamera)) return;
- // Preserve desktop framing; widen portrait views without stretching the LCD.
- camera.zoom =
- window.innerWidth <= 1024
- ? Math.min(1, size.width / Math.max(size.height, 1) / 1.5)
- : 1;
- camera.updateProjectionMatrix();
- invalidate();
- }, [camera, invalidate, size.width, size.height]);
-
- useEffect(() => {
- const canvas = gl.domElement;
- const handleContextLost = (event: Event) => {
- event.preventDefault();
- onStageError?.();
- };
- canvas.addEventListener("webglcontextlost", handleContextLost);
- return () =>
- canvas.removeEventListener("webglcontextlost", handleContextLost);
- }, [gl, onStageError]);
-
- useEffect(() => () => disposeLaptopMaterials(materials), [materials]);
- useEffect(() => {
- requestRender.current = isVisible ? invalidate : null;
- if (isVisible) invalidate();
- return () => {
- requestRender.current = null;
- };
- }, [invalidate, isVisible, requestRender]);
-
- useFrame(() => {
- const nextFrame = getNotebookFrame(
- progress.current,
- projects.length,
- frame.current,
- );
- if (lidRig.current) {
- lidRig.current.rotation.x = getNotebookLidRotation(nextFrame.lidAngle);
- }
- setLaptopOpacity(materials, nextFrame.deviceOpacity);
- }, -1);
-
- return (
-
-
-
-
- );
-}
-
-class NotebookStageBoundary extends Component<
- NotebookStage3DProps,
- { failed: boolean }
-> {
- state = { failed: false };
-
- static getDerivedStateFromError() {
- return { failed: true };
- }
-
- componentDidCatch() {
- this.props.onStageError?.();
- }
-
- render(): ReactNode {
- if (this.state.failed) {
- return (
-
-
- );
- }
-}
-
-export default function NotebookStage3D(props: NotebookStage3DProps) {
- return (
-
-
- );
-}
diff --git a/app/components/story/NotebookStory.test.tsx b/app/components/story/NotebookStory.test.tsx
deleted file mode 100644
index 2563616..0000000
--- a/app/components/story/NotebookStory.test.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import {
- act,
- fireEvent,
- render,
- screen,
- waitFor,
- within,
-} from "@testing-library/react";
-import { getFeaturedProjects } from "@/lib/portfolio-data";
-import NotebookStory, { canUseNotebook3D } from "./NotebookStory";
-
-const mockNotebookStage = jest.fn(({ isVisible }: { isVisible: boolean }) => (
-
-));
-
-jest.mock("next/dynamic", () => () => {
- return function DynamicNotebookStage(props: { isVisible: boolean }) {
- return mockNotebookStage(props);
- };
-});
-
-jest.mock("gsap", () => ({
- gsap: {
- registerPlugin: jest.fn(),
- timeline: jest.fn(() => ({ to: jest.fn().mockReturnThis() })),
- context: jest.fn((callback: () => void) => {
- callback();
- return { revert: jest.fn() };
- }),
- },
-}));
-
-jest.mock("gsap/ScrollTrigger", () => ({
- ScrollTrigger: { getAll: jest.fn(() => []) },
-}));
-const projects = getFeaturedProjects(null);
-
-let intersectionCallback: IntersectionObserverCallback | undefined;
-let reducedMotionListener: (() => void) | undefined;
-const mockObserve = jest.fn();
-const mockDisconnect = jest.fn();
-
-function setDocumentHidden(hidden: boolean) {
- Object.defineProperty(document, "hidden", {
- configurable: true,
- value: hidden,
- });
-}
-
-function setSectionIntersects(isIntersecting: boolean) {
- const entry = { isIntersecting } as IntersectionObserverEntry;
- act(() => intersectionCallback?.([entry], {} as IntersectionObserver));
-}
-
-function mockMatchMedia({
- reduced = false,
- coarse = false,
- hover = true,
-}: {
- reduced?: boolean;
- coarse?: boolean;
- hover?: boolean;
-} = {}) {
- const matcher = jest.isMockFunction(window.matchMedia)
- ? window.matchMedia
- : jest.spyOn(window, "matchMedia");
- matcher.mockImplementation((query: string) => ({
- matches:
- (query === "(prefers-reduced-motion: reduce)" && reduced) ||
- (query === "(pointer: coarse)" && coarse) ||
- (query === "(hover: hover)" && hover),
- media: query,
- onchange: null,
- addEventListener: jest.fn((event: string, callback: () => void) => {
- if (query === "(prefers-reduced-motion: reduce)" && event === "change") {
- reducedMotionListener = callback;
- }
- }),
- removeEventListener: jest.fn(),
- addListener: jest.fn(),
- removeListener: jest.fn(),
- dispatchEvent: jest.fn(),
- }));
-}
-
-describe("NotebookStory", () => {
- beforeEach(() => {
- mockMatchMedia();
- Object.defineProperty(window, "innerWidth", {
- configurable: true,
- value: 1280,
- });
- setDocumentHidden(false);
- intersectionCallback = undefined;
- reducedMotionListener = undefined;
- mockObserve.mockReset();
- mockDisconnect.mockReset();
- class MockIntersectionObserver {
- readonly root = null;
- readonly rootMargin = "";
- readonly thresholds = [];
-
- constructor(callback: IntersectionObserverCallback) {
- intersectionCallback = callback;
- }
-
- disconnect = mockDisconnect;
- observe = mockObserve;
- takeRecords = () => [];
- unobserve = jest.fn();
- }
- global.IntersectionObserver =
- MockIntersectionObserver as unknown as typeof IntersectionObserver;
- });
-
- afterEach(() => {
- jest.restoreAllMocks();
- });
-
- it("renders the static fallback when reduced motion is enabled", async () => {
- mockMatchMedia({ reduced: true });
-
- render(;
-
-export type NotebookStoryProps = {
- projects: PortfolioProjectView[];
- onLayoutReady?: () => void;
-};
-
-export function canUseNotebook3D(view: CapabilityWindow): boolean {
- if (typeof view.matchMedia !== "function") return false;
- return !view.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-
-export function getNotebookRunwayVh(tabCount: number): number {
- const count = Math.max(
- 1,
- Number.isFinite(tabCount) ? Math.floor(tabCount) : 1,
- );
- return 220 + count * 85;
-}
-
-function clampIndex(index: number, length: number): number {
- if (length < 1) return -1;
- return Math.min(Math.max(index, 0), length - 1);
-}
-
-export default function NotebookStory({
- projects,
- onLayoutReady,
-}: NotebookStoryProps) {
- const notebookProjects = useMemo(
- () => selectNotebookProjects(projects),
- [projects],
- );
- const sectionRef = useRef(null);
- const progressRef = useRef(0);
- const requestRenderRef = useRef<(() => void) | null>(null);
- const seekRef = useRef<((progress: number) => void) | null>(null);
- const layoutReadyRef = useRef(onLayoutReady);
- const failedRef = useRef(false);
- const frameRef = useRef(getNotebookFrame(0, notebookProjects.length));
- const [capabilityResolved, setCapabilityResolved] = useState(false);
- const activeIndexRef = useRef(notebookProjects.length > 0 ? 0 : -1);
- const [engine, setEngine] = useState(false);
- const [sectionIntersects, setSectionIntersects] = useState(false);
- const [isPageVisible, setIsPageVisible] = useState(
- () => typeof document === "undefined" || !document.hidden,
- );
- const [activeIndex, setActiveIndex] = useState(activeIndexRef.current);
- useEffect(() => {
- layoutReadyRef.current = onLayoutReady;
- }, [onLayoutReady]);
- useEffect(() => {
- if (!engine && capabilityResolved) layoutReadyRef.current?.();
- }, [engine, capabilityResolved]);
- useEffect(() => {
- const updateEngine = () => {
- const nextEngine =
- !failedRef.current &&
- notebookProjects.length > 0 &&
- canUseNotebook3D(window);
- if (!nextEngine) setSectionIntersects(false);
- setEngine(nextEngine);
- setCapabilityResolved(true);
- };
- updateEngine();
- if (typeof window.matchMedia !== "function") return undefined;
-
- const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
- reducedMotion.addEventListener("change", updateEngine);
-
- return () => {
- reducedMotion.removeEventListener("change", updateEngine);
- };
- }, [notebookProjects.length]);
-
- useEffect(() => {
- const handleVisibilityChange = () => {
- setIsPageVisible(!document.hidden);
- };
- document.addEventListener("visibilitychange", handleVisibilityChange);
- return () =>
- document.removeEventListener("visibilitychange", handleVisibilityChange);
- }, []);
-
- useEffect(() => {
- const section = sectionRef.current;
- if (!engine || !section) return undefined;
- if (!("IntersectionObserver" in window)) {
- setSectionIntersects(true);
- return undefined;
- }
-
- const observer = new IntersectionObserver(
- ([entry]) => setSectionIntersects(entry?.isIntersecting ?? false),
- { threshold: 0 },
- );
- observer.observe(section);
- return () => observer.disconnect();
- }, [engine]);
-
- useEffect(() => {
- if (!engine) return undefined;
- const sectionElement = sectionRef.current;
- if (!sectionElement) return undefined;
- const sectionRoot: HTMLElement = sectionElement;
-
- let cancelled = false;
- let cleanup = () => {};
-
- async function setupTimeline() {
- const [{ gsap }, { ScrollTrigger }] = await Promise.all([
- import("gsap"),
- import("gsap/ScrollTrigger"),
- ]);
- if (cancelled) return;
-
- gsap.registerPlugin(ScrollTrigger);
- const context = gsap.context(() => {
- const driver = { value: 0 };
- const applyProgress = () => {
- progressRef.current = driver.value;
- const nextIndex = getNotebookFrame(
- driver.value,
- notebookProjects.length,
- frameRef.current,
- ).activeTabIndex;
- if (nextIndex !== activeIndexRef.current) {
- activeIndexRef.current = nextIndex;
- setActiveIndex(nextIndex);
- }
- requestRenderRef.current?.();
- };
- const timeline = gsap.timeline({
- defaults: { ease: "none" },
- onUpdate: applyProgress,
- scrollTrigger: {
- trigger: sectionRoot,
- start: "top top",
- end: "bottom bottom",
- scrub: true,
- invalidateOnRefresh: true,
- onRefresh: () => layoutReadyRef.current?.(),
- },
- });
- timeline.to(driver, { duration: 1, value: 1 });
- seekRef.current = (progress) => {
- const trigger = timeline.scrollTrigger;
- if (!trigger) return;
- // Instant overrides the site's smooth CSS scrolling: no tour of intermediate tabs.
- window.scrollTo({
- top: trigger.start + (trigger.end - trigger.start) * progress,
- behavior: "instant",
- });
- ScrollTrigger.update();
- timeline.progress(progress);
- applyProgress();
- };
- timeline.scrollTrigger?.refresh();
- }, sectionRoot);
- cleanup = () => {
- seekRef.current = null;
- context.revert();
- };
- }
-
- void setupTimeline().catch(() => {
- if (!cancelled) {
- failedRef.current = true;
- setEngine(false);
- }
- });
- return () => {
- cancelled = true;
- cleanup();
- };
- }, [engine, notebookProjects.length]);
-
- const handleStageError = useCallback(() => {
- failedRef.current = true;
- setEngine(false);
- }, []);
-
- const handleSelectTab = useCallback(
- (index: number) => {
- const safeIndex = clampIndex(index, notebookProjects.length);
- if (safeIndex < 0) return;
- activeIndexRef.current = safeIndex;
- setActiveIndex(safeIndex);
- if (engine) {
- seekRef.current?.(
- getNotebookSeekProgress(safeIndex, notebookProjects.length),
- );
- }
- },
- [engine, notebookProjects.length],
- );
-
- const activeProject = notebookProjects[activeIndex];
-
- if (!engine) {
- return (
- 0 ? " notebook-story-pending" : ""}`}
- data-testid="notebook-story"
- id="story"
- ref={sectionRef}
- style={
- {
- "--notebook-runway": `${getNotebookRunwayVh(notebookProjects.length)}vh`,
- "--notebook-mobile-runway": `${getNotebookRunwayVh(notebookProjects.length) * 0.8}svh`,
- } as CSSProperties
- }
- >
-
-
-
O notebook
-
Software que opera.
-
- Uma seleção navegável de sistemas reais, com suas interfaces e
- tecnologias em produção.
-
-
-
-
- );
- }
-
- return (
-
-
-
-
-
O notebook
-
Software que opera.
-
- Role para abrir a engenharia por trás de cada entrega. O scroll é
- o controle de play e rebobinar.
-
-
- {String(Math.max(activeIndex + 1, 1)).padStart(2, "0")} /{" "}
- {String(notebookProjects.length).padStart(2, "0")}
-
-
-
-
-
- {notebookProjects.map((project, index) => (
- handleSelectTab(index)}
- >
- {String(index + 1).padStart(2, "0")}
-
- ))}
-
- {activeProject?.title}
- {activeProject?.demoAvailability === "unavailable" ? (
-
- Demo indisponível na última verificação
-
- ) : activeProject?.demoAvailability !== "none" &&
- activeProject?.demoUrl ? (
-
- Abrir projeto
- {activeProject.demoAvailability === "unknown" && (
-
- {" "}
- — Disponibilidade não verificada
-
- )}
-
- ) : null}
-
-
-
- );
-}
diff --git a/app/components/story/notebookProjects.test.ts b/app/components/story/notebookProjects.test.ts
deleted file mode 100644
index 64ce009..0000000
--- a/app/components/story/notebookProjects.test.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import {
- getFeaturedProjects,
- type PortfolioProjectView,
-} from "@/lib/portfolio-data";
-import { selectNotebookProjects } from "./notebookProjects";
-
-const projectsFixture = getFeaturedProjects(null);
-
-describe("selectNotebookProjects", () => {
- it("returns featured projects in notebook order", () => {
- const result = selectNotebookProjects(projectsFixture);
-
- expect(result.map((project) => project.id)).toEqual([
- "nutriscan",
- "sc-plus",
- "sev-modaintima",
- "as-servicos",
- ]);
- });
-
- it("omits a project when its screenshot mapping is missing", () => {
- const result = selectNotebookProjects([
- ...projectsFixture,
- { ...projectsFixture[0], id: "unknown-live-project" },
- ]);
-
- expect(
- result.some((project) => project.id === "unknown-live-project"),
- ).toBe(false);
- });
-
- it("omits a project with an unapproved demo URL", () => {
- const projectsWithUnsafeUrl = projectsFixture.map((project) =>
- project.id === "nutriscan"
- ? { ...project, demoUrl: "javascript:alert(1)" }
- : project,
- );
- const result = selectNotebookProjects(projectsWithUnsafeUrl);
-
- expect(result.some((project) => project.id === "nutriscan")).toBe(false);
- });
-
- it("keeps a project without a demo so its local evidence remains visible", () => {
- const projectsWithoutDemo = projectsFixture.map((project) =>
- project.id === "nutriscan"
- ? {
- ...project,
- demoUrl: null,
- demoAvailability: "none" as const,
- demoCheckedAt: null,
- }
- : project,
- ) as unknown as PortfolioProjectView[];
-
- expect(
- selectNotebookProjects(projectsWithoutDemo).some(
- (project) => project.id === "nutriscan",
- ),
- ).toBe(true);
- });
-
- it("keeps an unavailable project when its local evidence and URL exist", () => {
- const projectsWithUnavailableDemo = projectsFixture.map((project) =>
- project.id === "nutriscan"
- ? {
- ...project,
- demoAvailability: "unavailable" as const,
- demoCheckedAt: "2026-09-04T12:00:00.000Z",
- }
- : project,
- );
-
- expect(
- selectNotebookProjects(projectsWithUnavailableDemo).find(
- (project) => project.id === "nutriscan",
- ),
- ).toMatchObject({
- demoAvailability: "unavailable",
- demoCheckedAt: "2026-09-04T12:00:00.000Z",
- });
- });
-});
diff --git a/app/components/story/notebookProjects.ts b/app/components/story/notebookProjects.ts
deleted file mode 100644
index dda3c1b..0000000
--- a/app/components/story/notebookProjects.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { PortfolioProjectView } from "@/lib/portfolio-data";
-
-export type NotebookProject = {
- id: string;
- title: string;
- subtitle: string;
- demoUrl: PortfolioProjectView["demoUrl"];
- demoAvailability: PortfolioProjectView["demoAvailability"];
- demoCheckedAt: PortfolioProjectView["demoCheckedAt"];
- technologies: string[];
- screenshotSrc: string;
- screenshotWidth: number;
- screenshotHeight: number;
-};
-
-const NOTEBOOK_ORDER = [
- "nutriscan",
- "sc-plus",
- "sev-modaintima",
- "as-servicos",
-] as const;
-
-const SCREENSHOT_BY_PROJECT_ID: Record<
- (typeof NOTEBOOK_ORDER)[number],
- string
-> = {
- nutriscan: "/assets/notebook/nutriscan.webp",
- "sc-plus": "/assets/notebook/sc-plus.webp",
- "sev-modaintima": "/assets/notebook/sev-modaintima.webp",
- "as-servicos": "/assets/notebook/as-servicos.webp",
-};
-
-function isApprovedDemoUrl(
- value: PortfolioProjectView["demoUrl"],
-): value is string {
- return typeof value === "string" && /^https?:\/\//.test(value);
-}
-
-export function selectNotebookProjects(
- projects: readonly PortfolioProjectView[],
-): NotebookProject[] {
- return NOTEBOOK_ORDER.flatMap((id) => {
- const project = projects.find((candidate) => candidate.id === id);
- const screenshotSrc = SCREENSHOT_BY_PROJECT_ID[id];
-
- if (
- !project ||
- (project.demoUrl !== null && !isApprovedDemoUrl(project.demoUrl))
- ) {
- return [];
- }
-
- return [
- {
- id: project.id,
- title: project.title,
- subtitle: project.subtitle,
- demoUrl: project.demoUrl,
- demoAvailability: project.demoAvailability,
- demoCheckedAt: project.demoCheckedAt,
- technologies: [...project.technologies],
- screenshotSrc,
- screenshotWidth: 1600,
- screenshotHeight: 1000,
- },
- ];
- });
-}
diff --git a/app/components/story/notebookTimeline.test.ts b/app/components/story/notebookTimeline.test.ts
deleted file mode 100644
index d0d2b78..0000000
--- a/app/components/story/notebookTimeline.test.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { getNotebookFrame, getNotebookSeekProgress } from "./notebookTimeline";
-
-describe("notebook choreography", () => {
- it("opens and boots before browsing, then blanks the display before closing", () => {
- const frames = Array.from({ length: 1001 }, (_, index) =>
- getNotebookFrame(index / 1000, 4),
- );
- const phases = [...new Set(frames.map((frame) => frame.phase))];
- expect(phases).toEqual([
- "approach",
- "open",
- "boot",
- "cursor-in",
- "browse",
- "hold",
- "close",
- ]);
- for (const frame of frames) {
- if (frame.phase === "open") expect(frame.screenOpacity).toBe(0);
- if (frame.cursorVisible) expect(frame.screenOpacity).toBe(1);
- if (frame.phase === "close" && frame.lidAngle < 112)
- expect(frame.screenOpacity).toBe(0);
- }
- expect(getNotebookFrame(-1, 4).lidAngle).toBe(0);
- expect(getNotebookFrame(2, 4).lidAngle).toBe(0);
- });
-
- it("keeps the previous project until cursor arrival, including reverse scroll", () => {
- const frames = Array.from({ length: 10001 }, (_, index) =>
- getNotebookFrame(index / 10000, 4),
- );
- for (let selected = 1; selected < 4; selected += 1) {
- const arrival = frames.findIndex(
- (frame) => frame.activeTabIndex === selected,
- );
- const before = getNotebookFrame((arrival - 1) / 10000, 4);
- const atClick = frames[arrival];
- expect(before.activeTabIndex).toBe(selected - 1);
- expect(before.cursorClicking).toBe(false);
- expect(atClick.cursorClicking).toBe(true);
- expect(atClick.cursorX).toBeCloseTo((selected + 0.5) / 4);
- const reversed = getNotebookFrame((arrival - 2) / 10000, 4);
- expect(reversed.activeTabIndex).toBe(selected - 1);
- expect(reversed.cursorX).toBeLessThan(atClick.cursorX);
- expect(reversed.cursorX).toBeGreaterThan((selected - 0.5) / 4);
- }
- });
-
- it("seeks directly into a readable hold for the requested project", () => {
- for (const count of [1, 4]) {
- for (let index = 0; index < count; index += 1) {
- const progress = getNotebookSeekProgress(index, count);
- const frame = getNotebookFrame(progress, count);
- expect(frame.activeTabIndex).toBe(index);
- expect(frame.screenOpacity).toBe(1);
- expect(frame.cursorClicking).toBe(false);
- expect(getNotebookFrame(progress + 0.03, count).activeTabIndex).toBe(
- index,
- );
- }
- }
- expect(
- getNotebookFrame(getNotebookSeekProgress(99, 4), 4).activeTabIndex,
- ).toBe(3);
- });
-
- it("does not expose a tab or cursor for empty or invalid project counts", () => {
- expect(getNotebookFrame(0.6, 0)).toMatchObject({
- activeTabIndex: -1,
- cursorVisible: false,
- cursorClicking: false,
- });
- expect(getNotebookFrame(0.6, Number.NaN).activeTabIndex).toBe(-1);
- });
-});
diff --git a/app/components/story/notebookTimeline.ts b/app/components/story/notebookTimeline.ts
deleted file mode 100644
index 8095023..0000000
--- a/app/components/story/notebookTimeline.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-export type NotebookPhase =
- | "approach"
- | "open"
- | "boot"
- | "cursor-in"
- | "browse"
- | "hold"
- | "close";
-
-export type NotebookFrame = {
- phase: NotebookPhase;
- lidAngle: number;
- deviceOpacity: number;
- screenOpacity: number;
- activeTabIndex: number;
- cursorVisible: boolean;
- cursorX: number;
- cursorY: number;
- cursorClicking: boolean;
-};
-
-const OPEN_START = 0.06;
-const BOOT_START = 0.18;
-const CURSOR_START = 0.23;
-const BROWSE_START = 0.3;
-const BROWSE_END = 0.84;
-const CLOSE_START = 0.9;
-const CLOSE_LID_START = 0.93;
-const OPEN_ANGLE = 112;
-const ARRIVAL = 0.18;
-
-function clamp(value: number, min: number, max: number): number {
- return Math.min(Math.max(value, min), max);
-}
-
-function between(value: number, start: number, end: number): number {
- return clamp((value - start) / (end - start), 0, 1);
-}
-
-export function getNotebookSeekProgress(
- index: number,
- tabCount: number,
-): number {
- const count = Number.isFinite(tabCount)
- ? Math.max(0, Math.floor(tabCount))
- : 0;
- if (!count) return BROWSE_START;
- const selected = clamp(
- Number.isFinite(index) ? Math.floor(index) : 0,
- 0,
- count - 1,
- );
- return (
- BROWSE_START + ((BROWSE_END - BROWSE_START) * (selected + 0.6)) / count
- );
-}
-
-/** One reversible clock. Each tab arrives/clicks before its long reading hold. */
-export function getNotebookFrame(
- progress: number,
- tabCount: number,
- target?: NotebookFrame,
-): NotebookFrame {
- const p = clamp(Number.isFinite(progress) ? progress : 0, 0, 1);
- const count = Number.isFinite(tabCount)
- ? Math.max(0, Math.floor(tabCount))
- : 0;
- const phase: NotebookPhase =
- p < OPEN_START
- ? "approach"
- : p < BOOT_START
- ? "open"
- : p < CURSOR_START
- ? "boot"
- : p < BROWSE_START
- ? "cursor-in"
- : p < BROWSE_END
- ? "browse"
- : p < CLOSE_START
- ? "hold"
- : "close";
- const slot = between(p, BROWSE_START, BROWSE_END) * count;
- const destination = clamp(Math.floor(slot), 0, Math.max(0, count - 1));
- const local = slot - destination;
- const moving = phase === "browse" && destination > 0 && local < ARRIVAL;
- const activeTabIndex = !count ? -1 : moving ? destination - 1 : destination;
- const travel = between(local, 0, ARRIVAL);
- const cursorTab = moving
- ? destination - 1 + travel * travel * (3 - 2 * travel)
- : destination;
- const entry = between(p, CURSOR_START, BROWSE_START);
- const frame = target ?? ({} as NotebookFrame);
- frame.phase = phase;
- frame.lidAngle =
- OPEN_ANGLE *
- between(p, OPEN_START, BOOT_START) *
- (1 - between(p, CLOSE_LID_START, 1));
- frame.deviceOpacity = between(p, 0, OPEN_START);
- frame.screenOpacity =
- between(p, BOOT_START, CURSOR_START) *
- (1 - between(p, CLOSE_START, CLOSE_LID_START));
- frame.activeTabIndex = activeTabIndex;
- frame.cursorVisible = count > 0 && p >= CURSOR_START && p < CLOSE_START;
- frame.cursorX = count
- ? phase === "cursor-in"
- ? 0.5 + (0.5 / count - 0.5) * entry
- : (cursorTab + 0.5) / count
- : 0.5;
- frame.cursorY = phase === "cursor-in" ? 0.95 - 0.65 * entry : 0.3;
- frame.cursorClicking =
- count > 0 &&
- phase === "browse" &&
- (destination === 0
- ? local < 0.07
- : local >= ARRIVAL && local < ARRIVAL + 0.07);
- return frame;
-}
diff --git a/app/curriculo/page.tsx b/app/curriculo/page.tsx
index 8837c8b..7ad4370 100644
--- a/app/curriculo/page.tsx
+++ b/app/curriculo/page.tsx
@@ -8,11 +8,12 @@ import { siteName, siteUrl } from "@/lib/site-content";
const pageUrl = `${siteUrl}/curriculo`;
export const metadata: Metadata = {
- title: "Currículo de Evandro Fonseca Junior para Contratação",
+ title: { absolute: `Currículo de Evandro Fonseca Junior | ${siteName}` },
description:
"Currículo profissional de Evandro Fonseca Junior, engenheiro da computação e desenvolvedor de software, com experiência, formação e competências técnicas.",
alternates: { canonical: pageUrl },
openGraph: {
+ locale: "pt_BR",
title: `Currículo de Evandro Fonseca Junior | ${siteName}`,
description:
"Experiência profissional, formação e competências técnicas de Evandro Fonseca Junior para avaliação de contratação.",
diff --git a/app/globals.css b/app/globals.css
index d8ed4a0..9336549 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -48,9 +48,14 @@
--r-lg: 16px;
--r-full: 999px;
--site-header-height: 60px;
+ /* Escala fluida: igual ao desenho original até ~1440px e cresce nas telas grandes. */
+ --shell: clamp(1240px, 76vw, 1760px);
+ --fs-section-title: min(max(clamp(24px, 4vw, 44px), 3.05vw), 68px);
+ --fs-lead: min(max(15px, 1.05vw), 19px);
--font-display: var(--font-space-grotesk), sans-serif;
--font-hero: var(--font-monument-extended), sans-serif;
--font-mono: var(--font-geist-mono), monospace;
+ --font-body: var(--font-display);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
}
@@ -193,6 +198,24 @@ svg {
max-width: 100%;
}
+/* Texto corrido em sans (leitura); a monoespacada fica nos rotulos, tags e metadados.
+ :where() mantem especificidade zero: classes de componente e utilitarios continuam mandando. */
+:where(main, footer) :where(p, li, dd) {
+ font-family: var(--font-body);
+}
+
+:where(
+ .ds-eyebrow,
+ .ds-kicker,
+ .ds-tag,
+ .ds-metric,
+ .quality-code,
+ .quality-hint,
+ .quality-disclaimer
+ ) {
+ font-family: var(--font-mono);
+}
+
@supports (overflow: clip) {
html,
body {
@@ -232,6 +255,7 @@ textarea {
.ds-section {
padding: clamp(72px, 9vw, 112px) clamp(24px, 6vw, 64px);
+ background: var(--paper);
border-bottom: 1px solid var(--border);
}
@@ -248,7 +272,7 @@ textarea {
.ds-section-shell,
.ds-loading,
.ds-error {
- width: min(1240px, 100%);
+ width: min(var(--shell), 100%);
margin: 0 auto;
}
@@ -258,10 +282,45 @@ textarea {
align-items: flex-start;
gap: var(--sp-6);
margin-bottom: var(--sp-10);
+ /* o cabeçalho mede a si mesmo: a mesma regra serve para qualquer largura de tela */
+ container-type: inline-size;
}
.ds-section-meta {
+ flex: 1 1 auto;
+ min-width: 0;
max-width: 760px;
+
+ /* Largo: título à esquerda, descrição à direita, alinhados pela base (some a faixa vazia ao lado do título). */
+ @container (min-width: 880px) {
+ max-width: none;
+ display: grid;
+ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+ grid-template-areas:
+ "eyebrow eyebrow"
+ "title lead"
+ "line line";
+ column-gap: var(--sp-10);
+ align-items: end;
+
+ > .ds-eyebrow {
+ grid-area: eyebrow;
+ }
+
+ > .ds-section-title {
+ grid-area: title;
+ }
+
+ > .ds-section-description {
+ grid-area: lead;
+ max-width: 62ch;
+ font-size: var(--fs-lead);
+ }
+
+ > .ds-draw-line {
+ grid-area: line;
+ }
+ }
}
.ds-eyebrow,
@@ -278,7 +337,7 @@ textarea {
.ds-section-title {
font-family: var(--font-display);
- font-size: clamp(24px, 4vw, 44px);
+ font-size: var(--fs-section-title);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.035em;
@@ -287,8 +346,8 @@ textarea {
.ds-section-description {
max-width: 58ch;
color: rgba(10, 10, 10, 0.74);
- font-size: 14px;
- line-height: 1.82;
+ font-size: 15px;
+ line-height: 1.7;
}
.ds-grid-2,
@@ -301,6 +360,13 @@ textarea {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
+/* Colunas automáticas: sem breakpoint. Cabem 2 até ~1360px de largura útil e 3 acima disso. */
+.ds-grid-fluid {
+ display: grid;
+ gap: var(--sp-6);
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
+}
+
.ds-grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@@ -336,8 +402,8 @@ textarea {
.ds-copy {
margin-top: var(--sp-4);
color: var(--ink-80);
- font-size: 14px;
- line-height: 1.8;
+ font-size: 16px;
+ line-height: 1.6;
flex-grow: 1;
}
@@ -389,6 +455,8 @@ textarea {
.ds-link {
display: inline-flex;
align-items: center;
+ justify-content: center;
+ min-height: 44px; /* alvo de toque minimo e mesma altura em todos os botoes */
gap: var(--sp-2);
text-decoration: none;
font-size: 11px;
@@ -449,8 +517,8 @@ textarea {
.ds-list {
margin-top: var(--sp-5);
padding-left: 18px;
- font-size: 14px;
- line-height: 1.85;
+ font-size: 15px;
+ line-height: 1.7;
flex-grow: 1;
}
@@ -738,7 +806,22 @@ textarea {
@media (max-width: 768px) {
.ds-section {
- padding: 72px 20px;
+ padding: clamp(52px, 13vw, 64px) 20px;
+ }
+
+ .ds-section-header {
+ margin-bottom: var(--sp-8);
+ }
+
+ /* rotulos em 11-12px (antes 9-11px): legiveis no celular sem perder o estilo tecnico */
+ .ds-eyebrow,
+ .ds-kicker {
+ font-size: 11px;
+ }
+
+ .ds-tag,
+ .ds-link {
+ font-size: 12px;
}
.ds-section-title {
@@ -752,8 +835,8 @@ textarea {
.ds-section-description,
.ds-copy,
.ds-list {
- font-size: 13px;
- line-height: 1.75;
+ font-size: 15px;
+ line-height: 1.65;
}
.ds-tags {
@@ -894,6 +977,324 @@ textarea {
}
}
+/* Hero: brilho de fundo e entrada em CSS (so posicao; o texto ja nasce visivel para o LCP) */
+.hero-glow {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background:
+ radial-gradient(55% 65% at 78% 38%, rgba(204, 255, 0, 0.11), transparent 70%),
+ radial-gradient(40% 50% at 6% 92%, rgba(204, 255, 0, 0.05), transparent 70%);
+}
+
+/* Hero: palco de 100svh; em telas grandes ele fica fixo enquanto a rolagem conduz o mergulho da cena 3D.
+ --hero-p (0 a 1) vem de cinematic/HeroField.tsx. */
+.hero {
+ --hero-p: 0;
+ isolation: isolate;
+}
+
+.hero-stage {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ min-height: 100svh;
+ overflow: hidden;
+}
+
+/* Sem WebGL (ou antes de a cena carregar): malha de pontos estática no lugar das camadas */
+.hero-glow::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(circle, rgba(244, 242, 237, 0.22) 1px, transparent 1.5px) 0 0 / 22px 22px;
+ mask: radial-gradient(38% 46% at 74% 50%, #000, transparent 75%);
+ transition: opacity 1.2s var(--ease-out);
+}
+
+.hero:has(.hero-field[data-ready]) .hero-glow::after {
+ opacity: 0;
+}
+
+.hero-field {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition: opacity 1.6s var(--ease-out);
+
+ &[data-ready] {
+ opacity: 1;
+ }
+}
+
+.hero-scrim {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background:
+ linear-gradient(90deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.55) 36%, transparent 62%),
+ linear-gradient(0deg, rgba(10, 10, 10, 0.9), transparent 28%);
+
+ @media (max-width: 1023px) {
+ background: linear-gradient(0deg, rgba(10, 10, 10, 0.92) 0 30%, rgba(10, 10, 10, 0.5) 65%, rgba(10, 10, 10, 0.7));
+ }
+}
+
+/* Entrada: as palavras do título já pintam no primeiro quadro (sem opacity:0, bom para o LCP) e ganham foco em cascata */
+.hero-word {
+ display: inline-block;
+ animation: hero-word 1.1s var(--ease-out) both;
+ animation-delay: calc(0.12s + var(--i) * 45ms);
+}
+
+@keyframes hero-word {
+ from {
+ transform: translateY(0.42em) rotate(2deg);
+ filter: blur(12px);
+ }
+}
+
+.hero-in,
+.hero-foot > * {
+ animation: hero-in 1s var(--ease-out) both;
+ animation-delay: var(--d, 0.05s);
+}
+
+.hero-foot > * {
+ --d: 0.85s;
+}
+
+@keyframes hero-in {
+ from {
+ opacity: 0;
+ transform: translateY(18px);
+ }
+}
+
+.hero-cue-line {
+ width: 56px;
+ height: 1px;
+ background: currentColor;
+ transform-origin: left;
+ animation: hero-cue 2.4s var(--ease-out) infinite;
+}
+
+@keyframes hero-cue {
+ 0% {
+ transform: scaleX(0);
+ }
+ 60% {
+ transform: scaleX(1);
+ opacity: 1;
+ }
+ 100% {
+ transform: scaleX(1);
+ opacity: 0;
+ }
+}
+
+/* Etiquetas presas às camadas da cena: a posição vem da cena a cada quadro (transform), o recuo para a
+ esquerda do ponto de ancoragem fica no translate */
+.hero-tag {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: none;
+ max-width: 230px;
+ translate: calc(-100% - 14px) -50%;
+ border: 1px solid rgba(244, 242, 237, 0.14);
+ background: rgba(10, 10, 10, 0.62);
+ backdrop-filter: blur(4px);
+ padding: 7px 11px;
+ color: rgba(244, 242, 237, 0.78);
+ font: 13px / 1.35 var(--font-body);
+ text-align: right;
+ opacity: 0;
+ pointer-events: none;
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ right: -14px;
+ width: 14px;
+ height: 1px;
+ background: var(--slash);
+ }
+
+ @media (min-width: 1024px) {
+ display: block;
+ }
+}
+
+.hero-tag-title,
+.hero-caption-title {
+ display: block;
+ color: var(--slash);
+ font: 600 11px / 1.4 var(--font-mono);
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+.hero-captions {
+ display: none;
+}
+
+/* Hero fixo com o mergulho: em qualquer largura, desde que a tela tenha altura para o conteúdo caber */
+@media (min-height: 700px) and (prefers-reduced-motion: no-preference) {
+ .hero {
+ height: 220svh;
+ }
+
+ /* Legendas do mergulho: cada uma aparece enquanto a câmera atravessa a sua camada (--hero-p) */
+ .hero-captions {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: end center;
+ margin: 0;
+ padding: 0 var(--sp-6) 11svh;
+ list-style: none;
+ pointer-events: none;
+ /* faixa escura atrás da legenda, como em legenda de cinema, sem cobrir o centro da cena */
+ background: linear-gradient(0deg, rgba(10, 10, 10, 0.75), transparent 38%);
+ opacity: clamp(0, min((var(--hero-p) - 0.24) * 14, (0.94 - var(--hero-p)) * 14), 1);
+
+ & li {
+ --mid: calc((var(--from) + var(--to)) / 2);
+ grid-area: 1 / 1;
+ max-width: 26ch;
+ color: #f4f2ed;
+ font: 600 clamp(24px, 2.8vw + 12px, 48px) / 1.12 var(--font-display);
+ letter-spacing: -0.035em;
+ text-align: center;
+ text-shadow: 0 2px 40px rgba(10, 10, 10, 0.9);
+ opacity: clamp(0, min((var(--hero-p) - var(--from)) * 14, (var(--to) - var(--hero-p)) * 14), 1);
+ translate: 0 calc((var(--hero-p) - var(--mid)) * -160px);
+ }
+
+ /* mesmos intervalos em que a câmera enquadra cada camada (CAMERA_Z em HeroFieldScene.tsx) */
+ & li:nth-child(1) {
+ --from: 0.26;
+ --to: 0.46;
+ }
+
+ & li:nth-child(2) {
+ --from: 0.52;
+ --to: 0.71;
+ }
+
+ & li:nth-child(3) {
+ --from: 0.76;
+ --to: 0.92;
+ }
+
+ & .hero-caption-title {
+ margin-bottom: var(--sp-3);
+ font-size: 12px;
+ }
+ }
+
+ .hero-stage {
+ position: sticky;
+ top: 0;
+ height: 100svh;
+ }
+
+ /* o texto sai de cena enquanto a câmera mergulha: sobe, encolhe e perde o foco */
+ .hero-content {
+ transform: translate3d(0, calc(var(--hero-p) * -16vh), 0) scale(calc(1 - var(--hero-p) * 0.08));
+ transform-origin: 0 50%;
+ opacity: calc(1 - var(--hero-p) * 4.2);
+ filter: blur(calc(var(--hero-p) * 18px));
+ }
+
+ .hero-foot {
+ opacity: calc(1 - var(--hero-p) * 5);
+ }
+
+ .hero-scrim {
+ opacity: calc(1 - var(--hero-p) * 1.4);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .hero-word,
+ .hero-in,
+ .hero-foot > *,
+ .hero-cue-line {
+ animation: none;
+ }
+}
+
+/* Transições entre seções: app/components/cinematic/useCinematicScroll.ts (GSAP + Lenis).
+ O fundo escuro aparece nas frestas enquanto uma seção entra sobre a outra. */
+.ds-main {
+ background: var(--ink);
+}
+
+/* Lenis controla a suavidade da rolagem: o scroll-behavior nativo brigaria com ele */
+html.lenis,
+html.lenis body {
+ height: auto;
+}
+
+html.lenis {
+ scroll-behavior: auto;
+}
+
+/* Capa dos cards de projeto: captura real ou painel gerado em codigo */
+.ds-cover {
+ position: relative;
+ flex: none; /* o card e uma coluna flex: sem isto a capa encolhe e perde a proporcao */
+ aspect-ratio: 16 / 10;
+ overflow: hidden;
+ margin-bottom: var(--sp-5);
+ border: 1px solid var(--border);
+ background: var(--ink);
+
+ & img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: top;
+ transition: transform 0.7s var(--ease-out);
+ }
+
+ .ds-card:hover & img {
+ transform: scale(1.035);
+ }
+}
+
+.ds-section-dark .ds-cover {
+ border-color: rgba(255, 255, 255, 0.1);
+}
+
+.ds-cover-fallback {
+ display: grid;
+ place-items: center;
+ padding: var(--sp-4);
+ color: var(--paper);
+ background:
+ radial-gradient(120% 90% at 100% 0%, var(--slash-dim), transparent 60%),
+ linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 32px,
+ linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 100%,
+ var(--ink);
+
+ & .ds-cover-mark {
+ font-family: var(--font-display);
+ font-size: clamp(48px, 7vw, 96px);
+ font-weight: 800;
+ letter-spacing: -0.05em;
+ color: var(--slash);
+ }
+
+ /* so decorativa: no celular some, para a pagina nao crescer sem informacao nova */
+ @media (max-width: 768px) {
+ display: none;
+ }
+}
+
/* Cinematic card hover effect */
.ds-card {
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
@@ -915,676 +1316,6 @@ textarea {
will-change: transform, opacity;
}
-/* Notebook story */
-.notebook-story {
- position: relative;
- overflow: clip;
- background: var(--ink);
- color: var(--paper);
-}
-
-.notebook-story-runway {
- position: relative;
- min-height: var(--notebook-runway, 560vh);
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .notebook-story-pending {
- min-height: var(--notebook-runway, 560vh);
- }
-}
-
-.notebook-story-sticky {
- position: sticky;
- top: 0;
- display: grid;
- height: 100dvh;
- min-height: 100dvh;
- place-items: center;
- padding: 32px clamp(20px, 3vw, 48px);
-}
-
-.notebook-story-grid {
- display: grid;
- grid-template-columns: minmax(160px, 0.24fr) minmax(0, 1fr);
- align-items: center;
- gap: clamp(20px, 3vw, 48px);
- width: min(1440px, 100%);
-}
-
-.notebook-story-copy {
- max-width: 360px;
-}
-
-.notebook-story-kicker,
-.notebook-fallback-kicker,
-.notebook-browser-eyebrow {
- color: var(--slash);
- font-family: var(--font-mono);
- font-size: 10px;
- font-weight: 700;
- letter-spacing: 0.16em;
- line-height: 1.2;
- text-transform: uppercase;
-}
-
-.notebook-story-copy h2 {
- margin-top: var(--sp-4);
- max-width: 8ch;
- color: var(--white);
- font-family: var(--font-display);
- font-size: clamp(38px, 5vw, 72px);
- font-weight: 500;
- letter-spacing: -0.06em;
- line-height: 0.94;
-}
-
-.notebook-story-copy p {
- max-width: 32ch;
- margin-top: var(--sp-6);
- color: rgba(244, 242, 237, 0.64);
- font-size: 13px;
- line-height: 1.7;
-}
-
-.notebook-story-stage {
- position: relative;
- display: grid;
- min-width: 0;
- height: min(82dvh, 780px);
- place-items: center;
-}
-
-.notebook-story-canvas {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
-}
-.notebook-story-canvas > div:first-child,
-.notebook-story-canvas canvas {
- pointer-events: none;
-}
-
-.notebook-story-controls {
- display: none;
-}
-
-.notebook-story-static-content {
- width: min(1080px, 100%);
- margin: 0 auto;
- padding: clamp(48px, 9vw, 112px) clamp(20px, 6vw, 80px);
-}
-
-.notebook-story-static-content > .notebook-fallback {
- width: 100%;
- margin: 0;
- padding: 0;
-}
-
-.notebook-screen-surface {
- pointer-events: auto;
- overflow: hidden;
- border-radius: 2px;
- transform-origin: 0 0;
-}
-
-.notebook-screen-surface .notebook-browser {
- width: 100%;
- height: 100%;
- box-shadow: none;
-}
-
-.notebook-screen-surface .notebook-browser {
- display: flex;
- flex-direction: column;
-}
-
-.notebook-screen-surface .notebook-browser-bar {
- min-height: 26px;
-}
-
-.notebook-screen-surface .notebook-browser-body {
- display: flex;
- flex: 1;
- min-height: 0;
- flex-direction: column;
- padding: 10px 14px;
-}
-
-.notebook-screen-surface .notebook-browser-heading {
- display: none;
-}
-
-.notebook-screen-surface .notebook-tablist {
- margin-top: 0;
-}
-
-.notebook-screen-surface .notebook-panel {
- flex: 1;
- min-height: 0;
- grid-template-columns: 1fr;
- grid-template-rows: minmax(0, 1fr) auto;
- gap: 10px;
- margin-top: 10px;
-}
-
-.notebook-screen-surface .notebook-panel .notebook-screenshot-wrap {
- grid-row: 1;
- align-self: stretch;
- width: 100%;
- min-height: 0;
- aspect-ratio: auto;
-}
-
-.notebook-screen-surface .notebook-panel-copy {
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- column-gap: 12px;
- align-items: center;
-}
-
-.notebook-screen-surface .notebook-panel-copy h3 {
- font-size: 20px;
-}
-
-.notebook-screen-surface .notebook-panel-copy > p {
- grid-column: 1;
- margin-top: 4px;
- font-size: 12px;
-}
-
-.notebook-screen-surface .notebook-panel-copy ul {
- grid-column: 1;
- margin-top: 6px;
-}
-
-.notebook-screen-surface .notebook-panel-copy > a,
-.notebook-screen-surface .notebook-panel-copy > span {
- grid-column: 2;
- grid-row: 1 / 4;
- max-width: 180px;
- margin-top: 0;
- font-size: 11px;
-}
-
-.notebook-fallback {
- width: min(1080px, 100%);
- margin: 0 auto;
- padding: clamp(48px, 9vw, 112px) clamp(20px, 6vw, 80px);
-}
-
-.notebook-fallback-intro {
- width: min(560px, 100%);
- margin-bottom: var(--sp-8);
-}
-
-.notebook-fallback-intro p {
- margin-top: var(--sp-3);
- color: rgba(244, 242, 237, 0.68);
- font-size: 13px;
-}
-
-.notebook-browser {
- position: relative;
- width: min(100%, 940px);
- overflow: hidden;
- border: 1px solid rgba(244, 242, 237, 0.16);
- background: #101313;
- color: var(--paper);
- box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
-}
-
-.notebook-browser-bar {
- display: flex;
- align-items: center;
- gap: 6px;
- min-height: 36px;
- padding: 0 var(--sp-4);
- border-bottom: 1px solid rgba(244, 242, 237, 0.1);
- background: #181d1d;
-}
-
-.notebook-browser-dot {
- width: 7px;
- height: 7px;
- border-radius: 50%;
- background: rgba(244, 242, 237, 0.34);
-}
-
-.notebook-browser-dot:first-child {
- background: #e46c4d;
-}
-
-.notebook-browser-dot:nth-child(2) {
- background: #d6aa57;
-}
-
-.notebook-browser-dot:nth-child(3) {
- background: #7cbd67;
-}
-
-.notebook-browser-address {
- margin-left: var(--sp-3);
- color: rgba(244, 242, 237, 0.42);
- font-family: var(--font-mono);
- font-size: 10px;
- letter-spacing: 0.04em;
-}
-
-.notebook-browser-body {
- padding: clamp(20px, 3vw, 32px);
-}
-
-.notebook-browser-heading {
- display: flex;
- align-items: baseline;
- justify-content: space-between;
- gap: var(--sp-4);
-}
-
-.notebook-browser-counter {
- color: rgba(244, 242, 237, 0.44);
- font-family: var(--font-mono);
- font-size: 10px;
- letter-spacing: 0.08em;
-}
-
-.notebook-tablist {
- display: grid;
- grid-auto-flow: column;
- grid-auto-columns: minmax(0, 1fr);
- gap: 1px;
- margin-top: var(--sp-5);
- border-block: 1px solid rgba(244, 242, 237, 0.12);
-}
-
-.notebook-tab {
- display: flex;
- min-width: 0;
- min-height: 44px;
- align-items: center;
- gap: var(--sp-2);
- padding: 10px;
- border: 1px solid transparent;
- border-bottom-width: 2px;
- background: transparent;
- color: rgba(244, 242, 237, 0.48);
- cursor: pointer;
- text-align: left;
- transition:
- color 180ms ease,
- border-color 180ms ease,
- background-color 180ms ease,
- transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
-}
-
-.notebook-tab:hover,
-.notebook-tab[aria-selected="true"] {
- border-bottom-color: var(--slash);
- background: rgba(204, 255, 0, 0.06);
- color: var(--white);
-}
-
-.notebook-tab:focus-visible {
- outline: 2px solid var(--slash);
- outline-offset: -3px;
-}
-
-.notebook-tab-number {
- flex: 0 0 auto;
- color: var(--slash);
- font-family: var(--font-mono);
- font-size: 10px;
-}
-
-.notebook-tab-title {
- overflow: hidden;
- font-family: var(--font-display);
- font-size: 12px;
- font-weight: 500;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.notebook-panel {
- display: grid;
- grid-template-columns: 1fr;
- align-items: start;
- gap: var(--sp-6);
- margin-top: var(--sp-6);
-}
-
-.notebook-panel-copy {
- order: 2;
-}
-
-.notebook-panel-copy h3 {
- color: var(--white);
- font-family: var(--font-display);
- font-size: clamp(22px, 3vw, 36px);
- font-weight: 500;
- letter-spacing: -0.04em;
- line-height: 1;
-}
-
-.notebook-panel-copy > p {
- margin-top: var(--sp-2);
- color: rgba(244, 242, 237, 0.6);
- font-size: 12px;
- line-height: 1.5;
-}
-
-.notebook-panel-copy ul {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
- margin-top: var(--sp-4);
- list-style: none;
-}
-
-.notebook-panel-copy li {
- padding: 4px 7px;
- border: 1px solid rgba(244, 242, 237, 0.15);
- color: rgba(244, 242, 237, 0.7);
- font-family: var(--font-mono);
- font-size: 9px;
- line-height: 1.2;
-}
-
-.notebook-panel-copy a {
- display: inline-flex;
- min-height: 44px;
- align-items: center;
- gap: 6px;
- margin-top: var(--sp-5);
- padding: 0 14px;
- border: 1px solid var(--slash);
- background: var(--slash);
- color: var(--ink);
- font-family: var(--font-mono);
- font-size: 10px;
- font-weight: 700;
- letter-spacing: 0.08em;
- text-decoration: none;
- text-transform: uppercase;
- transition:
- background-color 180ms ease,
- border-color 180ms ease,
- transform 180ms ease;
-}
-
-.notebook-panel-copy a:hover {
- border-color: var(--white);
- background: var(--white);
- color: var(--ink);
-}
-
-.notebook-panel-copy a:active {
- transform: scale(0.98);
-}
-
-.notebook-panel-copy a:focus-visible {
- outline: 2px solid var(--slash);
- outline-offset: 3px;
-}
-
-.notebook-screenshot-wrap {
- position: relative;
- overflow: hidden;
- aspect-ratio: 8 / 5;
- border: 1px solid rgba(244, 242, 237, 0.16);
- background: var(--paper-dark);
-}
-
-.notebook-screenshot-status {
- position: absolute;
- z-index: 2;
- inset: auto 0 0;
- padding: 10px 14px;
- background: rgba(10, 10, 10, 0.92);
- color: var(--paper);
- font-size: 12px;
- line-height: 1.4;
-}
-
-.notebook-screenshot-wrap img {
- display: block;
- width: 100%;
- height: 100%;
- object-fit: contain;
-}
-.notebook-screenshot {
- position: absolute;
- inset: 0;
-}
-
-.notebook-screenshot-current {
- z-index: 1;
- animation: notebook-screenshot-in 220ms ease both;
-}
-
-.notebook-screenshot-outgoing {
- z-index: 0;
-}
-
-.notebook-screenshot-pending {
- opacity: 0;
- pointer-events: none;
-}
-
-@keyframes notebook-screenshot-in {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-.notebook-cursor {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 3;
- width: 28px;
- height: 36px;
- overflow: visible;
- opacity: 0;
- pointer-events: none;
- transform-origin: 1px 1px;
- filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.4));
-}
-
-.notebook-cursor-pulse {
- opacity: 0;
-}
-
-.notebook-cursor.is-clicking .notebook-cursor-pulse {
- opacity: 0.7;
-}
-
-@media (max-width: 1024px) {
- .notebook-story-runway {
- min-height: var(--notebook-mobile-runway, 440svh);
- }
-
- .notebook-story-sticky {
- height: 100svh;
- min-height: 100svh;
- padding: 64px 20px 16px;
- }
-
- .notebook-story-grid {
- grid-template-columns: 1fr;
- gap: 12px;
- }
-
- .notebook-story-copy {
- max-width: 560px;
- }
-
- .notebook-story-copy h2 {
- max-width: 12ch;
- margin-top: 8px;
- font-size: clamp(32px, 6vw, 44px);
- }
-
- .notebook-story-copy p {
- max-width: 44ch;
- margin-top: 8px;
- line-height: 1.45;
- }
-
- .notebook-story-stage {
- height: min(68vw, 38svh);
- min-height: 0;
- }
-
- .notebook-story-controls {
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- align-items: center;
- gap: 8px 12px;
- min-width: 0;
- }
-
- .notebook-story-project-buttons {
- display: flex;
- grid-column: 1 / -1;
- gap: 8px;
- }
-
- .notebook-story-project-buttons button,
- .notebook-story-controls > a {
- display: inline-flex;
- min-width: 44px;
- min-height: 44px;
- align-items: center;
- justify-content: center;
- padding: 8px 12px;
- border: 1px solid rgba(244, 242, 237, 0.24);
- color: var(--white);
- font-family: var(--font-mono);
- font-size: 11px;
- text-decoration: none;
- touch-action: manipulation;
- }
-
- .notebook-story-project-buttons button[aria-pressed="true"] {
- border-color: var(--slash);
- color: var(--slash);
- }
-
- .notebook-story-project-buttons button:focus-visible,
- .notebook-story-controls > a:focus-visible {
- outline: 2px solid var(--slash);
- outline-offset: 3px;
- }
-
- .notebook-story-controls > p {
- min-width: 0;
- font-size: 14px;
- overflow-wrap: anywhere;
- }
-
- .notebook-story-controls > span {
- max-width: 18ch;
- font-size: 10px;
- }
-}
-
-@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
- .notebook-story-pending {
- min-height: var(--notebook-mobile-runway, 440svh);
- }
-}
-
-@media (max-width: 680px) {
- .notebook-story-sticky {
- padding-inline: 20px;
- }
-
- .notebook-story-copy h2 {
- font-size: clamp(32px, 8vw, 44px);
- }
-
- .notebook-fallback {
- padding-inline: 20px;
- }
-
- .notebook-browser-body {
- padding: 16px;
- }
-
- .notebook-tablist {
- grid-auto-flow: row;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-
- .notebook-tab {
- padding: 12px 8px;
- }
-
- .notebook-tab-title {
- white-space: normal;
- }
-
- .notebook-screen-surface .notebook-tablist {
- grid-auto-flow: column;
- grid-template-columns: none;
- }
-
- .notebook-screen-surface .notebook-tab-title {
- white-space: nowrap;
- }
-
- .notebook-panel {
- grid-template-columns: 1fr;
- }
-
- .notebook-panel-copy {
- order: 2;
- }
-}
-
-@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
- .notebook-story-grid {
- grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
- }
-
- .notebook-story-copy h2 {
- font-size: 28px;
- }
-
- .notebook-story-copy p {
- display: none;
- }
-
- .notebook-story-stage {
- height: 48svh;
- }
-
- .notebook-story-controls {
- grid-column: 1 / -1;
- grid-template-columns: auto minmax(0, 1fr) auto;
- }
-
- .notebook-story-project-buttons {
- grid-column: auto;
- }
-}
-
-@media (prefers-reduced-motion: reduce) {
- .notebook-tab,
- .notebook-cursor,
- .notebook-screenshot-current,
- .notebook-screenshot-outgoing {
- transition: none;
- animation: none;
- }
-}
-
/* Interactive quality laboratory — scoped to the Lighthouse section. */
.quality-lab {
--quality-muted: color-mix(in srgb, var(--paper) 72%, transparent);
@@ -1751,6 +1482,39 @@ textarea {
}
}
+/* Entrada do diagrama (classe is-drawing posta por useCinematicScroll): linhas se desenham e rótulos
+ aparecem uma única vez, sem acompanhar cada quadro da rolagem */
+@media (prefers-reduced-motion: no-preference) {
+ /* só com as transições ativas (html.lenis): sem o script, o diagrama aparece normalmente */
+ html.lenis .quality-lab:not(.is-drawing) :is(.quality-blueprint, .quality-visual-label, .quality-visual figcaption) {
+ opacity: 0;
+ }
+
+ .quality-lab.is-drawing .quality-blueprint :is(.quality-dimensions path, .quality-browser-frame, .quality-wire, .quality-browser-button) {
+ stroke-dasharray: 1800; /* maior que o maior contorno (moldura: ~1600) */
+ animation: quality-draw 1.1s var(--ease-out) both;
+ }
+
+ .quality-lab.is-drawing :is(.quality-blueprint, .quality-visual-label, .quality-visual figcaption) {
+ animation: quality-fade 0.6s var(--ease-out) both;
+ }
+}
+
+@keyframes quality-draw {
+ from {
+ stroke-dashoffset: 1800;
+ }
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes quality-fade {
+ from {
+ opacity: 0;
+ }
+}
+
@keyframes quality-trace {
from {
stroke-dashoffset: 1;
@@ -2011,3 +1775,68 @@ textarea {
transition: none;
}
}
+
+/* Navegação entre páginas (app/template.tsx liga as transições de visualização do React): a página atual
+ recua e desfoca, a nova chega de baixo. O cabeçalho tem nome próprio e fica parado durante a troca. */
+.site-header {
+ view-transition-name: site-header;
+}
+
+::view-transition-group(site-header) {
+ animation: none;
+}
+
+::view-transition-group(page) {
+ animation: none;
+}
+
+::view-transition-old(page) {
+ animation: page-out 280ms cubic-bezier(0.7, 0, 0.84, 0) both;
+}
+
+::view-transition-new(page) {
+ animation: page-in 640ms var(--ease-out) 160ms both;
+}
+
+@keyframes page-out {
+ to {
+ opacity: 0;
+ transform: scale(0.97);
+ filter: blur(8px);
+ }
+}
+
+@keyframes page-in {
+ from {
+ opacity: 0;
+ transform: translateY(40px) scale(1.015);
+ filter: blur(10px);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ ::view-transition-old(page),
+ ::view-transition-new(page) {
+ animation: none;
+ }
+}
+
+/* Títulos de seção (TextDiffuseReveal): entram palavra por palavra só com transparência e deslocamento,
+ que a placa de vídeo compõe sem redesenhar */
+.text-reveal-word {
+ display: inline-block;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .text-reveal-word {
+ transition:
+ opacity 0.7s var(--ease-out),
+ transform 0.9s var(--ease-out);
+ transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms);
+ }
+
+ .text-reveal:not([data-shown]) .text-reveal-word {
+ opacity: 0;
+ transform: translateY(0.35em);
+ }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 6ed082a..6fe63a7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,7 +12,7 @@ import "./globals.css";
const defaultTitle = "Sistemas sob medida para empresas | Evandro.dev.br";
const seoDescription =
- "Desenvolvimento de sistemas web, aplicativos e integrações sob medida. Do entendimento do negócio à entrega em produção, com Evandro Fonseca Junior. Base em Santa Catarina e atendimento remoto.";
+ "Sistemas web, aplicativos e integrações sob medida, do negócio à produção, com Evandro Fonseca Junior. Base em Santa Catarina, atendimento remoto.";
const spaceGrotesk = Space_Grotesk({
subsets: ["latin"],
diff --git a/app/page.tsx b/app/page.tsx
index 7450ea7..d8667eb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,10 +1,25 @@
import { loadFeaturedProjects, portfolio } from "@/lib/portfolio-data";
import CinematicHome from "./components/cinematic/CinematicHome";
+/** Anos de experiência vêm do próprio texto do portfólio ("5 anos de experiência"); sem o trecho, o número some. */
+function yearsOfExperience() {
+ const match = portfolio.personal.summary.match(/(\d+)\s+anos de experi/i);
+ return match ? Number(match[1]) : undefined;
+}
+
export default async function Home() {
+ const projects = await loadFeaturedProjects();
return (
+ project.demoUrl && project.demoAvailability !== "unavailable",
+ ).length,
+ }}
+ projects={projects}
experiences={portfolio.experiences}
skillCategories={portfolio.skills.technical}
/>
diff --git a/app/privacidade/page.tsx b/app/privacidade/page.tsx
index cabcd7b..5eda1d2 100644
--- a/app/privacidade/page.tsx
+++ b/app/privacidade/page.tsx
@@ -12,6 +12,7 @@ export const metadata: Metadata = {
"Como o portfólio trata dados de contato, consentimento de analytics, links externos e solicitações de privacidade.",
alternates: { canonical: pageUrl },
openGraph: {
+ locale: "pt_BR",
title: `Privacidade e consentimento | ${siteName}`,
description:
"Informações factuais sobre contato, analytics e preferências de privacidade no portfólio.",
diff --git a/app/servicos/[slug]/page.tsx b/app/servicos/[slug]/page.tsx
index 0789b35..7ce805a 100644
--- a/app/servicos/[slug]/page.tsx
+++ b/app/servicos/[slug]/page.tsx
@@ -45,6 +45,7 @@ export async function generateMetadata({
canonical: url,
},
openGraph: {
+ locale: "pt_BR",
title: service.seoTitle,
description: service.metaDescription,
url,
diff --git a/app/servicos/page.tsx b/app/servicos/page.tsx
index 420ee83..5e172a0 100644
--- a/app/servicos/page.tsx
+++ b/app/servicos/page.tsx
@@ -56,6 +56,7 @@ export const metadata: Metadata = {
canonical: pageUrl,
},
openGraph: {
+ locale: "pt_BR",
title: pageTitle,
description: pageDescription,
url: pageUrl,
diff --git a/app/template.tsx b/app/template.tsx
new file mode 100644
index 0000000..6f0c6e3
--- /dev/null
+++ b/app/template.tsx
@@ -0,0 +1,6 @@
+import { ViewTransition } from "react";
+
+/** O template remonta a cada navegação; o conteúdo leva o nome "page" e anima com page-out/page-in (globals.css). */
+export default function Template({ children }: { children: React.ReactNode }) {
+ return {children} ;
+}
diff --git a/docs/logo-prompts.md b/docs/logo-prompts.md
new file mode 100644
index 0000000..6c62fa7
--- /dev/null
+++ b/docs/logo-prompts.md
@@ -0,0 +1,98 @@
+# Prompts de logo para os projetos do portfólio
+
+Um prompt por projeto listado no site (`public/portfolio-data.json`). Cada um parte do que o projeto realmente é e das cores que ele já usa nas capturas de tela do repositório (`public/assets/prints/`). Quando não existe captura pública (Twins Lab, Reddit Posts Explorer, MinGW GCC Installer), a paleta abaixo é **proposta**, não extraída.
+
+## Antes de gerar
+
+- **Marcas de clientes.** SEV Moda Íntima, SC Plus e AS Serviços têm identidade própria (a SEV e a AS Serviços já têm logo). Os prompts abaixo geram um **selo de portfólio** (miniatura do projeto nos cards e no favicon), não uma nova marca para o cliente. Se o cliente autorizar, use o logo oficial dele.
+- **Texto em imagem.** Geradores erram letras. Todos os prompts pedem marca sem palavras (só monograma quando indicado). O nome do projeto entra depois, como texto no site.
+- **Formato.** Gere 1:1, em 4 variações por prompt, escolha uma e vetorize (SVG). Exporte `512 px`, `192 px` e `32 px` para testar legibilidade.
+- **Onde salvar.** `public/assets/projects/.svg` (e `.png`), com o `id` do projeto: `sev-modaintima`, `nutriscan`, `twins-lab`, `reddit-explorer`, `sc-plus`, `gcc-installer`, `as-servicos`.
+
+## Bloco de estilo comum (cole no início de cada prompt)
+
+```
+Minimal flat vector logo mark, geometric, strong silhouette, 2 to 3 flat colors, no gradients, no shadows, no 3D, no bevel, centered on a square 1:1 canvas with 12% padding, solid background, must stay recognizable at 32x32 pixels, clean even stroke weight, no text.
+```
+
+## Prompt negativo comum
+
+```
+text, words, letters (except the monogram when requested), photo, realistic, 3D render, drop shadow, glow, bevel, gradient mesh, watermark, mockup, busy details, thin hairlines, multiple logos, border frame, QR code
+```
+
+---
+
+## 1. SEV Moda Íntima (`sev-modaintima`)
+
+Loja virtual de moda íntima com vitrine cinematográfica e pedido pelo WhatsApp. Identidade observada: vinho/vermelho profundo, creme, serifa elegante de alto contraste.
+
+```
+[bloco de estilo comum]
+Logo mark for a premium lingerie e-commerce brand. A monogram of the letters "S" and "V" in an elegant high-contrast serif, the two letters interlocked inside a soft arch that echoes the curve of lace trim. Palette: deep wine red #9B1C31 and warm cream #F6EFE6 on a #1A0F12 near-black background. Refined, feminine, confident, not cartoonish.
+```
+
+Variação clara: mesmo desenho em vinho sobre fundo creme.
+
+## 2. NutriScan (`nutriscan`)
+
+Consulta de produtos por nome ou código de barras, com cache JSON e Open Food Facts. Identidade observada: fundo creme, verde-floresta, serifa com itálico.
+
+```
+[bloco de estilo comum]
+Logo mark for a food-data lookup app. A single leaf whose central vein is replaced by a short row of vertical barcode bars, framed by four small corner brackets like a scanner viewfinder. Palette: forest green #2E7D4F on warm cream #F7F3EA, dark ink #1F1B16 for the bars only. Friendly, trustworthy, calm, editorial.
+```
+
+## 3. Twins Lab (`twins-lab`)
+
+Protótipo de gêmeo digital industrial: simulador de reator e transmissão de eventos pelo servidor (SSE) a cada dois segundos. Paleta **proposta**.
+
+```
+[bloco de estilo comum]
+Logo mark for an industrial digital-twin prototype. Two identical cylindrical reactor vessels side by side, the right one drawn as a clean outline (the digital twin) and the left one solid, joined by a short pulse line (a small heartbeat zigzag) between them. Palette: graphite #0F1720 background, solid vessel in off-white #E8EEF2, twin outline and pulse in electric cyan #22D3EE. Technical, precise, calm.
+```
+
+## 4. Reddit Posts Explorer (`reddit-explorer`)
+
+Coleta posts do r/artificial, grava no MongoDB e filtra por período, upvotes ou comentários. Paleta **proposta**; evite o mascote e o laranja exato do Reddit (marca registrada).
+
+```
+[bloco de estilo comum]
+Logo mark for a tool that explores and filters social-media posts about artificial intelligence. Three overlapping rounded speech bubbles arranged like a stack, with a small filter funnel notch cut into the front bubble. Palette: deep indigo #2B2A6E and off-white #F4F2ED, one warm accent #FF7A45 on the funnel only. Do not use any alien or mascot character and do not imitate the Reddit logo. Smart, clear, neutral.
+```
+
+## 5. SC Plus (`sc-plus`)
+
+Site institucional de educação, ciência e tecnologia em Garuva-SC (identidade observada: fundo escuro, verde vivo, sans geométrica).
+
+```
+[bloco de estilo comum]
+Logo mark for a community education, science and technology organization focused on sustainability. A plus sign whose upper arm grows into a small sprout with two leaves, and whose center is a single round circuit node. Palette: vivid green #22C55E and white #FFFFFF on a near-black #0A0A0A background. Optimistic, modern, community-oriented.
+```
+
+## 6. MinGW GCC Installer (`gcc-installer`)
+
+Instalador gráfico de MinGW-w64/GCC para Windows: lista builds, baixa, instala em `C:\mingw64` e ajusta o PATH. Paleta **proposta**; sem logotipo do Windows.
+
+```
+[bloco de estilo comum]
+Logo mark for a developer-tool installer. An open package box with a downward arrow entering it, and a terminal prompt ">_" cut out of the front face of the box. Palette: slate #1E293B background, box in sky blue #38BDF8, arrow and prompt in white #FFFFFF. Do not use the Windows logo or any four-pane window shape. Practical, engineered, no-nonsense.
+```
+
+## 7. AS Serviços (`as-servicos`)
+
+Site institucional em Next.js com cena 3D gerada em código (casa wireframe, instalação elétrica e placa-mãe; três disciplinas). Identidade observada: azul forte, camadas de prancha em roxo, azul e cobre.
+
+```
+[bloco de estilo comum]
+Logo mark for a multidisciplinary engineering firm (building, electrical, computing). Three isometric layers stacked like architectural drawing sheets, drawn only with thin even outlines and small round node dots at the corners; the stack reads as a simple geometric peak. Palette: strong blue #0B5FD8 for the top layer, violet #7C4DFF for the middle layer, copper #B26A2B for the bottom layer, on white #FFFFFF. Blueprint feel, clean, technical, no letters.
+```
+
+---
+
+## Checklist depois de gerar
+
+- [ ] Conferir em 32 px e em fundo claro e escuro.
+- [ ] Vetorizar e limpar nós (SVG).
+- [ ] Salvar em `public/assets/projects/.svg` e `.png`.
+- [ ] Para marcas de clientes, confirmar autorização de uso antes de publicar.
diff --git a/docs/seo-geo-operations.md b/docs/seo-geo-operations.md
index 83e268c..b32ff8a 100644
--- a/docs/seo-geo-operations.md
+++ b/docs/seo-geo-operations.md
@@ -4,6 +4,8 @@
Este é um runbook declarativo para um operador autorizado. Ele descreve evidências que deverão ser coletadas em contas e painéis externos; não registra execução, acesso, configuração, medição ou resultado externo. Search Console, Bing Webmaster Tools, Cloudflare, CrUX e RUM são próximas ações externas, não evidência do repositório.
+Medições executadas e o auditor repetível estão em `docs/seo-geo-validation.md`.
+
## Regras de operação
- Executar cada ação somente com autorização e na propriedade correta.
diff --git a/docs/seo-geo-validation.md b/docs/seo-geo-validation.md
new file mode 100644
index 0000000..fb38e02
--- /dev/null
+++ b/docs/seo-geo-validation.md
@@ -0,0 +1,75 @@
+# SEO, AEO e GEO: medição antes e depois (2026-10-05)
+
+Este documento registra o que foi **medido**, com ferramenta e comando, e o que ainda **depende de conta externa**. Ele complementa `docs/seo-geo-operations.md` (runbook de Search Console, Bing, Cloudflare e CrUX, ainda não executado) e respeita as exclusões dele: sem `llms.txt`, sem `FAQPage`/`ProfessionalService`/`LocalBusiness`, sem páginas por cidade, sem `keywords`, sem datas ou métricas inventadas.
+
+## Como repetir
+
+```bash
+# 1) auditoria (HTML sem JavaScript, como um robô vê); funciona em produção ou localhost
+node scripts/seo-audit.mjs --base https://evandro.dev.br --out audit-depois.json
+
+# 2) comparar duas execuções (antes.json vs depois.json); sai com código 2 se algo piorou
+node scripts/seo-compare.mjs audit-antes.json audit-depois.json
+```
+
+A auditoria lê o `sitemap.xml` e confere, página a página: status, compressão, TTFB, `lang`, `title` e `description` (tamanho e unicidade), canônica própria, indexabilidade, um `h1` e hierarquia, `alt` das imagens, links internos e externos, Open Graph e Twitter Card (e se a imagem social abre), JSON-LD (válido, referências `@id` resolvem, sem os tipos excluídos pela política), resposta direta cedo no HTML, acesso de 8 robôs de busca e de IA (Googlebot, bingbot, OAI-SearchBot, GPTBot, ChatGPT-User, Claude-SearchBot, ClaudeBot, PerplexityBot), e-mail visível para robôs, links do GitHub e links internos quebrados. Cada verificação é passa/falha com a evidência; não existe "nota" inventada.
+
+## Resultado: `main` contra a branch (build de produção local, 17 URLs)
+
+| Grupo | `main` | branch |
+|---|---:|---:|
+| técnico | 57/57 | 57/57 |
+| on-page | 204/221 | **213/221** |
+| social (Open Graph e Twitter) | 35/51 | **51/51** |
+| AEO/GEO | 54/60 | **56/60** |
+| dados estruturados | 84/84 | 84/84 |
+
+27 verificações corrigidas e 0 pioradas. O que mudou: `og:locale` em todas as rotas (só a home tinha), títulos e descrições mais curtos, e conteúdo textual novo em 2 cases.
+
+Lighthouse (categorias SEO, acessibilidade e boas práticas, mobile): 100 / 97 / 100 nas duas versões. **O Lighthouse não distingue esse tipo de melhoria**, por isso a auditoria acima é a medida principal.
+
+Validador independente: `structured-data-testing-tool` (npm), preset de redes sociais. Facebook/Open Graph 100% e Twitter 71–85%; o aviso restante é `twitter:site` ausente (opcional). A ferramenta **não** interpreta JSON-LD dentro de `@graph` (reporta "WebSite não encontrado" por limitação dela, não do site); para o JSON-LD, use os dois validadores manuais abaixo.
+
+## O que foi alterado no código
+
+- `openGraph.locale: "pt_BR"` nas 6 rotas que redefinem `openGraph`.
+- Titles: casos passam de "Case de Engenharia de Software" para "Case de Engenharia"; `/curriculo`, Tauri e Engenharia de Software ficam mais curtos. Descrição da home de 193 para 146 caracteres e a de AS Serviços de 184 para 136.
+- `Person` (JSON-LD) ganha `jobTitle` e `knowsAbout`, ambos já visíveis no site.
+- Reddit Posts Explorer e MinGW GCC Installer ganham resposta, desafio, implementação, limites e fontes fixadas em commit (repositórios públicos); os textos anteriores diziam o que o código não sustenta (SSG, "rate limiting" por cache, busca em tempo real, download assíncrono, monitoramento).
+- SC Plus: removida a alegação "otimizada para Core Web Vitals / LCP < 2,5 s". Medição local (Lighthouse mobile): LCP 3,7 s, desempenho 89.
+- Hero e páginas: conteúdo visível já no HTML (LCP da home no Lighthouse local: 4,0 s para 3,5 s).
+
+## Achados que o código não resolve (ações suas)
+
+Ordenados pelo efeito provável na descoberta:
+
+1. **Cloudflare ofusca o e-mail para robôs.** Confirmado em produção: o HTML servido ao Googlebot tem `/cdn-cgi/l/email-protection#...` e o texto "[email protected]", sem nenhum `mailto:`. Buscadores e respostas de IA não veem o contato. Segundo a [documentação da Cloudflare](https://developers.cloudflare.com/waf/tools/scrape-shield/email-address-obfuscation/), desative em *Security > Settings > Email Address Obfuscation* (ou envolva um endereço com ``). A verificação `email-visivel-para-robos` da auditoria passa a ficar verde depois.
+2. **Resultados de busca desatualizados.** Uma busca por "evandro.dev.br" ainda mostra o título e a descrição antigos ("Engenharia de Software, Next.js, Tauri, Rust e Consultoria Tecnica"). Peça nova indexação no Search Console (Inspeção de URL > Solicitar indexação) e envie a URL no Bing Webmaster Tools.
+3. **Dois repositórios com "Ver código" quebrado.** `evandrodevbr/twins-lab` e `evandrodevbr/scplus` respondem 404 para visitantes (são privados), e o Twins Lab traz o selo "Código público". Torne os repositórios públicos ou remova o link e o selo. A auditoria acusa isso (`links-github-acessiveis`).
+4. **Posicionamento e URLs diferentes entre perfis.** O site se apresenta como "sistemas sob medida para empresas"; o perfil do GitHub diz "Backend Software Engineer | Node.js, NestJS, TypeScript, Python & PostgreSQL", com empresa "Apolo Energia", e o README do perfil se declara aberto a vagas de backend (os "cinco anos" coincidem com o site). Respostas de IA misturam essas descrições. Escolha a frase central e repita-a nos perfis. O LinkedIn também aparece com duas URLs no site (`/in/evandro-fonseca-junior-0969aa1b0/` na hero e no JSON-LD, `/in/evandrodevbr/` no rodapé): use a mesma.
+5. **Homônimos.** Há outras pessoas com nome parecido (por exemplo "Evandro Junior" no LinkedIn e "Evandro Fonseca Junior" em outros sites). `sameAs` e a repetição do mesmo texto de apresentação nos perfis ajudam a desambiguar.
+6. **SC Plus.** O site no ar se apresenta como "SCPLUS — Educação, Ciência e Tecnologia em Garuva-SC", e o portfólio diz "SC Plus Aquicultura". Confirme o nome correto.
+
+## Ferramentas que precisam da sua conta (não executadas)
+
+| Ferramenta | Para quê | O que observar |
+|---|---|---|
+| [Google Search Console](https://search.google.com/search-console) | cobertura, canônica escolhida, consultas, cliques | as 17 URLs do sitemap; a canônica que o Google escolheu |
+| [Bing Webmaster Tools](https://www.bing.com/webmasters) | indexação e relatório de IA (quando disponível) | AI Performance, se a conta tiver |
+| [Rich Results Test](https://search.google.com/test/rich-results) | JSON-LD como o Google lê | `Person`, `WebSite`, `BreadcrumbList` sem erros |
+| [Schema Markup Validator](https://validator.schema.org/) | JSON-LD contra schema.org | sem erros em `@graph` |
+| [CrUX](https://developer.chrome.com/docs/crux) / PageSpeed Insights | desempenho de campo (LCP, INP, CLS) | só aparece com tráfego suficiente; sem dado de campo, não substitua por nota de laboratório |
+
+## Fontes conferidas
+
+- Google, [AI features and your website](https://developers.google.com/search/docs/appearance/ai-features): não há marcação nem arquivo especial para aparecer em AI Overviews/AI Mode; vale o SEO padrão (conteúdo em texto, links internos, robots.txt liberando, dados estruturados coerentes com o texto).
+- Google, [FAQPage](https://developers.google.com/search/docs/appearance/structured-data/faqpage): resultado enriquecido só para sites governamentais e de saúde conhecidos. Por isso `FAQPage` continua excluído.
+- OpenAI, [crawlers](https://developers.openai.com/api/docs/bots): `OAI-SearchBot` precisa estar liberado para aparecer nas buscas do ChatGPT; `GPTBot` é de treinamento; `ChatGPT-User` é iniciado pelo usuário. O `robots.txt` do site já libera todos (`User-agent: *`, `Allow: /`) e a auditoria confirma HTTP 200 para os 8 robôs.
+- Anthropic, [crawlers](https://privacy.claude.com/en/articles/8896518-does-anthropic-crawl-data-from-the-web-and-how-can-site-owners-block-the-crawler): `ClaudeBot` (treinamento), `Claude-User` e `Claude-SearchBot` (busca), cada um controlável no `robots.txt`.
+- `llms.txt`: o Google informou que nenhum sistema de IA o usa hoje e que não planeja suportá-lo (declarações de John Mueller e Gary Illyes reportadas pela imprensa especializada). Continua excluído.
+
+## Limites desta medição
+
+- A auditoria vê o HTML entregue sem JavaScript; ela não prevê posição em buscas nem citações em respostas de IA. Esses resultados só aparecem com dados de plataforma (Search Console, Bing, relatórios de IA) ao longo de semanas.
+- A busca usada para ver como o site aparece hoje é uma única consulta pontual; não é série histórica.
+- Limiares como 30–65 caracteres no título e 70–165 na descrição são orientações de exibição, não regras de ranqueamento.
diff --git a/lib/portfolio-data.test.ts b/lib/portfolio-data.test.ts
index a29789e..bae3977 100644
--- a/lib/portfolio-data.test.ts
+++ b/lib/portfolio-data.test.ts
@@ -86,6 +86,27 @@ describe("factual portfolio records", () => {
/produç|clientes?|leads?|ranking|performance|resultado comercial|anime\.js|shadcn/i,
);
});
+ it("keeps Reddit Posts Explorer and MinGW GCC Installer within what their public repositories support", () => {
+ const reddit = serializeProject("reddit-explorer");
+ const gcc = serializeProject("gcc-installer");
+
+ expect(reddit).toContain("MongoDB");
+ expect(reddit).not.toMatch(
+ /SSG|rate limit|cache|tempo real|real-time|busca em|otimiza|responsiv/i,
+ );
+ expect(gcc).toContain("mingw64");
+ expect(gcc).not.toMatch(
+ /assíncron|monitoramento|drastic|Watchdog|dependências|intuitiv/i,
+ );
+ });
+
+ it("does not claim measured performance for SC Plus without a stored measurement", () => {
+ // Lighthouse mobile local: LCP 3,7 s em 2026-10-05; a alegação anterior (LCP < 2,5 s) não se sustentava
+ expect(serializeProject("sc-plus")).not.toMatch(
+ /LCP|Core Web Vitals|otimizad|velocidade|rápid|Performance/i,
+ );
+ });
+
it("does not publish the unavailable Twins Lab demo", () => {
expect(
portfolio.projects.find((item) => item.id === "twins-lab")?.demoUrl,
diff --git a/lib/seo.test.ts b/lib/seo.test.ts
index b808f18..4f07b75 100644
--- a/lib/seo.test.ts
+++ b/lib/seo.test.ts
@@ -37,7 +37,17 @@ it("keeps the root graph limited to verified website and person fields", () => {
["@id", "@type", "inLanguage", "name", "publisher", "url"].sort(),
);
expect(Object.keys(person).sort()).toEqual(
- ["@id", "@type", "homeLocation", "image", "name", "sameAs", "url"].sort(),
+ [
+ "@id",
+ "@type",
+ "homeLocation",
+ "image",
+ "jobTitle",
+ "knowsAbout",
+ "name",
+ "sameAs",
+ "url",
+ ].sort(),
);
expect(website).toMatchObject({
"@type": "WebSite",
@@ -49,6 +59,7 @@ it("keeps the root graph limited to verified website and person fields", () => {
"@type": "Person",
"@id": SEO_IDS.person,
image: `${siteUrl}/edev.jpg`,
+ jobTitle: "Engenheiro da Computação e Desenvolvedor de Software",
homeLocation: { "@type": "Place", name: "Garuva, Santa Catarina, Brasil" },
sameAs: [
"https://github.com/evandrodevbr",
diff --git a/lib/seo.ts b/lib/seo.ts
index 05a5c3e..2e232ef 100644
--- a/lib/seo.ts
+++ b/lib/seo.ts
@@ -24,6 +24,18 @@ export function buildPersonJsonLd() {
name: "Evandro Fonseca Junior",
url: siteUrl,
image: `${siteUrl}/edev.jpg`,
+ // cargo e áreas vêm de public/portfolio-data.json e estão visíveis em /curriculo e na seção de skills
+ jobTitle: "Engenheiro da Computação e Desenvolvedor de Software",
+ knowsAbout: [
+ "Next.js",
+ "React",
+ "TypeScript",
+ "Node.js",
+ "Python",
+ "IoT",
+ "Computação em nuvem",
+ "Inteligência artificial",
+ ],
homeLocation: {
"@type": "Place",
name: "Garuva, Santa Catarina, Brasil",
diff --git a/lib/site-content.test.ts b/lib/site-content.test.ts
index 1fc6fe2..617cdad 100644
--- a/lib/site-content.test.ts
+++ b/lib/site-content.test.ts
@@ -1,6 +1,12 @@
import { caseStudies, getRelatedServices, servicePages } from "./site-content";
-const detailedIds = ["as-servicos", "nutriscan", "twins-lab"] as const;
+const detailedIds = [
+ "as-servicos",
+ "gcc-installer",
+ "nutriscan",
+ "reddit-explorer",
+ "twins-lab",
+] as const;
const immutableGitHubBlobUrl =
/^https:\/\/github\.com\/[^/]+\/[^/]+\/blob\/[0-9a-f]{40}\/.+$/;
@@ -11,7 +17,7 @@ function getDetail(id: (typeof detailedIds)[number]) {
return detail;
}
-it("limits detailed content to the three evidenced cases", () => {
+it("limits detailed content to the evidenced cases (public repositories pinned to a commit)", () => {
expect(
caseStudies
.filter(({ detail }) => detail !== undefined)
@@ -64,6 +70,13 @@ it("requires sources for factual statements and resolves every source ID", () =>
expect(getDetail("nutriscan").boundaries[0]?.sourceIds).toContain(
"nutri-readme",
);
+
+ // reddit-explorer e gcc-installer: o 1º limite vem da documentação do repositório; o 2º é o escopo editorial (sem fonte)
+ for (const id of ["reddit-explorer", "gcc-installer"] as const) {
+ const { boundaries } = getDetail(id);
+ expect(boundaries[0]?.sourceIds.length).toBeGreaterThan(0);
+ expect(boundaries.slice(1).every(({ sourceIds }) => sourceIds.length === 0)).toBe(true);
+ }
});
it("derives the exact related service set from the existing relationship", () => {
@@ -96,3 +109,14 @@ it("does not publish the unavailable Twins Lab demo", () => {
caseStudies.find((item) => item.id === "twins-lab")?.demoUrl,
).toBeUndefined();
});
+
+it("keeps AS Serviços as a project (code only) and states the author's participation", () => {
+ const asServicos = caseStudies.find(({ id }) => id === "as-servicos");
+ expect(asServicos?.demoUrl).toBeNull();
+ expect(asServicos?.githubUrl).toBe(
+ "https://github.com/evandrodevbr/as-servicos",
+ );
+ expect(asServicos?.role).toMatch(/primeira landing page/i);
+ expect(asServicos?.role).toMatch(/animações 3D/i);
+ expect(asServicos?.role).toMatch(/painel para controle de projetos/i);
+});
diff --git a/lib/site-content.ts b/lib/site-content.ts
index d46784e..e678477 100644
--- a/lib/site-content.ts
+++ b/lib/site-content.ts
@@ -75,6 +75,8 @@ export interface CaseStudyContent {
stack: string[];
demoUrl?: string | null;
githubUrl?: string | null;
+ /** Papel do autor quando o projeto não é só dele (texto editorial, sem fonte pública). */
+ role?: string;
detail?: CaseStudyDetail;
}
@@ -144,7 +146,7 @@ export const servicePages: ServicePageContent[] = [
slug: "engenharia-de-software",
navLabel: "Sistemas web e aplicativos mobile",
eyebrow: "Engenharia de software",
- seoTitle: "Desenvolvimento de Sistemas Web e Aplicativos Mobile",
+ seoTitle: "Sistemas Web e Aplicativos Mobile sob Medida",
metaDescription:
"Sistemas web e aplicativos mobile sob medida, integração entre ferramentas e evolução de software existente. Escopo, plataformas e entregas definidos por projeto.",
headline: "Sistemas e apps para o seu trabalho.",
@@ -266,7 +268,7 @@ export const servicePages: ServicePageContent[] = [
slug: "tauri-rust",
navLabel: "Aplicativos desktop para Windows e Linux",
eyebrow: "Aplicativos desktop",
- seoTitle: "Aplicativos Desktop para Windows e Linux com Tauri e Rust",
+ seoTitle: "Aplicativos Desktop com Tauri e Rust",
metaDescription:
"Desenvolvimento de aplicativos desktop para Windows e Linux com Tauri e Rust. Ferramentas locais, arquivos e integrações com compatibilidade definida por projeto.",
headline: "Aplicativos para Windows e Linux.",
@@ -618,22 +620,83 @@ export const caseStudies: CaseStudyContent[] = [
{
id: "reddit-explorer",
title: "Reddit Posts Explorer",
- subtitle: "Aplicação orientada a dados com API, cache e busca",
+ subtitle: "Posts do r/artificial em MongoDB, filtrados por período",
summary:
- "Projeto em Astro e MongoDB para explorar conteúdo com filtros, ordenação e cache, mantendo boa experiência em consultas frequentes.",
+ "Aplicação Astro SSR que coleta os posts em alta do r/artificial, grava no MongoDB sem duplicar e filtra por período, upvotes ou comentários.",
impact:
- "Mostra capacidade de desenhar consumo de API, camada de persistência e experiência de busca sem sobrecarregar a aplicação.",
- stack: ["Astro.js", "MongoDB", "Mongoose", "TypeScript", "Reddit API"],
+ "Atualizar a coleta sem duplicar posts e consultar o histórico por intervalo de datas e ordenação.",
+ stack: ["Astro", "MongoDB", "Mongoose", "TypeScript", "Reddit API"],
githubUrl: "https://github.com/evandrodevbr/reddit-search",
+ detail: {
+ answer: {
+ text: "Aplicação Astro em modo SSR que coleta os posts em alta do r/artificial pela API pública do Reddit, grava no MongoDB com upsert por id e permite filtrar por período e ordenar por upvotes ou comentários.",
+ sourceIds: ["rd-readme", "rd-service", "rd-astro"],
+ },
+ challenge: {
+ text: "Atualizar a coleta sem duplicar posts e consultar o histórico por intervalo de datas e ordenação.",
+ sourceIds: ["rd-service", "rd-filter"],
+ },
+ implementation: [
+ {
+ text: "O serviço consulta r/artificial/hot.json com User-Agent identificado e limite de 15 segundos, e grava os posts em lote com upsert pelo id; rodar a coleta de novo atualiza os existentes.",
+ sourceIds: ["rd-service"],
+ },
+ {
+ text: "O endpoint de filtro valida as datas e o campo de ordenação (ups ou num_comments) e responde 400 quando faltam parâmetros ou eles são inválidos.",
+ sourceIds: ["rd-filter"],
+ },
+ {
+ text: "O Astro roda com output server e o adapter Node em modo standalone.",
+ sourceIds: ["rd-astro", "rd-package"],
+ },
+ ],
+ boundaries: [
+ {
+ text: "O subreddit é fixo, e o projeto não tem paginação, busca textual, autenticação, testes automatizados nem CI.",
+ sourceIds: ["rd-readme"],
+ },
+ {
+ text: "O case demonstra implementação e decisões técnicas; não atribui ganho de performance, volume de dados ou resultado comercial.",
+ sourceIds: [],
+ },
+ ],
+ sources: [
+ {
+ id: "rd-readme",
+ label: "README do projeto",
+ url: "https://github.com/evandrodevbr/reddit-search/blob/ff76e08379a51fc02c3b8e4d6c415d627d8c90de/README.md",
+ },
+ {
+ id: "rd-service",
+ label: "Serviço de coleta e consulta",
+ url: "https://github.com/evandrodevbr/reddit-search/blob/ff76e08379a51fc02c3b8e4d6c415d627d8c90de/src/lib/services/redditService.ts",
+ },
+ {
+ id: "rd-filter",
+ label: "Endpoint de filtro",
+ url: "https://github.com/evandrodevbr/reddit-search/blob/ff76e08379a51fc02c3b8e4d6c415d627d8c90de/src/pages/api/posts/filter.ts",
+ },
+ {
+ id: "rd-astro",
+ label: "Configuração do Astro",
+ url: "https://github.com/evandrodevbr/reddit-search/blob/ff76e08379a51fc02c3b8e4d6c415d627d8c90de/astro.config.mjs",
+ },
+ {
+ id: "rd-package",
+ label: "Manifesto do projeto",
+ url: "https://github.com/evandrodevbr/reddit-search/blob/ff76e08379a51fc02c3b8e4d6c415d627d8c90de/package.json",
+ },
+ ],
+ },
},
{
id: "sc-plus",
title: "SC Plus Aquicultura",
- subtitle: "Site institucional em Next.js com foco em performance e SEO",
+ subtitle: "Landing page institucional em Next.js 15",
summary:
- "Landing page em Next.js 15 otimizada para Core Web Vitals, metadata e estrutura técnica de indexação.",
+ "Landing page institucional em Next.js 15, React 19 e Tailwind CSS 4, com metadados e dados estruturados para indexação.",
impact:
- "Exemplo de projeto em que clareza de mensagem, velocidade e SEO técnico trabalham juntos.",
+ "Dar à instituição uma página própria, com base técnica para ser encontrada em buscadores.",
stack: ["Next.js 15", "React 19", "Tailwind CSS 4", "TypeScript"],
demoUrl: "https://scplus.evandro.dev.br",
githubUrl: "https://github.com/evandrodevbr/scplus",
@@ -641,29 +704,80 @@ export const caseStudies: CaseStudyContent[] = [
{
id: "gcc-installer",
title: "MinGW GCC Installer",
- subtitle:
- "Ferramenta desktop para automação de ambiente de desenvolvimento",
+ subtitle: "Instalador gráfico de MinGW-w64/GCC para Windows",
summary:
- "Aplicação em Python para simplificar setup local no Windows, com download assíncrono, checagem de compatibilidade e integração com PATH.",
+ "Aplicativo Python com interface tkinter que lista as builds do MinGW-w64, baixa a escolhida, instala em C:\\mingw64 e adiciona o GCC ao PATH do usuário.",
impact:
- "Mostra familiaridade com software desktop, integração com sistema operacional e automação de setup técnico.",
- stack: ["Python", "Tkinter", "Win32 API", "Threading", "7-Zip"],
+ "Reduzir a configuração manual do GCC no Windows (escolher a build, baixar, extrair e ajustar o PATH) a uma única janela.",
+ stack: ["Python", "Tkinter", "Win32 API", "GitHub API", "7-Zip"],
githubUrl: "https://github.com/evandrodevbr/gcc-installer",
+ detail: {
+ answer: {
+ text: "Aplicativo Python com interface tkinter que lê as builds publicadas do MinGW-w64, baixa o pacote .7z escolhido, instala em C:\\mingw64 e adiciona o toolchain ao PATH do usuário no registro do Windows.",
+ sourceIds: ["gcc-readme", "gcc-main"],
+ },
+ challenge: {
+ text: "Reduzir a configuração manual do GCC no Windows (escolher a build, baixar, extrair e ajustar o PATH) a uma única janela.",
+ sourceIds: ["gcc-readme"],
+ },
+ implementation: [
+ {
+ text: "A lista de versões vem da API de releases do repositório niXman/mingw-builds-binaries, e as builds com ucrt e thread model posix são destacadas na tabela.",
+ sourceIds: ["gcc-main"],
+ },
+ {
+ text: "A instalação extrai o pacote com o 7-Zip (caminho padrão fixo) em uma pasta temporária, move o resultado para C:\\mingw64 e renomeia mingw32-make.exe para make.exe.",
+ sourceIds: ["gcc-main"],
+ },
+ {
+ text: "Adicionar ao PATH grava em HKCU\\Environment e avisa o Windows com WM_SETTINGCHANGE; fora do Windows o programa encerra com um aviso.",
+ sourceIds: ["gcc-main"],
+ },
+ ],
+ boundaries: [
+ {
+ text: "Funciona só no Windows, o caminho do 7-Zip é fixo e o fluxo da interface não foi exercitado de ponta a ponta no Windows nesta revisão; os 23 testes cobrem a lógica independente de plataforma, e não há CI.",
+ sourceIds: ["gcc-readme", "gcc-tests"],
+ },
+ {
+ text: "O case demonstra implementação e decisões técnicas; não atribui ganho de performance, número de usuários ou resultado comercial.",
+ sourceIds: [],
+ },
+ ],
+ sources: [
+ {
+ id: "gcc-readme",
+ label: "README do projeto",
+ url: "https://github.com/evandrodevbr/gcc-installer/blob/bab64fc5b5c20128e7b06e1afc448c5efe71b747/README.md",
+ },
+ {
+ id: "gcc-main",
+ label: "Aplicativo (main.py)",
+ url: "https://github.com/evandrodevbr/gcc-installer/blob/bab64fc5b5c20128e7b06e1afc448c5efe71b747/main.py",
+ },
+ {
+ id: "gcc-tests",
+ label: "Testes do núcleo",
+ url: "https://github.com/evandrodevbr/gcc-installer/blob/bab64fc5b5c20128e7b06e1afc448c5efe71b747/tests/test_core.py",
+ },
+ ],
+ },
},
{
id: "as-servicos",
title: "AS Serviços",
subtitle: "Site institucional com cena 3D procedural",
summary:
- "Site institucional em Next.js 16 que representa quatro frentes de engenharia com uma cena Three.js gerada em código: uma casa wireframe e uma placa-mãe ligadas ao progresso da rolagem.",
+ "Site institucional em Next.js 16 com cena Three.js gerada em código: uma casa wireframe e uma placa-mãe ligadas ao progresso da rolagem.",
impact:
"Representar engenharia física e software na mesma narrativa visual sem depender de um modelo 3D pronto.",
stack: ["Next.js 16", "Three.js", "TypeScript"],
- demoUrl: "https://asservicos.com",
+ demoUrl: null,
githubUrl: "https://github.com/evandrodevbr/as-servicos",
+ role: "Desenvolvimento da primeira landing page do site, com animações 3D, e de um painel para controle de projetos.",
detail: {
answer: {
- text: "Site institucional em Next.js 16 que representa quatro frentes de engenharia com uma cena Three.js gerada em código: uma casa wireframe e uma placa-mãe ligadas ao progresso da rolagem.",
+ text: "Site institucional em Next.js 16 com cena Three.js gerada em código: uma casa wireframe e uma placa-mãe ligadas ao progresso da rolagem.",
sourceIds: ["as-readme", "as-package", "as-engine"],
},
challenge: {
diff --git a/lib/site-navigation.ts b/lib/site-navigation.ts
index ccf63d7..4d43e63 100644
--- a/lib/site-navigation.ts
+++ b/lib/site-navigation.ts
@@ -6,4 +6,5 @@ export const NAVIGATION_ITEMS = [
{ href: "/cases", label: "Projetos" },
{ href: "/#process", label: "Como trabalho" },
{ href: "/#about", label: "Sobre" },
+ { href: "/#experience", label: "Experiência" },
] as const;
diff --git a/package.json b/package.json
index 9775722..502c139 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
"@react-three/fiber": "9.5.0",
"clsx": "2.1.1",
"gsap": "3.13.0",
+ "lenis": "^1.3.26",
"lucide-react": "0.542.0",
"motion": "12.23.12",
"next": "16.3.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 01569fb..6efd97b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
gsap:
specifier: 3.13.0
version: 3.13.0
+ lenis:
+ specifier: ^1.3.26
+ version: 1.3.26(react@19.1.0)
lucide-react:
specifier: 0.542.0
version: 0.542.0(react@19.1.0)
@@ -1886,6 +1889,20 @@ packages:
engines: {node: '>=6'}
hasBin: true
+ lenis@1.3.26:
+ resolution: {integrity: sha512-s/xTCZCxTFvHbAN1OzuhNaN5YPJH2ail0XAkctKW1b+RUAG4nUL5UHLXwNko1h8aEeT2jspBXegMgPJd8zcuag==}
+ peerDependencies:
+ '@nuxt/kit': '>=3.0.0'
+ react: '>=17.0.0'
+ vue: '>=3.0.0'
+ peerDependenciesMeta:
+ '@nuxt/kit':
+ optional: true
+ react:
+ optional: true
+ vue:
+ optional: true
+
leven@3.1.0:
resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
engines: {node: '>=6'}
@@ -4762,6 +4779,10 @@ snapshots:
json5@2.2.3: {}
+ lenis@1.3.26(react@19.1.0):
+ optionalDependencies:
+ react: 19.1.0
+
leven@3.1.0: {}
lie@3.3.0:
diff --git a/public/portfolio-data.json b/public/portfolio-data.json
index 96704f0..9117ab7 100644
--- a/public/portfolio-data.json
+++ b/public/portfolio-data.json
@@ -152,31 +152,23 @@
{
"id": "reddit-explorer",
"title": "Reddit Posts Explorer",
- "subtitle": "Análise de Conteúdo IA",
- "description": "Aplicação Astro.js com arquitetura SSG otimizada para consumo de Reddit API. Resolve problema de rate limiting através de cache estratégico em MongoDB com Mongoose. Sistema de filtragem por data e ordenação, API REST própria e busca em tempo real com otimização de queries.",
- "longDescription": "Aplicação web que consome a API do Reddit para buscar, filtrar e analisar posts relacionados à Inteligência Artificial, oferecendo interface intuitiva para descoberta de conteúdo relevante.",
- "technologies": [
- "Astro.js",
- "MongoDB",
- "Mongoose",
- "TypeScript",
- "TailwindCSS",
- "Reddit API"
- ],
+ "subtitle": "Posts do r/artificial em MongoDB, filtrados por período",
+ "description": "Aplicação Astro SSR que coleta os posts em alta do r/artificial pela API pública do Reddit, grava no MongoDB com upsert por id e permite filtrar por período e ordenar por upvotes ou comentários.",
+ "longDescription": "O serviço consulta r/artificial/hot.json e grava os posts em lote, atualizando os existentes em vez de duplicar. O endpoint de filtro valida as datas e o campo de ordenação. O projeto não tem paginação, busca textual, autenticação, testes automatizados nem CI.",
+ "technologies": ["Astro", "MongoDB", "Mongoose", "TypeScript", "Reddit API"],
"features": [
- "Integração com Reddit API",
- "Sistema de cache com MongoDB",
- "Filtragem por data e ordenação",
- "Interface responsiva",
- "API REST própria",
- "Busca em tempo real"
+ "Coleta dos posts em alta do r/artificial",
+ "Upsert por id no MongoDB",
+ "Filtro por período",
+ "Ordenação por upvotes ou comentários",
+ "API própria com validação de parâmetros"
],
"category": "api",
"level": "pleno",
"status": "Concluído",
"demoUrl": null,
"githubUrl": "https://github.com/evandrodevbr/reddit-search",
- "badges": ["API Integration", "MongoDB", "Real-time"],
+ "badges": ["API Integration", "MongoDB", "Código público"],
"featured": true,
"metrics": {
"complexity": 3,
@@ -186,28 +178,21 @@
{
"id": "sc-plus",
"title": "SC Plus Aquicultura",
- "subtitle": "Landing Page Institucional",
- "description": "Landing page Next.js 15 com React 19 e Tailwind CSS 4. Arquitetura otimizada para Core Web Vitals com LCP < 2.5s através de code splitting e server-side rendering. SEO técnico implementado com meta tags dinâmicas e structured data.",
- "longDescription": "Site institucional responsivo desenvolvido com as mais recentes tecnologias web, otimizado para performance e SEO, apresentando os serviços e valores da empresa de aquicultura sustentável.",
- "technologies": [
- "Next.js 15",
- "React 19",
- "Tailwind CSS 4",
- "TypeScript"
- ],
+ "subtitle": "Landing page institucional em Next.js 15",
+ "description": "Landing page institucional em Next.js 15, React 19 e Tailwind CSS 4, com metadados e dados estruturados para indexação.",
+ "longDescription": "Site institucional em Next.js 15 com React 19 e Tailwind CSS 4. A página publica título, descrição, URL canônica, imagem social e dados estruturados.",
+ "technologies": ["Next.js 15", "React 19", "Tailwind CSS 4", "TypeScript"],
"features": [
- "Design moderno e responsivo",
- "Performance otimizada",
- "SEO otimizado",
- "Interface intuitiva",
- "Carregamento rápido"
+ "Landing page institucional",
+ "Metadados e URL canônica",
+ "Dados estruturados"
],
"category": "web",
"level": "pleno",
"status": "Concluído",
"demoUrl": "https://scplus.evandro.dev.br",
"githubUrl": "https://github.com/evandrodevbr/scplus",
- "badges": ["Responsive", "SEO", "Modern Stack"],
+ "badges": ["Landing page", "Next.js 15"],
"featured": true,
"metrics": {
"complexity": 2,
@@ -217,32 +202,23 @@
{
"id": "gcc-installer",
"title": "MinGW GCC Installer",
- "subtitle": "Ferramenta de Desenvolvimento",
- "description": "Aplicação desktop Python com Tkinter para automação de setup de ambiente GCC no Windows. Resolve problema de configuração manual complexa através de download assíncrono com threading, verificação de compatibilidade via Win32 API e integração automática com PATH do sistema. Utiliza 7-Zip para extração e Watchdog para monitoramento.",
- "longDescription": "Ferramenta automatizada que simplifica drasticamente o processo de configuração de ambiente de desenvolvimento GCC no Windows, incluindo verificação de compatibilidade, download automático e integração com o sistema.",
- "technologies": [
- "Python",
- "Tkinter",
- "Requests",
- "Watchdog",
- "Win32 API",
- "7-Zip",
- "Threading"
- ],
+ "subtitle": "Instalador gráfico de MinGW-w64/GCC para Windows",
+ "description": "Aplicativo Python com interface tkinter que lê as builds publicadas do MinGW-w64, baixa o pacote .7z escolhido, instala em C:\\mingw64 e adiciona o toolchain ao PATH do usuário no registro do Windows.",
+ "longDescription": "A lista de versões vem da API de releases do niXman/mingw-builds-binaries, com as builds ucrt e posix destacadas. A instalação extrai o pacote com o 7-Zip, move para C:\\mingw64 e renomeia mingw32-make.exe para make.exe. Funciona só no Windows e o caminho do 7-Zip é fixo.",
+ "technologies": ["Python", "Tkinter", "Win32 API", "GitHub API", "7-Zip"],
"features": [
- "Interface gráfica intuitiva",
- "Download assíncrono com progresso",
- "Verificação de compatibilidade",
- "Integração automática com PATH",
- "Monitoramento em tempo real",
- "Instalação automática de dependências"
+ "Lista as builds publicadas do MinGW-w64",
+ "Destaca builds ucrt e posix",
+ "Baixa e instala em C:\\mingw64",
+ "Adiciona o toolchain ao PATH do usuário",
+ "Testes do núcleo (23)"
],
"category": "desktop",
"level": "pleno",
"status": "Concluído",
"demoUrl": null,
"githubUrl": "https://github.com/evandrodevbr/gcc-installer",
- "badges": ["Desktop", "Automation", "System Integration"],
+ "badges": ["Desktop", "Windows", "Código público"],
"featured": true,
"metrics": {
"complexity": 4,
@@ -253,7 +229,7 @@
"id": "as-servicos",
"title": "AS Serviços",
"subtitle": "Site Institucional com Cena 3D Procedural",
- "description": "Site institucional em Next.js 16 que representa quatro frentes de engenharia com uma cena Three.js gerada em código: uma casa wireframe e uma placa-mãe ligadas ao progresso da rolagem.",
+ "description": "Site institucional em Next.js 16 com cena Three.js gerada em código: uma casa wireframe e uma placa-mãe ligadas ao progresso da rolagem.",
"longDescription": "O motor monta casa, instalação elétrica e placa-mãe com geometrias e linhas do Three.js. O canvas converte a rolagem em progresso de 0 a 1, e a qualidade se adapta conforme WebGL, reduced motion, economia de dados, conexão e capacidade do dispositivo.",
"technologies": ["Next.js 16", "TypeScript", "Three.js"],
"features": [
@@ -264,13 +240,13 @@
"category": "web",
"level": "senior",
"status": "Código público",
- "demoUrl": "https://asservicos.com",
+ "demoUrl": null,
"githubUrl": "https://github.com/evandrodevbr/as-servicos",
"badges": ["Three.js", "WebGL", "Código público"],
"featured": true,
"metrics": {
"complexity": 5,
- "teamSize": "Individual"
+ "teamSize": "Em equipe"
}
}
],
diff --git a/react-view-transition.d.ts b/react-view-transition.d.ts
new file mode 100644
index 0000000..62e37c7
--- /dev/null
+++ b/react-view-transition.d.ts
@@ -0,0 +1,8 @@
+// O App Router usa a versão canary do React, que exporta ; os tipos estáveis (@types/react 19.1)
+// só trazem o nome provisório unstable_ViewTransition. Remover quando os tipos acompanharem.
+import type { ExoticComponent, ViewTransitionProps } from "react";
+import type {} from "react/experimental";
+
+declare module "react" {
+ export const ViewTransition: ExoticComponent;
+}
diff --git a/scripts/seo-audit.mjs b/scripts/seo-audit.mjs
new file mode 100644
index 0000000..b348a19
--- /dev/null
+++ b/scripts/seo-audit.mjs
@@ -0,0 +1,260 @@
+#!/usr/bin/env node
+/**
+ * Auditoria repetível de SEO / AEO / GEO, sem dependências (Node >= 20).
+ *
+ * node scripts/seo-audit.mjs --base http://localhost:3000 --out audit-antes.json
+ * node scripts/seo-compare.mjs audit-antes.json audit-depois.json
+ *
+ * Lê o sitemap, baixa cada URL como um robô (HTML sem JavaScript) e confere o que buscadores e sistemas de
+ * resposta/IA realmente enxergam. Não inventa nota: cada verificação é passa/falha com a evidência.
+ * O que depende de conta (Search Console, Bing, CrUX, citações em plataformas de IA) está em docs/seo-geo-operations.md.
+ */
+import { writeFileSync } from "node:fs";
+
+const args = Object.fromEntries(
+ process.argv
+ .slice(2)
+ .map((a, i, all) => (a.startsWith("--") ? [a.slice(2), all[i + 1]] : null))
+ .filter(Boolean),
+);
+const BASE = (args.base ?? "https://evandro.dev.br").replace(/\/$/, "");
+const SITE = "https://evandro.dev.br"; // origem canônica declarada no código
+const UA = "Mozilla/5.0 (compatible; seo-audit/1.0)";
+const AI_BOTS = [
+ ["Googlebot", "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"],
+ ["bingbot", "Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)"],
+ ["OAI-SearchBot", "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko); compatible; OAI-SearchBot/1.0; +https://openai.com/searchbot"],
+ ["GPTBot", "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.1; +https://openai.com/gptbot)"],
+ ["ChatGPT-User", "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ChatGPT-User/1.0; +https://openai.com/bot)"],
+ ["Claude-SearchBot", "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Claude-SearchBot/1.0; +searchbot@anthropic.com)"],
+ ["ClaudeBot", "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)"],
+ ["PerplexityBot", "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; PerplexityBot/1.0; +https://perplexity.ai/perplexitybot)"],
+];
+
+const local = (url) => url.replace(SITE, BASE); // permite auditar localhost com URLs canônicas de produção
+const get = async (url, ua = UA, init = {}) => {
+ const t0 = performance.now();
+ const res = await fetch(url, { headers: { "user-agent": ua, "accept-encoding": "gzip, br" }, redirect: "manual", ...init });
+ const body = init.method === "HEAD" ? "" : await res.text();
+ return { res, body, ms: Math.round(performance.now() - t0) };
+};
+
+const attrs = (tag) => {
+ const out = {};
+ for (const m of tag.matchAll(/([a-zA-Z_:][\w:.-]*)\s*=\s*(?:"([^"]*)"|'([^']*)')/g)) out[m[1].toLowerCase()] = m[2] ?? m[3] ?? "";
+ return out;
+};
+const decode = (s) => s.replace(/&/g, "&").replace(/"/g, '"').replace(/'|'/g, "'").replace(/</g, "<").replace(/>/g, ">").trim();
+const strip = (html) =>
+ decode(
+ html
+ .replace(/<(script|style|noscript|template|svg)[\s\S]*?<\/\1>/gi, " ")
+ .replace(//g, " ")
+ .replace(/<[^>]+>/g, " ")
+ .replace(/\s+/g, " "),
+ );
+const words = (s) => (s.match(/[\p{L}\p{N}][\p{L}\p{N}'’-]*/gu) ?? []).length;
+
+function parsePage(html) {
+ const metas = [...html.matchAll(/]*>/gi)].map((m) => attrs(m[0]));
+ const meta = (key, val = "name") => metas.find((m) => m[val]?.toLowerCase() === key)?.content;
+ const links = [...html.matchAll(/]*>/gi)].map((m) => attrs(m[0]));
+ const headings = [...html.matchAll(/]*>([\s\S]*?)<\/h\1>/gi)].map((m) => ({ level: +m[1], text: strip(m[2]) }));
+ const imgs = [...html.matchAll(/]*>/gi)].map((m) => attrs(m[0]));
+ const anchors = [...html.matchAll(/]*>/gi)].map((m) => attrs(m[0]));
+ const ld = [...html.matchAll(/]*type=["']application\/ld\+json["'][^>]*>([\s\S]*?)<\/script>/gi)].map((m) => m[1]);
+ const main = html.match(//i)?.[0] ?? html;
+ const firstH1 = main.search(/= 0 ? main.slice(firstH1) : main;
+ const firstP = [...afterH1.matchAll(/]*>([\s\S]*?)<\/p>/gi)].map((m) => strip(m[1])).find((t) => words(t) >= 8);
+ return {
+ title: decode(html.match(/]*>([\s\S]*?)<\/title>/i)?.[1] ?? ""),
+ description: meta("description"),
+ robots: meta("robots"),
+ viewport: meta("viewport"),
+ lang: html.match(/]*\blang=["']([^"']+)/i)?.[1],
+ canonical: links.find((l) => l.rel === "canonical")?.href,
+ alternates: links.filter((l) => l.rel === "alternate" && l.hreflang).map((l) => l.hreflang),
+ og: Object.fromEntries(metas.filter((m) => m.property?.startsWith("og:")).map((m) => [m.property, m.content])),
+ tw: Object.fromEntries(metas.filter((m) => m.name?.startsWith("twitter:")).map((m) => [m.name, m.content])),
+ headings,
+ imgs,
+ anchors,
+ ld,
+ wordCount: words(strip(main)),
+ firstAnswerWords: firstP ? words(firstP) : 0,
+ };
+}
+
+function jsonLdFacts(blocks) {
+ const nodes = [];
+ const errors = [];
+ for (const raw of blocks) {
+ try {
+ const data = JSON.parse(raw);
+ const list = data["@graph"] ?? (Array.isArray(data) ? data : [data]);
+ nodes.push(...list);
+ } catch (e) {
+ errors.push(String(e.message).slice(0, 80));
+ }
+ }
+ const ids = new Set(nodes.map((n) => n["@id"]).filter(Boolean));
+ const types = nodes.flatMap((n) => [].concat(n["@type"] ?? []));
+ const dangling = [];
+ const walk = (o) => {
+ if (Array.isArray(o)) return o.forEach(walk);
+ if (o && typeof o === "object") {
+ const keys = Object.keys(o);
+ if (keys.length === 1 && keys[0] === "@id" && !ids.has(o["@id"]) && !String(o["@id"]).startsWith(SITE)) dangling.push(o["@id"]);
+ Object.values(o).forEach(walk);
+ }
+ };
+ walk(nodes);
+ return { nodes, ids, types, errors, dangling };
+}
+
+const checks = []; // {scope, id, group, ok, detail}
+const add = (scope, group, id, ok, detail = "") => checks.push({ scope, group, id, ok: Boolean(ok), detail });
+
+async function auditUrl(url, siteTitles, siteDescs) {
+ const target = local(url);
+ const { res, body, ms } = await get(target);
+ const scope = url.replace(SITE, "") || "/";
+ add(scope, "técnico", "status-200", res.status === 200, `HTTP ${res.status}`);
+ if (res.status !== 200) return null;
+ add(scope, "técnico", "html-comprimido", /br|gzip/.test(res.headers.get("content-encoding") ?? "") || BASE.startsWith("http://localhost"), res.headers.get("content-encoding") ?? "sem compressão");
+ add(scope, "técnico", "ttfb-menor-800ms", ms < 800, `${ms} ms (HTML completo)`);
+ const p = parsePage(body);
+
+ add(scope, "on-page", "lang-pt-BR", p.lang?.toLowerCase() === "pt-br", p.lang ?? "ausente");
+ add(scope, "on-page", "viewport", Boolean(p.viewport));
+ add(scope, "on-page", "title-30-65", p.title.length >= 30 && p.title.length <= 65, `${p.title.length} car.: ${p.title}`);
+ add(scope, "on-page", "title-unico", !siteTitles.has(p.title), p.title);
+ siteTitles.add(p.title);
+ add(scope, "on-page", "description-70-165", !!p.description && p.description.length >= 70 && p.description.length <= 165, `${p.description?.length ?? 0} car.`);
+ add(scope, "on-page", "description-unica", !!p.description && !siteDescs.has(p.description));
+ if (p.description) siteDescs.add(p.description);
+ add(scope, "on-page", "canonical-propria", p.canonical === url || p.canonical === `${url}/`, p.canonical ?? "ausente");
+ add(scope, "on-page", "indexavel", !/noindex/i.test(p.robots ?? "") && !/noindex/i.test(res.headers.get("x-robots-tag") ?? ""));
+ const h1 = p.headings.filter((h) => h.level === 1);
+ add(scope, "on-page", "um-h1", h1.length === 1, `${h1.length} h1`);
+ let skipped = false;
+ p.headings.reduce((prev, h) => {
+ if (h.level - prev > 1) skipped = true;
+ return h.level;
+ }, 0);
+ add(scope, "on-page", "hierarquia-de-titulos", !skipped);
+ add(scope, "on-page", "imagens-com-alt", p.imgs.every((i) => i.alt !== undefined), `${p.imgs.filter((i) => i.alt === undefined).length}/${p.imgs.length} sem alt`);
+ const internal = p.anchors.filter((a) => a.href && (a.href.startsWith("/") || a.href.startsWith(SITE)) && !a.href.startsWith("//"));
+ add(scope, "on-page", "links-internos-5+", new Set(internal.map((a) => a.href.split("#")[0])).size >= 5, `${new Set(internal.map((a) => a.href.split("#")[0])).size} destinos`);
+ const external = p.anchors.filter((a) => a.target === "_blank");
+ // noreferrer também implica noopener
+ add(scope, "on-page", "externos-com-noopener", external.every((a) => /noopener|noreferrer/.test(a.rel ?? "")), `${external.length} links _blank; sem rel: ${external.filter((a) => !/noopener|noreferrer/.test(a.rel ?? "")).map((a) => a.href).slice(0, 2).join(" ")}`);
+
+ const og = p.og, tw = p.tw;
+ const missingOg = ["og:title", "og:description", "og:url", "og:image", "og:type", "og:site_name", "og:locale"].filter((k) => !og[k]);
+ add(scope, "social", "og-completo", missingOg.length === 0, missingOg.length ? `faltam ${missingOg.join(",")}` : "");
+ add(scope, "social", "twitter-card", tw["twitter:card"] === "summary_large_image" && !!tw["twitter:title"] && !!tw["twitter:image"]);
+ if (og["og:image"]) {
+ const img = await get(local(og["og:image"]), UA, { method: "GET" }).catch(() => null);
+ add(scope, "social", "og-image-acessivel", img?.res.status === 200 && /^image\//.test(img.res.headers.get("content-type") ?? ""), `${img?.res.status} ${img?.res.headers.get("content-type")}`);
+ }
+
+ const ld = jsonLdFacts(p.ld);
+ add(scope, "dados-estruturados", "json-ld-valido", p.ld.length > 0 && ld.errors.length === 0, ld.errors.join("; ") || `${p.ld.length} blocos`);
+ add(scope, "dados-estruturados", "referencias-resolvem", ld.dangling.length === 0, ld.dangling.join(", "));
+ add(scope, "dados-estruturados", "sem-faqpage-nem-localbusiness", !ld.types.some((t) => /FAQPage|LocalBusiness|ProfessionalService/.test(t)), ld.types.join(","));
+ if (scope !== "/") add(scope, "dados-estruturados", "breadcrumb", ld.types.includes("BreadcrumbList"));
+ add(scope, "dados-estruturados", "person-com-sameas", !ld.types.includes("Person") || ld.nodes.some((n) => n["@type"] === "Person" && Array.isArray(n.sameAs) && n.sameAs.length >= 2));
+
+ add(scope, "aeo-geo", "conteudo-no-html-sem-js", p.wordCount >= 250, `${p.wordCount} palavras no do HTML`);
+ add(scope, "aeo-geo", "resposta-direta-cedo", p.firstAnswerWords >= 15 && p.firstAnswerWords <= 70, `${p.firstAnswerWords} palavras no 1º parágrafo após o H1`);
+ const names = new Set(ld.nodes.filter((n) => n["@type"] === "Person").map((n) => n.name));
+ add(scope, "aeo-geo", "entidade-autor-consistente", names.size <= 1 && (scope === "/" ? names.size === 1 : true), [...names].join(","));
+ return { scope, p, ld };
+}
+
+async function main() {
+ const sm = await get(`${BASE}/sitemap.xml`);
+ const urls = [...sm.body.matchAll(/([^<]+)<\/loc>/g)].map((m) => m[1]);
+ add("site", "técnico", "sitemap-200", sm.res.status === 200 && urls.length > 0, `${urls.length} URLs`);
+
+ const robots = await get(`${BASE}/robots.txt`);
+ add("site", "técnico", "robots-com-sitemap", /sitemap:\s*https?:\/\//i.test(robots.body));
+ add("site", "técnico", "robots-nao-bloqueia-tudo", !/disallow:\s*\/\s*$/im.test(robots.body));
+ const home = await get(`${BASE}/`);
+ add("site", "técnico", "http-para-https-ou-local", true);
+
+ for (const [name, ua] of AI_BOTS) {
+ const r = await get(`${BASE}/`, ua);
+ add("site", "aeo-geo", `acesso-${name}`, r.res.status === 200, `HTTP ${r.res.status}`);
+ }
+ // A Cloudflare (Email Address Obfuscation) troca e-mails por /cdn-cgi/l/email-protection para quem é robô: buscadores e IA não veem o contato
+ const botHome = await get(`${BASE}/`, AI_BOTS[0][1]);
+ add("site", "aeo-geo", "email-visivel-para-robos", !/email-protection|\[email( |\s)protected\]/.test(botHome.body), /email-protection/.test(botHome.body) ? "HTML servido a robôs tem e-mail ofuscado" : "");
+ const llms = await get(`${BASE}/llms.txt`);
+ // informativo: a política do projeto exclui llms.txt (nenhum sistema de IA o usa, segundo o Google); ausência é o esperado
+ add("site", "aeo-geo", "llms-txt-ausente-por-politica", llms.res.status === 404, `HTTP ${llms.res.status}`);
+
+ const titles = new Set();
+ const descs = new Set();
+ const pages = [];
+ for (const url of urls) pages.push(await auditUrl(url, titles, descs));
+
+ // links internos quebrados (amostra: todos os destinos únicos das páginas auditadas)
+ const targets = new Set();
+ for (const pg of pages.filter(Boolean))
+ for (const a of pg.p.anchors) {
+ const h = a.href?.split("#")[0];
+ if (h && (h.startsWith("/") && !h.startsWith("//"))) targets.add(h);
+ }
+ let broken = 0;
+ const brokenList = [];
+ for (const t of targets) {
+ const r = await get(`${BASE}${t}`, UA, { method: "HEAD" }).catch(() => null);
+ if (!r || r.res.status >= 400) {
+ broken++;
+ brokenList.push(`${t} (${r?.res.status ?? "erro"})`);
+ }
+ }
+ add("site", "técnico", "sem-links-internos-quebrados", broken === 0, `${broken}/${targets.size} quebrados: ${brokenList.join(", ")}`);
+ const inSitemap = new Set(urls.map((u) => u.replace(/\/$/, "")));
+ const orphanCandidates = [...inSitemap].filter((u) => {
+ const path = u.replace(SITE, "") || "/";
+ return path !== "/" && ![...targets].some((t) => t.replace(/\/$/, "") === path);
+ });
+ add("site", "técnico", "sem-paginas-orfas-no-sitemap", orphanCandidates.length === 0, orphanCandidates.join(", "));
+
+ // links externos para os repositórios do autor: 404 = projeto com "Ver código" quebrado (repositório privado)
+ const ghLinks = new Set();
+ for (const pg of pages.filter(Boolean))
+ for (const a of pg.p.anchors) if (/^https:\/\/github\.com\/evandrodevbr\/[\w.-]+\/?$/.test(a.href ?? "")) ghLinks.add(a.href.replace(/\/$/, ""));
+ const ghBroken = [];
+ for (const url of ghLinks) {
+ const r = await get(url, UA, { method: "HEAD" }).catch(() => null);
+ if (!r || r.res.status === 404) ghBroken.push(url.replace("https://github.com/evandrodevbr/", ""));
+ }
+ add("site", "técnico", "links-github-acessiveis", ghBroken.length === 0, ghBroken.length ? `404 para visitantes: ${ghBroken.join(", ")}` : `${ghLinks.size} repositórios`);
+
+ const groups = {};
+ for (const c of checks) {
+ const g = (groups[c.group] ??= { ok: 0, total: 0 });
+ g.total++;
+ if (c.ok) g.ok++;
+ }
+ const out = { base: BASE, at: new Date().toISOString(), urls: urls.length, groups, checks };
+ if (args.out) writeFileSync(args.out, JSON.stringify(out, null, 2));
+
+ console.log(`\nAuditoria ${BASE} — ${urls.length} URLs`);
+ for (const [g, v] of Object.entries(groups)) console.log(` ${g.padEnd(20)} ${v.ok}/${v.total}`);
+ const failing = checks.filter((c) => !c.ok);
+ console.log(`\nFalhas (${failing.length}):`);
+ const byId = {};
+ for (const f of failing) (byId[f.id] ??= []).push(f);
+ for (const [id, list] of Object.entries(byId)) console.log(` - ${id} (${list.length}): ${list.slice(0, 4).map((f) => `${f.scope}${f.detail ? ` [${f.detail.slice(0, 70)}]` : ""}`).join(" | ")}`);
+}
+
+main().catch((e) => {
+ console.error(e);
+ process.exit(1);
+});
diff --git a/scripts/seo-compare.mjs b/scripts/seo-compare.mjs
new file mode 100644
index 0000000..c68889f
--- /dev/null
+++ b/scripts/seo-compare.mjs
@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+/** Compara duas execuções de scripts/seo-audit.mjs: node scripts/seo-compare.mjs antes.json depois.json */
+import { readFileSync } from "node:fs";
+
+const [beforePath, afterPath] = process.argv.slice(2);
+if (!beforePath || !afterPath) {
+ console.error("uso: node scripts/seo-compare.mjs antes.json depois.json");
+ process.exit(1);
+}
+const before = JSON.parse(readFileSync(beforePath, "utf8"));
+const after = JSON.parse(readFileSync(afterPath, "utf8"));
+const key = (c) => `${c.scope}::${c.id}`;
+const prev = new Map(before.checks.map((c) => [key(c), c]));
+const next = new Map(after.checks.map((c) => [key(c), c]));
+
+console.log(`\nAntes: ${before.base} (${before.urls} URLs) Depois: ${after.base} (${after.urls} URLs)\n`);
+console.log("grupo antes depois");
+for (const g of new Set([...Object.keys(before.groups), ...Object.keys(after.groups)])) {
+ const a = before.groups[g] ?? { ok: 0, total: 0 };
+ const b = after.groups[g] ?? { ok: 0, total: 0 };
+ console.log(`${g.padEnd(20)} ${`${a.ok}/${a.total}`.padEnd(9)} ${b.ok}/${b.total}`);
+}
+const fixed = [];
+const regressed = [];
+for (const [k, c] of next) {
+ const p = prev.get(k);
+ if (p && !p.ok && c.ok) fixed.push(c);
+ if (p && p.ok && !c.ok) regressed.push(c);
+ if (!p && !c.ok) regressed.push({ ...c, detail: `novo e falhando: ${c.detail}` });
+}
+console.log(`\nCorrigidos (${fixed.length}):`);
+for (const c of fixed) console.log(` + ${c.scope} ${c.id}`);
+console.log(`\nPiorou (${regressed.length}):`);
+for (const c of regressed) console.log(` - ${c.scope} ${c.id} ${c.detail ?? ""}`);
+process.exit(regressed.length ? 2 : 0);