Esse projeto é uma alternativa open source para os websites agregadores de links para redes sociais criado usando React. A intenção principal é ser uma alternativa de fácil configuração para iniciantes e sem nenhum tipo de rastreamento que pode ser hospedada no próprio GitHub.
- configurável através de um arquivo JSON
- sem rastreamento de dados ou cookies
- interface com suporte a português, inglês e espanhol
- layout adaptado para celulares
- código completamente aberto
Você pode criar uma versão sua clonando esse projeto e adicionando as suas informações ao arquivo principal de configuração seguindo essas instruções:
- Crie uma conta no GitHub caso você ainda não possua uma.
- Siga essas instruções para criar um fork desse projeto. Não se esqueça de desmarcar a opção
Copy the main branch only!
- Troque para a branch
gh-pages. - Abra o arquivo
options.json. - Clique no botão com o ícone de um lápis para editar o arquivo.
- Edite todas as informações necessárias de acordo com o guia da próxima seção.
- Ao terminar, clique no botão
Commit changesno final da página para salvar suas configurações.
- Acesse a aba de
Settingsdo seu repositório. - Clique na opção
Pages. - Na seção
Build and deploymentclique no dropdown abaixo do itemBranche escolha a branch chamadagh-pages. - Clique em
Save. - Depois de 1 ou 2 minutos seu site já deve estar no ar! Acesse pelo endereço
https://seu-usuario.github.io/my-linkse confira!
Esse é um exemplo de arquivo de configuração:
{
"user": {
"language": "en_US",
"name": "SEU NOME",
"bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a dolor mauris. Maecenas in enim at arcu rhoncus faucibus nec in risus. Nam hendrerit et mi quis pretium. Duis ullamcorper vitae est et consequat. Duis vitae magna at justo vestibulum efficitur. Proin convallis sollicitudin nisi eu feugiat. In ultricies dictum tincidunt. Vestibulum a libero a urna ullamcorper imperdiet eget at neque. Sed sagittis turpis ac elit dapibus gravida. Sed tincidunt feugiat ante auctor sagittis. Morbi mollis lacinia eleifend. Nulla sit amet purus ex."
},
"background": {
"color": "#0f0f0f",
"image": "https://images.pexels.com/photos/220072/pexels-photo-220072.jpeg"
},
"buttons": {
"color": "#d9d9d9",
"hover_color": "#ccccff",
"text_color": "#1f1f1f"
},
"groups": [
"Social networks",
"Gaming"
],
"networks": [
{
"name": "Twitter",
"url": "https://twitter.com/",
"icon": "twitter",
"group": "Social networks"
},
{
"name": "Instagram",
"url": "https://instagram.com/",
"icon": "instagram",
"group": "Social networks"
},
{
"name": "Spotify",
"url": "https://open.spotify.com/",
"icon": "spotify"
},
{
"name": "PSN",
"url": "https://psnprofiles.com/",
"icon": "playstation",
"group": "Gaming"
},
{
"name": "Steam",
"url": "https://steampowered.com/",
"icon": "steam",
"group": "Gaming"
},
{
"name": "Github",
"url": "https://github.com/",
"icon": "github"
}
]
}Todos os campos marcados com * são obrigatórios!
São as suas informações pessoais.
language*: O idioma de exibição da página. Pode ser uma de três opções:
pt_BRen_USes_ES
name*: Nome que você quer exibir na página.
bio: Descrição curta sobre você. Pode ser um texto vazio caso você não
queira exibir o box "Sobre mim" na página.
Informações sobre o plano de fundo.
color*: A cor de fundo da página.
image: Imagem para ser exibida como background. Deixe em branco para
utilizar só a cor de fundo.
Definições de cores dos botões exibidos na página.
color*: A cor principal do botão.
hover_color*: Cor exibida quando se passa o mouse por cima de
algum dos botões.
text_color*: Cor do texto dos botões.
Essa é uma lista dos nomes dos grupos que você quer exibir na página, na mesma
ordem dessa lista. Caso não queira exibir grupos mantenha este campo vazio. Itens
do grupo networks que não façam parte de nenhum grupo serão exibidos ao final
com o nome de Outros.
Grupo dos itens com as informações das suas redes sociais. Cada um dos grupos é formado por esses itens.
name*: Nome da rede social ou texto para aparecer no botão.
url*: Link para o seu perfil.
icon: Um ícone da seguinte lista para representar a sua rede social.
amazonartstationbandcampbattlenetbehancebloggerdailymotiondeviantartdiscorddropboxemailfacebookflickrgithubgoogledriveinstagramkickstarterlastfmlinkedinmediumpatreonpaypalpinterestplaystationredditsoundcloudspotifysteamtelegramtiktoktumblrtwitchtwittervimeowhatsappwordpressxboxyoutube
group: O mesmo nome de um dos grupos definidos no item groups. Caso não
queira que a rede faça parte de nenhum grupo omita esse campo.