https://github.com/kleber-goncalves/autono
https://github.com/kleber-goncalves/autono
gsap-scroll gsap-scrolltrigger javascript lenis-scroll nodejs react-awesome-reveal react-router-dom reactjs swiper-js swiper-slider tailwind-css vercel vercel-deployment vitejs-react
Last synced: 13 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kleber-goncalves/autono
- Owner: kleber-goncalves
- Created: 2025-12-01T20:07:28.000Z (5 months ago)
- Default Branch: TESTE-GSAP
- Last Pushed: 2026-01-08T20:57:29.000Z (4 months ago)
- Last Synced: 2026-01-09T10:51:56.816Z (4 months ago)
- Topics: gsap-scroll, gsap-scrolltrigger, javascript, lenis-scroll, nodejs, react-awesome-reveal, react-router-dom, reactjs, swiper-js, swiper-slider, tailwind-css, vercel, vercel-deployment, vitejs-react
- Language: JavaScript
- Homepage: https://autono-lpt4.vercel.app
- Size: 8.11 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Autono - Projeto de Estudo em React
[](https://reactjs.org/)
[](https://vitejs.dev/)
[](https://tailwindcss.com/)
[](https://greensock.com/gsap/)
[](https://vercel.com)
[](https://opensource.org/licenses/MIT)
[](http://makeapullrequest.com)
[](https://github.com/kleber-goncalves/autono/graphs/commit-activity)
---
## 🚀 Destaque do Projeto
### ✨ **Por que o Autono se destaca?**
| 🎯 **Performance Excepcional** | 📱 **95% Responsivo** | 🔧 **58% Reutilizável** |
| :----------------------------: | :-----------------------: | :-------------------------: |
| FCP < 1.2s • TTI < 2.1s | Desktop • Tablet • Mobile | Componentes • Hooks • Utils |
| Bundle 487KB (77% menor) | Lighthouse Score: 95+ | Arquitetura Escalável |
### 🏆 **Tecnologias de Ponta**
---
## Navegação Rápida
- [Sobre o Projeto](#sobre-o-projeto)
- [Funcionalidades](#funcionalidades)
- [Tecnologias Utilizadas](#tecnologias-utilizadas)
- [Arquitetura do Projeto](#arquitetura-do-projeto)
- [Instalação e Execução](#instalação-e-execução)
- [Estrutura de Arquivos](#estrutura-de-arquivos)
- [Performance e Otimizações](#performance-e-otimizações)
- [Testes e Qualidade](#testes-e-qualidade)
- [Contribuição](#contribuição)
- [Licença](#licença)
## Sobre o Projeto
O **Autono** é um projeto fictício desenvolvido para fins de estudo e demonstração de boas práticas em desenvolvimento web moderno. Este projeto foi cuidadosamente planejado utilizando metodologias profissionais de desenvolvimento, incluindo controle de versão com Git, templates de pull requests e commits descritivos.
### Características Principais
- **Projeto de Estudo**: Desenvolvido para demonstrar conceitos avançados de React e arquitetura web
- **Planejamento Profissional**: Utiliza Git com templates de pull request e commits padronizados
- **Arquitetura Moderna**: Implementa conceitos de arquitetura de software para escalabilidade
- **Performance Otimizada**: Testado e ajustado para máxima velocidade de carregamento
- **Altamente Reutilizável**: 58% dos componentes e hooks foram projetados para reutilização
- **Responsivo**: 95% compatível com diferentes tamanhos de tela
- **Componentes Reutilizáveis**: Hooks e componentes customizados para máxima reutilização
## Funcionalidades
- **Navegação Dinâmica**: Sistema de rotas com React Router
- **Animações Avançadas**: GSAP com ScrollTrigger para efeitos visuais
- **Scroll Suave**: Lenis para experiência premium de rolagem
- **Carregamento Inteligente**: Code Splitting e lazy loading
- **Interface Responsiva**: Design adaptável para desktop, tablet e mobile
- **Formulários Interativos**: Validação e feedback em tempo real
- **Modal System**: Sistema de modais acessíveis e animados
- **Loading States**: Telas de carregamento personalizadas por página
## Tecnologias Utilizadas
### Core Technologies
- **React 19**: Framework JavaScript para construção de interfaces
- **React Router DOM**: Gerenciamento de rotas e navegação
- **Tailwind CSS**: Framework CSS utilitário para estilização
- **Vite**: Build tool moderno e rápido para desenvolvimento
### UI/UX Libraries
- **Lucide React**: Biblioteca de ícones moderna e consistente
- **React Awesome Reveal**: Animações de entrada para componentes
- **Swiper**: Carrossel touch-friendly para mobile
### Performance & Animation
- **Lenis**: Biblioteca para scroll suave e otimizado
- **GSAP**: Plataforma de animação profissional
- **GSAP ScrollTrigger**: Animações baseadas em scroll
### Development Tools
- **Node.js**: Runtime JavaScript para desenvolvimento
- **Vercel**: Plataforma de deploy e hosting
- **ESLint**: Linting e padronização de código
## Arquitetura do Projeto
Este projeto foi desenvolvido seguindo princípios de arquitetura de software, garantindo manutenibilidade, escalabilidade e reutilização de código.
### Estrutura Arquitetural
```
┌─────────────────────────────────────────────────────────────┐
│ AUTONO ARCHITECTURE │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ PRESENTATION LAYER │ │
│ │ ├─ Pages (Routes) ──────────────────────────────┐ │ │
│ │ │ ├── Home (/): Landing page principal │ │ │
│ │ │ ├── Tecnologia (/tecnologia): Seção tech │ │ │
│ │ │ ├── Sobre (/sobre): Sobre a empresa │ │ │
│ │ │ └── Carreiras (/carreiras): Vagas │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ├─ Components (Reusable) ──────────────────────┐ │ │
│ │ │ ├── Nav: Navegação principal │ │ │
│ │ │ ├── ModalTrigger: Sistema de modais │ │ │
│ │ │ ├── LoadingScreens: Estados de loading │ │ │
│ │ │ └── CustomCursor: Cursor interativo │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ BUSINESS LOGIC LAYER │ │
│ │ ├─ Hooks (Custom) ─────────────────────────────┐ │ │
│ │ │ ├── useForm: Gerenciamento de formulários │ │ │
│ │ │ ├── useScrollDirection: Detecção de scroll │ │ │
│ │ │ └── useMinimumLoadingTime: Controle loading │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ├─ Utils (Helpers) ────────────────────────────┐ │ │
│ │ │ ├── MinimumLoadingWrapper: Wrapper loading │ │ │
│ │ │ └── Quebrar-texto: Utilitário de texto │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ DATA & ASSETS LAYER │ │
│ │ ├─ Static Assets ──────────────────────────────┐ │ │
│ │ │ ├── public/: Imagens, fontes, modelos 3D │ │ │
│ │ │ └── assets/: Recursos otimizados │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ├─ Configuration ──────────────────────────────┐ │ │
│ │ │ ├── vite.config.js: Config build │ │ │
│ │ │ ├── tailwind.config.js: Config estilos │ │ │
│ │ │ └── vercel.json: Config deploy │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ INFRASTRUCTURE LAYER │ │
│ │ ├─ Build & Deploy ─────────────────────────────┐ │ │
│ │ │ ├── Vite: Build tool moderno │ │ │
│ │ │ ├── Vercel: Hosting e CDN │ │ │
│ │ │ └── Git: Version control profissional │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### Princípios Arquiteturais Aplicados
- **Separação de Responsabilidades**: Cada camada tem propósito específico
- **Reutilização**: 58% dos componentes projetados para múltiplos contextos
- **Performance**: Code splitting e lazy loading implementados
- **Manutenibilidade**: Estrutura organizada e documentada
- **Escalabilidade**: Arquitetura preparada para crescimento
## Instalação e Execução
### Pré-requisitos
- Node.js (versão 18 ou superior)
- npm ou yarn
- Git
### Passos para Instalação
1. **Clone o repositório**:
```bash
git clone https://github.com/kleber-goncalves/autono.git
cd autono
```
2. **Instale as dependências**:
```bash
npm install
```
3. **Execute em modo desenvolvimento**:
```bash
npm run dev
```
4. **Build para produção**:
```bash
npm run build
npm run preview
```
## Estrutura de Arquivos
```
autono/
├── public/ # Assets estáticos
│ ├── vite.svg # Logo Vite
│ └── ... # Outros assets
├── src/
│ ├── components/ # Componentes reutilizáveis
│ │ ├── Nav.jsx # Navegação principal
│ │ ├── ModalTrigger.jsx # Sistema de modais
│ │ ├── SubscribeModal.jsx # Modal de assinatura
│ │ ├── CustomCursor.jsx # Cursor personalizado
│ │ └── Loadings/ # Telas de carregamento
│ │ ├── LoadingScreenAutono.jsx
│ │ └── ...
│ ├── pages/ # Páginas da aplicação
│ │ ├── page1/
│ │ │ └── autono.jsx # Página inicial
│ │ ├── page2-tec/
│ │ │ └── Tecnologia.jsx # Página tecnologia
│ │ └── ...
│ ├── hooks/ # Hooks customizados
│ │ ├── useForm.js # Gerenciamento formulários
│ │ ├── useScrollDirection.js # Detecção scroll
│ │ └── ...
│ ├── utils/ # Utilitários
│ │ ├── MinimumLoadingWrapper.jsx
│ │ └── Quebrar-texto.jsx
│ ├── style/ # Estilos customizados
│ ├── docs/ # Documentação
│ └── ...
├── dist/ # Build de produção (gerado)
├── node_modules/ # Dependências
├── package.json # Configuração projeto
├── vite.config.js # Configuração Vite
├── vercel.json # Configuração Vercel
└── README.md # Esta documentação
```
## Performance e Otimizações
### Métricas de Performance
- **First Contentful Paint**: < 1.2s
- **Time to Interactive**: < 2.1s
- **Bundle Size Inicial**: 487KB (77% menor que sem otimizações)
- **Mobile Loading (3G)**: < 2.3s
- **Lighthouse Score**: 95+
- **Responsividade**: 95% compatível
### Otimizações Implementadas
#### Code Splitting com React.lazy()
```
SEM Code Splitting COM Code Splitting
┌─────────────────────────────────┐ ┌─────────────────────────────────┐
│ Bundle Único (2.1MB) │ │ Bundle Principal (487KB) │
│ │ │ │
│ ├─ Página Home │ │ ├─ Core do App │
│ ├─ Página Tecnologia │ │ └─ Componentes Comuns │
│ ├─ Página Sobre │ │ │
│ ├─ Página Carreiras │ └─────────────────────────────────┘
│ └─ Todas as outras páginas │
└─────────────────────────────────┘ ┌─────────────────────────────────┐
│ Chunk Home (320KB) │
│ └─ Só carrega quando acessado │
└─────────────────────────────────┘
```
#### Sistema de Loading Personalizado
Cada página possui sua própria tela de carregamento, garantindo experiência consistente:
```javascript
// App.jsx
}
minDuration={900}
>
}
```
#### Cache Estratégico (vercel.json)
```json
{
"headers": [
{
"source": "/(.*)\\.(js|css|png|jpg|jpeg|webp|avif|svg|ico|woff2)",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
}
]
}
```
## Testes e Qualidade
### Responsividade
- **Desktop**: 1920px - 1440px
- **Tablet**: 1024px - 768px
- **Mobile**: 425px - 320px
- **Compatibilidade**: 95% dos dispositivos testados
### Performance Testing
- **Lighthouse**: Pontuação média 95+
- **Web Vitals**: Todos os indicadores verdes
- **Loading Speed**: Otimizado para conexões lentas
- **Memory Usage**: Monitorado e otimizado
### Code Quality
- **ESLint**: Configurado para padronização
- **Git Hooks**: Commits padronizados
- **Pull Request Templates**: Revisões estruturadas
- **Documentation**: README e docs internos
## Documentação Técnica
Este projeto conta com uma documentação técnica abrangente e profissional, desenvolvida para facilitar o aprendizado, manutenção e evolução do código. Cada componente e hook foi documentado em detalhes, criando um repositório de conhecimento valioso para desenvolvedores.
### READMEs Especializados Criados
#### Componentes Documentados
- **Nav.jsx - Sistema de Navegação**
- Documentação completa sobre implementação da navegação principal
- Explicação detalhada de cada função e estado
- Guias de personalização e extensão
- Exemplos práticos de uso
- **ModalTrigger.jsx - Sistema de Modais**
- Arquitetura completa do sistema modal
- Estados de abertura/fechamento e animações
- Integração com formulários e validações
- Padrões de acessibilidade implementados
- **SubscribeModal.jsx - Modal de Assinatura**
- Fluxo completo de captura de leads
- Validação de formulários e feedback
- Integração com APIs de email marketing
- Métricas de conversão e otimização
- **CustomCursor.jsx - Cursor Personalizado**
- Implementação de cursor interativo
- Animações baseadas em movimento do mouse
- Otimizações de performance para 60fps
- Compatibilidade cross-browser
- **Scroll-bar.jsx - Barra de Progresso**
- Sistema de indicador visual de progresso
- Integração com Lenis para scroll suave
- Cálculos de progresso e animações
- Responsividade e acessibilidade
#### Sistema de Loading Screens
- **LoadingScreenAutono.jsx** - Tela inicial
- **LoadingScreenTecnologia.jsx** - Página tecnologia
- **LoadingScreenSobre.jsx** - Página institucional
- **LoadingScreenCarreiras.jsx** - Página de carreiras
- **Sistema de Telas de Carregamento** - Arquitetura completa
Cada tela de loading possui documentação detalhada sobre:
- Animações personalizadas por página
- Otimizações de performance
- Padrões de UX/UI
- Integração com MinimumLoadingWrapper
#### Hooks Customizados
- **useForm.js - Gerenciamento de Formulários**
- Validação em tempo real
- Estados de erro e sucesso
- Integração com APIs
- Padrões de acessibilidade
- **useScrollDirection.js - Detecção de Scroll**
- Detecção precisa de direção do scroll
- Debouncing para performance
- Integração com animações GSAP
- Uso em navegação e efeitos visuais
- **useMinimumLoadingTime.js - Controle de Loading**
- Garantia de tempo mínimo de exibição
- Prevenção de flickering
- UX consistente
- Integração com lazy loading
- **useMediaImage.js - Gerenciamento de Mídias**
- Otimização de imagens responsivas
- Lazy loading inteligente
- Cache de imagens
- Performance em conexões lentas
#### Utilitários e Efeitos
- **MinimumLoadingWrapper.jsx - Wrapper de Loading**
- Padrão para carregamento de componentes
- Controle de estados de loading
- Error boundaries integrados
- Métricas de performance
- **Quebrar-texto.jsx - Utilitário de Texto**
- Quebra inteligente de texto longo
- Responsividade automática
- Animações de entrada
- SEO otimizado
#### Efeitos GSAP Documentados
- **useEfeito-simples_scrollTigger.jsx** - Efeitos básicos
- **useGsapEfeitoZoomScroll.js** - Zoom com scroll
- **Zoom-out-com-ScrollTrigger.md** - Documentação técnica
- **Scroll-Suave-Lenis.md** - Integração Lenis + GSAP
#### Configurações Técnicas
- **Confg-portas-vite.md** - Configuração de portas Vite
- **perfomace.md & perfomaceV2.md** - Otimizações de performance
- **esfeito-barra.md** - Sistema de barras de progresso
- **modalNav.md** - Navegação modal
- **Nav.-Expli.md** - Explicação detalhada do Nav
### Benefícios da Documentação
#### Para Aprendizado
- **Base de Conhecimento**: Cada componente serve como exemplo prático
- **Padrões de Código**: Documentação de melhores práticas implementadas
- **Arquitetura Explicada**: Decisões técnicas justificadas
- **Exemplos Reais**: Casos de uso concretos e funcionais
#### Para Manutenção
- **Busca Rápida**: Localizar informações específicas rapidamente
- **Onboarding**: Novos desenvolvedores aprendem rapidamente
- **Debugging**: Soluções documentadas para problemas comuns
- **Refatoração**: Guias para modificações seguras
#### Para Escalabilidade
- **Reutilização**: Componentes documentados são mais fáceis de reutilizar
- **Padrões Consistentes**: Documentação garante implementação uniforme
- **Code Review**: Referências claras para revisões
- **Evolução**: Base sólida para futuras expansões
### Estrutura da Documentação
```
docs/
├── Componentes/
│ ├── Nav.-Expli.md # Navegação principal
│ ├── modalNav.md # Sistema modal
│ ├── CustomCursor-README.md # Cursor personalizado
│ └── Scroll-bar.md # Barra de progresso
├── Hooks/
│ ├── useForm-README.md # Formulários
│ └── useEfeito-simples_scrollTigger-gsap-V2.md
├── Sistema/
│ ├── SistemadeTeladeCarregamento.md
│ ├── TeladeCarregamento.md
│ └── perfomace.md / perfomaceV2.md
├── Configurações/
│ ├── Confg-portas-vite.md # Vite
│ └── FormularioCandidatura-README.md
└── Integrações/
└── Como-Implementar-modelo-3D.md
```
### Metodologia de Documentação
- **Padrão Consistente**: Todos os READMEs seguem estrutura similar
- **Exemplos Práticos**: Código real e funcional
- **Diagramas Visuais**: ASCII art para explicar fluxos complexos
- **Links Cruzados**: Referências entre documentos relacionados
- **Atualização Contínua**: Documentação mantida atualizada com código
Esta abordagem de documentação transforma o projeto em um recurso educacional valioso, permitindo que outros desenvolvedores aprendam com implementações reais e profissionais de conceitos avançados em React.
## Roadmap
### Próximas Implementações
- [ ] **Integração com 3D**: Adição de modelos Three.js interativos
- [ ] **PWA**: Transformação em Progressive Web App
- [ ] **Internacionalização**: Suporte a múltiplos idiomas
- [ ] **CMS Integration**: Sistema de gerenciamento de conteúdo
- [ ] **Analytics**: Integração com ferramentas de análise
- [ ] **Testing Suite**: Cobertura completa de testes automatizados
### Melhorias Planejadas
- **Performance**: Otimizações adicionais para Core Web Vitals
- **Acessibilidade**: Conformidade total com WCAG 2.1
- **SEO**: Otimizações avançadas para motores de busca
- **Monitoramento**: Sistema de observabilidade e logs
## Suporte e Comunidade
### Como Contribuir
**🤝 Sua contribuição é bem-vinda!**
[](https://github.com/kleber-goncalves/autono/issues)
[](https://github.com/kleber-goncalves/autono/pulls)
[](https://github.com/kleber-goncalves/autono/stargazers)
### Processo de Desenvolvimento
1. **Fork** o projeto
2. **Clone** sua fork: `git clone https://github.com/seu-usuario/autono.git`
3. **Crie uma branch**: `git checkout -b feature/nova-feature`
4. **Commit** suas mudanças: `git commit -m 'feat: adiciona nova funcionalidade'`
5. **Push** para sua branch: `git push origin feature/nova-feature`
6. **Abra um Pull Request** usando o template disponível
### Padrões de Commit
```
feat: nova funcionalidade
fix: correção de bug
docs: atualização de documentação
style: formatação de código
refactor: refatoração de código
test: adição de testes
chore: tarefas de manutenção
```
### Pull Request Template
- **Descrição**: O que foi implementado
- **Tipo de mudança**: Feature, bug fix, etc.
- **Como testar**: Passos para validação
- **Screenshots**: Se aplicável
- **Checklist**: Itens obrigatórios
## Licença
Este projeto é licenciado sob a MIT License - veja o arquivo [LICENSE](LICENSE) para detalhes.
---
### ⭐ **Feito com dedicação para a comunidade de desenvolvedores**
**Se este projeto te ajudou, considere dar uma estrela! ⭐**
[](https://github.com/kleber-goncalves/autono/stargazers)
[](https://github.com/kleber-goncalves/autono/network/members)
**Desenvolvido para fins de estudo e demonstração de boas práticas em desenvolvimento React moderno.**
[Navegação Rápida](#navegação-rápida)
----