MetaSpace - Linktree Clone 🚀

Bem-vindo ao MetaSpace! Este é um projeto front-end que funciona como uma "árvore de links" (Linktree clone), criado para ser uma landing page pessoal, centralizando minhas redes sociais, portfólio e currículo em um só lugar com um design moderno e interativo.

Este projeto foi desenvolvido com foco em boas práticas de HTML semântico, CSS modular e JavaScript moderno, resultando em uma interface responsiva e visualmente atraente.

     

✨ Sobre o Projeto

O MetaSpace nasceu da necessidade de ter uma página de apresentação pessoal que fosse ao mesmo tempo funcional e esteticamente agradável. O objetivo foi criar uma experiência de usuário fluida, com animações sutis e um design responsivo que se adapta perfeitamente a qualquer dispositivo, seja desktop ou mobile.

O projeto foi construído do zero, utilizando apenas tecnologias web fundamentais (HTML, CSS e JS), sem o uso de frameworks, para um controle total sobre o código e o desempenho.

🌟 Funcionalidades Principais

• ✅ Design Responsivo: Interface totalmente adaptável para desktops, tablets e smartphones.
• ✅ Animação de Borda "Glowing": Efeito de borda RGB pulsante e animado nos cards de link, criado com CSS puro.
• ✅ Animação "Text Scramble": Efeito de "embaralhamento" de texto no título principal, gerado via JavaScript.
• ✅ Estrutura Modular: O código CSS e JavaScript foi dividido em componentes e módulos, facilitando a manutenção e a escalabilidade.
• ✅ Link de Download Direto: Funcionalidade para baixar o currículo em PDF diretamente da página.
• ✅ Interatividade: Botões com feedback visual e efeito de "cópia" para links.

🧱 Estrutura do Projeto

A arquitetura do projeto foi desenhada para uma clara separação de responsabilidades, com arquivos bem organizados por tipo e funcionalidade.

.
├── assets/
│   ├── css/
│   │   ├── components/
│   │   │   ├── _base.css
│   │   │   ├── _footer.css
│   │   │   ├── _header.css
│   │   │   ├── _icons.css
│   │   │   └── _links.css
│   │   └── main.css
│   ├── images/
│   └── js/
│       ├── modules/
│       │   ├── copy-handler.js
│       │   ├── dynamic-year.js
│       │   └── text-scramble.js
│       └── main.js
├── Resume pdf.pdf
├── index.html
├── LICENSE
└── README.md

🛠️ Pilha de Tecnologias (Tech Stack)

• HTML5: Utilizado com foco em semântica e acessibilidade.
• CSS3: Estilização moderna com Flexbox, animações (@keyframes), pseudoelementos e variáveis CSS para fácil customização.
• JavaScript (ES6+): Utilizado para interatividade do DOM e efeitos visuais, com o código organizado em módulos para melhor manutenibilidade.

🚀 Como Executar o Projeto

Pré-requisitos: Apenas um navegador web moderno (Chrome, Firefox, Edge, etc.).

1. Clone o repositório:

   git clone https://github.com/JohnReiiss/MetaSpace-Instagram.git
   cd METASPACE-INSTAGRAM

2. Abra o arquivo principal:
   • Não é necessário um servidor. Basta abrir o arquivo index.html diretamente no seu navegador.

🖼️ Demonstração Visual

Acesse aqui o vídeo de demonstração 🎥 Clique aqui para assistir ao vídeo

✉️ Contato

• Desenvolvedor: Johnatan dos Santos Reis
• E-mail: [email protected]
• LinkedIn: linkedin.com/in/johnatan-dos-santos-reis-945092b7
• GitHub: github.com/JohnReiiss

---

Este projeto é uma demonstração de habilidades em desenvolvimento front-end, combinando um design limpo com interatividade moderna.