Je suis Aketa Rashiro. J'ai entièrement refait mon site portfolio "sirome.net" !
J'ai créé un site trop mignon—tout le monde, faites-moi des compliments ! 🎈
J'ai quitté Wix, construit le site avec Claude Code, et publié via GitHub et Vercel. Le point fort cette fois, c'est l'intégration avec Notion.
J'ai mis en place un environnement où il suffit d'écrire un journal de travail dans Notion et d'appuyer sur "Publier" pour que la page Notion soit directement reflétée sur le site ! Youpi ! 🎉
Wouhou !
Pourquoi j'ai reconstruit
À la fin de l'année dernière, Notion m'a énormément aidée pendant la rédaction de ma thèse ! J'ai réalisé à quel point Notion est pratique et j'ai commencé à créer une archive de mon travail.
Avant, je publiais mes comptes rendus de travail sur mon site Wix, mais je n'étais pas très douée pour éditer les articles dans le CMS Wix (l'écran de gestion).
En plus, j'ai commencé à utiliser Notion pour mes notes de travail quotidiennes, et avant même de m'en rendre compte, une base de données de travail s'est formée sur Notion.
Ta-da ! 🎉
"Si seulement je pouvais transformer ça directement en site web… !"
C'est possible.
Notion est tellement pratique qu'il a naturellement une fonction pour publier des articles sous forme de site web.
C'est pratique.
Mais on ne peut pas changer l'apparence.
Comme les modèles de design sont limités, on peut à peine modifier l'apparence (en mai 2026).
Dans ce cas, je suppose que je dois le construire moi-même.
C'est là que Claude Code est apparu comme mon assistant.
Voilà à quoi ressemble Claude Code.
Tellement mignon.
Claude Code est dingue
C'était ma première fois avec Claude Code.
Avant, quand j'ai créé le Melo-bot avec ChatGPT,
Copier-coller le code, vérifier les erreurs, recoller…
Ce travail était honnêtement assez fastidieux.
Claude Code réécrit directement le code enregistré dans les fichiers depuis le terminal.
- "Rends-le un peu plus mignon"
- "Je veux qu'il s'agrandisse doucement au survol"
Si je donne des commentaires comme ça, il réécrit le code de manière appropriée et l'implémente sur place pour me montrer. C'est "vraiment dingue".
Cependant, si on fait trop travailler Claude Code, on atteint une "limite de tokens" et on doit attendre une demi-journée ou une journée entière avant de pouvoir l'utiliser à nouveau (je suis sur le plan Claude Pro), donc j'ai avancé en lançant aussi de petites questions ou prototypes à Claude classique ou à ChatGPT.
Pouf
J'ai fait de Notion mon CMS
Le cœur du nouveau sirome.net est l'intégration complète avec Notion (💡).
Je n'ai même plus besoin d'un écran de gestion de site.
Écrire un journal dans Notion chaque jour.
↓
Changer le statut en "Publié".
↓
C'est automatiquement reflété sur le site.
En plus, même après publication, si je modifie l'article dans Notion, le site se met à jour automatiquement.
C'est pas fou, ça ?
J'ai besoin que vous compatissiez.
Sérieusement.
Bien sûr, j'ai aussi conçu les pages d'articles pour qu'elles correspondent au design du site.
S'étire
Mignon.
Techniquement, c'est une configuration Notion API → Next.js → Vercel, et ça semble exécuter une régénération statique incrémentielle (ISR) déclenchée par les changements dans le champ de statut.
Je ne comprends pas trop, par contre.
🎀 Points forts 🎀
Page Works
Pour l'affichage du slide Featured et les spécifications des miniatures sur la page Works,
j'ai décidé des spécifications en les implémentant.
Des trucs comme ça (récupérer automatiquement les images de l'article, mise à l'échelle avec le mouvement horizontal du curseur).
Pouvoir construire en testant "ça serait bien si ça ressemblait à ça" sur le moment, c'est le meilleur côté de l'utilisation de Claude Code.
En tant que designer, si je travaillais avec un ingénieur,
je m'imaginais abandonner à mi-chemin, en pensant "Si je demande autant de corrections, ils vont sûrement me détester."
L'IA est vraiment un outil révolutionnaire pour les métiers créatifs à bien des égards.
Melo-bot
Le Melo-bot où Melo parle un caractère à la fois depuis le panneau d'affichage électronique dans l'en-tête.
Ça réutilise une partie d'un programme que j'avais fait avec ChatGPT.
J'étais contente de pouvoir convoquer le Melo-bot endormi sur sirome.net.
Aussi, le monde du pixel art de Shiro et Melo, que je créais secrètement avec M. Tsukunajiro et M. Hor depuis environ 2019, a été ressuscité.
Je suis heureuse, merci d'exister.
Pixel art par Tsukunajiro.
Ehehe.
Mignon.
À l'avenir, je prévois d'ajouter progressivement plus d'éléments de jeu.
À cause de l'intégration Notion, les temps de chargement peuvent parfois être longs,
Alors utilisez-le pour tuer le temps.
Favicon qui tourne chaque seconde
Un favicon est la petite icône affichée sur les onglets du navigateur.
Je n'ai pas pu enregistrer une animation GIF, donc j'affiche 10 images PNG à une seconde d'intervalle.
Mignon.
Sur smartphone, je l'ai placé comme bouton de menu.
Il regarde en arrière quand on tape dessus.
Essayez de jouer avec sur votre téléphone aussi.
sirome.net
Produit en deux semaines au total.
Donc, je suis contente d'avoir pu quitter Wix. C'est cher, après tout.
Je l'ai fait petit à petit pendant les nuits et les matins, et avant de m'en rendre compte, c'était en ligne.
L'IA… j'ai encore des sentiments sceptiques, mais j'ai vécu de première main que le monde a complètement changé.
Je ne veux pas encore utiliser l'IA pour la génération d'illustrations à cause des problèmes juridiques, mais
j'espère bien m'entendre avec l'IA dans le design et la création pour faire des choses intéressantes.
N'hésitez pas à me contacter pour des consultations de travail.
Aussi, à partir de maintenant, je veux mettre l'accent sur les crédits de travail et les articles d'archive,
en publiant chacun avec soin.
Je vais aussi mettre à jour rétroactivement les articles actuellement sur sirome.net.
Chacun est un travail dans lequel j'ai mis tout mon cœur.
Grâce à tout le monde, j'ai pu dessiner beaucoup d'images jusqu'à présent,
et je suis reconnaissante de survivre de cette façon.
C'est encore un travail en cours,
Mais continuez à soutenir Shiro, Melo et Aketa Rashiro !
Allez voir le site ! J'attends vos impressions par replies ou DM ✨
Notes sur la stack technique
- Claude / Claude Code
- Next.js
- Notion API
- GitHub
- Vercel
- Sharp
Au fait, j'ai écrit cet article dans Notion aussi.
Si vous avez trouvé ça intéressant, partagez-le !
Aketa Rashiro
