[{"data":1,"prerenderedAt":1346},["ShallowReactive",2],{"featured-work-manual":3},[4,42,138,199,310,373,487,592,769,925,1022,1206],{"id":5,"title":6,"body":7,"client":18,"date":19,"description":20,"extension":21,"featured":22,"features":23,"image":30,"image_transparency":31,"links":32,"meta":33,"navigation":22,"path":34,"seo":35,"stem":36,"types":37,"url":32,"__hash__":41},"portfolio\u002Fportfolio\u002Fb2b-ai-agent-frontend.md","B2B AI Agent Frontend",{"type":8,"value":9,"toc":14},"minimark",[10],[11,12,13],"p",{},"TIQ.solutions asked me if I could create a frontend-concept, design and the implementation of their new emerging B2B AI agents chat platform.\nTIQ creates their own network of specific LLM implementations that analyze the customers data and generate outputs via other specialized LLMs depending what the user wants to achieve as an output. There could be a combination of statistics, analytics, a blog post article writing agent or a simple company agent that can help other employees summarizing company specific data at a glance. The client provides the necessary APIs (for calendars, documents, other shares or static documents) and TIQ implements them into a regularly trained model. The tokens a company uses get logged so it's possible to charge them by usage.\nThe backend for the frontend is done in Python, pydantic and FastAPI. The chats, user data and everything app specific is saved in a PostgreSQL database.\nThe frontend is created in NuxtJS \u002F Vue, TypeScript and SCSS. Every UI item is a proper reactive component and the whole app is responsively optimized for all screen sizes.\nLike we know it from other web apps we have a sidebar on the left with all the chats, user settings, favourites and the history of previous chats.\nThe chat view itself has an additional top bar that contains the main information about the current conversation (current files within the context, agent information and additional functionality).\nWe have proper user management, with registration, login and refresh tokens. Companies can manage their employees (and tokens) on their own and also chose who can access a specific model via a company admin panel.\nThe latest changes we implemented is streaming. Like we know it from other AI frontends the different LLMs within a pipeline give proper feedback while they all work together on their tasks and when one output gets passed to the next LLM.\nSadly I cannot give you a direct link to the deployment but I would be happy to give a live demo via screen sharing.",{"title":15,"searchDepth":16,"depth":16,"links":17},"",2,[],"TIQ.solutions","2025","A B2B AI agents chat platform.","md",true,[24,25,26,27,28,29],"Vue","Nuxt","TypeScript","SCSS","PostgreSQL","FastAPI","\u002Fportfolio\u002Fb2b-ai-agent-frontend\u002Fmain-visual-glass.png",false,null,{},"\u002Fportfolio\u002Fb2b-ai-agent-frontend",{"title":6,"description":20},"portfolio\u002Fb2b-ai-agent-frontend",[38,39,40],"Web App","Art Direction & Design","UI\u002FUX","cI6hTFc5fydUb5VIPDIXsh5nY3jTAME9Y3FUk4afxNQ",{"id":43,"title":44,"body":45,"client":117,"date":118,"description":119,"extension":21,"featured":22,"features":120,"image":126,"image_transparency":31,"links":127,"meta":130,"navigation":22,"path":131,"seo":132,"stem":133,"types":134,"url":32,"__hash__":137},"portfolio\u002Fportfolio\u002Fbfw-website-2026.de.md","BFW Berlin Brandenburg e.V. Relaunch (2026)",{"type":8,"value":46,"toc":112},[47,52,55,59,62,97,101],[48,49,51],"h2",{"id":50},"die-herausforderung","Die Herausforderung",[11,53,54],{},"Als äußerst etablierte und vertrauenswürdige Bildungseinrichtung für berufliche Rehabilitation in Berlin und Brandenburg stand das Berufsförderungswerk vor einem entscheidenden digitalen Wendepunkt. Ihr umfangreicher Katalog an Umschulungsprogrammen, Qualifikationen und regionalen Kontaktstrukturen war über das bisherige Content-Management-System hinausgewachsen. Benötigt wurde mehr als nur eine einfache Website; es bedurfte einer modernen, hochgradig skalierbaren Webanwendung, die in der Lage ist, komplexe relationale Daten zu verarbeiten und gleichzeitig einem diversen Nutzerkreis eine barrierefreie und intuitive Benutzererfahrung zu bieten.",[48,56,58],{"id":57},"ansatz-aufbau-eines-skalierbaren-fundaments","Ansatz: Aufbau eines skalierbaren Fundaments",[11,60,61],{},"Die Konzeption eines robusten, auf Langlebigkeit und Skalierbarkeit ausgelegten digitalen Ökosystems wurde zum primären Ziel. Abseits von starren Templates wurde eine vollständig maßgeschneiderte Enterprise-Lösung entwickelt, um sowohl die Endnutzererfahrung als auch die internen redaktionellen Abläufe zu optimieren.",[63,64,65,73,79,85,91],"ul",{},[66,67,68,72],"li",{},[69,70,71],"strong",{},"Enterprise Monorepo-Architektur:"," Die Entwicklung eines hochmodernen Monorepo-Setups etablierte einen zentralen Logik-Hub. Diese leistungsstarke Kerncodebasis treibt die Hauptplattform des BFW an und stellt gleichzeitig die zentralisierte Infrastruktur, Sicherheit und Funktionsupdates für Nebenprojekte bereit – was absolute Konsistenz in der gesamten digitalen Landschaft gewährleistet.",[66,74,75,78],{},[69,76,77],{},"Komplexes Kursmanagement & Routing:"," Zur Verwaltung des riesigen Bildungsangebots des BFW wurde ein tief integriertes, relationales Datenmodell aufgebaut. Das Custom-Backend ermöglicht es dem Redaktionsteam, komplexe Angebotsdetails – von wiederkehrenden Terminen und Fördermöglichkeiten bis hin zu lokalisierten Ansprechpartnern – mühelos zu verwalten, ohne eine Zeile Code anfassen zu müssen.",[66,80,81,84],{},[69,82,83],{},"Intelligentes Frontend-Filtering:"," Im Frontend werden diese komplexen Daten in eine schnelle Echtzeit-Filter-Engine destilliert. Nutzer können Beginntermine nach Berufsfeld, Standort (Berlin-Charlottenburg, Mühlenbeck, Potsdam) und Fördermöglichkeit – etwa AVGS, Berufliche Rehabilitation (LTA) oder Bildungsgutschein – eingrenzen und erhalten sofort passende Ergebnisse.",[66,86,87,90],{},[69,88,89],{},"Integrierte Conversion-Workflows:"," Das Design und die Entwicklung eines kontextbezogenen Anfrage-Systems reduzierten den administrativen Aufwand drastisch. Anmeldungen zu Infotagen und Info-Veranstaltungen werden automatisch mit dem jeweiligen Angebot verknüpft und an die zuständigen Ansprechpartner weitergeleitet.",[66,92,93,96],{},[69,94,95],{},"Kompromisslose Barrierefreiheit:"," Die Bedienung einer diversen Zielgruppe, insbesondere in der beruflichen Rehabilitation, machte strenge Barrierefreiheit unabdingbar. Neben einer kontrastreichen Benutzeroberfläche und Tastaturnavigation bietet ein eigenes Barrierefreiheits-Panel eine anpassbare Textgröße sowie eine maßgeschneiderte Vorlesefunktion mit einstellbarer Geschwindigkeit, mit der sich jeder Nutzer die Inhalte auf Wunsch vorlesen lassen kann.",[48,98,100],{"id":99},"das-ergebnis","Das Ergebnis",[11,102,103,104,111],{},"Seit August 2026 ist die neue Website live unter ",[105,106,110],"a",{"href":107,"rel":108},"https:\u002F\u002Fwww.bfw-berlin-brandenburg.de",[109],"nofollow","bfw-berlin-brandenburg.de",". Die Transformation der digitalen Präsenz des BFW führte zu einer leistungsstarken, zukunftssicheren Plattform. Die neue Webanwendung spiegelt nicht nur ihre etablierte Autorität in der Region Berlin-Brandenburg wider, sondern bietet auch die skalierbare, zuverlässige Infrastruktur, die für die problemlose Verwaltung komplexer Bildungsangebote erforderlich ist.",{"title":15,"searchDepth":16,"depth":16,"links":113},[114,115,116],{"id":50,"depth":16,"text":51},{"id":57,"depth":16,"text":58},{"id":99,"depth":16,"text":100},"BFW Berlin Brandenburg e.V.","2026","Relaunch der Website des Berufsförderungswerks Berlin-Brandenburg – live seit August 2026",[121,122,27,123,124,125],"Wordpress","ES6 JavaScript","Webpack","PHP","Docker","\u002Fportfolio\u002Fbfw-website-2026\u002Fbfw-2026-glass.webp",[128],{"title":129,"url":107},"BFW Berlin-Brandenburg Website",{},"\u002Fportfolio\u002Fbfw-website-2026.de",{"title":44,"description":119},"portfolio\u002Fbfw-website-2026.de",[135,136,40,39],"Website","Web Development","pWoL0Hs91JTE0bMddgDzSJR4ZIHk3TpqTiYziZTtmVQ",{"id":139,"title":140,"body":141,"client":184,"date":185,"description":186,"extension":21,"featured":22,"features":187,"image":188,"image_transparency":31,"links":189,"meta":193,"navigation":22,"path":194,"seo":195,"stem":196,"types":197,"url":32,"__hash__":198},"portfolio\u002Fportfolio\u002Fhansen-heinrich.md","Hansen & Heinrich",{"type":8,"value":142,"toc":178},[143,147,150,153,158],[48,144,146],{"id":145},"strategic-digital-presence","Strategic Digital Presence",[11,148,149],{},"As the Digital Lead at Foundry Berlin, I architected and developed the corporate website for Hansen & Heinrich, a premier independent asset management firm. The project demanded a balance of high-end aesthetic precision and robust technical reliability to reflect their values: personal, independent, and holistic.",[11,151,152],{},"I designed and built a bespoke WordPress ecosystem from the ground up, consciously moving away from bloated page builders to a custom-engineered block editing experience. This approach ensures strict design compliance while providing the client's team with an intuitive, zero-code interface for content management.",[154,155,157],"h3",{"id":156},"key-technical-achievements","Key Technical Achievements",[63,159,160,166,172],{},[66,161,162,165],{},[69,163,164],{},"Bespoke Block Editing Experience",": Engineered a custom block system that abstracts complex layouts into simple, foolproof input fields. This empowers the marketing team and editors to build rich, consistent pages without risking design integrity or requiring any HTML\u002FCSS knowledge.",[66,167,168,171],{},[69,169,170],{},"High-Performance Frontend",": Developed a lightweight custom theme using SCSS and ES6 JavaScript. The architecture prioritizes speed and SEO, ensuring a smooth user experience across all devices.",[66,173,174,177],{},[69,175,176],{},"Robust DevOps & Automation",": Established a fully containerized Docker development environment. Custom automation scripts took care of seamless database syncing, plugin management, and atomic deployments, ensuring absolute consistency between local development and production environments.",{"title":15,"searchDepth":16,"depth":16,"links":179},[180],{"id":145,"depth":16,"text":146,"children":181},[182],{"id":156,"depth":183,"text":157},3,"Foundry Berlin","2023","Hansen & Heinrich website.",[121,122,125,27,124],"\u002Fportfolio\u002Fhansen-heinrich\u002Fglass_mockup.png",[190],{"title":191,"url":192},"Hansen & Heinrich Website","https:\u002F\u002Fwww.hansen-heinrich.de",{},"\u002Fportfolio\u002Fhansen-heinrich",{"title":140,"description":186},"portfolio\u002Fhansen-heinrich",[135,136],"k2YX0AFl-a_cu3HQ3xmIgN9mLDTZ-KEfFiB3LmKouso",{"id":200,"title":201,"body":202,"client":278,"date":118,"description":285,"extension":21,"featured":22,"features":286,"image":295,"image_transparency":31,"links":296,"meta":301,"navigation":22,"path":302,"seo":303,"stem":304,"types":305,"url":32,"__hash__":309},"portfolio\u002Fportfolio\u002Fhypha.md","hypha",{"type":8,"value":203,"toc":280},[204,206,209,212,216,219,263,265],[48,205,51],{"id":50},[11,207,208],{},"Notizen gehören zu den persönlichsten Daten überhaupt – trotzdem liegen sie bei den meisten Apps auf den Servern eines Anbieters, hinter einem Account und einem Abo. Für hypha stand deshalb eine klare Frage am Anfang: Lässt sich eine vollwertige Notiz-App bauen, die auf mehreren Geräten synchron bleibt, gemeinsames Arbeiten erlaubt und trotzdem ohne Cloud, ohne Account und ohne Server eines Dritten auskommt?",[11,210,211],{},"Die Antwort darauf musste technisch belastbar und gleichzeitig im Alltag unsichtbar sein. Wer Notizen schreibt, will sich nicht mit Schlüsseln, Peers oder Konflikten beschäftigen.",[48,213,215],{"id":214},"ansatz-eine-eigene-sync-engine-und-ein-interface-aus-einem-guss","Ansatz: Eine eigene Sync-Engine und ein Interface aus einem Guss",[11,217,218],{},"Konzept, Interface-Design und die vollständige technische Umsetzung habe ich selbst übernommen – vom ersten Datenmodell bis zur Website.",[63,220,221,227,233,239,245,251,257],{},[66,222,223,226],{},[69,224,225],{},"Local-First und Ende-zu-Ende verschlüsselt:"," Jede Notiz wird auf dem Gerät verschlüsselt, bevor sie es verlässt. Die Schlüssel werden aus einer einzigen Passphrase abgeleitet und existieren nur auf den eigenen Geräten.",[66,228,229,232],{},[69,230,231],{},"Peer-to-Peer-Synchronisation:"," Im selben WLAN finden sich Geräte selbstständig und synchronisieren direkt. Über das Internet treffen sie sich über eine verteilte Hashtabelle und verbinden sich Ende-zu-Ende. Für Geräte, die nie gleichzeitig online sind, gibt es einen optionalen Relay, der per Docker oder systemd auf eigener Hardware läuft und ausschließlich verschlüsselte Daten weiterreicht.",[66,234,235,238],{},[69,236,237],{},"Konfliktfreies Zusammenführen:"," Änderungen von mehreren Geräten oder Personen werden über CRDTs (Yjs) zusammengeführt – ohne Konfliktdialoge.",[66,240,241,244],{},[69,242,243],{},"Ein Editor für mehr als Text:"," Der Rich-Text-Editor auf Basis von TipTap unterstützt Überschriften, Aufgaben mit Fälligkeitsdatum, Tabellen, Code, Callouts, Bilder, PDFs und Whiteboards. Notiztypen wie Rezept, Buch, Projekt oder Meeting bringen eigene Eigenschaften mit und lassen sich als Tabelle, Board oder Kalender ansehen.",[66,246,247,250],{},[69,248,249],{},"Suche nach Bedeutung, komplett lokal:"," Neben der Volltextsuche findet hypha Notizen auch nach ihrer Bedeutung. Das Embedding-Modell läuft direkt auf dem Gerät, keine Notiz verlässt es dafür. Eine Karte zeigt, wie Notizen miteinander verknüpft sind.",[66,252,253,256],{},[69,254,255],{},"Gemeinsame Vaults:"," Vaults lassen sich mit anderen Personen teilen, inklusive Vault-Chat, Kommentaren an Textstellen und Rollen für Owner, Member und Relay.",[66,258,259,262],{},[69,260,261],{},"Eine Codebasis, mehrere Plattformen:"," Editor, UI-Komponenten und Theme liegen als gemeinsame Pakete in einem Monorepo und werden von der Desktop-App (Electron, Vue 3) und der iPhone- und iPad-App gleichermaßen genutzt.",[48,264,100],{"id":99},[11,266,267,268,273,274,279],{},"hypha läuft auf macOS, Windows, Linux, iPhone und iPad, ist kostenlos und befindet sich in der öffentlichen Beta. Importe aus Obsidian, Markdown-Ordnern und Standard Notes erleichtern den Umstieg, Exporte als Markdown, PDF oder verschlüsseltes Backup halten die Daten jederzeit portabel. Die zweisprachige Website ",[105,269,272],{"href":270,"rel":271},"https:\u002F\u002Fhypha.miniml.net",[109],"hypha.miniml.net"," habe ich ebenfalls gestaltet und entwickelt. Vertrieben wird hypha über ",[105,275,278],{"href":276,"rel":277},"https:\u002F\u002Fminiml.net",[109],"miniml",".",{"title":15,"searchDepth":16,"depth":16,"links":281},[282,283,284],{"id":50,"depth":16,"text":51},{"id":214,"depth":16,"text":215},{"id":99,"depth":16,"text":100},"Local-First Notiz-App mit Ende-zu-Ende-Verschlüsselung und Peer-to-Peer-Sync – ohne Account, ohne Server.",[287,26,288,289,290,291,292,293,294],"Vue 3","Electron","iOS \u002F iPadOS","Yjs (CRDT)","Hyperswarm P2P","libsodium","SQLite","On-Device-Embeddings","\u002Fportfolio\u002Fhypha\u002Fhypha-glass.webp",[297,298],{"title":272,"url":270},{"title":299,"url":300},"GitHub","https:\u002F\u002Fgithub.com\u002Fmarcolaux\u002Fhypha",{},"\u002Fportfolio\u002Fhypha",{"title":201,"description":285},"portfolio\u002Fhypha",[306,307,40,39,308],"App","Local-First","Development","TUJ7CpAwhRJfCm8OVTlEVUzI3IHKA0ACMbFAYPJdwho",{"id":311,"title":312,"body":313,"client":184,"date":359,"description":360,"extension":21,"featured":22,"features":361,"image":362,"image_transparency":31,"links":363,"meta":366,"navigation":22,"path":367,"seo":368,"stem":369,"types":370,"url":32,"__hash__":372},"portfolio\u002Fportfolio\u002Fivest.md","i-vest blog",{"type":8,"value":314,"toc":354},[315,319,330,333,335],[48,316,318],{"id":317},"strategic-financial-literacy-platform","Strategic Financial Literacy Platform",[11,320,321,322,325,326,329],{},"I developed ",[69,323,324],{},"i-vest"," as a strategic content hub for ",[69,327,328],{},"Alpian",", Switzerland's first digital private bank. The platform serves as a primary engine for organic acquisition (SEO) and brand authority, delivering high-quality financial education through articles, podcasts, and masterclasses (e.g., SHEWEALTH).",[11,331,332],{},"To support this high-volume publishing strategy, I architected a bespoke WordPress environment that prioritizes performance, security, and ease of use.",[154,334,157],{"id":156},[63,336,337,343,348],{},[66,338,339,342],{},[69,340,341],{},"Enterprise-Grade WordPress Architecture",": Built a custom, stripped-down theme that eliminates bloat, resulting in exceptional Core Web Vitals scores and lightning-fast load times critical for SEO.",[66,344,345,347],{},[69,346,164],{},": Implemented a rigid, custom block system that enforces design consistency. This allows the editorial team to compose complex, visually rich articles without touching a single line of code or breaking the layout.",[66,349,350,353],{},[69,351,352],{},"DevOps & CI\u002FCD Parity",": Engineered a containerized Docker ecosystem ensuring strict parity between local development and production. Custom automation scripts handle database syncing, asset deployment, and environment cloning, streamlining the entire development lifecycle.",{"title":15,"searchDepth":16,"depth":16,"links":355},[356],{"id":317,"depth":16,"text":318,"children":357},[358],{"id":156,"depth":183,"text":157},"2020","i-vest blog by Alpian.",[121,122,125,27,124],"\u002Fportfolio\u002Fivest\u002Fglass_mockup.png",[364],{"title":312,"url":365},"https:\u002F\u002Fwww.blog.alpian.com\u002F",{},"\u002Fportfolio\u002Fivest",{"title":312,"description":360},"portfolio\u002Fivest",[135,136,371],"UX","RP6Dlf0l_-qML_7-uoL9Aiaz-CRgTAkjZ7f7jG_japM",{"id":374,"title":375,"body":376,"client":18,"date":476,"description":477,"extension":21,"featured":22,"features":478,"image":480,"image_transparency":31,"links":32,"meta":481,"navigation":22,"path":482,"seo":483,"stem":484,"types":485,"url":32,"__hash__":486},"portfolio\u002Fportfolio\u002Flaw-firm-document-automation.md","Law Firm Document Automation",{"type":8,"value":377,"toc":470},[378,382,385,389,392,395,398,402,409,416,419,425,428,434,437,443,449,455,461,464],[48,379,381],{"id":380},"description","Description",[11,383,384],{},"I received a contract to help bring a project to a new level. The initial implementation was a specialized app for a single firm and was in a poor state. I was tasked with transforming it into a generalized product that could be offered to other law firms. Due to the sensitive nature of the project, I cannot display screenshots of the first iteration.",[154,386,388],{"id":387},"about-the-projects-requirements","About the projects requirements",[11,390,391],{},"The client specializes in traffic accident cases, which follow a consistent workflow. The firm receives various documents related to a case and needs to generate an initial claim letter, which is largely standardized. The system must then support the creation of subsequent letters based on the information gathered.",[11,393,394],{},"The core pipeline processes all incoming documents (currently via email) using LLMs and OCRs to extract relevant values and identifiers. This extracted data is stored in a database, and the system flags any errors or inconsistencies that require human review.",[11,396,397],{},"The frontend presents these extracted values to the user in a clear interface, allowing them to verify and correct the data against the original documents. Visual indicators highlight any issues that need attention.\nThe user can now see all the extracted values in the frontend, checks them against the documents (visually presented) and can correct them if needed.",[154,399,401],{"id":400},"about-the-new-implementation","About the new implementation",[11,403,404,405,408],{},"The first steps of mine included to conceptualize and re-design the frontend from scratch based on the (also partially new) requirements. A lot of the features you can see in the figma document are also already implemented.",[406,407],"br",{},"\nThe user can see all the cases in a table that is sortable and searchable. The table indicates if the pipeline stumbled upon some errors or inconsistencies.",[11,410,411],{},[412,413],"img",{"alt":414,"src":415},"The inbox — a sortable, searchable document table with status indicators for pipeline errors and inconsistencies.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F01_inbox.png",[11,417,418],{},"The user can see all the corresponding documents and where they came from (uploaded via the app or if it came in via E-Mail).",[11,420,421],{},[412,422],{"alt":423,"src":424},"Document preview with file metadata, email origin info, and processing status in the sidebar.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F02_preview.png",[11,426,427],{},"The user can view all the identifiers and extracted values while also being able to overwrite them if needed. It will be possible to click on those bounding boxes so the sidebar directly jumps to the corresponding extracted values (and vice versa).",[11,429,430],{},[412,431],{"alt":432,"src":433},"Side-by-side view of the original document and the LLM-extracted values, with bounding boxes highlighting matched fields and warnings for inconsistencies.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F03_extractions.png",[11,435,436],{},"When a new document goes through the pipeline the so called \"Schadentabelle\" gets generated as well. This always contains the current financial positions, what is claimed, what is already payed and what is still open. This is kept up to date automatically while the user also can manipulate those values within the frontend.",[11,438,439],{},[412,440],{"alt":441,"src":442},"Case detail view showing the full email history, linked documents, and the automatically maintained Schadentabelle.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F04_email_history.png",[11,444,445,446,448],{},"The next step for the employee of the law firm would be to create the first claim letter. For this they can create templates that are based on blocks. Blocks end editors can contain placeholders for the previously extracted identifiers and values so they get filled in automatically when the document is generated for a specific case.",[406,447],{},"\nThe editor is implemented via the Quill Editor library.",[11,450,451],{},[412,452],{"alt":453,"src":454},"The letter editing view — extracted case values are available in the right-hand panel and are automatically injected into the rendered document.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F05_document_editing.png",[11,456,457],{},[412,458],{"alt":459,"src":460},"Template builder with a block-based editor. Each block can include placeholder tokens that are resolved against the case's extracted data at generation time.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F06_blocks.png",[11,462,463],{},"The system is built as a multi-tenant product from the ground up. Each law firm operates in its own isolated tenant environment, configurable via the admin panel — including database connections, email intake settings, and access restrictions.",[11,465,466],{},[412,467],{"alt":468,"src":469},"Administration panel for managing tenants, including database, email, and case-access configuration per firm.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F07_settings.png",{"title":15,"searchDepth":16,"depth":16,"links":471},[472],{"id":380,"depth":16,"text":381,"children":473},[474,475],{"id":387,"depth":183,"text":388},{"id":400,"depth":183,"text":401},"2024","Automating document creation for law firms.",[24,25,26,27,479,29],"Python","\u002Fportfolio\u002Flaw-firm-document-automation\u002Fmain-visual-glass.png",{},"\u002Fportfolio\u002Flaw-firm-document-automation",{"title":375,"description":477},"portfolio\u002Flaw-firm-document-automation",[38,39],"IW7yBw2eoZBAXz7C1cqvB3yI7cn6qnp3ABmqgTWlGIw",{"id":488,"title":489,"body":490,"client":278,"date":118,"description":570,"extension":21,"featured":22,"features":571,"image":580,"image_transparency":31,"links":581,"meta":585,"navigation":22,"path":586,"seo":587,"stem":588,"types":589,"url":32,"__hash__":591},"portfolio\u002Fportfolio\u002Fmountie.md","mountie",{"type":8,"value":491,"toc":565},[492,494,497,500,504,507,550,552],[48,493,51],{"id":50},[11,495,496],{},"Wer mit eigenem Speicher arbeitet – einem NAS zu Hause, einem selbst gehosteten Server oder einem S3-Bucket – kennt das Problem unter macOS: Netzlaufwerke müssen von Hand eingehängt werden, verschwinden nach dem Ruhezustand und bringen den Finder ins Stocken, sobald der Server nicht mehr antwortet. Bestehende Werkzeuge verlangen oft Admin-Rechte, Kernel-Erweiterungen oder FUSE.",[11,498,499],{},"Gesucht war ein kleines Werkzeug, das Freigaben genau dann einhängt, wenn sie erreichbar sind, und sie sauber wieder loslässt, wenn nicht – ohne sudo und ohne das System anzufassen.",[48,501,503],{"id":502},"ansatz-native-macos-app-mit-kontext-bewusstsein","Ansatz: Native macOS-App mit Kontext-Bewusstsein",[11,505,506],{},"Konzept, Interface und Entwicklung stammen vollständig von mir. mountie ist eine native Swift- und SwiftUI-App, die in der Menüleiste und in einem kompakten Fenster lebt.",[63,508,509,515,521,527,533,539],{},[66,510,511,514],{},[69,512,513],{},"Ohne Admin-Passwort:"," Freigaben werden über NetFS eingehängt – dieselbe API, die auch der Finder nutzt. Alles läuft im Kontext des Benutzers, nichts wird systemweit installiert.",[66,516,517,520],{},[69,518,519],{},"NFS, SMB, WebDAV und S3:"," Für S3 liefert mountie rclone mit, das den Bucket lokal als NFS bereitstellt – ohne FUSE und ohne sudo. Zugangsschlüssel liegen ausschließlich im macOS-Schlüsselbund.",[66,522,523,526],{},[69,524,525],{},"Automatisches Einhängen mit Bedingungen:"," Pro Freigabe lässt sich festlegen, wann sie gilt: nur in bekannten WLANs, nur bei aktivem Tailscale – auf Wunsch beschränkt auf ein bestimmtes Tailnet – oder bei beidem. Vor dem Einhängen prüft mountie, ob die Freigabe wirklich bereit ist, nicht nur, ob der Port antwortet.",[66,528,529,532],{},[69,530,531],{},"Robust gegenüber toten Servern:"," Antwortet ein Server nicht mehr, markiert mountie die Freigabe als „antwortet nicht“ und bietet ein erzwungenes Aushängen an, statt die App einzufrieren. Jeder Aushänge-Versuch ist zeitlich begrenzt, Prüfungen laufen in einem separaten Hilfsprozess.",[66,534,535,538],{},[69,536,537],{},"Finder-nativ:"," Eingehängte Freigaben erscheinen automatisch in der Finder-Seitenleiste, benannt nach der Freigabe, und verschwinden beim Aushängen wieder.",[66,540,541,544,545,549],{},[69,542,543],{},"Kommandozeile und Updates:"," Ein mitgeliefertes CLI (",[546,547,548],"code",{},"mountiectl",") steuert Freigaben aus dem Terminal. Signierte Builds sind von Apple notarisiert und aktualisieren sich über Sparkle selbst.",[48,551,100],{"id":99},[11,553,554,555,558,559,564],{},"mountie ist kostenlos für macOS 14 und neuer erhältlich und wird über ",[105,556,278],{"href":276,"rel":557},[109]," vertrieben. Die zweisprachige Produktseite ",[105,560,563],{"href":561,"rel":562},"https:\u002F\u002Fmountie.miniml.net",[109],"mountie.miniml.net"," habe ich ebenfalls gestaltet und entwickelt.",{"title":15,"searchDepth":16,"depth":16,"links":566},[567,568,569],{"id":50,"depth":16,"text":51},{"id":502,"depth":16,"text":503},{"id":99,"depth":16,"text":100},"Native macOS-App, die Netzlaufwerke automatisch ein- und aushängt – bedingungsgesteuert, Finder-nativ und ohne Admin-Rechte.",[572,573,574,575,576,577,578,579],"Swift","SwiftUI","NetFS","CoreWLAN","Network.framework","rclone","Sparkle","zsh CLI","\u002Fportfolio\u002Fmountie\u002Fmountie-glass.webp",[582,583],{"title":563,"url":561},{"title":299,"url":584},"https:\u002F\u002Fgithub.com\u002Fmarcolaux\u002Fmountie-macos",{},"\u002Fportfolio\u002Fmountie",{"title":489,"description":570},"portfolio\u002Fmountie",[306,590,40,39,308],"macOS","jBJ8mYUfx9U9JjZQsdvfvxHFcb5FW5zywbr1gXXQTQg",{"id":593,"title":594,"body":595,"client":759,"date":185,"description":760,"extension":21,"featured":22,"features":761,"image":762,"image_transparency":31,"links":32,"meta":763,"navigation":22,"path":764,"seo":765,"stem":766,"types":767,"url":32,"__hash__":768},"portfolio\u002Fportfolio\u002Fper-website-2023.md","P.E.R. Website (2023)",{"type":8,"value":596,"toc":749},[597,602,606,609,613,651,655,659,662,666,669,701,705,725,729],[598,599,601],"h1",{"id":600},"portfolio-per-agency-website-relaunch","Portfolio: per-agency Website Relaunch",[48,603,605],{"id":604},"project-overview","Project Overview",[11,607,608],{},"A highly customized, performance-oriented WordPress theme developed for a digital agency. The project focuses on a modular design system, allowing for flexible page creation while maintaining strict design guidelines and high performance.",[48,610,612],{"id":611},"technology-stack","Technology Stack",[63,614,615,621,627,633,639,645],{},[66,616,617,620],{},[69,618,619],{},"Core:"," WordPress (Custom Theme Development)",[66,622,623,626],{},[69,624,625],{},"Backend:"," PHP, MySQL (MariaDB)",[66,628,629,632],{},[69,630,631],{},"Frontend:"," SCSS (SASS), JavaScript (ES6+), Anime.js",[66,634,635,638],{},[69,636,637],{},"CMS Customization:"," Advanced Custom Fields (ACF) Pro",[66,640,641,644],{},[69,642,643],{},"Build Tools:"," NPM (node-sass, postcss, uglify-js, svgo)",[66,646,647,650],{},[69,648,649],{},"Environment:"," Docker (Docker Compose)",[48,652,654],{"id":653},"key-features","Key Features",[154,656,658],{"id":657},"modular-design-system","Modular Design System",[11,660,661],{},"Implemented a comprehensive library of reusable content modules using ACF Flexible Content. This allows content editors to build unique page layouts by combining pre-defined, styled components.",[154,663,665],{"id":664},"custom-content-management","Custom Content Management",[11,667,668],{},"Extended WordPress core functionality with Custom Post Types (CPTs) to structure complex data:",[63,670,671,677,683,689,695],{},[66,672,673,676],{},[69,674,675],{},"Cases:"," Portfolio items with dedicated archive and detail views.",[66,678,679,682],{},[69,680,681],{},"Services (Leistungen):"," Detailed service descriptions.",[66,684,685,688],{},[69,686,687],{},"Jobs (Karriere):"," Recruitment section with location filtering.",[66,690,691,694],{},[69,692,693],{},"Staff:"," Team member profiles.",[66,696,697,700],{},[69,698,699],{},"Locations (Orte):"," Taxonomy for filtering content by agency location.",[154,702,704],{"id":703},"performance-optimization","Performance & Optimization",[63,706,707,713,719],{},[66,708,709,712],{},[69,710,711],{},"SVG System:"," Custom SVG icon management to inline SVGs for fast loading and styling flexibility.",[66,714,715,718],{},[69,716,717],{},"Asset Optimization:"," Automated build pipeline for minifying CSS and JS, and optimizing SVGs.",[66,720,721,724],{},[69,722,723],{},"Bloat Removal:"," Extensive cleanup of default WordPress assets to minimize request count and page size.",[154,726,728],{"id":727},"development-workflow","Development Workflow",[63,730,731,737,743],{},[66,732,733,736],{},[69,734,735],{},"Dockerized Environment:"," Consistent local development environment ensuring parity with production.",[66,738,739,742],{},[69,740,741],{},"Component-Based Architecture:"," Template parts organized by functionality, promoting code reusability and maintainability.",[66,744,745,748],{},[69,746,747],{},"SCSS Architecture:"," Modular CSS structure with separate builds for frontend and admin styles.",{"title":15,"searchDepth":16,"depth":16,"links":750},[751,752,753],{"id":604,"depth":16,"text":605},{"id":611,"depth":16,"text":612},{"id":653,"depth":16,"text":654,"children":754},[755,756,757,758],{"id":657,"depth":183,"text":658},{"id":664,"depth":183,"text":665},{"id":703,"depth":183,"text":704},{"id":727,"depth":183,"text":728},"P.E.R. Agency","P.E.R. website.",[121,122,125,27,123,124],"\u002Fportfolio\u002Fper-website-2023\u002Fglass-mockup.png",{},"\u002Fportfolio\u002Fper-website-2023",{"title":594,"description":760},"portfolio\u002Fper-website-2023",[135,136],"df__qQ-NSRKK7TsgKH4_iWhgLli67g430OWsLI2yQTg",{"id":770,"title":771,"body":772,"client":759,"date":118,"description":760,"extension":21,"featured":22,"features":912,"image":914,"image_transparency":31,"links":915,"meta":919,"navigation":22,"path":920,"seo":921,"stem":922,"types":923,"url":32,"__hash__":924},"portfolio\u002Fportfolio\u002Fper-website-2026.md","P.E.R. Website (2026)",{"type":8,"value":773,"toc":902},[774,778,781,785,789,809,813,827,831,834,854,858,878,882],[48,775,777],{"id":776},"executive-summary","Executive Summary",[11,779,780],{},"Development of a high-performance, bespoke WordPress theme designed to deliver a premium digital agency experience. The project moves away from off-the-shelf page builders in favor of a custom, server-side rendered Gutenberg block architecture. This approach ensures maximum performance (Core Web Vitals), strict design system compliance and long-term maintainability.",[48,782,784],{"id":783},"key-technical-implementations","Key Technical Implementations",[154,786,788],{"id":787},"_1-high-performance-block-architecture","1. High-Performance Block Architecture",[63,790,791,797,803],{},[66,792,793,796],{},[69,794,795],{},"Server-Side Rendering (SSR) for Gutenberg",": Implemented a hybrid architecture where blocks are configured in React for the editor but rendered via PHP templates on the frontend to create a WYSIWYG experience.",[66,798,799,802],{},[69,800,801],{},"Conditional Asset Loading",": Engineered a smart enqueueing system that only loads CSS\u002FJS assets for blocks actually present on the page, significantly reducing bundle size and improving Initial Contentful Paint (ICP).",[66,804,805,808],{},[69,806,807],{},"Unified Registry",": Centralized block registration system that handles metadata, attributes, and render callbacks in a strict, type-safe manner.",[154,810,812],{"id":811},"_2-design-system-scss-framework","2. Design System & SCSS Framework",[63,814,815,821],{},[66,816,817,820],{},[69,818,819],{},"Responsive Typography Scale",": Implemented a fluid typography system to ensure perfect scaling across all devices.",[66,822,823,826],{},[69,824,825],{},"Component Abstraction",": Created reusable components for common UI patterns, ensuring visual consistency across all 15+ custom blocks.",[154,828,830],{"id":829},"_3-custom-linkedin-integration-system","3. Custom LinkedIn Integration System",[11,832,833],{},"For SEO purposes, I implemented a custom LinkedIn integration system to display the latest company posts on the website so that they are also available for search engines, creating context and fresh content.",[63,835,836,842,848],{},[66,837,838,841],{},[69,839,840],{},"API Rate Limit Protection",": Built a custom caching layer to decouple frontend page loads from the LinkedIn API.",[66,843,844,847],{},[69,845,846],{},"Cron-Based Synchronization",": Implemented a daily background job to fetch and update company posts, ensuring content freshness without impacting user page load times.",[66,849,850,853],{},[69,851,852],{},"Admin Interface",": Developed a comprehensive settings panel in the WordPress Customizer for API credential management, manual cache clearing, and connection status monitoring.",[154,855,857],{"id":856},"_4-advanced-theme-configuration","4. Advanced Theme Configuration",[63,859,860,866,872],{},[66,861,862,865],{},[69,863,864],{},"Environment Intelligence",": Built core logic to detect Development vs. Production environments, automatically toggling between debug logging\u002Funminified assets and production-optimized caching.",[66,867,868,871],{},[69,869,870],{},"Extended Customizer API",": Added extensive configuration options for \"Archive Pages\" (Cases, Services, Jobs).",[66,873,874,877],{},[69,875,876],{},"Security Hardening",": Implemented strict nonce verification for AJAX actions and comprehensive output escaping across all templates to prevent XSS vulnerabilities.",[48,879,881],{"id":880},"development-workflow-tooling","Development Workflow & Tooling",[63,883,884,890,896],{},[66,885,886,889],{},[69,887,888],{},"Local Development",": Containerized environment using Docker for consistent PHP\u002FMySQL versions matching production.",[66,891,892,895],{},[69,893,894],{},"Build Pipeline",": Custom Webpack and Sass configurations to handle asset optimization, minification, and source map generation.",[66,897,898,901],{},[69,899,900],{},"Code Quality",": Adherence to WordPress Coding Standards (WPCS) with strict typing and documentation so future developers can pick up the code easily.",{"title":15,"searchDepth":16,"depth":16,"links":903},[904,905,911],{"id":776,"depth":16,"text":777},{"id":783,"depth":16,"text":784,"children":906},[907,908,909,910],{"id":787,"depth":183,"text":788},{"id":811,"depth":183,"text":812},{"id":829,"depth":183,"text":830},{"id":856,"depth":183,"text":857},{"id":880,"depth":16,"text":881},[121,122,125,27,123,913,124],"React","\u002Fportfolio\u002Fper-website-2026\u002Fglass-mockup.png",[916],{"title":917,"url":918},"P.E.R. Agency Website","https:\u002F\u002Fper-agency.com",{},"\u002Fportfolio\u002Fper-website-2026",{"title":771,"description":760},"portfolio\u002Fper-website-2026",[135,136],"Ci6m-9rH_ueRZIcJ5qFCoZsqioi1uisN8YKnuGSwoOM",{"id":926,"title":927,"body":928,"client":1008,"date":476,"description":1009,"extension":21,"featured":22,"features":1010,"image":1011,"image_transparency":31,"links":1012,"meta":1016,"navigation":22,"path":1017,"seo":1018,"stem":1019,"types":1020,"url":32,"__hash__":1021},"portfolio\u002Fportfolio\u002Fproson-2024.md","Proson gGmbh (2024)",{"type":8,"value":929,"toc":1002},[930,934,937,941,944,964,968,971,997,999],[48,931,933],{"id":932},"die-vision","Die Vision",[11,935,936],{},"Proson gGmbH benötigte eine wirkungsvolle digitale Präsenz, um sich schnell am Markt zu etablieren, während das vollständige Leistungsportfolio noch in der Entwicklung war. Meine Mission bestand darin, eine anspruchsvolle, schnelle und visuell beeindruckende Landingpage zu entwerfen und zu entwickeln, die als sofortiger, professioneller Einstiegspunkt diente. Der gesamte Lebenszyklus des Projekts – vom anfänglichen UX-Wireframing und High-Fidelity-UI-Design bis hin zur komplexen technischen Umsetzung – wurde mir anvertraut. Das Ziel war es, eine elegante digitale \"Visitenkarte\" zu liefern, die Content-Redakteuren volle Kontrolle gibt und zukünftiges Wachstum nahtlos integriert, ohne die etablierte Designsprache zu beeinträchtigen.",[48,938,940],{"id":939},"design-uiux-iteration","Design & UI\u002FUX Iteration",[11,942,943],{},"Ein maßgeschneidertes Designsystem wurde entwickelt, basierend auf einer harmonischen Farbpalette (mit tiefen Grüntönen und warmen Beigetönen) sowie einer gut lesbaren Typografie unter Verwendung harmonischer Proportionen.",[63,945,946,952,958],{},[66,947,948,951],{},[69,949,950],{},"Moderne Design-Patterns:"," Dezente Schlagschatten, dynamische Hover-Zustände sowie weiche Übergänge und Parallax-Animationen hauchen der Benutzeroberfläche Leben ein und sorgen dafür, dass sie responsiv und lebendig wirkt.",[66,953,954,957],{},[69,955,956],{},"Mikrointeraktionen & Animationen:"," Unter Verwendung von modernem Vanilla JavaScript und In-View-Erkennung wurden elegante, scrollgesteuerte Reveal-Animationen implementiert. Bilder und Textboxen verfügen über dezente Parallax-Verschiebungen, die den Nutzer beim Scrollen fesseln und so ein Premium-Erlebnis schaffen.",[66,959,960,963],{},[69,961,962],{},"Responsiv gedacht:"," Die Nutzeroberfläche wurde akribisch für alle Endgeräte optimiert und garantiert eine nahtlose Reise – egal ob auf einem großen 4K-Display oder einem mobilen Gerät, wobei srcset für gestochen scharfe, Retina-taugliche Bilder genutzt wird.",[48,965,967],{"id":966},"technische-umsetzung-architektur","Technische Umsetzung & Architektur",[11,969,970],{},"Unter der ansprechenden Oberfläche verbirgt sich eine robuste, skalierbare technische Architektur, die speziell auf hohe Performance ausgelegt ist.",[63,972,973,979,985,991],{},[66,974,975,978],{},[69,976,977],{},"Headless-ähnliche Inhaltspflege:"," Überladene Page-Builder wurden vollständig vermieden. Stattdessen wurde eine Reihe maßgeschneiderter Gutenberg-Blöcke entwickelt. Dies bietet den Redakteuren ein intuitives, visuelles Drag-and-Drop-Erlebnis und setzt gleichzeitig die Regeln des Designsystems strikt durch.",[66,980,981,984],{},[69,982,983],{},"Optimiertes Frontend-Fundament:"," Das Theme setzt auf ein schlankes, unabhängiges Frontend. Unnötiger WordPress-Ballast (wie jQuery) wurde entfernt und stattdessen ein modularer SCSS- und ES6+-Ansatz verfolgt. Build-Tools optimieren SVGs, kompilieren die Styles und minimieren Assets für blitzschnelle Ladezeiten.",[66,986,987,990],{},[69,988,989],{},"Externe API-Integrationen:"," Die BITE HR-API wurde nahtlos angebunden, wodurch Stellenangebote dynamisch abgerufen und im Design der Website nativ dargestellt werden können, was den manuellen HR-Aufwand drastisch reduziert.",[66,992,993,996],{},[69,994,995],{},"Developer Experience & Infrastruktur:"," Das Projekt ist mithilfe von Docker vollständig containerisiert, was perfekt gespiegelte lokale, Staging- und Produktionsumgebungen ermöglicht. Benutzerdefinierte Node-Skripte automatisieren die Datenbanksynchronisierung, das Plugin-Management und das Asset-Deployment, was eine reibungslose Continuous Integration garantiert.",[48,998,100],{"id":99},[11,1000,1001],{},"Eine hochperformante Landingpage, die als starker erster Markteintritt diente. Durch die Kontrolle über Design und Code konnte eine kompromisslose digitale \"Visitenkarte\" geliefert werden, bei der jeder Pixel einen Zweck erfüllt. Dies ermöglichte es dem Kunden, das wachsende Leistungsportfolio souverän zu präsentieren, während das größere digitale Ökosystem parallel entwickelt wurde.",{"title":15,"searchDepth":16,"depth":16,"links":1003},[1004,1005,1006,1007],{"id":932,"depth":16,"text":933},{"id":939,"depth":16,"text":940},{"id":966,"depth":16,"text":967},{"id":99,"depth":16,"text":100},"Proson gGmbh","Proson gGmbh Landingpage 2024",[121,122,27,123,124],"\u002Fportfolio\u002Fproson-2024\u002Fproson_portfolio_glass.png",[1013],{"title":1014,"url":1015},"Proson gGmbh Website","https:\u002F\u002Fwww.proson-ggmbh.de",{},"\u002Fportfolio\u002Fproson-2024",{"title":927,"description":1009},"portfolio\u002Fproson-2024",[135,136,40,39],"TSZpvP44wlF07MeAYyJBB-stMpmTXx_gi-aSeXvT7NY",{"id":1023,"title":1024,"body":1025,"client":32,"date":19,"description":1192,"extension":21,"featured":22,"features":1193,"image":1194,"image_transparency":31,"links":1195,"meta":1199,"navigation":22,"path":1200,"seo":1201,"stem":1202,"types":1203,"url":32,"__hash__":1205},"portfolio\u002Fportfolio\u002Fradio-tape.md","Radio Tape (macOS)",{"type":8,"value":1026,"toc":1184},[1027,1031,1037,1043,1046,1050,1060,1064,1112,1116,1119,1151,1155,1158],[48,1028,1030],{"id":1029},"the-concept-inspiration","The Concept & Inspiration",[11,1032,1033],{},[1034,1035,1036],"em",{},"“When I was a kid I liked to create tapes from radio and have my own collection of songs I randomly recorded as they occurred. This thought made me nostalgic and I got an idea for a new app others potentially might also enjoy using.”",[11,1038,1039,1042],{},[69,1040,1041],{},"RadioTape"," is a native macOS application that reimagines the classic mixtape experience for the streaming age. Curated internet radio stations (like Byte.fm) are fantastic for music discovery, but identifying a track after it has played often involves digging through listening histories or hunting down show notes.",[11,1044,1045],{},"RadioTape removes this friction. It automatically isolates and records every song it detects, maintaining a rolling buffer of the last 10 tracks. Whenever you hear something you want to keep, a single click permanently adds the track to your personal library.",[48,1047,1049],{"id":1048},"features-technical-implementation","Features & Technical Implementation",[11,1051,1052,1053,1055,1056,1059],{},"RadioTape is built entirely natively for macOS using ",[69,1054,573],{},", delivering a modern, responsive, and adaptive interface. The application seamlessly integrates into the system with full Control Center and Lock Screen support via the ",[69,1057,1058],{},"Now Playing"," integration.",[154,1061,1063],{"id":1062},"audio-recording-engine","Audio & Recording Engine",[63,1065,1066,1080,1090,1102],{},[66,1067,1068,1071,1072,1075,1076,1079],{},[69,1069,1070],{},"Intelligent Track Detection",": The app utilizes ",[69,1073,1074],{},"AVFoundation"," and custom ",[546,1077,1078],{},"ICY"," metadata parsing to accurately detect track boundaries and real-time stream metadata.",[66,1081,1082,1085,1086,1089],{},[69,1083,1084],{},"Direct Stream Recording",": Recordings are captured efficiently using ",[546,1087,1088],{},"URLSessionDataTask"," to directly download stream data, ensuring no loss of audio quality and saving system resources.",[66,1091,1092,1095,1096,1101],{},[69,1093,1094],{},"Global Radio Access",": Integrated with the public API of ",[105,1097,1100],{"href":1098,"rel":1099},"https:\u002F\u002Fwww.radio-browser.info",[109],"radio-browser.info",", RadioTape offers an easily navigable database of over 50,000 global internet radio stations categorized by genre, country, and language.",[66,1103,1104,1107,1108,1111],{},[69,1105,1106],{},"Reactive Architecture",": Built using ",[69,1109,1110],{},"Combine"," to manage complex streaming states, buffering, and user interactions flawlessly.",[154,1113,1115],{"id":1114},"file-based-zero-lock-in-library","File-Based \"Zero Lock-In\" Library",[11,1117,1118],{},"Simplicity and user ownership are at the core of the RadioTape philosophy. The entire library is built upon a transparent, user-accessible folder structure.",[63,1120,1121,1131,1141],{},[66,1122,1123,1126,1127,1130],{},[69,1124,1125],{},"Standardized Formats",": Every recorded track is saved as a standard ",[546,1128,1129],{},".mp3"," file.",[66,1132,1133,1136,1137,1140],{},[69,1134,1135],{},"Extensible Metadata",": Metadata (such as artist, title, station, and duration) is stored in an accompanying ",[546,1138,1139],{},".json"," sidecar file alongside the audio.",[66,1142,1143,1146,1147,1150],{},[69,1144,1145],{},"Your Files, Your Rules",": Because the library lives directly in a designated directory (by default within your ",[546,1148,1149],{},"Music"," folder), your entire collection and any mixtapes you create can be easily managed, backed up, or shared using Finder or any standard file manager.",[48,1152,1154],{"id":1153},"the-future-a-nostalgic-audio-diary","The Future: A Nostalgic Audio Diary",[11,1156,1157],{},"The app's roadmap embraces its skeuomorphic roots and the emotional connection of the mixtape era, turning digital files back into tangible memories.",[63,1159,1160,1166,1172,1178],{},[66,1161,1162,1165],{},[69,1163,1164],{},"Visual Mixtapes",": Playlists will be visually represented as customizable cassette tapes, complete with user-provided images and back covers populated with tracklists.",[66,1167,1168,1171],{},[69,1169,1170],{},"Library as a Shelf",": The library interface will evolve into a virtual \"tape shelf,\" bringing back a touch of classic, playful skeuomorphic design.",[66,1173,1174,1177],{},[69,1175,1176],{},"Daily Sessions",": RadioTape will automatically generate a new tape for each listening session. This creates a daily audio diary, connecting your memories to the music you discovered that day.",[66,1179,1180,1183],{},[69,1181,1182],{},"Effortless Sharing",": Thanks to the transparent file structure, sharing a mixtape with a friend will be as simple as copying a folder.",{"title":15,"searchDepth":16,"depth":16,"links":1185},[1186,1187,1191],{"id":1029,"depth":16,"text":1030},{"id":1048,"depth":16,"text":1049,"children":1188},[1189,1190],{"id":1062,"depth":183,"text":1063},{"id":1114,"depth":183,"text":1115},{"id":1153,"depth":16,"text":1154},"A macOS application that brings the nostalgic joy of recording radio to the modern era. Automated.",[572,590],"\u002Fportfolio\u002Fradio-tape\u002Fmain-visual-composite.png",[1196],{"title":1197,"url":1198},"Gitlab Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fradiotape",{},"\u002Fportfolio\u002Fradio-tape",{"title":1024,"description":1192},"portfolio\u002Fradio-tape",[306,40,39,1204],"Open Source","mxKLAk5KScZ0C3U8InaSh6vvGsCbbk0jDa4Q17iKFbU",{"id":1207,"title":1208,"body":1209,"client":1331,"date":185,"description":1332,"extension":21,"featured":22,"features":1333,"image":1334,"image_transparency":31,"links":1335,"meta":1338,"navigation":22,"path":1339,"seo":1340,"stem":1341,"types":1342,"url":32,"__hash__":1345},"portfolio\u002Fportfolio\u002Ftiq-website-2023.md","TIQ.Solutions Website",{"type":8,"value":1210,"toc":1321},[1211,1213,1216,1220,1224,1238,1242,1256,1260,1280,1282,1314,1318],[48,1212,605],{"id":604},[11,1214,1215],{},"A comprehensive digital transformation for TIQ Solutions, a data consultancy firm. The project went beyond a simple website relaunch, establishing a scalable digital ecosystem that integrates content management, lead generation tools, and AI-driven support. Built on a highly customized WordPress foundation, the platform serves as the central hub for the company's marketing and service delivery.",[48,1217,1219],{"id":1218},"key-technical-highlights","Key Technical Highlights",[154,1221,1223],{"id":1222},"_1-advanced-custom-wordpress-architecture","1. Advanced Custom WordPress Architecture",[63,1225,1226,1232],{},[66,1227,1228,1231],{},[69,1229,1230],{},"Multilingual Support",": Deep integration with Polylang, including custom domain mapping logic to handle canonical URLs and content replacement for other markets, ensuring correct SEO indexing for DACH regions.",[66,1233,1234,1237],{},[69,1235,1236],{},"Asset Optimization",": Implemented a custom asset loading strategy that conditionally dequeues unused parent-theme scripts and styles, significantly improving Core Web Vitals performance.",[154,1239,1241],{"id":1240},"_2-ai-powered-assistant-tiq-chatbot","2. AI-Powered Assistant (\"TIQ Chatbot\")",[63,1243,1244,1250],{},[66,1245,1246,1249],{},[69,1247,1248],{},"Hybrid Architecture",": Developed a custom WordPress integration acting as a bridge to an Azure-hosted Python application.",[66,1251,1252,1255],{},[69,1253,1254],{},"RAG Implementation",": The backend leverages a Retrieval-Augmented Generation (RAG) model, allowing the bot to provide accurate, context-aware answers based on the company's specific knowledge base.",[154,1257,1259],{"id":1258},"_3-interactive-lead-gen-tool-reifegrad-check","3. Interactive Lead Gen Tool (\"Reifegrad-Check\")",[63,1261,1262,1268,1274],{},[66,1263,1264,1267],{},[69,1265,1266],{},"Elementor Integration",": Created a custom Elementor widget allowing marketing teams to place the assessment tool anywhere on the site via drag-and-drop.",[66,1269,1270,1273],{},[69,1271,1272],{},"PDF Report Generation",": Integrated PDF generation to dynamically generate personalized \"Maturity Level\" PDF reports for users immediately upon form submission.",[66,1275,1276,1279],{},[69,1277,1278],{},"Data-Driven Logic",": The plugin calculates maturity scores in real-time and segments users, feeding valuable qualified leads into the sales funnel.",[48,1281,612],{"id":611},[63,1283,1284,1290,1296,1302,1308],{},[66,1285,1286,1289],{},[69,1287,1288],{},"CMS",": WordPress (Custom Child Theme)",[66,1291,1292,1295],{},[69,1293,1294],{},"Frontend",": PHP, SCSS, JavaScript (jQuery\u002FVanilla)",[66,1297,1298,1301],{},[69,1299,1300],{},"Backend\u002FServices",": Python (Azure Web App), MySQL",[66,1303,1304,1307],{},[69,1305,1306],{},"Integrations",": Polylang, Elementor Pro, Advanced Custom Fields (ACF)",[66,1309,1310,1313],{},[69,1311,1312],{},"DevOps",": Docker-based local development environment with Composer\u002FNPM dependency management.",[48,1315,1317],{"id":1316},"impact","Impact",[11,1319,1320],{},"This platform enables TIQ Solutions to manage their content autonomously while offering sophisticated digital tools that engage visitors. The \"Reifegrad-Check\" has become a key lead magnet, and the AI Chatbot reduces support overhead by handling initial inquiries.",{"title":15,"searchDepth":16,"depth":16,"links":1322},[1323,1324,1329,1330],{"id":604,"depth":16,"text":605},{"id":1218,"depth":16,"text":1219,"children":1325},[1326,1327,1328],{"id":1222,"depth":183,"text":1223},{"id":1240,"depth":183,"text":1241},{"id":1258,"depth":183,"text":1259},{"id":611,"depth":16,"text":612},{"id":1316,"depth":16,"text":1317},"TIQ.Solutions","TIQ website.",[121,122,125,27,123,124],"\u002Fportfolio\u002Ftiq-website-2023\u002Findex-generated.png",[1336],{"title":1208,"url":1337},"https:\u002F\u002Fwww.tiq-solutions.de",{},"\u002Fportfolio\u002Ftiq-website-2023",{"title":1208,"description":1332},"portfolio\u002Ftiq-website-2023",[135,136,1343,1344,39,40],"AI","Lead Generation","0ntlJjW9UFSLNjkYFRywQIUV3ApKPdQ74EHgymj0Eio",1794406485249]