[{"data":1,"prerenderedAt":2173},["ShallowReactive",2],{"portfolio-item-\u002Fportfolio\u002Fphp-markdown-viewer-de":3,"portfolio-all-raw":85},{"id":4,"title":5,"body":6,"client":60,"date":61,"description":62,"extension":63,"featured":64,"features":65,"image":68,"image_transparency":64,"links":69,"meta":73,"navigation":74,"path":75,"seo":76,"stem":77,"types":78,"url":82,"__hash__":83,"_isFallback":64,"_canonicalLocale":84},"portfolio\u002Fportfolio\u002Fphp-markdown-viewer.md","PHP Markdown Folder Viewer",{"type":7,"value":8,"toc":54},"minimark",[9,14,18,21,24,31,35,38,48],[10,11,13],"h2",{"id":12},"usecase","Usecase",[15,16,17],"p",{},"Having the ability to easily share markdown exports from various applications (like Obsidian, Anytype, StandardNotes, Notesnook, Notion...).",[15,19,20],{},"I wanted to copy a folder with markdown files into a folder where the markdown files get rendered as they should in a browser, with linking and navigational aspects intact.",[15,22,23],{},"This way I could easily share a part of my Obsidian vault or export many objects at once in Anytype that I then can directly share via a simple URL.",[15,25,26],{},[27,28],"img",{"alt":29,"src":30},"88689","\u002Fportfolio\u002Fphp-markdown-viewer\u002F88689.png",[10,32,34],{"id":33},"description","Description",[15,36,37],{},"It is a PHP application that renders a folder with markdown files with navigation, previews and everything one would expect from some kind of wiki or documentation page.",[39,40,41,45],"ul",{},[42,43,44],"li",{},"previews markdown file content on link hover",[42,46,47],{},"Obsidian and markdown link syntax is supported",[15,49,50],{},[27,51],{"alt":52,"src":53},"66157","\u002Fportfolio\u002Fphp-markdown-viewer\u002F66157.jpeg",{"title":55,"searchDepth":56,"depth":56,"links":57},"",2,[58,59],{"id":12,"depth":56,"text":13},{"id":33,"depth":56,"text":34},"Marco Laux","2025","PHP Markdown Folder Viewer.","md",false,[66,67],"SCSS","PHP","\u002Fportfolio\u002Fphp-markdown-viewer\u002Fglass_mockup.png",[70],{"title":71,"url":72},"Gitlab Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fmarkdown-viewer",{},true,"\u002Fportfolio\u002Fphp-markdown-viewer",{"title":5,"description":62},"portfolio\u002Fphp-markdown-viewer",[79,80,81],"Web App","Web Development","MVP",null,"GP471iyHX-X4ZAS6KFhB6j2iPOu7gM5BwfLVnjhQUhU","de",[86,168,237,268,294,505,663,751,830,854,893,1081,1192,1284,1374,1440,1527,1585,1757,1897,1993,2056,2111],{"id":87,"title":88,"body":89,"client":150,"date":151,"description":152,"extension":63,"featured":64,"features":153,"image":158,"image_transparency":64,"links":82,"meta":159,"navigation":74,"path":160,"seo":161,"stem":162,"types":163,"url":82,"__hash__":167},"portfolio\u002Fportfolio\u002Fbfw-website-2026.de.md","BFW Berlin Brandenburg e.V. Relaunch (2026)",{"type":7,"value":90,"toc":145},[91,95,98,102,105,138,142],[10,92,94],{"id":93},"die-herausforderung","Die Herausforderung",[15,96,97],{},"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.",[10,99,101],{"id":100},"ansatz-aufbau-eines-skalierbaren-fundaments","Ansatz: Aufbau eines skalierbaren Fundaments",[15,103,104],{},"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.",[39,106,107,114,120,126,132],{},[42,108,109,113],{},[110,111,112],"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.",[42,115,116,119],{},[110,117,118],{},"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.",[42,121,122,125],{},[110,123,124],{},"Intelligentes Frontend-Filtering:"," Im Frontend werden diese komplexen Daten in eine schnelle Echtzeit-Filter-Engine destilliert. Nutzer können Kurse nahtlos nach Berufsfeld, spezifischen Standorten in Berlin und Brandenburg sowie Förderarten eingrenzen und erhalten intuitiv sofortige Ergebnisse.",[42,127,128,131],{},[110,129,130],{},"Integrierte Conversion-Workflows:"," Das Design und die Entwicklung eines kontextbezogenen Anfrage-Systems reduzierten den administrativen Aufwand drastisch. Anfragen für Schnuppertage werden automatisch mit dem spezifischen Kurs verknüpft und dynamisch an den zuständigen regionalen Berater weitergeleitet.",[42,133,134,137],{},[110,135,136],{},"Kompromisslose Barrierefreiheit:"," Die Bedienung einer diversen Zielgruppe, insbesondere in der beruflichen Rehabilitation, machte strenge Barrierefreiheit unabdingbar. Neben einer kontrastreichen Benutzeroberfläche und Tastaturnavigation wurde eine native, maßgeschneiderte Screen-to-Speech-Engine integriert, die es jedem Nutzer ermöglicht, sich den Inhalt auf Wunsch vorlesen zu lassen.",[10,139,141],{"id":140},"das-ergebnis","Das Ergebnis",[15,143,144],{},"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":55,"searchDepth":56,"depth":56,"links":146},[147,148,149],{"id":93,"depth":56,"text":94},{"id":100,"depth":56,"text":101},{"id":140,"depth":56,"text":141},"BFW Berlin Brandenburg e.V.","2026","BFW Berlin Brandenburg e.V. Relaunch 2026",[154,155,66,156,67,157],"Wordpress","ES6 JavaScript","Webpack","Docker","\u002Fportfolio\u002Fbfw-website-2026\u002Fbfw_portfolio_glass.png",{},"\u002Fportfolio\u002Fbfw-website-2026.de",{"title":88,"description":152},"portfolio\u002Fbfw-website-2026.de",[164,80,165,166],"Website","UI\u002FUX","Design","t706U1Fnmz16lshpjXgy5V3ApjK9-FcZB05OSCmtPdU",{"id":169,"title":88,"body":170,"client":150,"date":151,"description":152,"extension":63,"featured":64,"features":230,"image":158,"image_transparency":64,"links":82,"meta":231,"navigation":74,"path":232,"seo":233,"stem":234,"types":235,"url":82,"__hash__":236},"portfolio\u002Fportfolio\u002Fbfw-website-2026.en.md",{"type":7,"value":171,"toc":225},[172,176,179,183,186,218,222],[10,173,175],{"id":174},"the-challenge","The Challenge",[15,177,178],{},"As a highly established and trusted educational institution for vocational rehabilitation in Berlin and Brandenburg, the Berufsförderungswerk faced a critical digital turning point. Their extensive catalog of retraining programs, qualifications, and regional contact structures had outgrown their previous content management setup. They required more than just a website; they needed a modern, highly scalable web application capable of handling complex relational data while providing an accessible and intuitive experience for a diverse user base.",[10,180,182],{"id":181},"approach-building-a-scalable-foundation","Approach: Building a Scalable Foundation",[15,184,185],{},"Architecting a robust digital ecosystem built for longevity and scale became the primary objective. Moving away from rigid templates, a completely bespoke enterprise solution was developed to streamline both the end-user journey and the internal editorial workflows.",[39,187,188,194,200,206,212],{},[42,189,190,193],{},[110,191,192],{},"Enterprise Monorepo Architecture:"," Engineering a state-of-the-art monorepo setup established a central logic hub. This powerful core codebase powers the main BFW platform while providing the centralized infrastructure, security, and feature updates for subsidiary projects—ensuring absolute consistency across their digital landscape.",[42,195,196,199],{},[110,197,198],{},"Complex Course Management & Routing:"," A deeply integrated, relational data model was built to handle BFW's vast educational offerings. The custom backend empowers the editorial team to effortlessly manage intricate offer details—from recurring dates and funding options to localized contact persons—without touching a line of code.",[42,201,202,205],{},[110,203,204],{},"Intelligent Frontend Filtering:"," On the frontend, this complex data is distilled into a fast, real-time filtering engine. Users can seamlessly narrow down courses by professional field, specific locations across Berlin and Brandenburg, and eligibility types, receiving instant results intuitively.",[42,207,208,211],{},[110,209,210],{},"Integrated Conversion Workflows:"," Designing and developing a context-aware inquiry system dramatically streamlined administrative overhead. Trial-day requests are automatically linked to the specific course and dynamically routed to the correct regional advisor.",[42,213,214,217],{},[110,215,216],{},"Uncompromising Accessibility:"," Serving a diverse demographic, particularly in vocational rehabilitation, made strict accessibility non-negotiable. Beyond high-contrast UI and keyboard navigation, a native, custom Screen-to-Speech engine was integrated, allowing any user to have the content read aloud on demand.",[10,219,221],{"id":220},"the-result","The Result",[15,223,224],{},"Transforming BFW's digital presence resulted in a high-performance, future-proof platform. The new web application not only echoes their established authority in the Berlin-Brandenburg region but provides the scalable, reliable infrastructure needed to manage complex educational operations with ease.",{"title":55,"searchDepth":56,"depth":56,"links":226},[227,228,229],{"id":174,"depth":56,"text":175},{"id":181,"depth":56,"text":182},{"id":220,"depth":56,"text":221},[154,155,66,156,67,157],{},"\u002Fportfolio\u002Fbfw-website-2026.en",{"title":88,"description":152},"portfolio\u002Fbfw-website-2026.en",[164,80,165,166],"SlpzUMFqNKVfYvA9uLNaSP9D8ZRQy-vGcEYZeQi-FlI",{"id":238,"title":239,"body":240,"client":256,"date":151,"description":257,"extension":63,"featured":64,"features":258,"image":260,"image_transparency":64,"links":82,"meta":261,"navigation":74,"path":262,"seo":263,"stem":264,"types":265,"url":82,"__hash__":267},"portfolio\u002Fportfolio\u002Fnanito.de.md","nanito Relaunch (2026)",{"type":7,"value":241,"toc":254},[242,245,248,251],[15,243,244],{},"nanito bot mir die Möglichkeit, ein komplettes Redesign und die individuelle Entwicklung einer modernen, verspielten WooCommerce-Plattform umzusetzen. Bei der Gestaltung der neuen Benutzeroberfläche konnte ich mich auf eine lebendige, kinderfreundliche Ästhetik konzentrieren. Eine helle Farbpalette mit weicher und einladender Optik wurde erstellt, um den gewünschten modernisierten Look zu erzielen. Die Konzeption erfolgte in Figma, wobei gleichzeitig ein Styleguide für die zukünftige Verwendung erstellt wurde.",[15,246,247],{},"Die Gestaltung der User Experience bedeutete, ein modulares System von Grund auf neu aufzubauen. Maßgeschneiderte Gutenberg-Blöcke wurden entwickelt, um ultimative Flexibilität zu bieten. Content-Ersteller können ohne weitere Pagebuilder oder Programmierkenntnisse Inhalte erstellen und verwalten. Dieser Ansatz ermöglichte die nahtlose Integration individueller Funktionen wie dynamischer Hero-Slider, interaktiver Produktfilter und ansprechender, speziell zugeschnittener Content-Module.",[15,249,250],{},"Bei der Umsetzung des individuellen Frontends lag der Schwerpunkt stark auf Performance und flüssigen Interaktionen. Überflüssiger Code wurde durch das Entfernen von Standard-WordPress-Skripten beseitigt. Anime.js und Swiper wurde für weitere Content-Elemente genutzt. Das Endergebnis ist eine vollständig maßgeschneiderte E-Commerce-Lösung, die ein frisches, individuelles Design perfekt mit technischer Robustheit verbindet.",[15,252,253],{},"Das Projekt wird voraussichtlich 2026 live gehen.",{"title":55,"searchDepth":56,"depth":56,"links":255},[],"nanito","nanito Website-Relaunch",[154,259,155,66,67,157],"Woocommerce","\u002Fportfolio\u002Fnanito\u002Fmain-visual-glass.png",{},"\u002Fportfolio\u002Fnanito.de",{"title":239,"description":257},"portfolio\u002Fnanito.de",[164,166,165,266],"Art Direction","ikGr9LSQPrBIW1P1RHFKE2Ee9SusMfdr12U0sjFB9oI",{"id":269,"title":239,"body":270,"client":256,"date":151,"description":286,"extension":63,"featured":64,"features":287,"image":260,"image_transparency":64,"links":82,"meta":288,"navigation":74,"path":289,"seo":290,"stem":291,"types":292,"url":82,"__hash__":293},"portfolio\u002Fportfolio\u002Fnanito.en.md",{"type":7,"value":271,"toc":284},[272,275,278,281],[15,273,274],{},"nanito offered me the opportunity to execute a complete redesign and custom development of a modern, playful WooCommerce platform. Creating the new user interface was a chance for me to focus on a vibrant, child-friendly aesthetic. A bright color palette with soft and inviting aesthetics was utilized to achieve the desired and modernized look. Conceptualization was done in Figma while also establishing a styleguide for future reference.",[15,276,277],{},"Designing the user experience meant building a modular system from the ground up. Custom Gutenberg blocks were crafted so that I could offer ultimate flexibility. This approach allowed for the seamless integration of custom features like dynamic hero sliders, interactive product filters, and engaging tailored content modules.",[15,279,280],{},"Execution of the custom front-end focused heavily on performance and fluid interactions. Bloat was stripped away by removing default WordPress scripts, and custom JavaScript utilizing Anime.js and Swiper was implemented to power smooth interface animations. The final result is a fully tailored e-commerce solution that perfectly balances a fresh, bespoke design with technical robustness.",[15,282,283],{},"The project is to be expected to go live in 2026.",{"title":55,"searchDepth":56,"depth":56,"links":285},[],"nanito Website Relaunch",[154,259,155,66,67,157],{},"\u002Fportfolio\u002Fnanito.en",{"title":239,"description":286},"portfolio\u002Fnanito.en",[164,166,165,266],"rpyBqdIHc4WJ73EcAz6x0hrfLeC0srwI_DKCLPHIipo",{"id":295,"title":296,"body":297,"client":82,"date":151,"description":487,"extension":63,"featured":64,"features":488,"image":492,"image_transparency":64,"links":493,"meta":497,"navigation":74,"path":498,"seo":499,"stem":500,"types":501,"url":496,"__hash__":504},"portfolio\u002Fportfolio\u002Fobsidian-s3-publisher.md","Obsidian S3 Publisher",{"type":7,"value":298,"toc":476},[299,303,308,312,315,318,322,385,389,416,420,425,431,440,448,452,457,462,466,471],[300,301,296],"h1",{"id":302},"obsidian-s3-publisher",[15,304,305,307],{},[110,306,296],{}," is a powerful plugin for the popular note-taking app, Obsidian, that empowers users to turn their private local vaults into beautiful, self-hosted public websites. By leveraging any S3-compatible object storage (such as AWS S3, MinIO, Cloudflare R2, or DigitalOcean Spaces), this plugin bridges the gap for users who need a direct, secure, and private way to publish their notes without relying on third-party subscription services.",[10,309,311],{"id":310},"the-problem-it-solves","The Problem It Solves",[15,313,314],{},"Obsidian is an incredible tool for building a personal knowledge base, but natively, it lacks a built-in feature to self-host and publish notes easily to your own infrastructure. Users who want to share their work securely with clients, team members, or the public often find themselves needing to set up complex CI\u002FCD pipelines, configure static site generators, or pay for hosted services.",[15,316,317],{},"Obsidian S3 Publisher solves this by offering a seamless, \"one-click\" publishing experience directly from the Obsidian editor to an S3 bucket of your choice.",[10,319,321],{"id":320},"key-features","Key Features",[39,323,324,330,336,342,348,354,360,371],{},[42,325,326,329],{},[110,327,328],{},"🌐 Universal S3 Support",": Works flawlessly with AWS S3, MinIO, Cloudflare R2, DigitalOcean Spaces, and any other S3-compatible backend.",[42,331,332,335],{},[110,333,334],{},"🌳 Deep Recursive Publishing",": Publish a single note or intelligently publish a note alongside all of its outgoing links, incoming links, and embedded content at once. You can also symmetrically unpublish entire dependency trees.",[42,337,338,341],{},[110,339,340],{},"🎨 Infinite Canvas & Excalidraw Support",": Fully supports publishing complex visual formats like Obsidian Canvas and Excalidraw drawings. These files are rendered as interactive, pannable, and zoomable HTML widgets.",[42,343,344,347],{},[110,345,346],{},"🧩 Seamless Nesting",": Embed Excalidraw drawings and Canvas files directly inside your Markdown documents, or place Markdown notes and images inside a Canvas—everything renders interactively and perfectly!",[42,349,350,353],{},[110,351,352],{},"🌗 Universal Dark & Light Mode",": No matter how deeply nested your files are, every embedded component natively supports and dynamically switches between light and dark modes based on the viewer's system preferences.",[42,355,356,359],{},[110,357,358],{},"📝 Rich Markdown Rendering",": Full support for GitHub Flavored Markdown (GFM), task lists, tables, callouts, and internal links with Wikipedia-style hover preview popovers.",[42,361,362,365,366,370],{},[110,363,364],{},"🔐 Secure & Private Generation",": Generates obfuscated UUID paths for secure link sharing. It also utilizes Obsidian's native ",[367,368,369],"code",{},"SecretStorage"," to encrypt your S3 credentials, preventing plain-text exposure.",[42,372,373,376,377,380,381,384],{},[110,374,375],{},"📦 Media & Asset Uploads",": Automatically resolves and uploads local images, videos (",[367,378,379],{},".mp4",", ",[367,382,383],{},".webm","), audio files, and PDFs alongside your published notes.",[10,386,388],{"id":387},"primary-use-cases","Primary Use Cases",[390,391,392,398,404,410],"ol",{},[42,393,394,397],{},[110,395,396],{},"Digital Gardens & Personal Wikis",": Instantly publish your thoughts, research, and interconnected notes forming a public \"digital garden\" directly to your own custom domain.",[42,399,400,403],{},[110,401,402],{},"Secure Client\u002FTeam Documentation",": Generate private, unguessable UUID links to share specific documentation, design specs, or architectural diagrams (via Canvas\u002FExcalidraw) securely with clients or colleagues.",[42,405,406,409],{},[110,407,408],{},"Interactive Presentations & Whiteboards",": Publish infinite Canvas boards or detailed Excalidraw sketches as fully interactive, standalone webpages to present ideas visually without requiring the recipient to install Obsidian.",[42,411,412,415],{},[110,413,414],{},"Self-Hosted Documentation Hubs",": Bypass the need for static site generators by using Obsidian as your CMS, publishing beautifully rendered markdown documentation instantly.",[10,417,419],{"id":418},"gallery","Gallery",[421,422,424],"h3",{"id":423},"rich-markdown-rendering","Rich Markdown Rendering",[426,427,428],"blockquote",{},[15,429,430],{},"including hover preview popovers, canvas & excalidraw embeds",[27,432],{"src":433,"alt":434,"className":435},"\u002Fportfolio\u002Fobsidian-s3-publisher\u002Fmarkdown-dark.png","Markdown Rendering Dark Theme",[436,437,438,439],"hidden","dark:block","ring-1","ring-white\u002F10",[27,441],{"src":442,"alt":443,"className":444},"\u002Fportfolio\u002Fobsidian-s3-publisher\u002Fmarkdown-light.png","Markdown Rendering Light Theme",[445,446,438,447],"block","dark:hidden","ring-black\u002F5",[421,449,451],{"id":450},"interactive-canvas-support","Interactive Canvas Support",[27,453],{"src":454,"alt":455,"className":456},"\u002Fportfolio\u002Fobsidian-s3-publisher\u002Fcanvas-dark.png","Interactive Canvas Dark Theme",[436,437,438,439],[27,458],{"src":459,"alt":460,"className":461},"\u002Fportfolio\u002Fobsidian-s3-publisher\u002Fcanvas-light.png","Interactive Canvas Light Theme",[445,446,438,447],[421,463,465],{"id":464},"native-excalidraw-notes","Native Excalidraw Notes",[27,467],{"src":468,"alt":469,"className":470},"\u002Fportfolio\u002Fobsidian-s3-publisher\u002Fexcalidraw-dark.png","Excalidraw Integration Dark Theme",[436,437,438,439],[27,472],{"src":473,"alt":474,"className":475},"\u002Fportfolio\u002Fobsidian-s3-publisher\u002Fexcalidraw-light.png","Excalidraw Integration Light Theme",[445,446,438,447],{"title":55,"searchDepth":56,"depth":56,"links":477},[478,479,480,481],{"id":310,"depth":56,"text":311},{"id":320,"depth":56,"text":321},{"id":387,"depth":56,"text":388},{"id":418,"depth":56,"text":419,"children":482},[483,485,486],{"id":423,"depth":484,"text":424},3,{"id":450,"depth":484,"text":451},{"id":464,"depth":484,"text":465},"Publish your Obsidian notes, Canvas files, and Excalidraw drawings to any S3-compatible object storage.",[489,490,491],"Obsidian","S3","TypeScript","\u002Fportfolio\u002Fobsidian-s3-publisher\u002Fobsidian-s3-publisher.jpg",[494],{"title":495,"url":496},"GitLab Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fobsidian-s3-publisher",{},"\u002Fportfolio\u002Fobsidian-s3-publisher",{"title":296,"description":487},"portfolio\u002Fobsidian-s3-publisher",[502,503],"Open Source","Plugin","BGBLd_2L3YoAdHHrGfbWlO1syjc_lDx3xNNRsioCGPo",{"id":506,"title":507,"body":508,"client":648,"date":151,"description":649,"extension":63,"featured":74,"features":650,"image":652,"image_transparency":64,"links":653,"meta":657,"navigation":74,"path":658,"seo":659,"stem":660,"types":661,"url":82,"__hash__":662},"portfolio\u002Fportfolio\u002Fper-website-2026.md","P.E.R. Website (2026)",{"type":7,"value":509,"toc":638},[510,514,517,521,525,545,549,563,567,570,590,594,614,618],[10,511,513],{"id":512},"executive-summary","Executive Summary",[15,515,516],{},"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.",[10,518,520],{"id":519},"key-technical-implementations","Key Technical Implementations",[421,522,524],{"id":523},"_1-high-performance-block-architecture","1. High-Performance Block Architecture",[39,526,527,533,539],{},[42,528,529,532],{},[110,530,531],{},"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.",[42,534,535,538],{},[110,536,537],{},"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).",[42,540,541,544],{},[110,542,543],{},"Unified Registry",": Centralized block registration system that handles metadata, attributes, and render callbacks in a strict, type-safe manner.",[421,546,548],{"id":547},"_2-design-system-scss-framework","2. Design System & SCSS Framework",[39,550,551,557],{},[42,552,553,556],{},[110,554,555],{},"Responsive Typography Scale",": Implemented a fluid typography system to ensure perfect scaling across all devices.",[42,558,559,562],{},[110,560,561],{},"Component Abstraction",": Created reusable components for common UI patterns, ensuring visual consistency across all 15+ custom blocks.",[421,564,566],{"id":565},"_3-custom-linkedin-integration-system","3. Custom LinkedIn Integration System",[15,568,569],{},"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.",[39,571,572,578,584],{},[42,573,574,577],{},[110,575,576],{},"API Rate Limit Protection",": Built a custom caching layer to decouple frontend page loads from the LinkedIn API.",[42,579,580,583],{},[110,581,582],{},"Cron-Based Synchronization",": Implemented a daily background job to fetch and update company posts, ensuring content freshness without impacting user page load times.",[42,585,586,589],{},[110,587,588],{},"Admin Interface",": Developed a comprehensive settings panel in the WordPress Customizer for API credential management, manual cache clearing, and connection status monitoring.",[421,591,593],{"id":592},"_4-advanced-theme-configuration","4. Advanced Theme Configuration",[39,595,596,602,608],{},[42,597,598,601],{},[110,599,600],{},"Environment Intelligence",": Built core logic to detect Development vs. Production environments, automatically toggling between debug logging\u002Funminified assets and production-optimized caching.",[42,603,604,607],{},[110,605,606],{},"Extended Customizer API",": Added extensive configuration options for \"Archive Pages\" (Cases, Services, Jobs).",[42,609,610,613],{},[110,611,612],{},"Security Hardening",": Implemented strict nonce verification for AJAX actions and comprehensive output escaping across all templates to prevent XSS vulnerabilities.",[10,615,617],{"id":616},"development-workflow-tooling","Development Workflow & Tooling",[39,619,620,626,632],{},[42,621,622,625],{},[110,623,624],{},"Local Development",": Containerized environment using Docker for consistent PHP\u002FMySQL versions matching production.",[42,627,628,631],{},[110,629,630],{},"Build Pipeline",": Custom Webpack and Sass configurations to handle asset optimization, minification, and source map generation.",[42,633,634,637],{},[110,635,636],{},"Code Quality",": Adherence to WordPress Coding Standards (WPCS) with strict typing and documentation so future developers can pick up the code easily.",{"title":55,"searchDepth":56,"depth":56,"links":639},[640,641,647],{"id":512,"depth":56,"text":513},{"id":519,"depth":56,"text":520,"children":642},[643,644,645,646],{"id":523,"depth":484,"text":524},{"id":547,"depth":484,"text":548},{"id":565,"depth":484,"text":566},{"id":592,"depth":484,"text":593},{"id":616,"depth":56,"text":617},"P.E.R. Agency","P.E.R. website.",[154,155,157,66,156,651,67],"React","\u002Fportfolio\u002Fper-website-2026\u002Fglass-mockup.png",[654],{"title":655,"url":656},"P.E.R. Agency Website","https:\u002F\u002Fper-agency.com",{},"\u002Fportfolio\u002Fper-website-2026",{"title":507,"description":649},"portfolio\u002Fper-website-2026",[164,80],"Ci6m-9rH_ueRZIcJ5qFCoZsqioi1uisN8YKnuGSwoOM",{"id":664,"title":665,"body":666,"client":737,"date":151,"description":738,"extension":63,"featured":64,"features":739,"image":740,"image_transparency":64,"links":741,"meta":745,"navigation":74,"path":746,"seo":747,"stem":748,"types":749,"url":82,"__hash__":750},"portfolio\u002Fportfolio\u002Fproson-2026.de.md","Proson gGmbh (2026)",{"type":7,"value":667,"toc":731},[668,670,673,677,680,683,715,719,726,728],[10,669,94],{"id":93},[15,671,672],{},"Proson benötigte eine moderne, barrierefreie und flexible digitale Präsenz, die die Markenidentität widerspiegelt, zusammen mit der robusten Funktionalität eines Content-Management-Systems auf Enterprise-Niveau. Das Ziel war es, von Grund auf ein maßgeschneidertes Erlebnis zu schaffen und herkömmliche Vorlagen durch eine individuelle Lösung zu ersetzen, die Benutzererfahrung und redaktionelle Flexibilität in den Mittelpunkt stellt.",[10,674,676],{"id":675},"ansatz-design-individuelle-umsetzung","Ansatz: Design & individuelle Umsetzung",[15,678,679],{},"Die native Betreuung des gesamten Projektlebenszyklus begann mit einer umfassenden UI\u002FUX-Designphase. Die Entwicklung einer eigenständigen, modernen Designsprache umfasste den Einsatz ausgewählter Typografie, maßgeschneiderter Webkomponenten und fließender Mikrointeraktionen, um die digitale Marke von Proson aufzuwerten.",[15,681,682],{},"Auf der technischen Seite wurde eine Individualentwicklung umgesetzt, um spezifische interaktive Funktionen zu ermöglichen:",[39,684,685,691,697,703,709],{},[42,686,687,690],{},[110,688,689],{},"Kursverwaltung & Filterung:"," Die Entwicklung eines optimierten Systems half den Nutzern bei der Navigation durch den Katalog der Bildungsangebote. Es organisiert Benutzerauswahlen wie Standort und Berufsfeld dynamisch, um effizient relevante Frontend-Ergebnisse zu liefern. Für das Backend entwickelte ich eine maßgeschneiderte redaktionelle Umgebung, die es dem Kunden ermöglicht, komplexe Angebotsdaten wie wiederkehrende Termine, regionale Ansprechpartner und spezifische Fördermöglichkeiten zu verwalten und zu veröffentlichen.",[42,692,693,696],{},[110,694,695],{},"Integrierte Probetag-Anfragen:"," Die Implementierung eines Anfrage-Workflows verknüpfte spezifische Kurse direkt mit Anfragen für Probetage. Die Formulare sind kontextbezogen, passen sich dem ausgewählten Angebot an und leiten Anfragen dynamisch an die richtigen regionalen Ansprechpartner weiter.",[42,698,699,702],{},[110,700,701],{},"Barrierefreiheit & Compliance:"," Die Plattform wurde nach hohen Richtlinien für Barrierefreiheit entwickelt und geht über rein visuelle Kontraste hinaus. In Anerkennung der Bedeutung einer inklusiven Erfahrung integrierte ich eine maßgeschneiderte Screen-to-Speech-Funktion nativ in die Plattform, die es den Nutzern ermöglicht, sich auf Wunsch Seiteninhalte vorlesen zu lassen.",[42,704,705,708],{},[110,706,707],{},"Maßgeschneiderte Block-Architektur:"," Die Etablierung eines modularen, blockbasierten Bearbeitungserlebnisses ermöglichte es dem Redaktionsteam, komplexe Seiten einfach zu erstellen und dabei die Markenkonsistenz zu wahren.",[42,710,711,714],{},[110,712,713],{},"Performance-First Frontend:"," Ein ausgeklügeltes Build-System stellt sicher, dass das Frontend trotz dieser komplexen interaktiven Funktionen leichtgewichtig, schnell und responsiv bleibt.",[10,716,718],{"id":717},"technische-details","Technische Details",[15,720,721,722,725],{},"Umgesetzt wurde es mit einer ",[110,723,724],{},"Monorepo-Architektur",". Durch die Nutzung einer gemeinsamen, optimierten Kern-Codebasis mit einem Schwesterprojekt (tba) profitiert Proson von Sicherheit auf Enterprise-Niveau, kontinuierlichen Funktions-Updates und komplexer Datenlogik, ohne die eigenständige Frontend-Ästhetik zu beeinträchtigen. Diese Architektur ermöglicht eine individuell gestaltete Theme-Ebene, die die Leistungsfähigkeit eines größeren technischen Ökosystems erbt.",[10,727,141],{"id":140},[15,729,730],{},"Die ausgelieferte digitale Plattform ist robust und wartbar. Proson verfügt über eine nutzerzentrierte, leistungsstarke Website, die die Marke einfängt, integrierte Nutzerfunktionen bietet und technisch für zukünftige Skalierbarkeit gerüstet ist.",{"title":55,"searchDepth":56,"depth":56,"links":732},[733,734,735,736],{"id":93,"depth":56,"text":94},{"id":675,"depth":56,"text":676},{"id":717,"depth":56,"text":718},{"id":140,"depth":56,"text":141},"Proson gGmbh","Proson gGmbh Landingpage 2026",[154,155,66,156,67,157],"\u002Fportfolio\u002Fproson-2026\u002Fproson_portfolio_glass.png",[742],{"title":743,"url":744},"Proson gGmbh Website","https:\u002F\u002Fwww.proson-ggmbh.de",{},"\u002Fportfolio\u002Fproson-2026.de",{"title":665,"description":738},"portfolio\u002Fproson-2026.de",[164,80,165,166],"Frb6Y72trDZGzQNpARyjSjkUevaI4jZ0Da8Uge7GZrM",{"id":752,"title":665,"body":753,"client":737,"date":151,"description":738,"extension":63,"featured":64,"features":823,"image":740,"image_transparency":64,"links":82,"meta":824,"navigation":74,"path":825,"seo":826,"stem":827,"types":828,"url":82,"__hash__":829},"portfolio\u002Fportfolio\u002Fproson-2026.en.md",{"type":7,"value":754,"toc":817},[755,757,760,764,767,770,801,805,812,814],[10,756,175],{"id":174},[15,758,759],{},"Proson required a modern, accessible, and flexible digital presence that reflected its brand identity, alongside the robust functionality of an enterprise-level content management system. The goal was to build a tailored experience from the ground up, replacing off-the-shelf templates with a bespoke solution focused on user experience and editorial flexibility.",[10,761,763],{"id":762},"approach-design-custom-execution","Approach: Design & Custom Execution",[15,765,766],{},"Handling the entire project lifecycle natively began with an extensive UI\u002FUX design phase. Creating a distinct, modern design language involved utilizing curated typography, custom web components, and smooth micro-interactions to elevate the digital brand of Proson.",[15,768,769],{},"On the technical side, a custom implementation was executed to drive specific interactive features:",[39,771,772,778,784,790,796],{},[42,773,774,777],{},[110,775,776],{},"Course Management & Filtering:"," Developing a streamlined system helped users navigate the catalog of educational offers. It dynamically organizes user selections, such as location and professional field, to provide relevant frontend results efficiently. For the backend, I built a tailored editorial experience that allows the client to manage and publish complex offer data, such as recurring dates, regional contacts, and specific funding options.",[42,779,780,783],{},[110,781,782],{},"Integrated Trial Requests:"," Implementing an inquiry workflow connected specific courses directly with trial-day requests. The forms are context-aware, adapting to the selected offer and dynamically routing requests to the correct regional contacts.",[42,785,786,789],{},[110,787,788],{},"Accessibility & Compliance:"," Built to meet high accessibility guidelines, the platform goes beyond visual contrast. Recognizing the importance of an inclusive experience, I integrated a custom Screen-to-Speech function natively into the platform, allowing users to have page content read aloud on demand.",[42,791,792,795],{},[110,793,794],{},"Bespoke Block Architecture:"," Establishing a modular, block-based editing experience empowered the editorial team to construct complex pages easily, ensuring brand consistency at scale.",[42,797,798,800],{},[110,799,713],{}," A sophisticated build system ensures that despite these complex interactive features, the frontend remains lightweight, fast, and responsive.",[10,802,804],{"id":803},"technical-details","Technical Details",[15,806,807,808,811],{},"Proson is powered by a ",[110,809,810],{},"Monorepo architecture",". By leveraging a shared, optimized core codebase with a sister project (tba), Proson benefits from enterprise-grade security, continuous feature updates, and complex data logic, without compromising its standalone front-end aesthetic. This architecture allows for an individually designed theme layer that inherits the power of a larger technical ecosystem.",[10,813,221],{"id":220},[15,815,816],{},"The delivered digital platform is resilient and maintainable. Proson now possesses a user-centric, high-performance website that captures its brand, provides integrated user features, and is technically equipped for future scalability.",{"title":55,"searchDepth":56,"depth":56,"links":818},[819,820,821,822],{"id":174,"depth":56,"text":175},{"id":762,"depth":56,"text":763},{"id":803,"depth":56,"text":804},{"id":220,"depth":56,"text":221},[154,155,66,156,67,157],{},"\u002Fportfolio\u002Fproson-2026.en",{"title":665,"description":738},"portfolio\u002Fproson-2026.en",[164,80,165,166],"NWslywD90UuWBs0X2nwVrXNC4y6rKc0Bd1KFPFG5T_M",{"id":831,"title":832,"body":833,"client":840,"date":61,"description":841,"extension":63,"featured":74,"features":842,"image":847,"image_transparency":64,"links":82,"meta":848,"navigation":74,"path":849,"seo":850,"stem":851,"types":852,"url":82,"__hash__":853},"portfolio\u002Fportfolio\u002Fb2b-ai-agent-frontend.md","B2B AI Agent Frontend",{"type":7,"value":834,"toc":838},[835],[15,836,837],{},"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":55,"searchDepth":56,"depth":56,"links":839},[],"TIQ.solutions","A B2B AI agents chat platform.",[843,844,491,66,845,846],"Vue","Nuxt","PostgreSQL","FastAPI","\u002Fportfolio\u002Fb2b-ai-agent-frontend\u002Fmain-visual-glass.png",{},"\u002Fportfolio\u002Fb2b-ai-agent-frontend",{"title":832,"description":841},"portfolio\u002Fb2b-ai-agent-frontend",[79,166,165],"WHCqQDX3C-tG63qVYn6nH_GVcJOz_HujrscgLT7NslM",{"id":4,"title":5,"body":855,"client":60,"date":61,"description":62,"extension":63,"featured":64,"features":887,"image":68,"image_transparency":64,"links":888,"meta":890,"navigation":74,"path":75,"seo":891,"stem":77,"types":892,"url":82,"__hash__":83},{"type":7,"value":856,"toc":883},[857,859,861,863,865,869,871,873,879],[10,858,13],{"id":12},[15,860,17],{},[15,862,20],{},[15,864,23],{},[15,866,867],{},[27,868],{"alt":29,"src":30},[10,870,34],{"id":33},[15,872,37],{},[39,874,875,877],{},[42,876,44],{},[42,878,47],{},[15,880,881],{},[27,882],{"alt":52,"src":53},{"title":55,"searchDepth":56,"depth":56,"links":884},[885,886],{"id":12,"depth":56,"text":13},{"id":33,"depth":56,"text":34},[66,67],[889],{"title":71,"url":72},{},{"title":5,"description":62},[79,80,81],{"id":894,"title":895,"body":896,"client":82,"date":61,"description":1066,"extension":63,"featured":74,"features":1067,"image":1070,"image_transparency":64,"links":1071,"meta":1074,"navigation":74,"path":1075,"seo":1076,"stem":1077,"types":1078,"url":82,"__hash__":1080},"portfolio\u002Fportfolio\u002Fradio-tape.md","Radio Tape (macOS)",{"type":7,"value":897,"toc":1058},[898,902,908,914,917,921,932,936,986,990,993,1025,1029,1032],[10,899,901],{"id":900},"the-concept-inspiration","The Concept & Inspiration",[15,903,904],{},[905,906,907],"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.”",[15,909,910,913],{},[110,911,912],{},"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.",[15,915,916],{},"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.",[10,918,920],{"id":919},"features-technical-implementation","Features & Technical Implementation",[15,922,923,924,927,928,931],{},"RadioTape is built entirely natively for macOS using ",[110,925,926],{},"SwiftUI",", delivering a modern, responsive, and adaptive interface. The application seamlessly integrates into the system with full Control Center and Lock Screen support via the ",[110,929,930],{},"Now Playing"," integration.",[421,933,935],{"id":934},"audio-recording-engine","Audio & Recording Engine",[39,937,938,952,962,976],{},[42,939,940,943,944,947,948,951],{},[110,941,942],{},"Intelligent Track Detection",": The app utilizes ",[110,945,946],{},"AVFoundation"," and custom ",[367,949,950],{},"ICY"," metadata parsing to accurately detect track boundaries and real-time stream metadata.",[42,953,954,957,958,961],{},[110,955,956],{},"Direct Stream Recording",": Recordings are captured efficiently using ",[367,959,960],{},"URLSessionDataTask"," to directly download stream data, ensuring no loss of audio quality and saving system resources.",[42,963,964,967,968,975],{},[110,965,966],{},"Global Radio Access",": Integrated with the public API of ",[969,970,974],"a",{"href":971,"rel":972},"https:\u002F\u002Fwww.radio-browser.info",[973],"nofollow","radio-browser.info",", RadioTape offers an easily navigable database of over 50,000 global internet radio stations categorized by genre, country, and language.",[42,977,978,981,982,985],{},[110,979,980],{},"Reactive Architecture",": Built using ",[110,983,984],{},"Combine"," to manage complex streaming states, buffering, and user interactions flawlessly.",[421,987,989],{"id":988},"file-based-zero-lock-in-library","File-Based \"Zero Lock-In\" Library",[15,991,992],{},"Simplicity and user ownership are at the core of the RadioTape philosophy. The entire library is built upon a transparent, user-accessible folder structure.",[39,994,995,1005,1015],{},[42,996,997,1000,1001,1004],{},[110,998,999],{},"Standardized Formats",": Every recorded track is saved as a standard ",[367,1002,1003],{},".mp3"," file.",[42,1006,1007,1010,1011,1014],{},[110,1008,1009],{},"Extensible Metadata",": Metadata (such as artist, title, station, and duration) is stored in an accompanying ",[367,1012,1013],{},".json"," sidecar file alongside the audio.",[42,1016,1017,1020,1021,1024],{},[110,1018,1019],{},"Your Files, Your Rules",": Because the library lives directly in a designated directory (by default within your ",[367,1022,1023],{},"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.",[10,1026,1028],{"id":1027},"the-future-a-nostalgic-audio-diary","The Future: A Nostalgic Audio Diary",[15,1030,1031],{},"The app's roadmap embraces its skeuomorphic roots and the emotional connection of the mixtape era, turning digital files back into tangible memories.",[39,1033,1034,1040,1046,1052],{},[42,1035,1036,1039],{},[110,1037,1038],{},"Visual Mixtapes",": Playlists will be visually represented as customizable cassette tapes, complete with user-provided images and back covers populated with tracklists.",[42,1041,1042,1045],{},[110,1043,1044],{},"Library as a Shelf",": The library interface will evolve into a virtual \"tape shelf,\" bringing back a touch of classic, playful skeuomorphic design.",[42,1047,1048,1051],{},[110,1049,1050],{},"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.",[42,1053,1054,1057],{},[110,1055,1056],{},"Effortless Sharing",": Thanks to the transparent file structure, sharing a mixtape with a friend will be as simple as copying a folder.",{"title":55,"searchDepth":56,"depth":56,"links":1059},[1060,1061,1065],{"id":900,"depth":56,"text":901},{"id":919,"depth":56,"text":920,"children":1062},[1063,1064],{"id":934,"depth":484,"text":935},{"id":988,"depth":484,"text":989},{"id":1027,"depth":56,"text":1028},"A macOS application that brings the nostalgic joy of recording radio to the modern era. Automated.",[1068,1069],"Swift","macOS","\u002Fportfolio\u002Fradio-tape\u002Fmain-visual-composite.png",[1072],{"title":71,"url":1073},"https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fradiotape",{},"\u002Fportfolio\u002Fradio-tape",{"title":895,"description":1066},"portfolio\u002Fradio-tape",[1079,165,166,502],"App","jjZI9IIjVK7-fI_ws9Ga2GIcTtqHZXnxDQekXgzzeIg",{"id":1082,"title":1083,"body":1084,"client":840,"date":1181,"description":1182,"extension":63,"featured":74,"features":1183,"image":1185,"image_transparency":64,"links":82,"meta":1186,"navigation":74,"path":1187,"seo":1188,"stem":1189,"types":1190,"url":82,"__hash__":1191},"portfolio\u002Fportfolio\u002Flaw-firm-document-automation.md","Law Firm Document Automation",{"type":7,"value":1085,"toc":1175},[1086,1088,1091,1095,1098,1101,1104,1108,1115,1121,1124,1130,1133,1139,1142,1148,1154,1160,1166,1169],[10,1087,34],{"id":33},[15,1089,1090],{},"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.",[421,1092,1094],{"id":1093},"about-the-projects-requirements","About the projects requirements",[15,1096,1097],{},"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.",[15,1099,1100],{},"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.",[15,1102,1103],{},"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.",[421,1105,1107],{"id":1106},"about-the-new-implementation","About the new implementation",[15,1109,1110,1111,1114],{},"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.",[1112,1113],"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.",[15,1116,1117],{},[27,1118],{"alt":1119,"src":1120},"The inbox — a sortable, searchable document table with status indicators for pipeline errors and inconsistencies.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F01_inbox.png",[15,1122,1123],{},"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).",[15,1125,1126],{},[27,1127],{"alt":1128,"src":1129},"Document preview with file metadata, email origin info, and processing status in the sidebar.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F02_preview.png",[15,1131,1132],{},"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).",[15,1134,1135],{},[27,1136],{"alt":1137,"src":1138},"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",[15,1140,1141],{},"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.",[15,1143,1144],{},[27,1145],{"alt":1146,"src":1147},"Case detail view showing the full email history, linked documents, and the automatically maintained Schadentabelle.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F04_email_history.png",[15,1149,1150,1151,1153],{},"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.",[1112,1152],{},"\nThe editor is implemented via the Quill Editor library.",[15,1155,1156],{},[27,1157],{"alt":1158,"src":1159},"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",[15,1161,1162],{},[27,1163],{"alt":1164,"src":1165},"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",[15,1167,1168],{},"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.",[15,1170,1171],{},[27,1172],{"alt":1173,"src":1174},"Administration panel for managing tenants, including database, email, and case-access configuration per firm.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F07_settings.png",{"title":55,"searchDepth":56,"depth":56,"links":1176},[1177],{"id":33,"depth":56,"text":34,"children":1178},[1179,1180],{"id":1093,"depth":484,"text":1094},{"id":1106,"depth":484,"text":1107},"2024","Automating document creation for law firms.",[843,844,491,66,1184,846],"Python","\u002Fportfolio\u002Flaw-firm-document-automation\u002Fmain-visual-glass.png",{},"\u002Fportfolio\u002Flaw-firm-document-automation",{"title":1083,"description":1182},"portfolio\u002Flaw-firm-document-automation",[79,166],"5rjHPOSVthB09D4fbQg4Rc-dSjFXZTZnepJUsBDVcjU",{"id":1193,"title":1194,"body":1195,"client":737,"date":1181,"description":1275,"extension":63,"featured":74,"features":1276,"image":1277,"image_transparency":64,"links":82,"meta":1278,"navigation":74,"path":1279,"seo":1280,"stem":1281,"types":1282,"url":82,"__hash__":1283},"portfolio\u002Fportfolio\u002Fproson-2024.en.md","Proson gGmbh (2024)",{"type":7,"value":1196,"toc":1269},[1197,1201,1204,1208,1211,1231,1235,1238,1264,1266],[10,1198,1200],{"id":1199},"the-vision","The Vision",[15,1202,1203],{},"Proson gGmbH needed a high-impact digital presence to quickly establish themselves on the market while their full portfolio of services was still in development. My mission was to design and develop a sophisticated, fast, and visually striking landing page that served as an immediate, professional entry point. The complete lifecycle of the project—from the initial UX wireframing and high-fidelity UI design to the complex technical execution—was entrusted to me. The goal was to deliver a sleek corporate \"business card\" that empowers content editors and seamlessly accommodates future growth without compromising the established design language.",[10,1205,1207],{"id":1206},"design-uiux-iteration","Design & UI\u002FUX Iteration",[15,1209,1210],{},"A bespoke design system was crafted, built around a harmonious color palette (featuring deep greens and warm beige tones) and highly readable typography utilizing a harmonic scale.",[39,1212,1213,1219,1225],{},[42,1214,1215,1218],{},[110,1216,1217],{},"Modern Design Patterns:"," Subtle drop shadows, dynamic hover states, and smooth transitions and parallax animations breathe life into the interface, ensuring it feels responsive and alive.",[42,1220,1221,1224],{},[110,1222,1223],{},"Micro-Interactions & Animation:"," Using custom Vanilla JavaScript and in-view detection, elegant, scroll-triggered reveal animations were implemented. Images and text boxes feature subtle parallax translations that engage the user as they scroll, creating a premium browsing experience.",[42,1226,1227,1230],{},[110,1228,1229],{},"Responsive by Heart:"," The UI is meticulously optimized for all viewports, ensuring a seamless journey whether on a massive 4k display or a mobile device, utilizing srcset for crisp, retina-ready imagery.",[10,1232,1234],{"id":1233},"technical-execution-architecture","Technical Execution & Architecture",[15,1236,1237],{},"Beneath the beautiful exterior lies a robust, enterprise-grade technical architecture tailored for performance and scalability.",[39,1239,1240,1246,1252,1258],{},[42,1241,1242,1245],{},[110,1243,1244],{},"Headless-Like Editing:"," Bloated page builders were completely bypassed. Instead, a suite of custom Gutenberg blocks was developed. This provides editors with an intuitive, visual drag-and-drop experience while strictly enforcing the design system's rules.",[42,1247,1248,1251],{},[110,1249,1250],{},"Optimized Frontend Foundation:"," The theme relies on a lightweight, dependency-free frontend. Unnecessary WordPress bloat (like jQuery) was stripped out, and a modular SCSS and ES6+ approach was adopted. Build tools optimize SVGs, compile styles, and minify assets for blazing-fast load times.",[42,1253,1254,1257],{},[110,1255,1256],{},"External API Integrations:"," The BITE HR API was seamlessly integrated, allowing job listings to be dynamically pulled and displayed natively within the website's design language, drastically reducing manual HR overhead.",[42,1259,1260,1263],{},[110,1261,1262],{},"Developer Experience & Infrastructure:"," The project is fully containerized using Docker, allowing for a perfectly mirrored local, staging, and production environment. Custom Node scripts automate database syncing, plugin management, and asset deployments, ensuring flawless continuous integration.",[10,1265,221],{"id":220},[15,1267,1268],{},"A high-performance landing page that served as a powerful initial market entry. Controlling both the design and the code enabled the delivery of an uncompromising digital \"business card\" where every pixel has a purpose, allowing the client to confidently present their growing portfolio of services while the larger digital ecosystem was being developed.",{"title":55,"searchDepth":56,"depth":56,"links":1270},[1271,1272,1273,1274],{"id":1199,"depth":56,"text":1200},{"id":1206,"depth":56,"text":1207},{"id":1233,"depth":56,"text":1234},{"id":220,"depth":56,"text":221},"Proson gGmbh landingpage 2024",[154,155,66,156,67],"\u002Fportfolio\u002Fproson-2024\u002Fproson_portfolio_glass.png",{},"\u002Fportfolio\u002Fproson-2024.en",{"title":1194,"description":1275},"portfolio\u002Fproson-2024.en",[164,80,165,166],"Uml5LmWrBQ4IMTOUpF8JIYENmB1wn9NdlLWXYQ38mu4",{"id":1285,"title":1194,"body":1286,"client":737,"date":1181,"description":1364,"extension":63,"featured":74,"features":1365,"image":1277,"image_transparency":64,"links":1366,"meta":1368,"navigation":74,"path":1369,"seo":1370,"stem":1371,"types":1372,"url":82,"__hash__":1373},"portfolio\u002Fportfolio\u002Fproson-2024.md",{"type":7,"value":1287,"toc":1358},[1288,1292,1295,1297,1300,1320,1324,1327,1353,1355],[10,1289,1291],{"id":1290},"die-vision","Die Vision",[15,1293,1294],{},"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.",[10,1296,1207],{"id":1206},[15,1298,1299],{},"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.",[39,1301,1302,1308,1314],{},[42,1303,1304,1307],{},[110,1305,1306],{},"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.",[42,1309,1310,1313],{},[110,1311,1312],{},"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.",[42,1315,1316,1319],{},[110,1317,1318],{},"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.",[10,1321,1323],{"id":1322},"technische-umsetzung-architektur","Technische Umsetzung & Architektur",[15,1325,1326],{},"Unter der ansprechenden Oberfläche verbirgt sich eine robuste, skalierbare technische Architektur, die speziell auf hohe Performance ausgelegt ist.",[39,1328,1329,1335,1341,1347],{},[42,1330,1331,1334],{},[110,1332,1333],{},"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.",[42,1336,1337,1340],{},[110,1338,1339],{},"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.",[42,1342,1343,1346],{},[110,1344,1345],{},"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.",[42,1348,1349,1352],{},[110,1350,1351],{},"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.",[10,1354,141],{"id":140},[15,1356,1357],{},"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":55,"searchDepth":56,"depth":56,"links":1359},[1360,1361,1362,1363],{"id":1290,"depth":56,"text":1291},{"id":1206,"depth":56,"text":1207},{"id":1322,"depth":56,"text":1323},{"id":140,"depth":56,"text":141},"Proson gGmbh Landingpage 2024",[154,155,66,156,67],[1367],{"title":743,"url":744},{},"\u002Fportfolio\u002Fproson-2024",{"title":1194,"description":1364},"portfolio\u002Fproson-2024",[164,80,165,166],"qkOfCDha3RT_cVO-IXFgYJkU9UWNc48WaOveQQ5kvMA",{"id":1375,"title":1376,"body":1377,"client":82,"date":1181,"description":1416,"extension":63,"featured":64,"features":1417,"image":1420,"image_transparency":64,"links":1421,"meta":1434,"navigation":74,"path":1435,"seo":1436,"stem":1437,"types":1438,"url":82,"__hash__":1439},"portfolio\u002Fportfolio\u002Fstandard-notes-plugins.md","Standard Notes Plugins",{"type":7,"value":1378,"toc":1410},[1379,1382,1386,1389,1393,1396,1400,1403,1407],[15,1380,1381],{},"Alongside custom themes, I developed several plugins for Standard Notes—specifically targeting the \"Super Editor\"—to improve the formatting experience, legibility, and visual structure of notes. These extensions are available through the official Standard Notes Community Plugins repository.",[10,1383,1385],{"id":1384},"focus-mode-max","Focus Mode Max",[15,1387,1388],{},"A toggle-able plugin designed to let the editor take over the whole window space, hiding the sidebar, notes list and top bar. It is entirely theme-agnostic and layers smoothly over your preferred color scheme. Very pracitcal for the spreadsheets editor.",[10,1390,1392],{"id":1391},"super-colors","Super Colors",[15,1394,1395],{},"A syntax-highlighting inspired approach for standard text, adding visual accents to specific elements within the Super Editor. By adding thematic color blocks, it enhances the scannability of information.",[10,1397,1399],{"id":1398},"muted-super-colors","Muted Super Colors",[15,1401,1402],{},"A refined, lower-contrast variant of the Super Colors plugin. It offers the same structural colorization benefits but uses a muted palette, designed not to distract from the main text content, especially when using lighter themes.",[10,1404,1406],{"id":1405},"super-typography","Super Typography",[15,1408,1409],{},"As the name implies, Super Typography is a dedicated layerable theme-extension focused entirely on spatial harmony. It provides significantly improved typographic handling, carefully adjusted line spacing, and a built-in max-width constraint for the editor, resulting in a much more comfortable long-form reading and writing experience.",{"title":55,"searchDepth":56,"depth":56,"links":1411},[1412,1413,1414,1415],{"id":1384,"depth":56,"text":1385},{"id":1391,"depth":56,"text":1392},{"id":1398,"depth":56,"text":1399},{"id":1405,"depth":56,"text":1406},"A collection of UI plugins for the Standard Notes Super Editor to enhance typography, layout and syntax colorization.",[1418,1419],"CSS","JavaScript","\u002Fportfolio\u002Fstandard-notes-plugins\u002Fmain-visual-composite.png",[1422,1425,1428,1431],{"title":1423,"url":1424},"Focus Mode Max Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fsn-focus-mode-max",{"title":1426,"url":1427},"Muted Super Colors Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fsn-muted-super-colors",{"title":1429,"url":1430},"Super Colors Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fsn-super-colors",{"title":1432,"url":1433},"Super Typography Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fsn-super-typography",{},"\u002Fportfolio\u002Fstandard-notes-plugins",{"title":1376,"description":1416},"portfolio\u002Fstandard-notes-plugins",[502,503],"IiubV9kukXpB15U23yCk9c39Wmtw9XbYJm39P2bwEnk",{"id":1441,"title":1442,"body":1443,"client":82,"date":1510,"description":1511,"extension":63,"featured":64,"features":1512,"image":1514,"image_transparency":64,"links":1515,"meta":1520,"navigation":74,"path":1521,"seo":1522,"stem":1523,"types":1524,"url":82,"__hash__":1526},"portfolio\u002Fportfolio\u002Fgnome-shell-extensions.md","GNOME Shell Extensions",{"type":7,"value":1444,"toc":1506},[1445,1452,1456,1467,1481,1485,1492,1503],[15,1446,1447,1448,1451],{},"As part of the ",[367,1449,1450],{},"asus-linux"," open source community, I contributed to and maintained native GNOME Shell extensions designed to bridge the gap between powerful command-line hardware tools and the user-friendly desktop experience. These extensions provide seamless integration for ASUS laptop owners running Linux.",[10,1453,1455],{"id":1454},"asusctl-gnome-extension","Asusctl GNOME Extension",[15,1457,1458,1459,1462,1463,1466],{},"A comprehensive GNOME integration for the ",[367,1460,1461],{},"asusctl"," (",[367,1464,1465],{},"asusd",") daemon. It provides a convenient popup menu directly in the system tray, allowing users to:",[39,1468,1469,1472,1475,1478],{},[42,1470,1471],{},"Effortlessly change battery charging limits to preserve battery health.",[42,1473,1474],{},"Control the AniMe Matrix display brightness and toggle its state.",[42,1476,1477],{},"Monitor active hardware profiles and fan curves.",[42,1479,1480],{},"Receive native desktop notifications for battery charge limits and daemon status changes.",[10,1482,1484],{"id":1483},"supergfxctl-gnome-extension","Supergfxctl GNOME Extension",[15,1486,1487,1488,1491],{},"A dedicated, platform-independent extension for managing ",[367,1489,1490],{},"supergfxctl",". This tool focuses entirely on hybrid graphics management, enabling users to:",[39,1493,1494,1497,1500],{},[42,1495,1496],{},"Quickly switch between different GPU modes (e.g., Integrated, Dedicated, Hybrid, Compute) without relying on the command line.",[42,1498,1499],{},"Check current active GPU status at a glance.",[42,1501,1502],{},"Trigger safe session logouts when a graphics mode change requires restarting the desktop environment.",[15,1504,1505],{},"Both extensions are built with modern JavaScript and integrate natively into the GNOME Shell architecture, providing a polished and native feel for Linux power users.",{"title":55,"searchDepth":56,"depth":56,"links":1507},[1508,1509],{"id":1454,"depth":56,"text":1455},{"id":1483,"depth":56,"text":1484},"2023","System utility extensions for the GNOME desktop environment, providing granular hardware control for ASUS laptops.",[1419,1513],"GNOME","\u002Fportfolio\u002Fgnome-shell-extensions\u002Fmain-visual-composite.png",[1516,1518],{"title":1455,"url":1517},"https:\u002F\u002Fgitlab.com\u002Fasus-linux\u002Fasusctl-gex",{"title":1484,"url":1519},"https:\u002F\u002Fgitlab.com\u002Fasus-linux\u002Fsupergfxctl-gex",{},"\u002Fportfolio\u002Fgnome-shell-extensions",{"title":1442,"description":1511},"portfolio\u002Fgnome-shell-extensions",[502,1525],"Integration","IeHj9hq96wVzoM_8SOsoZHcVzPtgx7Xs1mzbImFbjUs",{"id":1528,"title":1529,"body":1530,"client":1571,"date":1510,"description":1572,"extension":63,"featured":74,"features":1573,"image":1574,"image_transparency":64,"links":1575,"meta":1579,"navigation":74,"path":1580,"seo":1581,"stem":1582,"types":1583,"url":82,"__hash__":1584},"portfolio\u002Fportfolio\u002Fhansen-heinrich.md","Hansen & Heinrich",{"type":7,"value":1531,"toc":1566},[1532,1536,1539,1542,1546],[10,1533,1535],{"id":1534},"strategic-digital-presence","Strategic Digital Presence",[15,1537,1538],{},"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.",[15,1540,1541],{},"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.",[421,1543,1545],{"id":1544},"key-technical-achievements","Key Technical Achievements",[39,1547,1548,1554,1560],{},[42,1549,1550,1553],{},[110,1551,1552],{},"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.",[42,1555,1556,1559],{},[110,1557,1558],{},"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.",[42,1561,1562,1565],{},[110,1563,1564],{},"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":55,"searchDepth":56,"depth":56,"links":1567},[1568],{"id":1534,"depth":56,"text":1535,"children":1569},[1570],{"id":1544,"depth":484,"text":1545},"Foundry Berlin","Hansen & Heinrich website.",[154,155,157,66,67],"\u002Fportfolio\u002Fhansen-heinrich\u002Fglass_mockup.png",[1576],{"title":1577,"url":1578},"Hansen & Heinrich Website","https:\u002F\u002Fwww.hansen-heinrich.de",{},"\u002Fportfolio\u002Fhansen-heinrich",{"title":1529,"description":1572},"portfolio\u002Fhansen-heinrich",[164,80],"k2YX0AFl-a_cu3HQ3xmIgN9mLDTZ-KEfFiB3LmKouso",{"id":1586,"title":1587,"body":1588,"client":648,"date":1510,"description":649,"extension":63,"featured":74,"features":1749,"image":1750,"image_transparency":64,"links":82,"meta":1751,"navigation":74,"path":1752,"seo":1753,"stem":1754,"types":1755,"url":82,"__hash__":1756},"portfolio\u002Fportfolio\u002Fper-website-2023.md","P.E.R. Website (2023)",{"type":7,"value":1589,"toc":1739},[1590,1594,1598,1601,1605,1643,1645,1649,1652,1656,1659,1691,1695,1715,1719],[300,1591,1593],{"id":1592},"portfolio-per-agency-website-relaunch","Portfolio: per-agency Website Relaunch",[10,1595,1597],{"id":1596},"project-overview","Project Overview",[15,1599,1600],{},"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.",[10,1602,1604],{"id":1603},"technology-stack","Technology Stack",[39,1606,1607,1613,1619,1625,1631,1637],{},[42,1608,1609,1612],{},[110,1610,1611],{},"Core:"," WordPress (Custom Theme Development)",[42,1614,1615,1618],{},[110,1616,1617],{},"Backend:"," PHP, MySQL (MariaDB)",[42,1620,1621,1624],{},[110,1622,1623],{},"Frontend:"," SCSS (SASS), JavaScript (ES6+), Anime.js",[42,1626,1627,1630],{},[110,1628,1629],{},"CMS Customization:"," Advanced Custom Fields (ACF) Pro",[42,1632,1633,1636],{},[110,1634,1635],{},"Build Tools:"," NPM (node-sass, postcss, uglify-js, svgo)",[42,1638,1639,1642],{},[110,1640,1641],{},"Environment:"," Docker (Docker Compose)",[10,1644,321],{"id":320},[421,1646,1648],{"id":1647},"modular-design-system","Modular Design System",[15,1650,1651],{},"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.",[421,1653,1655],{"id":1654},"custom-content-management","Custom Content Management",[15,1657,1658],{},"Extended WordPress core functionality with Custom Post Types (CPTs) to structure complex data:",[39,1660,1661,1667,1673,1679,1685],{},[42,1662,1663,1666],{},[110,1664,1665],{},"Cases:"," Portfolio items with dedicated archive and detail views.",[42,1668,1669,1672],{},[110,1670,1671],{},"Services (Leistungen):"," Detailed service descriptions.",[42,1674,1675,1678],{},[110,1676,1677],{},"Jobs (Karriere):"," Recruitment section with location filtering.",[42,1680,1681,1684],{},[110,1682,1683],{},"Staff:"," Team member profiles.",[42,1686,1687,1690],{},[110,1688,1689],{},"Locations (Orte):"," Taxonomy for filtering content by agency location.",[421,1692,1694],{"id":1693},"performance-optimization","Performance & Optimization",[39,1696,1697,1703,1709],{},[42,1698,1699,1702],{},[110,1700,1701],{},"SVG System:"," Custom SVG icon management to inline SVGs for fast loading and styling flexibility.",[42,1704,1705,1708],{},[110,1706,1707],{},"Asset Optimization:"," Automated build pipeline for minifying CSS and JS, and optimizing SVGs.",[42,1710,1711,1714],{},[110,1712,1713],{},"Bloat Removal:"," Extensive cleanup of default WordPress assets to minimize request count and page size.",[421,1716,1718],{"id":1717},"development-workflow","Development Workflow",[39,1720,1721,1727,1733],{},[42,1722,1723,1726],{},[110,1724,1725],{},"Dockerized Environment:"," Consistent local development environment ensuring parity with production.",[42,1728,1729,1732],{},[110,1730,1731],{},"Component-Based Architecture:"," Template parts organized by functionality, promoting code reusability and maintainability.",[42,1734,1735,1738],{},[110,1736,1737],{},"SCSS Architecture:"," Modular CSS structure with separate builds for frontend and admin styles.",{"title":55,"searchDepth":56,"depth":56,"links":1740},[1741,1742,1743],{"id":1596,"depth":56,"text":1597},{"id":1603,"depth":56,"text":1604},{"id":320,"depth":56,"text":321,"children":1744},[1745,1746,1747,1748],{"id":1647,"depth":484,"text":1648},{"id":1654,"depth":484,"text":1655},{"id":1693,"depth":484,"text":1694},{"id":1717,"depth":484,"text":1718},[154,155,157,66,156,67],"\u002Fportfolio\u002Fper-website-2023\u002Fglass-mockup.png",{},"\u002Fportfolio\u002Fper-website-2023",{"title":1587,"description":649},"portfolio\u002Fper-website-2023",[164,80],"df__qQ-NSRKK7TsgKH4_iWhgLli67g430OWsLI2yQTg",{"id":1758,"title":1759,"body":1760,"client":1882,"date":1510,"description":1883,"extension":63,"featured":74,"features":1884,"image":1885,"image_transparency":64,"links":1886,"meta":1889,"navigation":74,"path":1890,"seo":1891,"stem":1892,"types":1893,"url":82,"__hash__":1896},"portfolio\u002Fportfolio\u002Ftiq-website-2023.md","TIQ.Solutions Website",{"type":7,"value":1761,"toc":1872},[1762,1764,1767,1771,1775,1789,1793,1807,1811,1831,1833,1865,1869],[10,1763,1597],{"id":1596},[15,1765,1766],{},"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.",[10,1768,1770],{"id":1769},"key-technical-highlights","Key Technical Highlights",[421,1772,1774],{"id":1773},"_1-advanced-custom-wordpress-architecture","1. Advanced Custom WordPress Architecture",[39,1776,1777,1783],{},[42,1778,1779,1782],{},[110,1780,1781],{},"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.",[42,1784,1785,1788],{},[110,1786,1787],{},"Asset Optimization",": Implemented a custom asset loading strategy that conditionally dequeues unused parent-theme scripts and styles, significantly improving Core Web Vitals performance.",[421,1790,1792],{"id":1791},"_2-ai-powered-assistant-tiq-chatbot","2. AI-Powered Assistant (\"TIQ Chatbot\")",[39,1794,1795,1801],{},[42,1796,1797,1800],{},[110,1798,1799],{},"Hybrid Architecture",": Developed a custom WordPress integration acting as a bridge to an Azure-hosted Python application.",[42,1802,1803,1806],{},[110,1804,1805],{},"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.",[421,1808,1810],{"id":1809},"_3-interactive-lead-gen-tool-reifegrad-check","3. Interactive Lead Gen Tool (\"Reifegrad-Check\")",[39,1812,1813,1819,1825],{},[42,1814,1815,1818],{},[110,1816,1817],{},"Elementor Integration",": Created a custom Elementor widget allowing marketing teams to place the assessment tool anywhere on the site via drag-and-drop.",[42,1820,1821,1824],{},[110,1822,1823],{},"PDF Report Generation",": Integrated PDF generation to dynamically generate personalized \"Maturity Level\" PDF reports for users immediately upon form submission.",[42,1826,1827,1830],{},[110,1828,1829],{},"Data-Driven Logic",": The plugin calculates maturity scores in real-time and segments users, feeding valuable qualified leads into the sales funnel.",[10,1832,1604],{"id":1603},[39,1834,1835,1841,1847,1853,1859],{},[42,1836,1837,1840],{},[110,1838,1839],{},"CMS",": WordPress (Custom Child Theme)",[42,1842,1843,1846],{},[110,1844,1845],{},"Frontend",": PHP, SCSS, JavaScript (jQuery\u002FVanilla)",[42,1848,1849,1852],{},[110,1850,1851],{},"Backend\u002FServices",": Python (Azure Web App), MySQL",[42,1854,1855,1858],{},[110,1856,1857],{},"Integrations",": Polylang, Elementor Pro, Advanced Custom Fields (ACF)",[42,1860,1861,1864],{},[110,1862,1863],{},"DevOps",": Docker-based local development environment with Composer\u002FNPM dependency management.",[10,1866,1868],{"id":1867},"impact","Impact",[15,1870,1871],{},"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":55,"searchDepth":56,"depth":56,"links":1873},[1874,1875,1880,1881],{"id":1596,"depth":56,"text":1597},{"id":1769,"depth":56,"text":1770,"children":1876},[1877,1878,1879],{"id":1773,"depth":484,"text":1774},{"id":1791,"depth":484,"text":1792},{"id":1809,"depth":484,"text":1810},{"id":1603,"depth":56,"text":1604},{"id":1867,"depth":56,"text":1868},"TIQ.Solutions","TIQ website.",[154,155,157,66,156,67],"\u002Fportfolio\u002Ftiq-website-2023\u002Findex-generated.png",[1887],{"title":1759,"url":1888},"https:\u002F\u002Fwww.tiq-solutions.de",{},"\u002Fportfolio\u002Ftiq-website-2023",{"title":1759,"description":1883},"portfolio\u002Ftiq-website-2023",[164,80,1894,1895,166,266,165],"AI","Lead Generation","jFTWwZcjLzJtFImKfHHGDOvkcUGE4p_bpSFWIA-Tnkk",{"id":1898,"title":1899,"body":1900,"client":82,"date":1969,"description":1970,"extension":63,"featured":64,"features":1971,"image":1972,"image_transparency":64,"links":1973,"meta":1986,"navigation":74,"path":1987,"seo":1988,"stem":1989,"types":1990,"url":82,"__hash__":1992},"portfolio\u002Fportfolio\u002Fstandard-notes-themes.md","Standard Notes Themes",{"type":7,"value":1901,"toc":1963},[1902,1905,1908,1912,1915,1921,1925,1928,1934,1938,1941,1947,1951,1954,1960],[15,1903,1904],{},"Standard Notes is an excellent end-to-end encrypted notes application. Over time, I developed several custom themes that have partially been included in the official Standard Notes Community Plugins repository.",[15,1906,1907],{},"They provide a variety of high-quality color palettes for different times of day and personal preferences.",[10,1909,1911],{"id":1910},"nord","Nord",[15,1913,1914],{},"An arctic, north-bluish color palette, based on the popular Nord theme.",[15,1916,1917],{},[27,1918],{"alt":1919,"src":1920},"Nord Theme Screenshot","https:\u002F\u002Fmarcaux.gitlab.io\u002Fsn-nord-theme\u002Fscreenshot.jpg",[10,1922,1924],{"id":1923},"solarized-light","Solarized Light",[15,1926,1927],{},"A beautiful, high-contrast light implementation of the classic Solarized color scheme.",[15,1929,1930],{},[27,1931],{"alt":1932,"src":1933},"Solarized Light Theme Screenshot","https:\u002F\u002Fmarcaux.gitlab.io\u002Fsn-solarized-light\u002Fscreenshot.jpg",[10,1935,1937],{"id":1936},"everlight","Everlight",[15,1939,1940],{},"A familiar, clean interface that brings an Evernote-like aesthetic to Standard Notes.",[15,1942,1943],{},[27,1944],{"alt":1945,"src":1946},"Everlight Theme Screenshot","https:\u002F\u002Fmarcaux.gitlab.io\u002Fsn-theme-evernote\u002Fscreenshot.jpg",[10,1948,1950],{"id":1949},"monokai-ristretto","Monokai Ristretto",[15,1952,1953],{},"A warm, coffee-inspired dark theme based on the Monokai palette, perfect for late-night writing.",[15,1955,1956],{},[27,1957],{"alt":1958,"src":1959},"Monokai Ristretto Theme Screenshot","https:\u002F\u002Fmarcaux.gitlab.io\u002Fsn-monokai-ristretto\u002Fscreenshot.jpg",[15,1961,1962],{},"All of these themes can be installed directly through the Standard Notes app or by using the extension JSON links provided in their respective repositories.",{"title":55,"searchDepth":56,"depth":56,"links":1964},[1965,1966,1967,1968],{"id":1910,"depth":56,"text":1911},{"id":1923,"depth":56,"text":1924},{"id":1936,"depth":56,"text":1937},{"id":1949,"depth":56,"text":1950},"2021","A collection of open-source themes for the privacy-focused Standard Notes application.",[1418],"\u002Fportfolio\u002Fstandard-notes-themes\u002Fmain-visual-composite.png",[1974,1977,1980,1983],{"title":1975,"url":1976},"Nord Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fsn-nord-theme",{"title":1978,"url":1979},"Solarized Light Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fsn-solarized-light",{"title":1981,"url":1982},"Everlight Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fsn-theme-evernote",{"title":1984,"url":1985},"Monokai Ristretto Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fsn-monokai-ristretto",{},"\u002Fportfolio\u002Fstandard-notes-themes",{"title":1899,"description":1970},"portfolio\u002Fstandard-notes-themes",[502,1991],"Theme","NTE-WNseZWPDnr0Bb_6C6qM73GraaQwEFG4oUZoHCNE",{"id":1994,"title":1995,"body":1996,"client":2040,"date":2041,"description":2042,"extension":63,"featured":64,"features":2043,"image":2046,"image_transparency":64,"links":2047,"meta":2050,"navigation":74,"path":2051,"seo":2052,"stem":2053,"types":2054,"url":82,"__hash__":2055},"portfolio\u002Fportfolio\u002F711rent.de.md","711rent Website",{"type":7,"value":1997,"toc":2037},[1998,2001,2005],[15,1999,2000],{},"Ausführung eines umfassenden Frontend-Optimierungs- und Modernisierungsprojekts für die 711rent-Website, wobei der Fokus auf der Bereitstellung einer schlankeren, schnelleren und robusteren zugrunde liegenden Architektur lag.",[421,2002,2004],{"id":2003},"was-erreicht-wurde","Was erreicht wurde:",[39,2006,2007,2013,2019,2025,2031],{},[42,2008,2009,2012],{},[110,2010,2011],{},"Reduzierung von Abhängigkeiten",": Überprüfung und Entfernung von rund 70 % der bestehenden Frontend-JavaScript-Abhängigkeiten, wodurch die Gesamtgröße des Bundles und die Komplexität deutlich reduziert wurden.",[42,2014,2015,2018],{},[110,2016,2017],{},"Maßgeschneiderter Code",": Ersetzung kritischer Funktionalitäten durch hochgradig optimierten, schlanken und speziell auf die Projektanforderungen zugeschnittenen Code, anstatt auf unförmige Drittanbieter-Bibliotheken zurückzugreifen.",[42,2020,2021,2024],{},[110,2022,2023],{},"Optimiertes Asset-Loading",": Verbesserung der Lade-Pipelines für alle Skripte, um sicherzustellen, dass wichtige Ressourcen für ein schnelleres initiales Rendering priorisiert werden.",[42,2026,2027,2030],{},[110,2028,2029],{},"Fortschrittliche Caching-Architektur",": Verfeinerung des allgemeinen Caching-Verhaltens, was Serveranfragen minimiert und blitzschnelle Ladezeiten bei nachfolgenden Seitenaufrufen gewährleistet.",[42,2032,2033,2036],{},[110,2034,2035],{},"Typoscript-Refactoring",": Auf der Backend-Ebene Überprüfung und Optimierung des Typoscripts innerhalb der Typo3-Instanz, um eine effiziente Datenverarbeitung und Rendering-Leistung sicherzustellen.",{"title":55,"searchDepth":56,"depth":56,"links":2038},[2039],{"id":2003,"depth":484,"text":2004},"711rent","2020","711rent frontend optimization",[2044,155,66,156,67,2045],"Typo3","Typoscript","\u002Fportfolio\u002F711rent\u002Findex-generated.png",[2048],{"title":1995,"url":2049},"https:\u002F\u002Fwww.711rent.com",{},"\u002Fportfolio\u002F711rent.de",{"title":1995,"description":2042},"portfolio\u002F711rent.de",[164,80,165],"pKphSvtVNYnyxnrPaRL7ANYpv8NOL50qsG5_oZTdGPY",{"id":2057,"title":1995,"body":2058,"client":2040,"date":2041,"description":2042,"extension":63,"featured":64,"features":2102,"image":2046,"image_transparency":64,"links":2103,"meta":2105,"navigation":74,"path":2106,"seo":2107,"stem":2108,"types":2109,"url":82,"__hash__":2110},"portfolio\u002Fportfolio\u002F711rent.en.md",{"type":7,"value":2059,"toc":2099},[2060,2063,2067],[15,2061,2062],{},"Leading a comprehensive frontend optimization and modernization project for the 711rent website, the focus was on delivering a leaner, faster, and more robust underlying architecture.",[421,2064,2066],{"id":2065},"what-was-accomplished","What was accomplished:",[39,2068,2069,2075,2081,2087,2093],{},[42,2070,2071,2074],{},[110,2072,2073],{},"Dependency Reduction",": Audited and removed approximately 70% of the existing frontend JavaScript dependencies, significantly decreasing the overall bundle size and complexity.",[42,2076,2077,2080],{},[110,2078,2079],{},"Custom-tailored Code",": Replaced critical functionalities with highly optimized, leaner custom code tailored specifically to the project's requirements, rather than relying on bulky third-party libraries.",[42,2082,2083,2086],{},[110,2084,2085],{},"Optimized Asset Loading",": Improved the asset loading pipelines for all scripts, ensuring vital resources are prioritized for faster initial rendering.",[42,2088,2089,2092],{},[110,2090,2091],{},"Advanced Caching Architecture",": Refined the overall caching behavior, minimizing server requests and ensuring lightning-fast subsequent page loads.",[42,2094,2095,2098],{},[110,2096,2097],{},"Typoscript Refactoring",": On the backend structure, audited and optimized the Typoscript within the Typo3 instance to ensure efficient data processing and view rendering.",{"title":55,"searchDepth":56,"depth":56,"links":2100},[2101],{"id":2065,"depth":484,"text":2066},[2044,155,66,156,67,2045],[2104],{"title":1995,"url":2049},{},"\u002Fportfolio\u002F711rent.en",{"title":1995,"description":2042},"portfolio\u002F711rent.en",[164,80,165],"nDSrt5x_BLKis4GWuUpftsKZHBr8xUExBrZf-R4u9xk",{"id":2112,"title":2113,"body":2114,"client":1571,"date":2041,"description":2160,"extension":63,"featured":74,"features":2161,"image":2162,"image_transparency":64,"links":2163,"meta":2166,"navigation":74,"path":2167,"seo":2168,"stem":2169,"types":2170,"url":82,"__hash__":2172},"portfolio\u002Fportfolio\u002Fivest.md","i-vest blog",{"type":7,"value":2115,"toc":2155},[2116,2120,2131,2134,2136],[10,2117,2119],{"id":2118},"strategic-financial-literacy-platform","Strategic Financial Literacy Platform",[15,2121,2122,2123,2126,2127,2130],{},"I developed ",[110,2124,2125],{},"i-vest"," as a strategic content hub for ",[110,2128,2129],{},"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).",[15,2132,2133],{},"To support this high-volume publishing strategy, I architected a bespoke WordPress environment that prioritizes performance, security, and ease of use.",[421,2135,1545],{"id":1544},[39,2137,2138,2144,2149],{},[42,2139,2140,2143],{},[110,2141,2142],{},"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.",[42,2145,2146,2148],{},[110,2147,1552],{},": 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.",[42,2150,2151,2154],{},[110,2152,2153],{},"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":55,"searchDepth":56,"depth":56,"links":2156},[2157],{"id":2118,"depth":56,"text":2119,"children":2158},[2159],{"id":1544,"depth":484,"text":1545},"i-vest blog by Alpian.",[154,155,157,66,67],"\u002Fportfolio\u002Fivest\u002Fglass_mockup.png",[2164],{"title":2113,"url":2165},"https:\u002F\u002Fwww.blog.alpian.com\u002F",{},"\u002Fportfolio\u002Fivest",{"title":2113,"description":2160},"portfolio\u002Fivest",[164,80,2171],"UX","RP6Dlf0l_-qML_7-uoL9Aiaz-CRgTAkjZ7f7jG_japM",1779460355241]