Soy Aketa Rashiro. ¡He renovado por completo mi sitio de portafolio "sirome.net"!
Hice un sitio lindo—¡todos, por favor, elógienme! 🎈
Me gradué de Wix, lo construí con Claude Code y lo publiqué a través de GitHub y Vercel. Lo más destacado esta vez es la integración con Notion.
¡He creado un entorno donde con solo escribir un registro de trabajo en Notion y presionar "Publicar", la página de Notion se refleja directamente en el sitio! ¡Yupi! 🎉
¡Wiii!
Por qué lo reconstruí
A finales del año pasado, ¡Notion fue una gran ayuda durante mi tesis! Me di cuenta de lo conveniente que es Notion y comencé a crear un archivo de mi trabajo.
Anteriormente, publicaba registros de trabajo en mi sitio de Wix, pero no era muy bueno editando artículos en el CMS de Wix (pantalla de administración).
Además, empecé a usar Notion para mis notas de trabajo diarias, y antes de darme cuenta, se formó una base de datos de trabajo en Notion.
¡Ta-dá! 🎉
"¡Ojalá pudiera convertir esto directamente en un sitio web...!"
Se puede.
Notion es tan conveniente que naturalmente tiene una función para publicar artículos como sitio web.
Es práctico.
Pero no se puede cambiar la apariencia.
Como las plantillas de diseño son limitadas, apenas se puede cambiar la apariencia (a mayo de 2026).
En ese caso, supongo que tengo que construirlo yo mismo.
Ahí es donde Claude Code apareció como mi ayudante.
Así es Claude Code.
Tan lindo.
Claude Code es una locura
Esta fue mi primera vez usando Claude Code.
Anteriormente, cuando hice el Melo-bot con ChatGPT,
Copiar y pegar código, verificar errores, pegar de nuevo...
Ese trabajo era honestamente bastante tedioso.
Claude Code reescribe el código guardado en archivos directamente desde la terminal.
- "Hazlo un poco más lindo"
- "Quiero que se expanda suavemente al pasar el mouse"
Si le doy comentarios casuales como esos, reescribe el código adecuadamente y lo implementa ahí mismo para mostrármelo. Es "realmente una locura".
Sin embargo, si haces que Claude Code trabaje demasiado, llegas a un "límite de tokens" y tienes que esperar medio día o un día completo para usarlo de nuevo (estoy en el plan Claude Pro), así que fui avanzando lanzando preguntas pequeñas o prototipos al Claude normal o a ChatGPT también.
Poof
Hice de Notion mi CMS
El núcleo del nuevo sirome.net es la integración completa con Notion (💡).
Ya ni siquiera necesito una pantalla de administración del sitio.
Escribe un registro en Notion todos los días.
↓
Cambia el estado a "Publicado".
↓
Se refleja automáticamente en el sitio.
Además, incluso después de publicar, si edito el artículo en Notion, el sitio se actualiza automáticamente.
¿No es una locura?
Quiero que empatices.
En serio.
Por supuesto, también diseñé las páginas de los artículos para que coincidan con el diseño del sitio.
Se estira
Lindo.
Técnicamente, es una configuración de Notion API → Next.js → Vercel, y parece ejecutar Regeneración Estática Incremental (ISR) activada por cambios en el campo de estado.
Aunque no lo entiendo del todo.
🎀 Puntos de encanto 🎀
Página de Trabajos
Para la presentación de diapositivas destacadas y las especificaciones de miniaturas en la página de Trabajos,
Decidí las especificaciones mientras las implementaba.
Cosas como esta (obtener imágenes automáticamente del artículo, escalar con el movimiento horizontal del cursor).
Poder construir mientras pruebas "se sentiría bien si se viera así" sobre la marcha es lo mejor de usar Claude Code.
Como diseñador, si estuviera trabajando con un ingeniero,
me imaginaba rindiéndome a medio camino, pensando: "Si pido tantas correcciones, seguro me van a odiar".
La IA es verdaderamente una herramienta revolucionaria para las profesiones creativas en muchos aspectos.
Melo-bot
El Melo-bot donde Melo habla un carácter a la vez desde el tablón de anuncios electrónico en el encabezado.
Esto reutiliza parte de un programa que hice anteriormente con ChatGPT.
Me alegró poder invocar al Melo-bot inactivo a sirome.net.
Además, el mundo del pixel art de Shiro y Melo, que había estado creando en secreto con el Sr. Tsukunajiro y el Sr. Hor desde alrededor de 2019, ha revivido.
Estoy feliz; gracias por existir.
Pixel art de Tsukunajiro.
Ejeje.
Lindo.
En el futuro, planeo agregar gradualmente más elementos similares a juegos.
Debido a la integración con Notion, los tiempos de carga a veces pueden ser largos,
Así que úsenlo para matar el tiempo.
Favicon que gira cada segundo
Un favicon es el pequeño ícono que se muestra en las pestañas del navegador.
No pude registrar una animación GIF, así que estoy mostrando 10 imágenes PNG con un segundo de diferencia.
Lindo.
En teléfonos inteligentes, lo he colocado como un botón de menú.
Mira hacia atrás cuando lo tocas.
Por favor, intenta jugar con él también en tu teléfono.
sirome.net
Producido en un total de dos semanas.
Entonces, me alegra haber podido graduarme de Wix. Es caro, después de todo.
Lo hice poco a poco durante las noches y las madrugadas, y antes de darme cuenta, ya estaba en vivo.
IA... todavía tengo sentimientos escépticos, pero he experimentado de primera mano que el mundo ha cambiado por completo.
Todavía no quiero usar IA para la generación de ilustraciones debido a problemas legales, pero
Espero llevarme bien con la IA en el diseño y la creación para hacer cosas interesantes.
No dudes en contactarme para consultas de trabajo.
Además, de ahora en adelante, quiero esforzarme en los créditos de trabajo y los artículos de archivo,
Publicando cada uno con cuidado.
También actualizaré retroactivamente los artículos actualmente en sirome.net.
Cada uno es una pieza de trabajo en la que puse mi corazón.
Gracias a todos, he podido dibujar muchas imágenes hasta ahora,
Y estoy agradecido de estar sobreviviendo de esta manera.
Todavía es un trabajo en progreso,
¡Pero sigan apoyando a Shiro, Melo y Aketa Rashiro!
¡Mira el sitio! ¡Espero tus impresiones a través de respuestas o DMs ✨
Notas sobre la pila tecnológica
- Claude / Claude Code
- Next.js
- Notion API
- GitHub
- Vercel
- Sharp
Por cierto, también escribí este artículo en Notion.
Si te pareció interesante, ¡compártelo!
Aketa Rashiro
