aviso:esse site está em construção, então algumas coisas estão quebradas

Sobre esse site

~ $ cat colophon.md

# como esse site é feito, funcionalidades e curiosidades

~ $ cat stats.txt
commits246prs mergeados45pelo celular42primeiro commit31 de julho de 2024conteúdo8 artigos · 2 reviews · 22 treinosbucket list16 de 51 feitos
~ $ cat stack.txt
frameworknext.js 16 · react 19linguagemtypescriptestilotailwind css 4runtimebunhospedagemvercelcódigoshiki + twoslashfontesjetbrains mono, ibm plex mono, geisttemaslight, dark, dracula, gruvbox
~ $ git log --reverse --oneline
  • 2023-09-24primeiro commit do site antigo, o alvseven.com. um dia depois, o commit "production ready"
  • 2024-07-31primeiro commit desse repositório. o alves.sh era só uma página provisória, e os artigos ficavam no alvseven.com
  • 2024-08-22primeiro artigo publicado: type narrowing vs type widening, no alvseven.com
  • 2026-07-30o blog vem pra cá, e todo link antigo do alvseven.com passa a levar pra mesma página no alves.sh
  • 2026-09-24três designs num canvas. o terminal começa como um modo opcional e termina como o visual do site inteiro
  • 2026-09-25nasce a página de reviews
  • 2026-09-28primeiro treino registrado
  • 2026-11-04essa página
~ $ ls designs/
O design minimalista: uma página clara com seções de hoje, agora, artigos e fora do expediente.
a · minimalista
O modo terminal: uma página escura onde cada seção é um comando de shell com a saída dele.
a′ · modo terminal, o escolhido
O design bento: cards arredondados pra apresentação, Spotify, xadrez, despensa, artigos e links.
b · grid bento, descartado
~ $ cat how-it-works.md

## o nome

alves + um domínio. E .sh é a extensão de script de shell. Como eu curto terminal, um site com cara de terminal num domínio .sh fez todo sentido.

## o design

Antes de escrever qualquer código, desenhei três versões num canvas: uma minimalista, uma em grid estilo bento e a minimalista com um modo terminal que você ativava com >_. O bento foi o primeiro a ser descartado. Depois o modo terminal acabou dominando: combinava mais com o domínio e com o meu estilo, então virou o site inteiro.

## favoritos

Do que eu mais me orgulho: o registro da academia, o widget do Spotify e o tabuleiro de xadrez.

## o terminal

Cada comando é uma função que recebe o que você digitou e devolve um resultado, então dá pra testar tudo sem abrir o navegador. Tem autocomplete com tab, histórico na seta pra cima e alguns pipes: head, tail, grep e wc.

## a página inicial

Cada bloco da página inicial é um comando com a saída dele: whoami, now.txt, neofetch, os últimos artigos, a bucket list, Spotify, xadrez e academia. Digite um deles em qualquer página e você vai pra página inicial com ele já rodando.

## atalhos

1, 2 e 3 abrem início, artigos e reviews, t troca o tema, l troca o idioma e / pula pro terminal. Eles ficam desligados enquanto você digita, então nunca atrapalham.

## a barra da janela

No computador, a barra do topo funciona como a janela de um terminal: hi@alves.sh seguido de onde você está, tipo ~/writing.

## o registro da academia

Não tem banco de dados. Um Atalho do iPhone manda o treino pra uma API do site, que faz commit dele num arquivo JSON no repositório, e a Vercel publica tudo de novo. Também dá pra desfazer um registro ou registrar um dia passado, e a resposta diz quantos dias treinei na semana. a história completa →

## spotify

O widget confere o que está tocando a cada 15 segundos. Quando não tem nada tocando, ele mostra a última música. Ela fica em cache por 5 minutos, e o perfil por 6 horas, porque pedir tudo a cada consulta fez o site tomar rate limit.

## xadrez

Jogo mais no chess.com. Os ratings e a última partida vêm do chess.com e do lichess, com cache de 10 minutos, pra nenhuma das APIs receber uma requisição por visitante. O puzzle do dia é o do lichess, e seus lances são comparados com a solução, não com as regras do xadrez, então não precisa de engine nenhuma.

