Website oficial do time de TCC Frogdevs. Landing page em formato SPA (Single Page Application) com informações importantes, como, trabalhos feitos a empresa Equilíbrio Natural e membros da equipe.
- 🎨 Temas claro e escuro
- 🌎 Internacionalização
- ✨ Cards interativos
Front-end: Vite, Vue, UnoCSS, VueUse e Vue I18n
Quais desafios foram enfrentados e como foram sobressaídos?
Foi um grande desafio projetar o web design, sendo um processo que envolveu muita criativade e inspirações, tais como: Turbo e o website Steam Deck. Foi buscada uma identidade única para representar a equipe com cores fortes e chamativas que funcionassem bem tanto em uma tema claro como em um tema escuro. Além disso, buscamos uma estética moderna usando: Gradientes, vetores e animações.
A lógica para fechar os modais foi feita manualmente. Primeiro obtemos a área e as cordenadas do modal. Depois, observamos o click do usuário. Se esse click é feito fora da área do modal ele é fechado.
Adicionar internacionalização a um website é um desafio que requer dedicação e atenção aos detalhes. Isso envolve adaptar o conteúdo do website para diferentes idiomas e culturas, a fim de atender a um público global.
Que otimizações foram feitas no código?
O gerenciador de pacotes Pnpm foi escolhido para o projeto por oferecer cold e hot cache. Pnpm é 3x mais rápido e eficiente do que o Npm e mais rápido do que o Yarn. Lidar com inúmeras bibliotecas e módulos foi uma tarefa mais fácil e segura com essa ferramenta.
Vite é uma ferramenta com a utilidade de cuidar do bundle da aplicação. Fornece melhores técnicas de otimização, resultando em uma maior performance na aplicação tanto em forma de desenvolvimento quanto de produção para o usuário final.
O site foi construido usando o conceito Mobile First. Esse conceito se refere a criação de qualquer projeto que prioriza a experiência em dispositivos móveis, enquanto são feitas adaptações para resoluções maiores. Isso permite que o site seja completamente responsivo e adaptável a outras resoluções de telas, permitindo uma maior inclusão de clientes.
Utilizamos a Netlify para a implementação online do site
Nota: É necessário pussuir o gerenciador de pacotes Pnpm. Veja como instalar.
Clone o projeto
git clone https://github.com/FrogDevs/website.gitVá ao diretório do projeto
cd websiteInstale as depêndencias
pnpm iInicie o servidor
pnpm devVeja outros projetos relacionados
- Web Design e Front-end: @viniciuscosta
“Você deve ter paixão por uma ideia ou problema que quer resolver. Se você não tem paixão suficiente desde o começo, não vai aguentar a pressão.”
Steve Jobs