Estamos buscando um profissional experiente para desenvolver um site altamente interativo, com foco em experiências visuais dinâmicas, animações suaves e design moderno. O objetivo é criar uma presença online impactante que sirva como cartão de visita para uma agência digital especializada em IA e vídeos interativos, exigindo um trabalho de alto nível com atenção meticulosa aos detalhes visuais e à experiência do usuário.
Referencia:
https://www.joyjam.com/
Requisitos Técnicos:
- Design responsivo (mobile-first) para garantir acessibilidade em todos os dispositivos.
- Animações em scroll para uma navegação envolvente. (Scroll-based animations)
- Efeitos de transição com fluidez para uma experiência de usuário contínua.
- Uso de tecnologias modernas como WebGL,
Three.js, GSAP ou similares para gráficos e animações avançadas.
- SEO básico e performance otimizada para garantir visibilidade e carregamento rápido.
- Integração com CMS (de preferência Webflow, Strapi ou WordPress Headless, se aplicável) para facilitar a gestão de conteúdo.
Desejável:
- Experiência comprovada com sites em estilo portfólio, agências criativas ou landing pages de alto impacto visual.
- Portfólio robusto com trabalhos similares que demonstrem proficiência em design interativo.
- Capacidade de propor soluções criativas e refinadas para ui/ux.
- Boa comunicação e compromisso com prazos rigorosamente cumpridos.
Escopo Inicial:
- Estrutura básica do site com uma homepage interativa e visualmente rica.
- 3 a 5 seções animadas que demonstrem a capacidade criativa da agência.
- Uma página dedicada 'Sobre a Empresa' com informações relevantes.
- Uma página de contato funcional para facilitar a comunicação com os clientes.
- O projeto deve ser construído com possibilidade de expansão futura, permitindo a adição de novas funcionalidades e conteúdos.
Entregáveis:
- Site 100% funcional e pronto para lançamento.
- Código-fonte completo e arquivos de projeto organizados.
- Documentação detalhada para deploy e uso do site.
-------------
1. Frontend
Linguagens base:
HTML5
Css3 (com pré-processadores como scss ou less, provavelmente)
javascript (es6+)
frameworks e bibliotecas de animação:
gsap (greensock animation platform): muito provável, dado o nível de fluidez e controle sobre as animações de scroll e transições.
Locomotive Scroll ou Lenis: usado para scroll suave e parallax em seções com efeitos dinâmicos.
Three.js ou WebGL puro: usado nas animações tridimensionais e efeitos interativos gráficos complexos.
Canvas / SVG: várias animações usam elementos vetoriais renderizados com precisão.
Bibliotecas auxiliares comuns em sites desse tipo:
Barba.js: para transições suaves entre páginas (SPA-like experience)
Splitting.js: para efeitos de tipografia animada
Swiper.js ou Flickity: para sliders (caso usados em seções internas)
2. CMS e Backend
Embora o site pareça estático, é possível que utilize um CMS headless (como Strapi, Sanity ou Contentful) apenas para alimentar conteúdo dinâmico via API.
Mas há grande chance de ser 100% estático, com uso de JAMstack:
Frameworks como
Next.js,
Nuxt.js ou Astro podem ter sido usados.
Hospedagem provavelmente em Vercel, Netlify ou similar.
3. Outras tecnologias identificáveis indiretamente:
Fonts customizadas com @font-face
Lazy loading de assets
Pré-carregamento de imagens e scripts
Possivelmente integração com Google Analytics ou Plausible (sem exibição visível)
Uso de fontes variáveis para efeitos dinâmicos de tipografia
4. Hospedagem e Performance
O carregamento é otimizado por cache e compressão GZIP/Brotli.
Imagens em formato WebP, o que sugere uso de ferramentas modernas de build (como Vite, Webpack ou Parcel).
Pré-renderização de rotas para otimização de SEO, mesmo sendo altamente visual.
O site deve ser entregue completo, testado, hospedado.
Prazo de Entrega: Não estabelecido