Meu novo site: mais moderno e mais tech

Olá meus Unicórnios! 🦄✨

Tenho novidade, e ela está no ar: o www.palomamacetko.com.br ganhou uma cara completamente nova. Mais moderna, mais limpa e, principalmente, muito mais tech. 💻💜

Quem me conhece sabe que eu escrevo código há mais de vinte anos. Então eu quis um site que parecesse com o lugar onde eu passo o dia: o editor de código, o terminal, o git log. Nada de template genérico com foto de banco de imagem e "soluções inovadoras". Cada pedacinho do site novo fala a língua de quem programa.

Neste artigo eu te levo para um tour pelas páginas, com os prints, e conto as decisões por trás de cada uma. Se preferir ir direto, o site é este:

🏰 Do castelo de Hogwarts ao editor de código

Vou confessar uma coisa: a primeira versão deste site novo não era nada disso. 😅

Ela era um castelo. Céu escuro de Hogwarts, vídeo no topo, parallax, partículas brilhando, uma bruxinha voando pela tela, um caldeirão de poções mostrando as minhas skills e até joguinho, a "Corrida da Bruxa". Eu me diverti horrores fazendo. E aí eu olhei para aquilo com olhos de quem está procurando uma desenvolvedora... e percebi que a magia estava roubando a cena do trabalho.

