[{"data":1,"prerenderedAt":316},["ShallowReactive",2],{"posts-de":3},[4,127],{"id":5,"title":6,"authors":7,"body":11,"cover":108,"date":109,"description":110,"draft":111,"extension":112,"featured":111,"key":113,"meta":114,"navigation":115,"path":116,"seo":117,"stem":118,"tools":119,"type":125,"__hash__":126},"postsDe\u002Fde\u002Fportfolio-neu-gebaut.md","Warum ich mein Portfolio neu gebaut habe",[8],{"id":9,"role":10},"janis","Webentwickler",{"type":12,"value":13,"toc":100},"minimark",[14,18,23,31,37,44,51,57,61,68,75,79,90,93,97],[15,16,17],"p",{},"Mein altes Portfolio war ein bisschen in die Jahre gekommen und streng genommen auch nie ganz fertig. Mit dem neuen Portfolio will ich probieren, etwas aktiver zu sein, die Seite aktuell zu halten und auch mal ein paar Blogbeiträge zu schreiben, auch wenn diese sehr wahrscheinlich nicht viele Leute zu Gesicht bekommen werden.",[19,20,22],"h2",{"id":21},"weniger-ist-mehr","Weniger ist mehr",[15,24,25,26,30],{},"Das Tolle am neuen Portfolio ist, was ich alles ",[27,28,29],"strong",{},"entfernen"," konnte.",[15,32,33,36],{},[27,34,35],{},"daisyUI"," ist raus. Stattdessen gibt es jetzt ein eigenes Theme, das alle Funktionen ersetzt, und so sehen alle Elemente genau so aus, wie ich es gerne habe. Geholfen hat mir dabei auch Claude Design.",[15,38,39,40,43],{},"Das ",[27,41,42],{},"i18n-Modul"," ist raus. Deutsch und Englisch laufen jetzt über ein eigenes kleines «Mini-i18n». Die Sprache steckt im URL-Präfix, die Texte liegen als typisiertes Objekt direkt im Code. Bei zwei Sprachen und wenig Text ist das viel schlanker als ein grosses Modul.",[15,45,46,47,50],{},"Und das ",[27,48,49],{},"Kontaktformular"," habe ich entfernt, mit Redis und allem. Grund dafür war massiver Spam, und der Nutzen war sowieso zu klein. Eine E-Mail-Adresse reicht völlig aus.",[52,53,54],"blockquote",{},[15,55,56],{},"Was nicht drin ist, kann auch nicht kaputtgehen.",[19,58,60],{"id":59},"was-gleich-geblieben-ist","Was gleich geblieben ist",[15,62,63,64,67],{},"Nuxt ist geblieben, jetzt in ",[27,65,66],{},"Version 4"," und somit wieder up to date. Die Seite wird beim Build komplett zu HTML gerendert und wird danach nur noch als fertige Dateien ausgeliefert. Kein Backend, keine Datenbank, fast nichts, was irgendwie ausfallen kann.",[15,69,70,71,74],{},"Der Blog besteht aus ganz normalen ",[27,72,73],{},"Markdown-Dateien"," im Repository. Für einen neuen Beitrag brauche ich also nur einen Commit und keine Datenbank. Und weil alles schon beim Build gerendert wird, bleibt die Seite trotzdem schnell.",[19,76,78],{"id":77},"design-und-umsetzung","Design und Umsetzung",[15,80,81,82,85,86,89],{},"Das Design ist in ",[27,83,84],{},"Claude Design"," entstanden. Ich habe mehrere Richtungen ausprobiert, bis mir etwas gefallen hat. Gebaut habe ich die Seite mithilfe von ",[27,87,88],{},"Claude Code",". Das hat vor allem die mühsamen Teile übernommen: Komponenten aus dem Entwurf herausziehen, beide Sprachen synchron halten und diverse Tests und Verbesserungen.",[15,91,92],{},"Die Entscheidungen habe ich aber selbst getroffen: was rausfliegt, was bleibt und wie viel Aufwand ein Feature wert ist. Genau deshalb ist die Seite am Ende so geworden, wie ich sie mir vorgestellt habe.",[19,94,96],{"id":95},"was-als-nächstes-kommt","Was als Nächstes kommt",[15,98,99],{},"Sobald ich wieder etwas habe, das sich zeigen lässt, kommen hier neue Projekte dazu. Und hoffentlich auch ab und zu ein Blogbeitrag.",{"title":101,"searchDepth":102,"depth":102,"links":103},"",2,[104,105,106,107],{"id":21,"depth":102,"text":22},{"id":59,"depth":102,"text":60},{"id":77,"depth":102,"text":78},{"id":95,"depth":102,"text":96},"\u002Fblog\u002Fportfolio-de.webp","2026-09-23","Weniger Abhängigkeiten, kein Backend und ein Blog, in dem ich meine Projekte und Gedanken vorstellen kann.",false,"md","portfolio-rebuild",{},true,"\u002Fde\u002Fportfolio-neu-gebaut",{"title":6,"description":110},"de\u002Fportfolio-neu-gebaut",[120,121,122,123,124,84,88],"Nuxt","Nuxt Content","Vue","Tailwind","TypeScript","project","2KmBRVB-XM_xAKpMEA5qhMFhA3VuAIDiqQxW_9wEyFY",{"id":128,"title":129,"authors":130,"body":139,"cover":302,"date":303,"description":304,"draft":111,"extension":112,"featured":115,"key":305,"meta":306,"navigation":115,"path":307,"seo":308,"stem":309,"tools":310,"type":125,"__hash__":315},"postsDe\u002Fde\u002Fmini-arcade-automat.md","Mini Arcade – Unser eigener Arcade-Automat",[131,133,136],{"id":9,"role":132},"Software",{"name":134,"role":135},"Luca","Gehäuse",{"name":137,"role":138},"Luka","Elektronik",{"type":12,"value":140,"toc":288},[141,144,155,171,175,182,185,192,197,208,212,219,231,235,238,241,247,251,262,265,268,271,278,282,285],[15,142,143],{},"Für unsere IDPA haben wir zu dritt einen eigenen Mini-Arcade-Automaten gebaut. Von der Elektronik über die Software bis zum Gehäuse haben wir alles selbst geplant und umgesetzt.",[15,145,146,147,150,151,154],{},"Das Besondere ist das Display. Statt eines normalen Bildschirms haben wir eine ",[27,148,149],{},"48 × 48 LED-Matrix mit 2'304 einzeln ansteuerbaren RGB-LEDs"," verwendet, gesteuert von einem ",[27,152,153],{},"Raspberry Pi Pico 2 W",". Darauf laufen mehrere Spiele direkt auf der Hardware.",[52,156,157],{},[15,158,159,160,170],{},"Der ganze Quellcode ist auf ",[161,162,169],"a",{"href":163,"rel":164,"target":168},"https:\u002F\u002Fgithub.com\u002FJanisArnold\u002Farcade-idpa",[165,166,167],"nofollow","noopener","noreferrer","_blank","GitHub"," zu finden.",[19,172,174],{"id":173},"das-system","Das System",[15,176,177,178,181],{},"Das Projekt besteht aus drei Teilen: ",[27,179,180],{},"Elektronik, Software und Gehäuse",". Ich habe mich um die Software gekümmert, Luca um das Gehäuse und Luka um die Elektronik. Die Elektronik verbindet den Mikrocontroller mit Display, Tasten und Lautsprechern. Die Software verarbeitet die Eingaben und zeichnet Menü und Spiele. Und das Gehäuse bringt am Ende alles zusammen.",[19,183,132],{"id":184},"software",[15,186,187,188,191],{},"Die Software ist das Herzstück des Automaten. Anstatt für jedes Spiel ein eigenes Programm zu schreiben, haben wir ein kleines ",[27,189,190],{},"Arcade-Betriebssystem"," gebaut. Beim Einschalten startet direkt das Hauptmenü, und von dort aus lässt sich alles mit Joystick und Tasten bedienen.",[193,194,196],"h3",{"id":195},"spiele","Spiele",[15,198,199,200,203,204,207],{},"Mit dabei sind unter anderem ",[27,201,202],{},"Snake"," und ",[27,205,206],{},"Space Invaders",". Bei Snake steuert man die Schlange mit den Richtungstasten, bei Space Invaders bewegt man das Raumschiff und schiesst mit der A-Taste. Die Steuerung funktioniert dabei gleich wie im Menü. Die kleine Auflösung ist kein Nachteil, sondern gehört zum Look. Die Spiele sind extra für 48 × 48 Pixel gemacht.",[193,209,211],{"id":210},"menü-einstellungen-und-sound","Menü, Einstellungen und Sound",[15,213,214,215,218],{},"In der ",[27,216,217],{},"Settings-App"," kann man direkt am Gerät Helligkeit, Lautstärke und Sound einstellen, den Entwicklungsmodus einschalten oder alles zurücksetzen. Einstellungen und Highscores bleiben auch nach einem Neustart gespeichert.",[15,220,221,222,226,227,230],{},"Soundeffekte gibt es auch. Ein Schuss, ein Treffer oder wenn die Schlange etwas frisst, löst ein Event wie ",[223,224,225],"code",{},"snake_eat"," oder ",[223,228,229],{},"space_invaders_player_shoot"," aus. Abgespielt wird der Sound von einem zentralen Audio-Service. So müssen die Spiele selbst nichts von der Audio-Hardware wissen.",[193,232,234],{"id":233},"entwicklungsmodus","Entwicklungsmodus",[15,236,237],{},"Für die Entwicklung gibt es einen versteckten Modus mit Testprogrammen für Eingaben, Sprites, Schriftarten und Audio. So konnten wir einzelne Teile direkt auf der echten Hardware testen, ohne die normale Oberfläche damit vollzustopfen.",[19,239,138],{"id":240},"elektronik",[15,242,243,244,246],{},"Im Zentrum steht der ",[27,245,153],{},". Er steuert das Display, verarbeitet die Eingaben und lässt Software und Spiele laufen. Das Display besteht aus 2'304 WS2812-LEDs, die auf mehrere Datensegmente aufgeteilt sind, damit nicht alle über eine einzige Leitung laufen müssen. Wie die Matrix intern verdreht ist, korrigiert die Software an einer zentralen Stelle. Die Spiele müssen sich also nicht darum kümmern. Hinter dem Display und im Gehäuse stecken ausserdem die Stromversorgung, die Audio-Hardware und ziemlich viele Kabel.",[193,248,250],{"id":249},"bedienung-audio-strom-und-kühlung","Bedienung, Audio, Strom und Kühlung",[15,252,253,254,257,258,261],{},"Bedient wird der Automat über einen ",[27,255,256],{},"Joystick"," mit vier Richtungen und ",[27,259,260],{},"sechs Tasten",". Eine Tastatur oder einen Controller braucht man also nicht. Für den Sound gibt es ein I2S-Audiosystem mit DACs und zwei Lautsprechern. Das ist bewusst für kurze Effekte gedacht und nicht für ganze Musikstücke.",[15,263,264],{},"Die LED-Matrix braucht viel mehr Strom als der Rest und hat deshalb eine eigene, stärkere Stromversorgung. Dazu kommt eine aktive Kühlung im Gehäuse. Zusätzlich kann man die Helligkeit in der Software begrenzen, was Stromverbrauch und Wärme reduziert.",[19,266,135],{"id":267},"gehäuse",[15,269,270],{},"Damit aus der Elektronik ein richtiger Automat wird, musste auch das Gehäuse passen. Display, Elektronik, Lautsprecher, Lüfter und Tasten sollten möglichst kompakt darin Platz finden.",[15,272,273,274,277],{},"Vor der LED-Matrix sitzt ein selbst gefertigtes ",[27,275,276],{},"Gitter",", das die einzelnen LEDs voneinander trennt. So entsteht der typische Pixel-Look. Die Tasten sind direkt ins Gehäuse eingebaut, und man kommt gut an alles heran, obwohl innen für Elektronik und Luftzirkulation nur wenig Platz ist.",[19,279,281],{"id":280},"das-ergebnis","Das Ergebnis",[15,283,284],{},"Am Ende ist aus vielen einzelnen Teilen ein eigenständiger Mini-Arcade geworden. Man schaltet ihn ein, landet direkt im Hauptmenü und kann mit Joystick und Tasten losspielen. Das Bild kommt von der LED-Matrix, der Sound aus den eingebauten Lautsprechern.",[15,286,287],{},"Spannend war vor allem, dass am Ende nicht nur ein Programm oder eine Schaltung entstanden ist, sondern ein ganzes Gerät. Programmierung, Elektronik, 3D-Konstruktion und Fertigung mussten alle zusammenpassen, damit das funktioniert.",{"title":101,"searchDepth":102,"depth":102,"links":289},[290,291,297,300,301],{"id":173,"depth":102,"text":174},{"id":184,"depth":102,"text":132,"children":292},[293,295,296],{"id":195,"depth":294,"text":196},3,{"id":210,"depth":294,"text":211},{"id":233,"depth":294,"text":234},{"id":240,"depth":102,"text":138,"children":298},[299],{"id":249,"depth":294,"text":250},{"id":267,"depth":102,"text":135},{"id":280,"depth":102,"text":281},"\u002Fblog\u002Fmini_arcade.webp","2026-05-04","Für unsere IDPA haben wir zu dritt einen Arcade-Automaten gebaut, mit einer 48×48-LED-Matrix, einem kleinen eigenen Betriebssystem und einem selbst gebauten Gehäuse.","mini-arcade-automat",{},"\u002Fde\u002Fmini-arcade-automat",{"title":129,"description":304},"de\u002Fmini-arcade-automat",[153,311,312,313,314],"MicroPython","C\u002FC++","WS2812","I2S","I-OJEpqFlNJ7PLgFqMHjfcoM6GOUBOofBuF1byIAfdo",1790166521210]