Caipyra 2025

Descrição

Projeto para o site oficial do Caipyra 2025. Utiliza:

• React
• React-Bootstrap
• Vite
• SCSS

Índice

• Descrição
• Pré-requisitos
• Clonar o Repositório
• Instalação
• Rodando o Projeto em Desenvolvimento
• Construindo o Projeto para Produção
• Pré-visualizando a Build de Produção
• Servindo os Arquivos Estáticos (Opcional)
• Atualizando a página publicada
• Estrutura do Projeto
• Personalização
• Contribuição

Pré-requisitos

• Node.js (versão 14 ou superior)
• npm (geralmente vem junto com o Node.js)

Clonar o Repositório

git clone https://github.com/caipyra/caipyra2025-site

Instalação

cd caipyra2025-site
npm install

Este comando instalará todas as bibliotecas e pacotes necessários para rodar o projeto.

Rodando o Projeto em Desenvolvimento

Para iniciar o servidor de desenvolvimento e visualizar o projeto localmente, execute:

npm run dev

Este comando iniciará o Vite e disponibilizará o site em http://localhost:5173 (a porta pode variar; verifique o terminal para o endereço exato).

Construindo o Projeto para Produção

Para gerar uma versão otimizada para produção, execute:

npm run build

Os arquivos otimizados serão gerados na pasta dist.

Pré-visualizando a Build de Produção

Após construir o projeto, você pode pré-visualizar a versão de produção localmente utilizando:

npm run preview

Este comando iniciará um servidor local para visualizar a build em http://localhost:4173 (a porta pode variar; verifique o terminal para o endereço exato).

Servindo os Arquivos Estáticos (Opcional)

Caso deseje servir os arquivos estáticos da pasta dist utilizando um servidor estático, você pode usar a ferramenta serve. Primeiro, instale-a globalmente:

npm install -g serve

Em seguida, navegue até a pasta dist e inicie o servidor:

cd dist
serve .

O servidor estará disponível em http://localhost:3000 por padrão.

Atualizando a Página Publicada

Para atualizar a branch (e consequentemente atualizar a página publicada), execute:

npm run deploy

Estrutura do Projeto

• public/: Arquivos estáticos que serão servidos diretamente, como imagens, favicons, etc.
  • img/: Contém imagens e favicons utilizados no projeto.
• src/: Código-fonte do aplicativo React.
  • components/: Componentes React reutilizáveis.
  • styles/: Arquivos SCSS para estilização.
  • App.jsx: Componente principal do aplicativo.
  • main.jsx: Ponto de entrada do aplicativo React.
• index.html: Template HTML do projeto.

Personalização

Variáveis SCSS

As variáveis de estilo estão definidas em src/styles/variables.scss. Você pode ajustar as cores, fontes e outros estilos personalizando este arquivo.

Componentes

Cada "bloco" da página está em um arquivo diferente no diretório src/components

Contribuição

Contribuições são bem-vindas!