## dois idiomas

Inglês em /, português em /pt, e os artigos também têm URL em português. Aperte l pra trocar. Os comandos do terminal continuam em inglês, mas as respostas vêm traduzidas.

## curl alves.sh

Quem acessa pela linha de comando recebe a página inicial em texto puro, colorido.

## imagens de prévia

Os cards que aparecem quando alguém compartilha um link são gerados por um script e ficam salvos no repositório, em vez de serem criados a cada acesso.

## fontes

Um script corta as fontes pra deixar só os caracteres que o site usa, pra elas ficarem leves.

## reviews

Toda foto passa por um script que corta em 4:3, com 1200×900, então uma foto do celular e um print ficam com a mesma cara. O preço aparece em reais e em dólar, na cotação do dia em que a review foi feita. A barra da nota tem um # por ponto. Cada review tem a própria página e o próprio card de prévia, e o filtro de categoria fica no endereço, então dá pra compartilhar a lista já filtrada.

## artigos

Cada um tem um sumário que acompanha a leitura, o tempo de leitura e um botão de compartilhar. No celular ele abre o menu de compartilhamento do sistema, então dá pra mandar até pro Instagram.

## artigos no vim

No computador, os artigos têm uma barra de status do vim no rodapé, e dá pra rolar com as teclas do vim: j e k, d e u, gg pro topo, G pro fim. Não sou nerd de vim, mas gosto de brincar um pouco, em homenagem a um amigo :p

## transições

A troca entre páginas usa as view transitions do React, então o conteúdo muda suave em vez de piscar.

## neofetch e uptime

O neofetch mostra a máquina em que o site é escrito, e o uptime conta minha idade e há quanto tempo eu programo.

## temas

Dracula porque é famoso e eu já usei, Gruvbox porque é bonito e me lembra um amigo. O tema escolhido é aplicado antes de a página aparecer, então nada pisca com a cor errada quando você navega. O padrão é o escuro, não importa o que seu sistema diga.

## o tabuleiro de xadrez

É texto, não imagem: um caractere unicode por peça, montado a partir do FEN da partida e visto do lado com que eu joguei.

## sem javascript

As partes que abrem e fecham (o aviso no topo, o registro da academia, o easter egg do whoami) são HTML puro e funcionam até com o JavaScript desligado.

## rss

Todos os artigos estão no feed.xml, nos dois idiomas, pra quem ainda usa leitor de RSS.

~ $ cat todo.txt

# o que ainda falta

  • -uma página de manual (man alves)
  • -uma página com uma frase do dia, pros meus pensamentos aleatórios
  • -uma página onde quem visita pode desenhar e deixar sua marca no site pra sempre
~ $ cat fun-facts.txt
  • -A maioria dos commits são feitos às 19h.
  • -53 dos 246 commits foram feitos entre meia-noite e 6h.
  • -O dia com mais commits teve 44: 4 de novembro de 2026.
  • -Quarta-feira é o dia da semana com mais commits.
  • -Junte a última letra de alves com o domínio: s.sh. Agora leia de novo: ssh.
  • -Esse repositório ficou 695 dias parado, de setembro de 2024 a julho de 2026. Enquanto isso, os artigos saíam no site antigo.
  • -O histórico do site antigo tem commits como "e tome e tome e dalhe" e "design system, layout, we going huge".
  • -O primeiro artigo que comecei, um type challenge de nível extremo, em julho de 2024, até hoje não foi publicado.
  • -O iOS mostra ♟ como emoji colorido, a menos que você peça a versão em texto com um caractere invisível, o U+FE0E. O tabuleiro pede.
  • -O gráfico da academia imita o gráfico de contribuições do GitHub, até nos nomes dos meses.
  • -A página 404 também tem um terminal, então dá pra sair dela com `cd`.
  • -O favicon é o "a" do logo do neofetch, e ele parece um tripulante do Among Us. Nos ícones maiores aparece a palavra inteira.
  • -O `help` não mostra todos os comandos.
  • -Essa página foi feita em 13 commits e umas duas horas, contando o commit que escreveu essa frase.
~$