Um aplicativo elegante e responsivo para compartilhar todos os seus links importantes em um só lugar, com design mobile-first, suporte a múltiplos idiomas e player de música integrado.
O LinkFlow é uma plataforma de compartilhamento de links que permite organizar e compartilhar seus links importantes de forma categorizada e visual, similar ao LinkTree e outras ferramentas de bio link.
- Design Mobile-First: Interface otimizada para dispositivos móveis com experiência de toque aprimorada
- Categorização de Links: Links organizados em seções colapsáveis
- Tema Claro/Escuro: Suporte a alternância de tema para melhor experiência visual
- Internacionalização: Suporte a múltiplos idiomas (português, inglês e espanhol)
- Compartilhamento Direto: Links que abrem em novas abas para facilitar o acesso
- Acessibilidade: Implementação de práticas de acessibilidade para todos os usuários
- 🎵 Player de Música: Player fixo integrado com playlist do YouTube Music
O LinkFlow inclui um player de música elegante e minimalista que permite aos usuários ouvir música enquanto navegam pelo site.
- YouTube Embed API oficial: Utiliza a API oficial do YouTube respeitando direitos autorais
- Player fixo no topo: Interface não-intrusiva fixada no topo da tela
- Controles interativos: Play/Pause, Next/Previous, Close
- Visualizador musical animado: Barras animadas que respondem ao status de reprodução
- Status em tempo real: Exibe se está tocando, pausado ou carregando
- Design responsivo: Adaptado para desktop e mobile
- Suporte ao modo escuro: Integrado com o sistema de temas
- Multilíngue: Todas as strings traduzidas para pt/en/es
- Clique no botão "Playlist Musical" no cabeçalho
- O player aparecerá fixo no topo da tela
- Use os controles para navegar pela playlist
- Clique no X para fechar o player
- ID da Playlist:
PL71Q6dgIfRPE1ouM6x8mwsmMX4siQhfrf - Fonte: YouTube Music
- Todos os direitos autorais pertencem aos respectivos proprietários
📦 LinkFlow
├── 📂 public/
│ └── 📂 images/
│ ├── avatar.svg # Imagem de perfil do usuário
│ ├── portfolio-icon.svg # Ícone para links do portfólio
│ ├── weboasis-icon.svg # Ícone para WebOasis
│ ├── linkedin-icon.svg # Ícone para LinkedIn
│ ├── github-icon.svg # Ícone para GitHub
│ └── twitter-icon.svg # Ícone para Twitter
├── 📂 src/
│ ├── 📂 components/
│ │ ├── LanguageSelector.svelte # Seletor de idioma
│ │ ├── LinkCard.svelte # Componente de card para links
│ │ ├── Section.svelte # Componente de seção colapsável
│ │ └── ThemeToggle.svelte # Alternador de tema claro/escuro
│ ├── 📂 data/
│ │ └── links.json # Dados dos links para exibição
│ ├── 📂 lib/
│ │ ├── i18n.ts # Sistema de internacionalização
│ │ └── 📂 locales/ # Arquivos de tradução
│ │ ├── en.ts # Traduções em inglês
│ │ ├── es.ts # Traduções em espanhol
│ │ └── pt.ts # Traduções em português
│ ├── App.svelte # Componente principal da aplicação
│ └── main.ts # Ponto de entrada da aplicação
O componente LinkCard exibe um link individual com:
- Ícone à esquerda
- Título centralizado
- Efeito de escala ao passar o mouse/tocar
- Abertura em nova aba
- Tamanho adequado para telas de toque (seguindo diretrizes de acessibilidade)
O componente Section agrupa links relacionados em categorias:
- Cabeçalho com título e indicador de colapso
- Cor de fundo personalizável por seção
- Animação de expansão/colapso
- Estado persistente durante a sessão do usuário
Os links são configurados através do arquivo JSON em src/data/links.json que segue a estrutura:
{
"profile": {
"name": "Seu Nome",
"avatar": "/images/avatar.svg"
},
"sections": [
{
"name": "Projetos",
"color": "#E0F7FA",
"links": [
{ "title": "Portfólio", "url": "https://seu-portfolio.com", "icon": "/images/portfolio-icon.svg" },
// ... mais links
]
},
// ... mais seções
]
}O LinkFlow inclui testes unitários e end-to-end (E2E) completos para garantir a qualidade do código.
Utilizamos o Vitest para testes unitários com cobertura para:
- Componente
LinkCard: renderização correta e comportamento visual - Componente
Section: expansão/colapso e renderização de links - Sistema de internacionalização: mudança de idiomas e traduções
- Alternância de temas: funcionamento correto do tema claro/escuro
Utilizamos o Playwright para testes E2E que verificam:
- Funcionalidade de expansão e colapso das seções de links
- Abertura de links em novas abas
- Acessibilidade de todos os elementos interativos
- Comportamento responsivo em diferentes tamanhos de tela
- Compatibilidade com diferentes navegadores
Testes específicos para garantir a acessibilidade do aplicativo, verificando:
- Contraste adequado nos elementos visuais
- Navegação por teclado em todos os componentes
- Atributos ARIA apropriados nos elementos interativos
- Tamanho de toque adequado para dispositivos móveis
-
Clone o repositório
git clone [URL-DO-REPOSITÓRIO] LinkFlow cd LinkFlow -
Instale as dependências
yarn install
-
Inicie o servidor de desenvolvimento
yarn dev
-
Acesse o aplicativo em
http://localhost:5173/LinkFlow/
Para personalizar seus links:
- Edite o arquivo
src/data/links.jsoncom suas informações - Adicione seus ícones personalizados na pasta
public/images/ - Ajuste as cores das seções conforme sua preferência no arquivo JSON
Para gerar uma versão de produção:
yarn buildO resultado será gerado na pasta dist/ e pode ser hospedado em qualquer servidor web estático.
- Animações Aprimoradas: Implementar transições mais suaves entre os estados
- Temas Personalizados: Permitir a definição de temas personalizados além do claro/escuro
- Análise de Cliques: Adicionar rastreamento de cliques para análise de engajamento
- Editor Visual: Interface para edição dos links sem necessidade de editar o JSON
Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.