joyeking/redesigned-portfolio

Interações do carrossel do portfólio

Use este skill ao alterar o carrossel de exibição de projetos na página inicial ou o carrossel de design gráfico na página de Projetos. Se o usuário disser para usar ou referenciar este skill, implemente o padrão relevante diretamente e adapte seu conteúdo à solicitação.

Contexto do projeto

Este site é um portfólio estático gerado por build_site.mjs, com comportamento compartilhado em site.js e estilo em site.css. Mantenha a implementação nativa a essa arquitetura. Não instale React Bits, adicione um runtime React, configure uma chave de licença ou copie um componente proprietário. O React Bits Prism Carousel e Album Rail são referências visuais/de interação apenas.

Preserve a paleta de cores, tipografia e tokens de design existentes do site. Um pedido de carrossel sozinho não autoriza alterá-los. Mantenha o conteúdo e as rotas atuais da página funcionando e garanta que as obras de arte estejam totalmente visíveis sem cortes acidentais (use ajuste de imagem contido onde a própria obra deve permanecer intacta).

Página inicial: Trabalhos selecionados no estilo Prism

A seção #featured da página inicial apresenta projetos em um coverflow retangular centralizado. Cada projeto é um slide contendo tanto sua imagem quanto sua descrição do projeto/problema, para que transitem juntos como uma unidade.

• Mantenha um projeto proeminente no centro; mostre os projetos adjacentes como prévias progressivamente mais estreitas, menores, com pouca saturação/opacidade em ambos os lados.
• Ao navegar, mova o slide inteiro (imagem e texto) para o foco com uma transição suave de coverflow e um leve e breve brilho na imagem ativa.
• Suporte botões anterior/próximo, marcadores de progresso diretos, arrasto/toque horizontal, rolagem da roda do mouse e teclas de seta esquerda/direita quando o palco estiver focado. Enrole no primeiro e no último projeto.
• Mantenha a imagem central em um quadro retangular e preserve sua composição completa. Mantenha o texto de descrição legível agrupado diretamente abaixo de sua imagem.
• Mantenha rótulos acessíveis, visibilidade do foco, aria-hidden para slides fora da tela e um estado anunciado/atual para o indicador selecionado. Evite que um arrasto abra acidentalmente um link de projeto.
• Em telas estreitas, mantenha a mesma relação imagem-mais-descrição e controles utilizáveis; reduza dimensões e espaçamentos em vez de cortar a obra ativa.

Página de Projetos: Galeria gráfica inspirada em álbum-rail

A seção #ideas de Design gráfico é uma galeria horizontal de design gráfico no estilo fan/coverflow, mostrando uma imagem por vez. É inspirada nas capas de álbum em camadas do Album Rail, mas usa as próprias obras de arte do site e apresentação retangular.

• Centralize uma imagem retangular de tamanho fixo. Mostre imagens vizinhas em leque de ambos os lados com escala progressivamente menor, leve rotação e menor opacidade; use um fundo retangular borrado suave atrás da galeria.
• Não adicione uma videira, disco, disco de vinil ou decoração de toca-discos. Não transforme a galeria em uma fileira de cartões genéricos.
• Mantenha a galeria focada na obra de arte. A legenda do item selecionado pode mostrar apenas seu título e disciplina/categoria; não adicione descrições de projeto a esses itens da galeria.
• Avance um item por vez na rolagem da roda do palco, botões anterior/próximo, arrasto/toque horizontal e teclas de seta esquerda/direita. Clicar em uma imagem lateral visível a seleciona. Enrole a coleção.
• Mantenha Limitless fora desta galeria gráfica. Suas telas de UI/UX mobile e descrição explicativa pertencem à sua própria seção dedicada, com as telas exibidas juntas como uma vitrine separada de design de aplicativo.
• Preserve as proporções de aspecto da imagem e mostre o design completo dentro do quadro. Torne a galeria responsiva sem permitir que o transbordamento do slide crie rolagem horizontal no nível da página.

Fluxo de trabalho de implementação

1. Inspecione o gerador de marcação atual, o comportamento e o CSS antes de editar. Os pontos de entrada existentes são build_site.mjs (#featured, #ideas e a seção dedicada Limitless), site.js ([data-prism-carousel] e [data-design-carousel]) e site.css (as regras .prism-* e .design-*). Os números de linha podem mudar; pesquise por esses seletores.
2. Altere apenas o carrossel ou a seção solicitada. Mantenha o conteúdo do projeto orientado a dados e os links existentes; não duplique conteúdo em slides codificados manualmente.
3. Mantenha as interações de ponteiro, roda, botão, teclado e clique consistentes com o comportamento acima. Evite o sequestro global de rolagem; apenas capture a entrada da roda enquanto o ponteiro estiver sobre o palco do carrossel.
4. Respeite prefers-reduced-motion, forneça foco visível pelo teclado e garanta que slides ocultos não possam receber foco ou entrada de ponteiro.
5. Quando solicitado a verificar ou visualizar, inspecione tanto a página inicial quanto a página de Projetos nas larguras desktop e estreitas, incluindo ajuste de imagem, transições, controles e a seção independente Limitless.