Então veio a decisão difícil: troquei o tema mágico inteiro por um layout claro e profissional. Fundo off-white, títulos em serifa, uma única cor de destaque (um ameixa, o #7b2d5f) e nenhuma animação decorativa. Saíram o vídeo, o parallax, o jogo, os sons de varinha e duas bibliotecas de animação inteiras.

Mas eu não abandonei a magia de vez, calma! 🦄 Ela ficou escondida num lugar só: o rodapé do site agora diz "Feito com Amor e Magia". E os unicórnios continuam morando aqui no blog, claro.

🗂️ Cada página é uma aba do editor

A primeira coisa que você vê no site novo é o cabeçalho, e ele é o coração da ideia toda. Repare: ele é a barra de abas de um editor de código. Cada página do site é um arquivo aberto:

• index.tsx é a página inicial;
• projetos.tsx são os meus projetos;
• skills.ts é o que eu sei fazer;
• sobre.md é a minha história;
• blog.md leva para os artigos.

A cor do marcador de cada aba muda pelo tipo do arquivo, igualzinho num editor de verdade: azul para .tsx, amarelo para .ts, verde para .md. Lá no canto esquerdo, os três pontinhos de janela e a minha "marca": um nó de grafo do git, com master · 7b2d5f embaixo. E o 7b2d5f não é um hash qualquer: é a própria cor de destaque do site. 😉

Logo abaixo das abas fica a trilha do arquivo aberto, como paloma-macetko › src › index.tsx. E o contato, os termos e a privacidade, que não têm aba fixa, abrem como uma aba extra enquanto você está neles, do jeitinho que um arquivo avulso abre no editor.

🌙 O hero escuro e as três fontes

O site é claro, mas o topo de cada página (o famoso hero) é escuro, junto com o cabeçalho e o rodapé. Foi um pedido meu na revisão: o contraste do topo escuro com o corpo claro dá aquela sensação de "tela de editor" sem cansar a leitura do resto da página.

Na página inicial, o hero se apresenta como um terminal: aparece o prompt paloma_macetko:~ $ whoami e, como resposta, eu mesma. 💁‍♀️

A tipografia foi escolhida a dedo, e são três fontes com papéis bem separados:

• Instrument Serif nos títulos, aquela serifa elegante que dá o ar editorial (repare no itálico rosa do "há mais de vinte anos");
• Geist no texto corrido, limpa e fácil de ler;
• Geist Mono em tudo que é "de máquina": abas, rótulos, comandos e terminais.

E aqui tem um cuidado que quase ninguém vê: as fontes são servidas pelo próprio site, só com os caracteres latinos, e cada uma tem uma fonte reserva com as medidas ajustadas. Enquanto a Geist não chega, o texto aparece numa fonte do sistema calibrada para ocupar exatamente o mesmo espaço. Resultado: quando a fonte de verdade carrega, nada pula na tela. Sabe quando você vai clicar num link e o texto muda de lugar? Pois é, aqui isso não acontece. 🙏

🌳 Projetos contados como um git log

Descendo a página inicial, os meus projetos aparecem como um git log --graph: uma linha do tempo vertical, cada projeto é um commit com o seu hash, e o mais recente leva o (HEAD → master). Cada "commit" tem a mensagem no estilo feat: ..., a descrição, as tecnologias em etiquetas de código e, ao lado, o print do projeto dentro de uma janelinha de navegador.

Ali estão o Pensieve, a API Mágica, este blog, o Beco dos Scripts e o Detector de Cilada. Cada um tem ainda uma página de detalhes própria, dentro de /projetos, com a stack e os destaques técnicos.

🗄️ Skills num banco de dados

Essa é a minha página favorita, confesso. 🤭 Em vez da clássica lista de barrinhas de progresso, as minhas skills viraram um banco de dados.

O hero da página skills.ts abre um terminal do psql conectado no skills_db. O comando \dt lista os "schemas" (ia, fullstack, ecommerce, cloud e public) e as "tabelas" de cada um. Clicando numa tabela, o terminal roda o SELECT tecnologia FROM ... e mostra o resultado, com a proficiência no rodapé, no formato que o psql devolveria.

Mais abaixo, cada pilar é desenhado como um diagrama de tabelas, com as colunas id (PK) e a chave estrangeira (FK) ligando as áreas de um mesmo schema. Quem já modelou um banco bate o olho e entende na hora. Quem nunca modelou... acha bonito do mesmo jeito. 😄

📚 A página do blog é um explorador de arquivos

A página blog.md tem, no hero, uma grade de publicações por mês, no espírito daquele quadriculado de contribuições do GitHub. O terminal "roda" um git log nos artigos e pinta cada mês conforme a quantidade de posts. Clicando num mês, a lista filtra.

Embaixo fica o explorador: os assuntos numa lateral escura, como a árvore de arquivos de um editor, cada um com seu ícone e a contagem de artigos. Tem campo para filtrar os assuntos, busca por texto no hero, e os artigos vão aparecendo em duas colunas conforme você rola.

E se você achou o cabeçalho daqui do blog parecido com o do site... não é coincidência! O blog ganhou a mesma barra de abas, o mesmo hero escuro e o mesmo rodapé, para os dois parecerem uma casa só. 🏠

💌 Contato que funciona como um terminal

O formulário de contato é uma sessão de terminal. Do lado esquerdo, um README.md numerado explica como funciona; do lado direito, o ./contato.sh faz as perguntas uma de cada vez: nome, e-mail, WhatsApp (opcional) e a mensagem. O Enter passa para a próxima pergunta e o Ctrl+Enter envia.

No hero, o terminal mostra o mensagem.json sendo montado e o curl -X POST /api/contato que vai enviá-lo, aguardando você.

E o README deixa claro o combinado: o que você digitar vira um e-mail que eu leio pessoalmente, e nada fica guardado no site.

👩‍💻 A página Sobre como um git log

A sobre.md segue a mesma lógica: a minha trajetória virou um git log --graph --all, com branches e merges. Tem a branch master, com o começo de tudo, e a branch fora-do-trabalho, com Harry Potter, foguetes da SpaceX, robótica e automação residencial.

E tem um commit que é o meu preferido: o do Noturno, o meu gato preto de olhos âmbar, que assina como autor do próprio commit e aparece no cartão de perfil como revisor, "revisa cada linha". Ele leva o cargo muito a sério. 🐈

📱 No celular também

No celular as abas não cabem, então o cabeçalho mostra só o arquivo atual e um botão de menu. Aberto, o menu vira uma lista no estilo explorador, com o nome de cada página ao lado do arquivo. Os terminais descem para baixo do título.

O layout foi acertado até os 320 pixels de largura, a tela dos celulares mais estreitos: nenhuma lista rola de lado, e nem com a fonte do celular aumentada a página alarga.

⚙️ O que tem por baixo do capô

Para quem gosta de saber a stack (eu sei que vocês gostam 😏):

• React 19 com Vite, React Router e CSS Modules. Os ícones são do lucide-react.
• Uma API pequena em Node.js e Express, que busca os artigos do blog e guarda num cache de 24 horas no MySQL. Se a fonte falhar, o site serve o último conteúdo válido; se o próprio MySQL cair, um cache em memória segura as pontas.
• Cada página é pré-renderizada no build. Ou seja: o HTML já sai pronto, com o conteúdo e o <head> de SEO próprio de cada rota, e o React "acorda" a página depois. Isso importa porque muitos robôs, inclusive os das IAs, não executam JavaScript. Um site em React sem isso chega para eles em branco.
• O build se recusa a publicar página fora do padrão de SEO: título com mais de 60 caracteres, descrição com mais de 160, JSON-LD inválido ou mais de um <h1> fazem o build falhar. Prefiro o erro na minha máquina do que no Google.
• Sitemap, robots.txt e llms.txt são gerados no build, com as datas tiradas do histórico do git.

E a acessibilidade entrou como requisito desde o primeiro componente, não como retoque no fim: navegação por teclado, foco visível, contraste AA, alt descritivo nas imagens, alvos de toque de 44 pixels e o link "pular para o conteúdo". Como mulher cadeirante, eu sei na pele a diferença que isso faz, e o meu site não podia ser o primeiro a esquecer. 💜

Passa lá, clica nas abas, brinca com o terminal do psql e, se quiser, me manda um oi pelo ./contato.sh. Eu vou adorar ler! 🥰

Por hoje é só, meus unicórnios! 🦄✨

Que a magia do arco-íris continue brilhando em suas vidas! Até mais! 🌈🌟