Skip to content

README.md

Latest commit

 

History

History
121 lines (87 loc) · 5.5 KB

README.md

File metadata and controls

121 lines (87 loc) · 5.5 KB
Raw

🚀 Dev Hub — Fernando Lima

O Dev Hub é uma página web estática de alto impacto visual, projetada para centralizar meus links profissionais e sociais em um único ponto de acesso. Inspirado em designs modernos como Glassmorphism, o projeto oferece uma alternativa personalizada, gratuita e elegante ao Linktree, focada em performance e experiência do usuário.

A inspiração veio quando eu tentei usar o LinkTree pela primeira vez e percebi que além de precisar ficar assistindo propagandas para usar o App gratuitamente, ele ainda incluia de forma obrigatória sua marca d'água nos meus cartões de visita. Fiquei frustrado e decidi criar minha própria solução.

👨‍💻 Perfil do Desenvolvedor

  • Nome: Fernando Lima
  • Título: Desenvolvedor Full-Stack Jr.
  • Bio: "Transformando problemas reais em soluções criativas!"

✨ Funcionalidades

  • 💎 Design Glassmorphism: Interface com efeitos de vidro fosco (backdrop-filter: blur), transparência e bordas semitransparentes.
  • 🌓 Dark Mode Nativo: Tema escuro exclusivo com gradiente animado de fundo e elementos de brilho ambiente flutuantes (blobs).
  • 📱 Totalmente Responsivo: Design mobile-first adaptado para qualquer tamanho de tela (de 320px a 1440px+).
  • ⚡ Alta Performance: SPA estática, sem backend e sem build step — carregamento ultra-rápido.
  • 🧩 Fácil Personalização: Todo o conteúdo é gerenciado através de um único objeto CONFIG no JavaScript.
  • 🎵 Trilha Sonora: Música de fundo em loop com volume padrão de 10%, respeitando as políticas de autoplay dos navegadores.
  • 🔇 Controle de Áudio: Botão de mute/unmute no canto superior direito.
  • 🗣️ Avatar Interativo: Ao clicar na foto de perfil, uma saudação em áudio é reproduzida com animação pulsante e redução automática do volume da trilha sonora.
  • 💬 Balão de Fala: Indicador visual animado que convida o visitante a interagir com o avatar.
  • ♿ Acessibilidade (A11y): Atributos aria-label, navegação por teclado e contraste seguindo padrões WCAG AA.
  • 🔍 SEO Otimizado: Meta tags para Open Graph, favicon personalizado e estrutura HTML semântica.

🔗 Links Configurados

ID Label Destino
LK-01 Currículo / CV mrskillfull.github.io/Curriculum-Vitae
LK-02 GitHub github.com/MrSkillFull
LK-03 LinkedIn linkedin.com/in/fernandolima-dev
LK-04 Instagram instagram.com/feehlimaofc2

🛠️ Tecnologias

A stack foi escolhida para ser leve, sem necessidade de processos de build (até porque esse é um mini projeto):

Camada Tecnologia Justificativa
Markup HTML5 semântico Base padrão e acessível
Estilo Tailwind CSS (CDN) Agilidade, sem build step
CSS Custom <style> inline no HTML Glassmorphism e animações
Script Vanilla JS (ES6+) Sem dependências pesadas
Ícones Lucide Icons (CDN) + SVG Leves e personalizáveis
Tipografia Google Fonts (Inter) Limpa e profissional

📁 Estrutura do Projeto

dev-hub/
├── index.html              # Arquivo único principal (HTML + CSS + JS)
├── assets/
│   ├── avatar.png          # Foto de perfil
│   ├── favicon.png         # Ícone da aba do navegador
│   ├── saudacao.aac        # Áudio de saudação interativa
│   └── soundtrack.mp3      # Trilha sonora de fundo
├── docs/
│   └── SRS_dev_hub.md      # Especificação de requisitos (SRS)
├── .gitignore
├── LICENSE                 # Licença MIT
└── README.md

🚀 Como Usar

  1. Clone o repositório:

    git clone https://github.com/MrSkillFull/dev-hub.git

  2. Personalize seus dados: Abra o arquivo index.html e edite o objeto CONFIG dentro da tag <script>. Você pode alterar:

    • Nome, título e bio do perfil
    • URL e imagem do avatar
    • Links com label, URL, ícone e descrição

  3. Adicione seus arquivos de mídia: Substitua os arquivos na pasta assets/:

    • avatar.png — sua foto de perfil
    • saudacao.aac — seu áudio de saudação
    • soundtrack.mp3 — sua trilha sonora de fundo (opcional)

  4. Abra no navegador: Basta abrir o index.html diretamente ou usar uma extensão como Live Server no VS Code.

🌍 Deploy

Eu recomendo o uso do GitHub Pages para hospedagem gratuita:

  1. Suba seu código para um repositório no GitHub.
  2. Vá em Settings > Pages.
  3. Selecione a branch main e a pasta / (root).
  4. Salve e sua página estará online em instantes!

Outras opções: Vercel, Netlify — ambos oferecem deploy automático via Git.

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Desenvolvido com café ☕ e ❤️ para a comunidade por Fernando Lima.