Página de links com HTML, CSS e JS

Crie uma página semelhante ao Linktree, onde usuários possam exibir uma lista de seus links pessoais. Esta aplicação irá extrair informações de um arquivo JSON presente no repositório, proporcionando uma interface personalizada que imita uma mini página de perfil.

🔨 Requisitos

• Desenvolva uma página para exibir links no estilo Linktree.
• A fonte das informações deve ser um arquivo JSON no repositório do código, com os campos:
  • { name, avatar, description, links, socialLinks }
• Exiba o avatar e o nome do(a) usuário(a).
  • O último sobrenome deve estar em negrito.
• Apresente uma breve descrição do usuário.
• Mostre uma lista com até 5 links.
• Apresente uma lista de links para redes sociais.
  • Sugestões: LinkedIn, Facebook, e Instagram.
  • A lista de redes sociais no arquivo JSON deve ser configurada de forma que novas redes possam ser adicionadas sem necessidade de mudanças no código.
• Utilize HTML, CSS e JavaScript. Sem frameworks.
• Faça o design responsivo, priorizando o mobile-first.

Deploy

• Ao concluir sua implementação, faça o deploy e submeta sua solução no Codante.io.

🔍 Dicas

• Estruture o arquivo JSON de forma clara e intuitiva. Isto facilitará a adição ou remoção de links e redes sociais no futuro.
• Concentre-se em fazer um design limpo e fácil de usar, especialmente em dispositivos móveis.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. No entanto, sinta-se livre para usar sua criatividade e desenvolver um design único e autêntico.

🔗Link do Figma

👉🏽 Sobre esse mini-projeto

Tecnologias sugeridas

• HTML
• CSS
• JavaScript

Pré-requisitos

• Conhecimento básico em HTML, CSS, e JavaScript.

❓ FAQ

Posso utilizar bibliotecas ou frameworks adicionais?

O foco deste projeto é utilizar HTML, CSS e JavaScript puro, sem dependências adicionais. Por isso, recomendamos que você não utilize bibliotecas ou frameworks externos. A nossa resolução oficial será implementada dessa forma. Porém você é livre para submeter uma solução utilizando quaisquer ferramentas!

Como posso melhorar ainda mais meu projeto após finalizar os requisitos?

Considere adicionar interatividades, como animações sutis ao passar o mouse sobre os links ou um modo noturno para a interface. Também pode pensar em desenvolver uma funcionalidade que permita a múltiplos usuários criar e personalizar suas próprias listas de links.