{"id":48786535,"url":"https://github.com/eryckassis/vehicle-slide-gsap","last_synced_at":"2026-04-13T17:17:28.174Z","repository":{"id":318541906,"uuid":"1071574071","full_name":"eryckassis/vehicle-slide-gsap","owner":"eryckassis","description":"Uma experiência de vitrine online para carros esportivos e de luxo, construída com Vite, TypeScript e animações com GSAP. O projeto prioriza código limpo, arquitetura simples e extensível, acessibilidade, SEO semântico e performance.","archived":false,"fork":false,"pushed_at":"2025-10-31T20:43:24.000Z","size":288,"stargazers_count":1,"open_issues_count":8,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-31T21:21:58.031Z","etag":null,"topics":["clean-code","css","htmlcss","javascript","semantic-web","seo","typescript"],"latest_commit_sha":null,"homepage":"https://vehicle-slide-gsap.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eryckassis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-07T14:26:00.000Z","updated_at":"2025-10-31T20:38:50.000Z","dependencies_parsed_at":"2025-10-07T20:42:20.994Z","dependency_job_id":null,"html_url":"https://github.com/eryckassis/vehicle-slide-gsap","commit_stats":null,"previous_names":["eryckassis/veicle-slide-gsap"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eryckassis/vehicle-slide-gsap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fvehicle-slide-gsap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fvehicle-slide-gsap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fvehicle-slide-gsap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fvehicle-slide-gsap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eryckassis","download_url":"https://codeload.github.com/eryckassis/vehicle-slide-gsap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fvehicle-slide-gsap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31762065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clean-code","css","htmlcss","javascript","semantic-web","seo","typescript"],"created_at":"2026-04-13T17:17:27.547Z","updated_at":"2026-04-13T17:17:28.169Z","avatar_url":"https://github.com/eryckassis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vehicle Slide GSAP — Slider de Veículos com Vite + TypeScript\n\nUma experiência de vitrine online para carros esportivos e de luxo, construída com Vite, TypeScript e animações com GSAP. O projeto prioriza código limpo, arquitetura simples e extensível, acessibilidade, SEO semântico e performance.\n\n \u003ctr\u003e\n    \u003ctd style=\"border: 3px solid #00ffc8; border-radius: 10px; padding: 8px; background: #111;\"\u003e\n      \u003cimg src=\"https://github.com/user-attachments/assets/93817ae0-3f33-41e4-a774-423998fa50e7\" alt=\"GIF 1\" style=\"display: block; margin: 0 auto; border-radius:8px; max-width:100%;\"\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n## Visão geral\n\nEste projeto implementa um slider/galeria no estilo “accordion” para destacar veículos com fotos em alta qualidade, especificações e microinterações suaves. Ideal para lojas de carros que desejam apresentar seu estoque online de forma moderna, responsiva e com animações fluidas.\n\nPrincipais objetivos:\n\n- Código limpo, legível e fácil de manter\n- Tipagem com TypeScript para segurança e escalabilidade\n- Animações suaves com GSAP\n- Acessibilidade via semântica HTML, navegação por teclado e aria-labels\n- Baseada em Vite para DX rápida (HMR), build performático e estrutura moderna\n\n---\n\n## Recursos principais\n\n- Layout de slides “accordion” com destaque do item ativo\n- Navegação por clique, setas de navegação e teclas de seta (esquerda/direita)\n- Conteúdo semântico: uso de `\u003carticle\u003e`, `\u003cheader\u003e`, `\u003cdl\u003e`/`\u003cdt\u003e`/`\u003cdd\u003e` para specs\n- Preparado para animações com GSAP nas entradas de texto e elementos visuais\n- Estrutura pronta para evoluir para React sem reescrever a base\n\n---\n\n## Arquitetura e decisões de design\n\n### Clean Code e manutenibilidade\n\n- Classes coesas: `AccordionSlider` encapsula a lógica do slider; `SliderInitializer` controla o bootstrap.\n- Métodos pequenos e com nomes claros: `activateSlide`, `deactivateAllSlides`, `calculateNextIndex`, etc.\n- Early returns: reduzem nesting e facilitam leitura.\n- Sem efeitos colaterais surpresa: cada método faz apenas o que o nome indica.\n\n### TypeScript para segurança e escalabilidade\n\n- Tipos explícitos em elementos do DOM (`NodeListOf\u003cHTMLElement\u003e`, `KeyboardEvent\u003e`).\n- Operador de encadeamento opcional em listeners (`this.prevBtn?.addEventListener(...)`) evita null pointer.\n- Facilita refatorações futuras (por exemplo, migração para React) sem quebrar comportamentos.\n\n### Animações com GSAP\n\n- GSAP selecionado por oferecer timeline robusta, easings avançados e excelente performance.\n- Estratégia: animar elementos de texto e detalhes (título, subtítulo, badges) ao ativar um slide.\n- Eases recomendados: `power3.out` ou `expo.out` para suavidade.\n\n### Acessibilidade e SEO semântico\n\n- Navegação por teclado: setas esquerda/direita para mudar de slide.\n- Atributos ARIA: `role`, `aria-label` e hierarquia semântica consistente.\n- Tags semânticas melhoram SEO e compatibilidade com leitores de tela.\n\n---\n\n## Estrutura de pastas\n\n```text\nveicle-slide-gsap/\n├─ index.html               # HTML de entrada do Vite\n├─ package.json             # Scripts e dependências\n├─ tsconfig.json            # Configuração TypeScript\n├─ public/                  # Assets estáticos (se necessário)\n├─ src/\n│  ├─ main.ts               # Lógica do slider (TypeScript)\n│  └─ style.css             # Estilos base\n└─ README.md\n```\n\nArquivos relevantes fora do Vite (ex.: protótipo HTML/CSS/JS puro) foram migrados e consolidados dentro desta estrutura moderna. O `index.html` do Vite importa o TypeScript via `\u003cscript type=\"module\" src=\"/src/main.ts\"\u003e\u003c/script\u003e`.\n\n---\n\n## Tecnologias utilizadas\n\n- Vite — bundler e dev server com HMR\n- TypeScript — tipagem estática e melhor DX\n- GSAP (GreenSock Animation Platform) — animações suaves e performáticas\n- HTML semântico + CSS moderno\n\nLibs:\n\n- `gsap` (GreenSock)\n\n---\n\n## Como executar\n\nPré-requisitos: Node.js LTS e npm.\n\n1. Instale as dependências:\n\n```bash\nnpm install\n```\n\n1. Rode em desenvolvimento (com HMR):\n\n```bash\nnpm run dev\n```\n\n1. Gere o build de produção:\n\n```bash\nnpm run build\n```\n\n1. Faça o preview do build:\n\n```bash\nnpm run preview\n```\n\nObservação: o GSAP deve estar presente em `dependencies`. Caso esteja iniciando do zero, instale:\n\n```bash\nnpm i gsap\n```\n\n---\n\n## Uso e integração em lojas de carro\n\n- Substitua os conteúdos dos `\u003carticle class=\"slide\"\u003e` com fotos e specs reais do seu estoque.\n- Cada slide suporta marca, nome do modelo, subtítulo e uma lista de especificações com `\u003cdl\u003e`.\n- Os botões de navegação permitem percorrer os veículos; teclas de seta garantem usabilidade.\n- Integre com seu backend para carregar os veículos dinamicamente (futuro upgrade com React facilita isso com estados e props).\n\nExemplos de expansão:\n\n- Filtros por marca/ano/preço\n- Integração com analytics para medir interesse por modelo\n- Botão “Adicionar à cotação”/“Fale com vendedor” com eventos rastreáveis\n\n---\n\n## Boas práticas aplicadas\n\n### Código limpo\n\n- Nomes descritivos e consistentes para variáveis e métodos\n- Métodos pequenos, coesos e com responsabilidade única\n- Early returns para simplificar fluxos\n- Separação clara de inicialização vs. comportamento\n\n### Acessibilidade (a11y)\n\n- `role`, `aria-label` e semântica adequada em headers, listas de specs e botões\n- Navegação por teclado implementada (setas)\n- Foco gerenciável nos elementos interativos\n\n### SEO e semântica\n\n- Estrutura coerente com `\u003cmain\u003e`, `\u003csection\u003e`, `\u003carticle\u003e`, `\u003cheader\u003e`\n- Conteúdos textuais indexáveis e significativos\n- Atributos alt/labels e descrições claras\n\n### Performance\n\n- Vite para desenvolvimento rápido e builds otimizados\n- Animações GSAP com easings suaves e mínimo layout thrashing\n- Evita reflows desnecessários com atualizações coesas de classe/estado\n\n---\n\n## Animações com GSAP\n\nO projeto está pronto para animar os elementos de cada slide quando ativados. Um exemplo de abordagem (resumida) no `main.ts`:\n\n```ts\n// import { gsap } from 'gsap'\n\nprivate animateSlideText(index: number): void {\n  const slide = this.slides[index]\n  const targets = [\n    slide.querySelector('.car-name'),\n    slide.querySelector('.car-subtitle'),\n    ...slide.querySelectorAll('.badge') as unknown as HTMLElement[],\n  ].filter(Boolean) as HTMLElement[]\n\n  if (!targets.length) return\n\n  // Estado inicial seguro\n  gsap.set(targets, { opacity: 0, y: 24 })\n\n  // Entrada suave com stagger\n  gsap.to(targets, {\n    opacity: 1,\n    y: 0,\n    duration: 0.8,\n    ease: 'power3.out',\n    stagger: 0.12,\n    overwrite: 'auto',\n  })\n}\n```\n\nEssa estratégia evita jumps, define estado inicial consistente e cria uma impressão de fluidez profissional.\n\n---\n\n## Erros/bugs encontrados e soluções\n\nDurante a migração e ajustes, problemas típicos incluem:\n\n1. Seletores que retornam `null`\n\n- Sintoma: erro ao tentar adicionar listeners em `prevBtn`/`nextBtn` quando o elemento não existe no DOM.\n- Solução: usar encadeamento opcional (`?.addEventListener`) e/ou validação antes do uso.\n\n1. Conflito entre `index.html` raiz e `veicle-slide-gsap/index.html`\n\n- Sintoma: o HTML fora do Vite não reconhece o TS, ou dois HTMLs causando confusão.\n- Solução: padronizar o HTML do Vite como entrada principal e migrar o conteúdo visual para ele.\n\n1. Navegação por teclado sem slide ativo\n\n- Sintoma: índices negativos ou mod nos limites produzindo comportamentos inesperados.\n- Solução: funções `isNoSlideActive`, `calculateNextIndex` e `calculatePreviousIndex` para cobrir estados sem ativo.\n\n1. Animações “não tão suaves”\n\n- Sintoma: textos entrando de forma abrupta.\n- Solução: GSAP com `fromTo`/`set` + `to`, easings `power3.out`/`expo.out`, e `stagger`.\n\n1. Assets e caminhos em produção\n\n- Sintoma: imagens externas ou caminhos relativos quebrando em ambientes diferentes.\n- Solução: preferir assets na pasta `public/` ou URLs absolutas estáveis; revisar `base` do Vite se publicar em subpath.\n\n---\n\n## Extensibilidade e futuro upgrade para React\n\n- A classe `AccordionSlider` foi escrita de forma coesa e isolada, facilitando a migração para um componente React (por exemplo, `AccordionSlider.tsx`).\n- O estado (`currentIndex`) mapeia naturalmente para `useState` e os listeners para `useEffect`/handlers.\n- Com React, fica simples carregar dados de uma API e renderizar os slides dinamicamente a partir de um array de veículos.\n\nDireção sugerida:\n\n- Criar um hook `useAccordionSlider` ou um componente controlado com props para `initialIndex`, `onChange`, etc.\n- Introduzir testes unitários para funções puras (`calculateNextIndex`, `calculatePreviousIndex`).\n\n---\n\n## Impacto para empresas e pessoas\n\n- Redução de custo de manutenção: tipagem, estrutura clara e separação de responsabilidades.\n- Escalabilidade: adicionar novos veículos, filtros e integrações sem reescrever a base.\n- Melhor conversão: experiência rica e animações suaves melhoram engajamento e percepção de qualidade.\n- Acessibilidade e SEO elevam alcance e encontram o público certo.\n\n---\n\n## Roadmap\n\n- [ ] Integrar animações GSAP completas com timelines\n- [ ] Carregar veículos a partir de um JSON/API\n- [ ] Migração para React com componentes e testes\n- [ ] Modo acessível com foco/aria mais refinado\n- [ ] Suporte a touch/gestos (mobile)\n\n---\n\n## Como contribuir\n\n1. Faça um fork do repositório\n2. Crie uma branch de feature: `feat/nome-da-feature`\n3. Commit com mensagens claras e descritivas\n4. Abra um PR explicando o que mudou e por quê\n\n---\n\n## Licença\n\nEste repositório segue a licença do autor/empresa responsável.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feryckassis%2Fvehicle-slide-gsap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feryckassis%2Fvehicle-slide-gsap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feryckassis%2Fvehicle-slide-gsap/lists"}