evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

perf(movimento): sem tela vazia, passagens em CSS e vitrine leve

Browse Source 
Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.
This commit is contained in:
Evandro Fonseca Junior committed 2026-10-14 14:15:50 -03:00
1 parent 10f170abf4
commit 318a764190
77 files changed
+4293 -4951
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/showcase/showcase.css
+203 -215
View File
@@ -163,11 +163,6 @@
border: 0;
background: transparent;
cursor: zoom-in;
&:focus-visible {
outline: 2px solid var(--slash);
outline-offset: -4px;
}
}
.ds-frame-chip {
@@ -231,11 +226,6 @@
&:hover svg {
background: rgba(5, 5, 5, 0.9);
}
&:focus-visible {
outline: 2px solid var(--slash);
outline-offset: -4px;
}
}
/* sem mouse não existe "passar por cima": o aviso fica sempre à vista */
@@ -345,46 +335,40 @@
& > ol::-webkit-scrollbar {
display: none;
}
}
& > ol > li > button {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 14px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
white-space: nowrap;
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.12);
cursor: pointer;
transition:
color 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
.ds-reel-pick {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 14px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
white-space: nowrap;
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.12);
cursor: pointer;
transition:
color 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
@media (hover: hover) {
&:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
}
}
/* por dentro: a faixa rolável (overflow-x) cortaria o anel desenhado para fora */
&:focus-visible {
outline: 2px solid var(--slash);
outline-offset: -4px;
}
&[aria-current="true"] {
@media (hover: hover) {
&:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}
}
&[aria-current="true"] {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.08);
}
}
.ds-reel-hint {
@@ -431,44 +415,42 @@
list-style: none;
margin: 6px 0 10px 16px;
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
& button {
display: flex;
align-items: center;
width: 100%;
min-height: 32px;
gap: 10px;
padding: 0 12px;
border: 0;
background: transparent;
font-family: var(--font-display);
font-size: 15px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.66);
text-align: left;
.ds-reel-chapter-pick {
display: flex;
align-items: center;
width: 100%;
min-height: 32px;
gap: 10px;
padding: 0 12px;
border: 0;
background: transparent;
font-family: var(--font-display);
font-size: 15px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.66);
text-align: left;
& span {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
@media (hover: hover) {
&:hover {
color: #fff;
}
}
&[aria-current="true"] {
color: var(--slash);
background: transparent;
border: 0;
& span {
color: var(--slash);
}
@media (hover: hover) {
&:hover {
color: #fff;
}
}
&[aria-current="true"] {
color: var(--slash);
}
}
.ds-reel-chapter-num {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.ds-reel-chapter-pick[aria-current="true"] .ds-reel-chapter-num {
color: var(--slash);
}
@media (min-width: 1024px) {
@@ -478,7 +460,7 @@
}
@media (min-width: 1024px) and (pointer: coarse) {
.ds-reel-chapters button {
.ds-reel-chapter-pick {
min-height: 44px;
}
}
@@ -495,7 +477,7 @@
opacity: 0;
}
.ds-reel-index > ol > li > button[aria-current="true"] .ds-reel-bar {
.ds-reel-pick[aria-current="true"] .ds-reel-bar {
opacity: 1;
}
@@ -516,7 +498,7 @@
overflow: visible;
}
.ds-reel-index > ol > li > button {
.ds-reel-pick {
width: 100%;
gap: 14px;
padding: 0 16px;
@@ -525,35 +507,12 @@
.ds-reel-stage {
position: relative;
min-height: 0;
/* o palco mede a si mesmo: o conjunto cresce até o limite da largura ou da altura que sobrar */
container-type: size;
}
.ds-reel-layer {
--accent: var(--slash);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
/* só opacidade: quem não está em cena já é inert (sem foco, sem clique, fora da busca) e aria-hidden */
opacity: 0;
pointer-events: none;
transform: translateY(14px);
transition:
opacity 0.5s ease,
transform 0.6s var(--ease-out);
&[data-state="before"] {
transform: translateY(-14px);
}
&[data-state="active"] {
opacity: 1;
pointer-events: auto;
transform: none;
}
min-height: 0;
/* o palco mede a si mesmo: o conjunto cresce até o limite da largura ou da altura que sobrar */
container-type: size;
}
/* aparelhos + legenda, um bloco só: a legenda tem sempre a mesma largura e o mesmo canto esquerdo do notebook */
@@ -568,9 +527,33 @@
min-width: min(100%, 320px);
}
/* as camadas de aparelhos (uma por projeto) ficam empilhadas na mesma célula: o bloco tem a altura de um par */
.ds-reel-devices {
position: relative;
display: grid;
}
.ds-reel-set {
isolation: isolate;
}
/* a troca de projeto é um fade cruzado só dos aparelhos (a legenda é um bloco à parte, abaixo): sem deslocamento.
Quem não está em cena já é inert (sem foco, sem clique, fora da busca) e aria-hidden. */
.ds-reel-layer {
--accent: var(--slash);
position: relative;
grid-area: 1 / 1;
min-width: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
&[data-state="active"] {
opacity: 1;
pointer-events: auto;
}
/* brilho na cor do site, atrás dos aparelhos */
&::before {
content: "";
position: absolute;
@@ -587,10 +570,6 @@
}
}
.ds-reel-set {
isolation: isolate;
}
.ds-reel-laptop {
width: 100%;
}
@@ -620,11 +599,20 @@
min-width: 88px;
}
/* uma só legenda para o projeto em cena: na troca ela some depressa (120 ms, o mesmo CAPTION_OUT_MS de
ProjectReel.tsx) e volta com o conteúdo novo; só opacidade, o texto nunca se desloca */
.ds-reel-caption {
flex: none;
display: grid;
gap: 6px;
min-width: 0;
transition: opacity 0.2s ease-out;
&[data-leaving] {
opacity: 0;
pointer-events: none;
transition: opacity 0.12s linear;
}
}
.ds-reel-title {
@@ -761,11 +749,11 @@
}
@media (min-width: 1024px) and (max-height: 700px) and (pointer: fine) {
.ds-reel-index > ol > li > button {
.ds-reel-pick {
min-height: 38px;
}
.ds-reel-chapters button {
.ds-reel-chapter-pick {
min-height: 28px;
}
}
@@ -882,8 +870,9 @@
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* um cartão mais baixo: sem subtítulo a legenda cabe e o celular da moldura ganha espaço */
/* um cartão mais baixo: sem subtítulo a legenda cabe e o celular da moldura ganha espaço; texto corrido em 15 px */
.ds-reel-item .ds-reel-sub {
font-size: 15px;
-webkit-line-clamp: 3;
}
}
@@ -998,75 +987,65 @@ html.ds-lb-open {
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.16);
}
& button {
min-height: 44px;
padding: 0 16px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.72);
background: transparent;
border: 0;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
.ds-lb-toggle button {
min-height: 44px;
padding: 0 16px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.72);
background: transparent;
border: 0;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
/* a versão escolhida: fundo claro e sublinhado em lima (a lima só marca, não preenche o botão) */
&[aria-pressed="true"] {
color: #fff;
background: rgba(255, 255, 255, 0.12);
box-shadow: inset 0 -2px 0 var(--slash);
}
&:focus-visible {
outline: 2px solid var(--slash);
outline-offset: -3px;
}
/* a versão escolhida: fundo claro e sublinhado em lima (a lima só marca, não preenche o botão) */
&[aria-pressed="true"] {
color: #fff;
background: rgba(255, 255, 255, 0.12);
box-shadow: inset 0 -2px 0 var(--slash);
}
}
.ds-lb-nav {
display: flex;
gap: 6px;
}
& button {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
color: #fff;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.16);
cursor: pointer;
transition: border-color 0.2s ease;
.ds-lb-nav button {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
color: #fff;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.16);
cursor: pointer;
transition: border-color 0.2s ease;
@media (hover: hover) {
&:hover:not(:disabled) {
border-color: rgba(255, 255, 255, 0.5);
}
}
&:disabled {
opacity: 0.3;
cursor: default;
}
&:focus-visible {
outline: 2px solid var(--slash);
outline-offset: 2px;
}
& svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
@media (hover: hover) {
&:hover:not(:disabled) {
border-color: rgba(255, 255, 255, 0.5);
}
}
&:disabled {
opacity: 0.3;
cursor: default;
}
}
.ds-lb-nav button svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
/* o palco mede a si mesmo: o aparelho cresce até o limite da largura ou da altura que sobrar */
@@ -1128,11 +1107,6 @@ html.ds-lb-open {
}
}
&:focus-visible {
outline: 2px solid var(--slash);
outline-offset: 2px;
}
& svg {
width: 16px;
height: 16px;
@@ -1186,11 +1160,6 @@ html.ds-lb-open {
border-radius: 0;
background: var(--slash);
}
&:focus-visible {
outline: 2px solid var(--slash);
outline-offset: 2px;
}
}
.ds-lb-chapters {
@@ -1199,44 +1168,39 @@ html.ds-lb-open {
flex-wrap: wrap;
gap: 8px;
list-style: none;
}
& button {
min-height: 40px;
padding: 0 14px;
font-family: var(--font-display);
font-size: 15px;
white-space: nowrap;
color: rgba(255, 255, 255, 0.76);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.14);
cursor: pointer;
transition:
color 0.2s ease,
border-color 0.2s ease;
.ds-lb-chapters button {
min-height: 40px;
padding: 0 14px;
font-family: var(--font-display);
font-size: 15px;
white-space: nowrap;
color: rgba(255, 255, 255, 0.76);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.14);
cursor: pointer;
transition:
color 0.2s ease,
border-color 0.2s ease;
& span {
font-family: var(--font-mono);
font-size: 12px;
color: var(--slash);
}
@media (hover: hover) {
&:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
}
&[aria-current="true"] {
@media (hover: hover) {
&:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.7);
}
&:focus-visible {
outline: 2px solid var(--slash);
outline-offset: -4px;
border-color: rgba(255, 255, 255, 0.4);
}
}
&[aria-current="true"] {
color: #fff;
border-color: rgba(255, 255, 255, 0.7);
}
}
.ds-lb-chapters button span {
font-family: var(--font-mono);
font-size: 12px;
color: var(--slash);
}
@media (pointer: coarse) {
@@ -1361,3 +1325,27 @@ html.ds-lb-open {
min-height: 0;
}
}
/* ─────────────────────────── Foco ─────────────────────────── */
/* Anel de foco da vitrine (sempre sobre fundo escuro): lima. Em tudo o que fica dentro de um contêiner que corta
o que passa da borda (a faixa rolável do índice, as telas, a lista de trechos) o anel fica por dentro; nos
controles soltos, por fora. Sem o halo do anel duplo global (globals.css): ele é para fundos claros. */
:is(
.ds-frame-expand,
.ds-frame-pause,
.ds-reel-pick,
.ds-reel-chapter-pick,
.ds-lb-toggle button,
.ds-lb-chapters button
):focus-visible {
outline: 2px solid var(--slash);
outline-offset: -4px;
box-shadow: none;
}
:is(.ds-lb-nav button, .ds-lb-play, .ds-lb-range):focus-visible {
outline: 2px solid var(--slash);
outline-offset: 2px;
box-shadow: none;
}