Detalhes da Estrutura

Documentação

A estrutura do site é razoavelmente complexa. Fazemos uso da grande feature do React, que é a criação de componentes reutilizáveis, então pode ser difícil entender o propósito de cada um. O projeto está continuamente evoluindo, isso significa que o que está aqui pode não refletir perfeitamente o que está no código. O propósito dessa documentação é dar uma geral nos componentes e servir de guia para encontrar o arquivo que cria determinada parte do site. Por isso estruturei a partir da árvore de pastas e arquivos

Páginas

• __app Cria o site, mas não possui conteúdo
• index Cria e organiza os componentes da página inicial
• kurumim Cria e organiza os componentes da página inicial
• processo-seletivo Cria e organiza os componentes da página do Processo Seletivo
• projetos Cria e organiza os componentes da página Projetos
• zenith Cria e organiza os componentes da página Sobre Nós

Componentes

• Componentes Genéricos
  • Cards
    • Card Agrupa elementos de texto e/ou imagem em duas áreas quadradas em colunas
    • CardContainer Contém elementos de Card para ajustes de tela
  • CounterText Animação de números aumentando quando é visto pelo usuário
  • FormWrapper Integra o Google Forms
  • HeroSection Primeiro componentes (imagem) que é visto na página
  • HeadTags Tags HTML para SEO e Google Analytics
  • UnderlinedButton Animação Botão Sublinhado
• Específicos de uma Página:
  • Home
    • HeroSection
    • HighlightsSection Row com as estatísticas do grupo
    • SectorSection
      • Sectors Contem os botões e seleciona o Card para cada departamento
      • SectorCard Contem o texto de cada departamento
      • SectorButtonsMonta os botões com os ícones e títulos de cada departamento
      • TechBubble
        • BubbleElement Agrupa e gera o movimento as bolhas
        • TechBubble Envolve o Ícone de cada tecnologia
        • technologies.json Contem a lista de bolhas
  • Projects
    • HeroSection Hero da Pagina
    • Projects A aba de cada tipo de projeto (<project>) tem um HTML um pouco diferente
      • <project> Contem os elementos e agrupa em um evento da timeline
      • Model Contem os elementos específicos desse tipo de projeto
    • ProjectStructure (Building Blocks) Contem os elementos utilizados nos Models
      • Lists
        • Checklist
        • EnumList
      • Carousel Carrossel que contem imagens e video
      • Title Titulo com link para o GitHub
      • Subtitle Texto com uma descrição simples do projeto
      • Table Tabela com especificações ou prêmios
      • Toggle Seleciona entre abas
      • Rows
        • Statistics Dados com animação de contagem
        • Structure
        • Technologies Ícones de Tecnologias usadas
      • Timeline Constrói a linha vertical com o ano de cada projeto
    • Tab Abas com cada tipo de projeto (sondas, cubesats...)
    • Header Combina o Titulo Subtitle (descrição) do projeto
  • Zenith (Sobre Nós)
    • ImageComponent Constrói imagens de destaque (fundo preto) com texto alt
• Específicos para outro Componente
  • NavBar Mostra a barra no topo do site no modo desktop ou mobile
    • Header Logo com links ou com menu hambúrguer
    • Links Estiliza os links
    • Menu Ícone para abrir e fechar o menu mobile
  • Banner Destaque para o Genus e ZenithMonitor
    • ProjectBanner Row de destaque para projetos com Video
    • SupportersBanner Row para os Patrocinadores do grupo
    • TextSection Descrição e link para o GitHub
    • GridElement Grid dos Patrocinadores
  • Footer Parte no final do Site
• Utils
  • boldParser Transforma textos em JSON para HTML (adiciona <b>)
  • Language Feature para ter o site em varias línguas
    • LanguageSetter Encapsula a funcionalidade da biblioteca
    • LanguageSelector Links do Footer para o usuário trocar a língua