fix(projects): reveal individual cards on small screens

This commit is contained in:
Evandro Fonseca Junior committed 2026-09-13 13:44:04 -03:00
1 parent 673f3c1843
commit 229280d519
2 files changed
+8 -22

No files matched your search

+2
View File
@@ -92,6 +92,8 @@ Em produção, a renderização só lê o snapshot versionado e não consulta de
A comunicação apresenta Evandro como responsável direto pelo projeto, sem sugerir equipe, disponibilidade garantida, prazo fixo ou certificação. Os cards de projetos reutilizam os desafios e resumos dos cases quando disponíveis. O antigo painel de telemetria fictícia foi removido; os critérios de qualidade não representam notas de auditoria.
Cada card de projeto aparece ao entrar na tela, observado individualmente e sem recorte por `clip-path`. A revelação não depende de uma porcentagem visível do grid inteiro: em celulares, a lista de uma coluna pode ser várias vezes mais alta que a tela e tornar esse gatilho inalcançável.
`app/components/EngineeringWithAI.tsx` explica arquitetura, permissões, validação e recuperação de dados, com três relatos históricos de 2025 e links junto de cada afirmação:
- Lovable: exposição relatada pela Semafor e CVE-2025-48757, incluindo a contestação do fornecedor no NVD; exposição não é apresentada como roubo comprovado.
+6 -22
View File
@@ -15,24 +15,11 @@ export default function Projects({
}) {
const shouldReduceMotion = useReducedMotion();
const gridVariants: Variants = {
hidden: {},
visible: {
transition: {
delayChildren: 0.08,
staggerChildren: 0.08,
},
},
};
const cardVariants: Variants = {
hidden: shouldReduceMotion
? { opacity: 0 }
: { opacity: 0, y: 24, clipPath: "inset(100% 0 0 0)" },
hidden: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 24 },
visible: {
opacity: 1,
y: 0,
clipPath: "inset(0% 0 0 0)",
transition: shouldReduceMotion
? { duration: 0.25 }
: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
@@ -48,13 +35,7 @@ export default function Projects({
dark
disableChildrenAnimation
>
<motion.div
className="ds-grid-2"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.2 }}
variants={gridVariants}
>
<div className="ds-grid-2">
{projects.map((project) => {
const caseStudy = caseStudies.find(
(entry) => entry.id === project.id,
@@ -63,6 +44,9 @@ export default function Projects({
<motion.article
key={project.id}
className="ds-card h-full"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: "some" }}
variants={cardVariants}
whileHover={
shouldReduceMotion
@@ -166,7 +150,7 @@ export default function Projects({
</motion.article>
);
})}
</motion.div>
</div>
<div className="mt-sp-8 flex flex-wrap gap-sp-3" data-reel-stagger="left">
<MagneticButton