Sou Aketa Rashiro. Renovei completamente meu site de portfólio "sirome.net"!
Criei um site fofo — elogiem-me, pessoal! 🎈
Me formei no Wix, construí com Claude Code e publiquei via GitHub e Vercel. O destaque desta vez é a integração com o Notion.
Criei um ambiente onde, só de escrever um registro de trabalho no Notion e apertar "Publicar", a página do Notion é refletida diretamente no site! Viva! 🎉
Ihuuul!
Por que reconstruí
No final do ano passado, o Notion foi uma baita ajuda durante minha tese! Percebi como o Notion é prático e comecei a criar um arquivo do meu trabalho.
Antes, eu postava registros de trabalho no meu site Wix, mas não era muito boa em editar artigos no CMS do Wix (tela de gerenciamento).
Além disso, comecei a usar o Notion para minhas anotações diárias de trabalho e, antes que percebesse, um banco de dados de trabalho se formou no Notion.
Tcharã! 🎉
"Queria poder transformar isso diretamente em um site...!"
Dá pra fazer.
O Notion é tão prático que naturalmente tem um recurso para publicar artigos como site.
É útil.
Mas não dá pra mudar a aparência.
Como os templates de design são limitados, quase não dá pra alterar a aparência (em maio de 2026).
Nesse caso, acho que tenho que construir eu mesma.
Foi aí que o Claude Code apareceu como meu ajudante.
É assim que o Claude Code é.
Tão fofo.
Claude Code é insano
Foi minha primeira vez usando Claude Code.
Antes, quando fiz o Melo-bot com o ChatGPT,
Copiar e colar código, verificar erros, colar de novo...
Esse trabalho era honestamente bem tedioso.
O Claude Code reescreve o código salvo em arquivos diretamente do terminal.
- "Deixa um pouco mais fofo"
- "Quero que expanda suavemente quando passar o mouse"
Se eu dou comentários casuais assim, ele reescreve o código adequadamente e implementa na hora pra me mostrar. É "seriamente insano".
No entanto, se você fizer o Claude Code trabalhar demais, atinge um "limite de tokens" e tem que esperar meio dia ou um dia inteiro para usar de novo (estou no plano Claude Pro), então fui jogando pequenas perguntas ou protótipos para o Claude comum ou ChatGPT também.
Puf
Transformei o Notion no meu CMS
O núcleo do novo sirome.net é a integração completa com o Notion (💡).
Nem preciso mais de uma tela de gerenciamento do site.
Escrevo um registro no Notion todo dia.
↓
Mudo o status para "Publicado".
↓
É refletido automaticamente no site.
Além disso, mesmo após a publicação, se eu editar o artigo no Notion, o lado do site atualiza automaticamente.
Não é uma loucura?
Quero que você tenha empatia.
Sério.
Claro, também projetei as páginas de artigo para combinar com o design do site.
Espreguiça
Fofo.
Tecnicamente, é uma configuração de Notion API → Next.js → Vercel, e parece que executa Regeneração Estática Incremental (ISR) acionada por mudanças no campo de status.
Mas não entendo muito bem.
🎀 Pontos de Encanto 🎀
Página de Trabalhos
Para a exibição do slide em destaque e as especificações das miniaturas na página de Trabalhos,
Decidi as especificações enquanto implementava.
Coisas assim (pegar imagens automaticamente do artigo, escalar com movimento horizontal do cursor).
Poder construir testando "ficaria legal se fosse assim" na hora é a melhor parte de usar Claude Code.
Como designer, se estivesse trabalhando com um engenheiro,
Imaginava desistindo no meio, pensando: "Se eu pedir tantas correções, com certeza vão me odiar."
A IA é verdadeiramente uma ferramenta revolucionária para profissões criativas de muitas maneiras.
Melo-bot
O Melo-bot onde Melo fala um caractere por vez do quadro de avisos eletrônico no cabeçalho.
Isso reutiliza parte de um programa que fiz anteriormente com ChatGPT.
Fiquei feliz em poder convocar o Melo-bot adormecido para o sirome.net.
Além disso, o mundo de pixel art do Shiro e Melo, que eu vinha criando secretamente com o Sr. Tsukunajiro e o Sr. Hor desde cerca de 2019, foi revivido.
Estou feliz; obrigada por existirem.
Pixel art por Tsukunajiro.
Ehehe.
Fofo.
No futuro, pretendo adicionar gradualmente mais elementos de jogo.
Devido à integração com Notion, os tempos de carregamento às vezes podem ser longos,
Então use para matar o tempo.
Favicon que Gira a Cada Segundo
Um favicon é o ícone minúsculo exibido nas abas do navegador.
Não consegui registrar uma animação GIF, então estou exibindo 10 imagens PNG com um segundo de diferença.
Fofo.
Em smartphones, coloquei como botão de menu.
Ele olha para trás quando você toca.
Por favor, tente brincar com ele no celular também.
sirome.net
Produzido em Duas Semanas no Total.
Então, estou feliz por ter me formado no Wix. É caro, afinal.
Fiz aos poucos durante noites e madrugadas, e antes que percebesse, já estava no ar.
IA... ainda tenho sentimentos céticos, mas experimentei em primeira mão que o mundo mudou completamente.
Ainda não quero usar IA para geração de ilustrações por questões legais, mas
Espero me dar bem com a IA em design e criação para fazer coisas interessantes.
Sinta-se à vontade para entrar em contato para consultas de trabalho.
Além disso, de agora em diante, quero me dedicar aos créditos de trabalho e artigos de arquivo,
Publicando cada um com cuidado.
Também vou atualizar retroativamente os artigos atualmente no sirome.net.
Cada um é uma peça de trabalho na qual coloquei meu coração.
Graças a todos, consegui desenhar muitas imagens até agora,
E sou grata por estar sobrevivendo dessa forma.
Ainda é um trabalho em andamento,
Mas continuem apoiando Shiro, Melo e Aketa Rashiro!
Confira o site! Estou esperando suas impressões por respostas ou DMs ✨
Anotações da Stack Técnica
- Claude / Claude Code
- Next.js
- Notion API
- GitHub
- Vercel
- Sharp
A propósito, escrevi este artigo também no Notion.
Se achou interessante, por favor compartilhe!
Aketa Rashiro
