New Collabs

[aglsk]

Collaborators Page

Este documento descreve o que foi implementado na página de colaboradores para o site do projeto. A ideia foi construir um layout visualmente atraente e funcional que destacasse as pessoas incríveis que contribuíram para o desenvolvimento do aplicativo e do website.

O que foi implementado?

1. Estrutura da Página

   • A página foi criada como um componente React funcional usando Next.js.
   • O arquivo foi configurado para usar o use client no topo, garantindo que o componente fosse renderizado no lado do cliente.

2. Divisão por Seções

   • Contribuidores do App: Uma lista com 12 contribuintes principais que participaram do desenvolvimento do aplicativo.
   • Contribuidores do Website: Uma lista separada com 3 contribuintes responsáveis por colaborar no desenvolvimento do website.

3. Layout Responsivo

   • A página foi estruturada para ser totalmente responsiva usando classes utilitárias do Tailwind CSS.
   • A grid de contribuidores se adapta automaticamente a diferentes tamanhos de tela:
     • 2 colunas em dispositivos pequenos.
     • 3 colunas em dispositivos médios.
     • Até 5 colunas em dispositivos maiores.

4. Design Visual

   • O título da página foi estilizado com tipografia de destaque:
     • Fonte extra-negrito.
     • Centralizado para chamar atenção.
   • Cada colaborador é exibido em um cartão individual com:
     • Avatar circular com bordas coloridas que refletem a seção (roxo para o app e azul para o website).
     • Nome do colaborador em destaque.
     • Link clicável que leva ao perfil no GitHub.
   • As seções foram separadas com fundos levemente diferenciados e bordas arredondadas para criar uma hierarquia visual clara.

5. Contribuintes Adicionados

   • Foram inseridos manualmente os 12 contribuidores do app e os 3 do website, com base nas informações fornecidas.

Detalhes do Código

• Estrutura de Dados
  Os colaboradores foram organizados em dois arrays de objetos (appContributors e websiteContributors), contendo:

  • Nome do colaborador.
  • URL do avatar no GitHub.
  • URL do perfil no GitHub.

• Renderização das Listas
  Foi utilizado o método .map() para iterar sobre os arrays e renderizar dinamicamente os cartões de cada colaborador.

• Biblioteca Utilizada
  A estilização foi feita com Tailwind CSS, aproveitando utilitários de design como grids, sombras, e bordas arredondadas para um layout moderno e elegante.

Resultado Final

A página de colaboradores ficou bem organizada, responsiva e destaca com sucesso as pessoas que contribuíram para o projeto. O design é limpo, funcional e fornece acesso rápido aos perfis do GitHub de cada colaborador.

---

Collaborators Page

This document describes what was implemented on the contributors page for the project website. The idea was to build a visually appealing and functional layout that highlighted the amazing people who contributed to the development of the app and website.

What was implemented?

1. Page Structure

• The page was created as a functional React component using Next.js.
• The file was configured to use use client at the top, ensuring that the component would be rendered on the client side.

2. Section Breakdown

• App Contributors: A list of 12 main contributors who participated in the development of the app.
• Website Contributors: A separate list of 3 contributors responsible for collaborating on the development of the website.

3. Responsive Layout

• The page has been structured to be fully responsive using Tailwind CSS utility classes.
• The contributor grid automatically adapts to different screen sizes:
• 2 columns on small devices.
• 3 columns on medium devices.
• Up to 5 columns on larger devices.

4. Visual Design

• The page title has been styled with standout typography:
• Extra bold font.
• Centered to draw attention.
• Each contributor is displayed on an individual card with:
• Circular avatar with colored borders that reflect the section (purple for the app and blue for the website).
• Featured contributor name.
• Clickable link to GitHub profile.
• Sections have been separated with slightly different backgrounds and rounded borders to create a clear visual hierarchy.

5. Added Contributors

• The 12 app contributors and 3 website contributors were manually inserted based on the information provided.

Code Details

• Data Structure
  The contributors were organized into two arrays of objects (appContributors and websiteContributors), containing:

• Contributor name.

• GitHub avatar URL.

• GitHub profile URL.

• List Rendering
  The .map() method was used to iterate over the arrays and dynamically render each contributor's cards.

• Library Used
  The styling was done with Tailwind CSS, taking advantage of design tools such as grids, shadows, and rounded edges for a modern and elegant layout.

Final Result

The contributors page is well organized, responsive, and successfully highlights the people who contributed to the project. The design is clean, functional, and provides quick access to each contributor's GitHub profiles.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
robok-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 23, 2024 2:06am