Documentação do Projeto: LinkTree com Funcionalidades Interativas

Visite o projeto

Índice

1. Descrição do Projeto
2. Objetivos
3. Tecnologias Utilizadas
4. Estrutura do Projeto
5. Funcionalidades
6. Arquitetura do Código
7. Instruções para Execução
8. Conclusão

---

Descrição do Projeto

O projeto consiste em uma versão personalizada do LinkTree, uma plataforma de links úteis para o compartilhamento de conteúdo digital. A página contém links para perfis em redes sociais, portfólio, e-mail, entre outros.

Objetivos

O objetivo deste projeto é criar uma página personalizada para exibir links importantes de maneira interativa e esteticamente agradável, incorporando as seguintes funcionalidades:

• Exibição de links personalizados como GitHub, LinkedIn, e-mail, Instagram, entre outros.

---

Tecnologias Utilizadas

• HTML5: Para estruturação do conteúdo da página.
• CSS3: Para estilização da página, incluindo animações e transições.

---

Estrutura do Projeto

A estrutura de diretórios do projeto é a seguinte:

• index.html: Arquivo HTML que contém a estrutura básica da página, incluindo os links, o botão de troca de tema e elementos de animação.
• style.css: Arquivo CSS responsável pela estilização da página, incluindo temas, animações e efeitos visuais dos botões.

---

Funcionalidades

2. Exibição de Links Personalizados:

   • A página contém links para perfis em redes sociais (GitHub, LinkedIn, Instagram), e-mail e portfólio.

3. Animações de Botões:

   • Os botões de links possuem animações visuais, com um efeito "blob" que destaca os links de maneira criativa.

---

Arquitetura do Código

HTML - index.html

• Estrutura básica da página com elementos como o botão para alternar tema, links e uma área para imagens e textos.
• Os links são organizados em botões com a classe blob-btn para efeito visual.

CSS - style.css

• Estilização de Tema Claro e Escuro: Definindo regras para as cores de fundo, texto e botões dependendo do tema.
• Efeitos Visuais e Animações: Animações aplicadas aos botões de link para criar o efeito "blob" e suavização nas transições.
• Responsividade: O layout se adapta a diferentes tamanhos de tela, garantindo uma boa experiência em dispositivos móveis e desktops.

---

Instruções para Execução

1. Pré-requisitos:

   • Tenha um servidor local ou abra os arquivos diretamente no navegador para visualização.
   • A página pode ser visualizada em qualquer navegador moderno que suporte CSS3 e HTML5.

2. Passos para Rodar:

   • Clone o repositório ou baixe os arquivos do projeto.
   • Abra o arquivo index.html no seu navegador para visualizar a página.

3. Comandos (caso use um servidor local):

   • Caso queira rodar localmente com um servidor, você pode usar o Live Server no VS Code ou rodar um servidor local com python -m http.server (para Python 3.x).

---

Conclusão

Este projeto oferece uma página interativa de links com animações e troca de tema, tornando a experiência de navegação mais envolvente e moderna. O uso de HTML e CSS permite uma implementação simples e eficiente de uma interface bonita e funcional.

---

Extra

JavaScript já tem algumas funções, mas ainda não estão rodando no site. Ainda em desenvolvimento.