Skip to content

FrogDevs/website

Repository files navigation

Frogdevs - Website

Languages TopLanguage Files RepoSize LinesCode MIT License

>>> Read also in English

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.

Captura de tela

image

Apêndice

Atribuições:

Recursos

  • 🎨 Temas claro e escuro
  • 🌎 Internacionalização
  • ✨ Cards interativos

Tech Stack

Front-end: Vite, Vue, UnoCSS, VueUse e Vue I18n

Lições aprendidas

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.

Otimizações

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.

Demo

Utilizamos a Netlify para a implementação online do site

Rodar localmente

Nota: É necessário pussuir o gerenciador de pacotes Pnpm. Veja como instalar.

Clone o projeto

  git clone https://github.com/FrogDevs/website.git

Vá ao diretório do projeto

  cd website

Instale as depêndencias

  pnpm i

Inicie o servidor

  pnpm dev

Relacionados

Veja outros projetos relacionados

Membros responsáveis

Licença

“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