Soy Aketa Rashiro. ¡He renovado por completo mi sitio de portafolio "sirome.net"!
Hice un sitio súper lindo: ¡todos, por favor, elogienme! 🎈
Me gradué de Wix, lo construí con Claude Code y lo publiqué mediante 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! 🎉
¡Wiiii!
Por qué lo reconstruí
A finales del año pasado, ¡Notion me ayudó muchísimo durante la redacción de mi tesis! Me di cuenta de lo conveniente que es Notion y empecé a crear un archivo de mi trabajo.
Anteriormente, publicaba registros de trabajo en mi sitio de Wix, pero no era muy buena editando artículos en el CMS de Wix (pantalla de gestió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 puedes cambiar la apariencia.
Como las plantillas de diseño son limitadas, apenas puedes modificar el aspecto (a mayo de 2026).
En ese caso, supongo que tengo que construirlo yo misma.
Ahí es donde apareció Claude Code 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, buscar errores, pegar de nuevo...
Ese trabajo era bastante tedioso, la verdad.
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 ratón"
Si le doy comentarios informales como esos, reescribe el código adecuadamente y lo implementa ahí mismo para mostrármelo. Es "una locura en serio".
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 entero para usarlo de nuevo (estoy en el plan Claude Pro), así que fui avanzando lanzando preguntas pequeñas o prototipos a Claude normal o a ChatGPT también.
Puf
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 gestión del sitio.
Escribe un registro en Notion cada día.
↓
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 coincidieran con el diseño del sitio.
Se estira
Lindo.
Técnicamente, es una configuración de Notion API → Next.js → Vercel, y parece que ejecuta 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,
fui decidiendo 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 pruebo "se sentiría bien si se viera así" sobre la marcha es lo mejor de usar Claude Code.
Como diseñadora, si estuviera trabajando con un ingeniero,
me imaginaba rindiéndome a medio camino, pensando: "Si pido tantas correcciones, seguro que me van a odiar".
La IA es verdaderamente una herramienta revolucionaria para las profesiones creativas en muchos sentidos.
Melo-bot
El Melo-bot donde Melo habla un carácter a la vez desde el tablón electrónico en el encabezado.
Esto reutiliza parte de un programa que hice anteriormente con ChatGPT.
Me alegró poder convocar al Melo-bot inactivo a sirome.net.
Además, el mundo de pixel art de Shiro y Melo, que había estado creando en secreto con el Sr. Tsukunajiro y el Sr. Hor desde aproximadamente 2019, ha revivido.
Estoy feliz; gracias por existir.
Pixel art de Tsukunajiro.
Ehehe.
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 úsalo 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 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.
Así que me alegra haber podido graduarme de Wix. Es caro, después de todo.
Lo hice poco a poco durante las noches y madrugadas, y antes de darme cuenta, ya estaba en vivo.
La 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 generar ilustraciones debido a problemas legales, pero
espero llevarme bien con la IA en diseño y 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 agradecida de estar sobreviviendo de esta manera.
Todavía es un trabajo en progreso,
pero por favor, ¡sigan apoyando a Shiro, Melo y Aketa Rashiro!
¡Mira el sitio! Espero tus impresiones mediante respuestas o mensajes directos ✨
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
