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, apenas escrevendo um registro de trabalho no Notion e pressionando "Publicar", a página do Notion é refletida diretamente no site! Viva! 🎉
Uhuu!
Por Que Reconstruí
No final do ano passado, o Notion foi uma grande ajuda durante minha tese! Percebi como o Notion é conveniente e comecei a criar um arquivo do meu trabalho.
Anteriormente, eu postava registros de trabalho no meu site Wix, mas não era muito bom 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 foi formado no Notion.
Ta-dá! 🎉
"Eu queria poder transformar isso diretamente em um site...!"
Dá pra Fazer.
O Notion é tão conveniente que naturalmente tem um recurso para publicar artigos como um site.
É prático.
Mas, Não Dá pra Mudar a Aparência.
Como os templates de design são limitados, você dificilmente consegue mudar a aparência (em maio de 2026).
Nesse caso, acho que tenho que construir eu mesmo.
Foi aí que o Claude Code apareceu como meu ajudante.
É assim que o Claude Code é.
Tão fofo.
Claude Code é Insano
Esta foi minha primeira vez usando o Claude Code.
Anteriormente, quando fiz o Melo-bot com o ChatGPT,
Copiar e colar código, verificar erros, colar novamente...
Esse trabalho era honestamente bastante tedioso.
O Claude Code reescreve o código salvo em arquivos diretamente do terminal.
- "Deixe um pouco mais fofo"
- "Quero que se expanda suavemente quando passar o mouse"
Se eu der comentários casuais como esses, ele reescreve o código adequadamente e implementa ali mesmo para me mostrar. É "realmente 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 usá-lo novamente (estou no plano Claude Pro), então fui avançando 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.
Escreva um registro no Notion todos os dias.
↓
Mude 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 é atualizado automaticamente.
Isso não é loucura?
Quero que você tenha empatia.
Sério.
Claro, também projetei as páginas de artigo para combinar com o design do site.
Se estica
Fofo.
Tecnicamente, é uma configuração de Notion API → Next.js → Vercel, e parece executar Regeneração Estática Incremental (ISR) acionada por mudanças no campo de status.
Eu não entendo muito bem, no entanto.
🎀 Pontos de Encanto 🎀
Página de Trabalhos
Para a exibição do slide em destaque e especificações de miniatura na página de Trabalhos,
Decidi as especificações enquanto as implementava.
Coisas assim (obter imagens automaticamente do artigo, dimensionar com o movimento horizontal do cursor).
Poder construir enquanto testo "ficaria legal se fosse assim" na hora é a melhor parte de usar o Claude Code.
Como designer, se estivesse trabalhando com um engenheiro,
Imaginei desistindo no meio do caminho, pensando: "Se eu pedir tantas correções, eles vão me odiar com certeza."
A IA é verdadeiramente uma ferramenta revolucionária para profissões criativas de muitas maneiras.
Melo-bot
O Melo-bot onde Melo fala um caractere de cada vez do quadro de avisos eletrônico no cabeçalho.
Isso reutiliza parte de um programa que fiz anteriormente com o 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; obrigado por existirem.
Pixel art por Tsukunajiro.
Ehehe.
Fofo.
No futuro, pretendo adicionar gradualmente mais elementos de jogo.
Devido à integração com o 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 pequeno ícone 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 um botão de menu.
Ele olha para trás quando você toca.
Por favor, tente brincar com ele no seu celular também.
sirome.net
Produzido em um Total de Duas Semanas.
Então, estou feliz por ter conseguido me formar no Wix. É caro, afinal.
Fiz aos poucos durante noites e madrugadas, e antes que percebesse, 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 devido a 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 atualizarei 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 grato por estar sobrevivendo desta forma.
Ainda é um trabalho em andamento,
Mas por favor, continuem apoiando Shiro, Melo e Aketa Rashiro!
Confira o site! Estou esperando suas impressões via respostas ou DMs ✨
Notas da Stack Tecnológica
- Claude / Claude Code
- Next.js
- Notion API
- GitHub
- Vercel
- Sharp
A propósito, escrevi este artigo no Notion também.
Se achou interessante, por favor, compartilhe!
Aketa Rashiro
