Evandro Fonseca JuniorandClaude Sonnet 5.5
a1a1e91135
- cards com moldura de navegador (endereco real) e brilho na cor do site no card que toca - um video por vez: o do card sob o mouse/foco, ou o mais perto do centro da tela; nada baixa antes de tocar, e um botao pausa os videos que se mexem sozinhos - janela ampliada em <dialog> nativo: troca computador/celular mantendo o ponto do site, capitulos clicaveis, controles proprios, setas entre projetos e foco devolvido ao fechar - dados e capitulos de cada projeto em lib/project-showcase.ts (substitui project-videos.ts) Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import Image from "next/image";
|
|
import { getProjectVideo } from "@/lib/project-showcase";
|
|
import { ProjectMedia } from "./showcase/ProjectMedia";
|
|
|
|
type CoverProject = {
|
|
id: string;
|
|
title: string;
|
|
demoUrl?: string | null;
|
|
githubUrl?: string | null;
|
|
};
|
|
|
|
/** Capturas de tela publicadas dos projetos que têm interface pública. */
|
|
const SCREENSHOTS: Record<string, string | undefined> = {
|
|
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 video = getProjectVideo(project.id);
|
|
const src = SCREENSHOTS[project.id];
|
|
|
|
if (video) return <ProjectMedia project={project} />;
|
|
|
|
if (src) {
|
|
return (
|
|
<div className="ds-cover">
|
|
<Image
|
|
src={src}
|
|
alt={`Captura de tela de ${project.title}`}
|
|
width={1600}
|
|
height={1000}
|
|
sizes="(min-width: 1360px) 33vw, (min-width: 1025px) 50vw, 100vw"
|
|
priority={priority}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="ds-cover ds-cover-fallback" aria-hidden="true">
|
|
<span className="ds-cover-mark">{initials(project.title)}</span>
|
|
</div>
|
|
);
|
|
}
|