Ich bin Aketa Rashiro. Ich habe meine Portfolio-Seite "sirome.net" komplett erneuert!
Ich habe eine süße Seite gebaut – bitte lobt mich alle! 🎈
Ich habe mich von Wix verabschiedet, sie mit Claude Code erstellt und über GitHub und Vercel veröffentlicht. Das Highlight diesmal ist die Integration mit Notion.
Ich habe eine Umgebung geschaffen, in der ich einfach einen Arbeitsbericht in Notion schreibe, auf „Veröffentlichen“ klicke – und schon wird die Notion-Seite direkt auf der Website angezeigt! Juhu! 🎉
Jippie!
Warum ich sie neu gebaut habe
Ende letzten Jahres war Notion eine riesige Hilfe beim Schreiben meiner Abschlussarbeit! Mir wurde klar, wie praktisch Notion ist, und ich begann, ein Archiv meiner Arbeiten anzulegen.
Früher habe ich Arbeitsberichte auf meiner Wix-Seite veröffentlicht, aber ich war nicht besonders gut darin, Artikel im Wix-CMS (Verwaltungsoberfläche) zu bearbeiten.
Außerdem habe ich angefangen, Notion für meine täglichen Arbeitsnotizen zu nutzen, und ehe ich mich versah, hatte sich auf Notion eine Arbeitsdatenbank gebildet.
Ta-da! 🎉
„Ich wünschte, ich könnte das einfach direkt in eine Website verwandeln …!“
Kannst du.
Notion ist so praktisch, dass es natürlich eine Funktion hat, um Artikel als Website zu veröffentlichen.
Praktisch.
Aber das Aussehen kannst du nicht ändern.
Da die Designvorlagen begrenzt sind, kann man das Erscheinungsbild kaum verändern (Stand Mai 2026).
In dem Fall muss ich es wohl selbst bauen.
Und da tauchte Claude Code als mein Helfer auf.
So sieht Claude Code aus.
So süß.
Claude Code ist der Wahnsinn
Das war mein erstes Mal mit Claude Code.
Früher, als ich den Melo-Bot mit ChatGPT gebaut habe,
war das Kopieren und Einfügen von Code, das Überprüfen auf Fehler, das erneute Einfügen …
Diese Arbeit war ehrlich gesagt ziemlich mühsam.
Claude Code schreibt den in Dateien gespeicherten Code direkt vom Terminal aus um.
- „Mach es etwas süßer“
- „Ich möchte, dass es sich beim Darüberfahren sanft ausdehnt“
Wenn ich so lockere Kommentare gebe, schreibt es den Code entsprechend um und setzt ihn direkt dort um, um es mir zu zeigen. Es ist „wirklich der Wahnsinn“.
Allerdings: Wenn man Claude Code zu viel arbeiten lässt, stößt man auf ein „Token-Limit“ und muss einen halben oder ganzen Tag warten, bevor man es wieder nutzen kann (ich bin im Claude Pro-Tarif). Also bin ich vorgegangen, indem ich auch kleine Fragen oder Prototypen an den normalen Claude oder ChatGPT geworfen habe.
Puff
Ich habe Notion zu meinem CMS gemacht
Der Kern der neuen sirome.net ist die vollständige Integration mit Notion (💡).
Ich brauche nicht einmal mehr einen Site-Verwaltungsbildschirm.
Schreibe jeden Tag einen Bericht in Notion.
↓
Ändere den Status auf „Veröffentlicht“.
↓
Es wird automatisch auf der Website angezeigt.
Und selbst nach der Veröffentlichung: Wenn ich den Artikel in Notion bearbeite, wird die Website-Seite automatisch aktualisiert.
Ist das nicht verrückt?
Ich möchte, dass ihr das nachfühlt.
Ehrlich.
Natürlich habe ich auch die Artikel-Seiten so gestaltet, dass sie zum Site-Design passen.
Streckt sich aus
Süß.
Technisch gesehen ist es eine Konfiguration aus Notion API → Next.js → Vercel, und es scheint Incremental Static Regeneration (ISR) auszuführen, ausgelöst durch Änderungen im Statusfeld.
Ich verstehe es zwar nicht wirklich.
🎀 Charm Points 🎀
Works-Seite
Für die Featured-Slide-Anzeige und die Thumbnail-Spezifikationen auf der Works-Seite
habe ich die Spezifikationen während der Implementierung festgelegt.
So was hier (automatisches Abrufen von Bildern aus dem Artikel, Skalierung durch horizontale Cursorbewegung).
Die Möglichkeit, direkt vor Ort zu testen, „es würde sich gut anfühlen, wenn es so aussähe“, ist das Beste an der Arbeit mit Claude Code.
Als Designer, wenn ich mit einem Entwickler zusammengearbeitet hätte,
hätte ich mir vorgestellt, halb aufzugeben, weil ich dachte: „Wenn ich so viele Korrekturen verlange, werden sie mich bestimmt hassen.“
KI ist wirklich in vielerlei Hinsicht ein revolutionäres Werkzeug für kreative Berufe.
Melo-Bot
Der Melo-Bot, bei dem Melo Zeichen für Zeichen von der elektronischen Anzeigetafel im Header spricht.
Das verwendet einen Teil eines Programms wieder, das ich zuvor mit ChatGPT erstellt hatte.
Ich war froh, den schlummernden Melo-Bot auf sirome.net wiederbeleben zu können.
Außerdem wurde die Welt von Pixel-Art Shiro und Melo, die ich heimlich seit etwa 2019 mit Herrn Tsukunajiro und Herrn Hor erschaffen hatte, wiederbelebt.
Ich bin glücklich; danke, dass es euch gibt.
Pixel-Art von Tsukunajiro.
Ehehe.
Süß.
In Zukunft plane ich, nach und nach mehr spielerische Elemente hinzuzufügen.
Aufgrund der Notion-Integration können die Ladezeiten manchmal lang sein,
also nutzt es bitte, um die Zeit zu vertreiben.
Favicon, das sich jede Sekunde dreht
Ein Favicon ist das winzige Symbol, das auf Browser-Tabs angezeigt wird.
Ich konnte keine GIF-Animation registrieren, also zeige ich 10 PNG-Bilder im Abstand von einer Sekunde an.
Süß.
Auf Smartphones habe ich es als Menü-Button platziert.
Es schaut zurück, wenn man drauf tippt.
Bitte spielt auch auf dem Handy damit herum.
sirome.net
In insgesamt zwei Wochen produziert.
Also, ich bin froh, dass ich mich von Wix verabschieden konnte. Es ist schließlich teuer.
Ich habe es nach und nach in den späten Nächten und frühen Morgenstunden gebaut, und ehe ich mich versah, war es live.
KI … ich habe immer noch skeptische Gefühle, aber ich habe hautnah erlebt, dass sich die Welt komplett verändert hat.
Für die Generierung von Illustrationen möchte ich KI aufgrund rechtlicher Fragen noch nicht wirklich nutzen, aber
ich hoffe, mit KI im Design und bei der Kreation gut auszukommen, um interessante Dinge zu machen.
Bitte zögert nicht, mich für Arbeitsanfragen zu kontaktieren.
Außerdem möchte ich mich von nun an auf Arbeits-Credits und Archiv-Artikel konzentrieren,
jeden einzelnen mit Sorgfalt veröffentlichen.
Ich werde auch die Artikel, die derzeit auf sirome.net sind, nachträglich aktualisieren.
Jeder einzelne ist ein Werk, in das ich mein Herz gesteckt habe.
Dank euch allen konnte ich bis jetzt viele Bilder zeichnen,
und ich bin dankbar, dass ich auf diese Weise überlebe.
Es ist noch ein Work in Progress,
aber bitte unterstützt weiterhin Shiro, Melo und Aketa Rashiro!
Schaut euch die Seite an! Ich warte auf eure Eindrücke per Antwort oder DM ✨
Tech-Stack-Notizen
- Claude / Claude Code
- Next.js
- Notion API
- GitHub
- Vercel
- Sharp
Übrigens, diesen Artikel habe ich auch in Notion geschrieben.
Wenn es euch gefallen hat, teilt ihn bitte!
Aketa Rashiro
