[{"data":1,"prerenderedAt":1056},["ShallowReactive",2],{"featured-work-manual":3},[4,42,113,176,290,468,625,724,915],{"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","Design","UI\u002FUX","WHCqQDX3C-tG63qVYn6nH_GVcJOz_HujrscgLT7NslM",{"id":43,"title":44,"body":45,"client":92,"date":93,"description":94,"extension":21,"featured":22,"features":95,"image":100,"image_transparency":31,"links":101,"meta":105,"navigation":22,"path":106,"seo":107,"stem":108,"types":109,"url":32,"__hash__":112},"portfolio\u002Fportfolio\u002Fhansen-heinrich.md","Hansen & Heinrich",{"type":8,"value":46,"toc":86},[47,52,55,58,63],[48,49,51],"h2",{"id":50},"strategic-digital-presence","Strategic Digital Presence",[11,53,54],{},"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,56,57],{},"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.",[59,60,62],"h3",{"id":61},"key-technical-achievements","Key Technical Achievements",[64,65,66,74,80],"ul",{},[67,68,69,73],"li",{},[70,71,72],"strong",{},"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.",[67,75,76,79],{},[70,77,78],{},"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.",[67,81,82,85],{},[70,83,84],{},"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":87},[88],{"id":50,"depth":16,"text":51,"children":89},[90],{"id":61,"depth":91,"text":62},3,"Foundry Berlin","2023","Hansen & Heinrich website.",[96,97,98,27,99],"Wordpress","ES6 JavaScript","Docker","PHP","\u002Fportfolio\u002Fhansen-heinrich\u002Fglass_mockup.png",[102],{"title":103,"url":104},"Hansen & Heinrich Website","https:\u002F\u002Fwww.hansen-heinrich.de",{},"\u002Fportfolio\u002Fhansen-heinrich",{"title":44,"description":94},"portfolio\u002Fhansen-heinrich",[110,111],"Website","Web Development","k2YX0AFl-a_cu3HQ3xmIgN9mLDTZ-KEfFiB3LmKouso",{"id":114,"title":115,"body":116,"client":92,"date":162,"description":163,"extension":21,"featured":22,"features":164,"image":165,"image_transparency":31,"links":166,"meta":169,"navigation":22,"path":170,"seo":171,"stem":172,"types":173,"url":32,"__hash__":175},"portfolio\u002Fportfolio\u002Fivest.md","i-vest blog",{"type":8,"value":117,"toc":157},[118,122,133,136,138],[48,119,121],{"id":120},"strategic-financial-literacy-platform","Strategic Financial Literacy Platform",[11,123,124,125,128,129,132],{},"I developed ",[70,126,127],{},"i-vest"," as a strategic content hub for ",[70,130,131],{},"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,134,135],{},"To support this high-volume publishing strategy, I architected a bespoke WordPress environment that prioritizes performance, security, and ease of use.",[59,137,62],{"id":61},[64,139,140,146,151],{},[67,141,142,145],{},[70,143,144],{},"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.",[67,147,148,150],{},[70,149,72],{},": 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.",[67,152,153,156],{},[70,154,155],{},"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":158},[159],{"id":120,"depth":16,"text":121,"children":160},[161],{"id":61,"depth":91,"text":62},"2020","i-vest blog by Alpian.",[96,97,98,27,99],"\u002Fportfolio\u002Fivest\u002Fglass_mockup.png",[167],{"title":115,"url":168},"https:\u002F\u002Fwww.blog.alpian.com\u002F",{},"\u002Fportfolio\u002Fivest",{"title":115,"description":163},"portfolio\u002Fivest",[110,111,174],"UX","RP6Dlf0l_-qML_7-uoL9Aiaz-CRgTAkjZ7f7jG_japM",{"id":177,"title":178,"body":179,"client":18,"date":279,"description":280,"extension":21,"featured":22,"features":281,"image":283,"image_transparency":31,"links":32,"meta":284,"navigation":22,"path":285,"seo":286,"stem":287,"types":288,"url":32,"__hash__":289},"portfolio\u002Fportfolio\u002Flaw-firm-document-automation.md","Law Firm Document Automation",{"type":8,"value":180,"toc":273},[181,185,188,192,195,198,201,205,212,219,222,228,231,237,240,246,252,258,264,267],[48,182,184],{"id":183},"description","Description",[11,186,187],{},"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.",[59,189,191],{"id":190},"about-the-projects-requirements","About the projects requirements",[11,193,194],{},"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,196,197],{},"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,199,200],{},"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.",[59,202,204],{"id":203},"about-the-new-implementation","About the new implementation",[11,206,207,208,211],{},"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.",[209,210],"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,213,214],{},[215,216],"img",{"alt":217,"src":218},"The inbox — a sortable, searchable document table with status indicators for pipeline errors and inconsistencies.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F01_inbox.png",[11,220,221],{},"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,223,224],{},[215,225],{"alt":226,"src":227},"Document preview with file metadata, email origin info, and processing status in the sidebar.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F02_preview.png",[11,229,230],{},"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,232,233],{},[215,234],{"alt":235,"src":236},"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,238,239],{},"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,241,242],{},[215,243],{"alt":244,"src":245},"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,247,248,249,251],{},"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.",[209,250],{},"\nThe editor is implemented via the Quill Editor library.",[11,253,254],{},[215,255],{"alt":256,"src":257},"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,259,260],{},[215,261],{"alt":262,"src":263},"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,265,266],{},"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,268,269],{},[215,270],{"alt":271,"src":272},"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":274},[275],{"id":183,"depth":16,"text":184,"children":276},[277,278],{"id":190,"depth":91,"text":191},{"id":203,"depth":91,"text":204},"2024","Automating document creation for law firms.",[24,25,26,27,282,29],"Python","\u002Fportfolio\u002Flaw-firm-document-automation\u002Fmain-visual-glass.png",{},"\u002Fportfolio\u002Flaw-firm-document-automation",{"title":178,"description":280},"portfolio\u002Flaw-firm-document-automation",[38,39],"5rjHPOSVthB09D4fbQg4Rc-dSjFXZTZnepJUsBDVcjU",{"id":291,"title":292,"body":293,"client":457,"date":93,"description":458,"extension":21,"featured":22,"features":459,"image":461,"image_transparency":31,"links":32,"meta":462,"navigation":22,"path":463,"seo":464,"stem":465,"types":466,"url":32,"__hash__":467},"portfolio\u002Fportfolio\u002Fper-website-2023.md","P.E.R. Website (2023)",{"type":8,"value":294,"toc":447},[295,300,304,307,311,349,353,357,360,364,367,399,403,423,427],[296,297,299],"h1",{"id":298},"portfolio-per-agency-website-relaunch","Portfolio: per-agency Website Relaunch",[48,301,303],{"id":302},"project-overview","Project Overview",[11,305,306],{},"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,308,310],{"id":309},"technology-stack","Technology Stack",[64,312,313,319,325,331,337,343],{},[67,314,315,318],{},[70,316,317],{},"Core:"," WordPress (Custom Theme Development)",[67,320,321,324],{},[70,322,323],{},"Backend:"," PHP, MySQL (MariaDB)",[67,326,327,330],{},[70,328,329],{},"Frontend:"," SCSS (SASS), JavaScript (ES6+), Anime.js",[67,332,333,336],{},[70,334,335],{},"CMS Customization:"," Advanced Custom Fields (ACF) Pro",[67,338,339,342],{},[70,340,341],{},"Build Tools:"," NPM (node-sass, postcss, uglify-js, svgo)",[67,344,345,348],{},[70,346,347],{},"Environment:"," Docker (Docker Compose)",[48,350,352],{"id":351},"key-features","Key Features",[59,354,356],{"id":355},"modular-design-system","Modular Design System",[11,358,359],{},"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.",[59,361,363],{"id":362},"custom-content-management","Custom Content Management",[11,365,366],{},"Extended WordPress core functionality with Custom Post Types (CPTs) to structure complex data:",[64,368,369,375,381,387,393],{},[67,370,371,374],{},[70,372,373],{},"Cases:"," Portfolio items with dedicated archive and detail views.",[67,376,377,380],{},[70,378,379],{},"Services (Leistungen):"," Detailed service descriptions.",[67,382,383,386],{},[70,384,385],{},"Jobs (Karriere):"," Recruitment section with location filtering.",[67,388,389,392],{},[70,390,391],{},"Staff:"," Team member profiles.",[67,394,395,398],{},[70,396,397],{},"Locations (Orte):"," Taxonomy for filtering content by agency location.",[59,400,402],{"id":401},"performance-optimization","Performance & Optimization",[64,404,405,411,417],{},[67,406,407,410],{},[70,408,409],{},"SVG System:"," Custom SVG icon management to inline SVGs for fast loading and styling flexibility.",[67,412,413,416],{},[70,414,415],{},"Asset Optimization:"," Automated build pipeline for minifying CSS and JS, and optimizing SVGs.",[67,418,419,422],{},[70,420,421],{},"Bloat Removal:"," Extensive cleanup of default WordPress assets to minimize request count and page size.",[59,424,426],{"id":425},"development-workflow","Development Workflow",[64,428,429,435,441],{},[67,430,431,434],{},[70,432,433],{},"Dockerized Environment:"," Consistent local development environment ensuring parity with production.",[67,436,437,440],{},[70,438,439],{},"Component-Based Architecture:"," Template parts organized by functionality, promoting code reusability and maintainability.",[67,442,443,446],{},[70,444,445],{},"SCSS Architecture:"," Modular CSS structure with separate builds for frontend and admin styles.",{"title":15,"searchDepth":16,"depth":16,"links":448},[449,450,451],{"id":302,"depth":16,"text":303},{"id":309,"depth":16,"text":310},{"id":351,"depth":16,"text":352,"children":452},[453,454,455,456],{"id":355,"depth":91,"text":356},{"id":362,"depth":91,"text":363},{"id":401,"depth":91,"text":402},{"id":425,"depth":91,"text":426},"P.E.R. Agency","P.E.R. website.",[96,97,98,27,460,99],"Webpack","\u002Fportfolio\u002Fper-website-2023\u002Fglass-mockup.png",{},"\u002Fportfolio\u002Fper-website-2023",{"title":292,"description":458},"portfolio\u002Fper-website-2023",[110,111],"df__qQ-NSRKK7TsgKH4_iWhgLli67g430OWsLI2yQTg",{"id":469,"title":470,"body":471,"client":457,"date":611,"description":458,"extension":21,"featured":22,"features":612,"image":614,"image_transparency":31,"links":615,"meta":619,"navigation":22,"path":620,"seo":621,"stem":622,"types":623,"url":32,"__hash__":624},"portfolio\u002Fportfolio\u002Fper-website-2026.md","P.E.R. Website (2026)",{"type":8,"value":472,"toc":601},[473,477,480,484,488,508,512,526,530,533,553,557,577,581],[48,474,476],{"id":475},"executive-summary","Executive Summary",[11,478,479],{},"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,481,483],{"id":482},"key-technical-implementations","Key Technical Implementations",[59,485,487],{"id":486},"_1-high-performance-block-architecture","1. High-Performance Block Architecture",[64,489,490,496,502],{},[67,491,492,495],{},[70,493,494],{},"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.",[67,497,498,501],{},[70,499,500],{},"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).",[67,503,504,507],{},[70,505,506],{},"Unified Registry",": Centralized block registration system that handles metadata, attributes, and render callbacks in a strict, type-safe manner.",[59,509,511],{"id":510},"_2-design-system-scss-framework","2. Design System & SCSS Framework",[64,513,514,520],{},[67,515,516,519],{},[70,517,518],{},"Responsive Typography Scale",": Implemented a fluid typography system to ensure perfect scaling across all devices.",[67,521,522,525],{},[70,523,524],{},"Component Abstraction",": Created reusable components for common UI patterns, ensuring visual consistency across all 15+ custom blocks.",[59,527,529],{"id":528},"_3-custom-linkedin-integration-system","3. Custom LinkedIn Integration System",[11,531,532],{},"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.",[64,534,535,541,547],{},[67,536,537,540],{},[70,538,539],{},"API Rate Limit Protection",": Built a custom caching layer to decouple frontend page loads from the LinkedIn API.",[67,542,543,546],{},[70,544,545],{},"Cron-Based Synchronization",": Implemented a daily background job to fetch and update company posts, ensuring content freshness without impacting user page load times.",[67,548,549,552],{},[70,550,551],{},"Admin Interface",": Developed a comprehensive settings panel in the WordPress Customizer for API credential management, manual cache clearing, and connection status monitoring.",[59,554,556],{"id":555},"_4-advanced-theme-configuration","4. Advanced Theme Configuration",[64,558,559,565,571],{},[67,560,561,564],{},[70,562,563],{},"Environment Intelligence",": Built core logic to detect Development vs. Production environments, automatically toggling between debug logging\u002Funminified assets and production-optimized caching.",[67,566,567,570],{},[70,568,569],{},"Extended Customizer API",": Added extensive configuration options for \"Archive Pages\" (Cases, Services, Jobs).",[67,572,573,576],{},[70,574,575],{},"Security Hardening",": Implemented strict nonce verification for AJAX actions and comprehensive output escaping across all templates to prevent XSS vulnerabilities.",[48,578,580],{"id":579},"development-workflow-tooling","Development Workflow & Tooling",[64,582,583,589,595],{},[67,584,585,588],{},[70,586,587],{},"Local Development",": Containerized environment using Docker for consistent PHP\u002FMySQL versions matching production.",[67,590,591,594],{},[70,592,593],{},"Build Pipeline",": Custom Webpack and Sass configurations to handle asset optimization, minification, and source map generation.",[67,596,597,600],{},[70,598,599],{},"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":602},[603,604,610],{"id":475,"depth":16,"text":476},{"id":482,"depth":16,"text":483,"children":605},[606,607,608,609],{"id":486,"depth":91,"text":487},{"id":510,"depth":91,"text":511},{"id":528,"depth":91,"text":529},{"id":555,"depth":91,"text":556},{"id":579,"depth":16,"text":580},"2026",[96,97,98,27,460,613,99],"React","\u002Fportfolio\u002Fper-website-2026\u002Fglass-mockup.png",[616],{"title":617,"url":618},"P.E.R. Agency Website","https:\u002F\u002Fper-agency.com",{},"\u002Fportfolio\u002Fper-website-2026",{"title":470,"description":458},"portfolio\u002Fper-website-2026",[110,111],"Ci6m-9rH_ueRZIcJ5qFCoZsqioi1uisN8YKnuGSwoOM",{"id":626,"title":627,"body":628,"client":710,"date":279,"description":711,"extension":21,"featured":22,"features":712,"image":713,"image_transparency":31,"links":714,"meta":718,"navigation":22,"path":719,"seo":720,"stem":721,"types":722,"url":32,"__hash__":723},"portfolio\u002Fportfolio\u002Fproson-2024.md","Proson gGmbh (2024)",{"type":8,"value":629,"toc":704},[630,634,637,641,644,664,668,671,697,701],[48,631,633],{"id":632},"die-vision","Die Vision",[11,635,636],{},"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,638,640],{"id":639},"design-uiux-iteration","Design & UI\u002FUX Iteration",[11,642,643],{},"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.",[64,645,646,652,658],{},[67,647,648,651],{},[70,649,650],{},"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.",[67,653,654,657],{},[70,655,656],{},"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.",[67,659,660,663],{},[70,661,662],{},"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,665,667],{"id":666},"technische-umsetzung-architektur","Technische Umsetzung & Architektur",[11,669,670],{},"Unter der ansprechenden Oberfläche verbirgt sich eine robuste, skalierbare technische Architektur, die speziell auf hohe Performance ausgelegt ist.",[64,672,673,679,685,691],{},[67,674,675,678],{},[70,676,677],{},"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.",[67,680,681,684],{},[70,682,683],{},"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.",[67,686,687,690],{},[70,688,689],{},"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.",[67,692,693,696],{},[70,694,695],{},"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,698,700],{"id":699},"das-ergebnis","Das Ergebnis",[11,702,703],{},"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":705},[706,707,708,709],{"id":632,"depth":16,"text":633},{"id":639,"depth":16,"text":640},{"id":666,"depth":16,"text":667},{"id":699,"depth":16,"text":700},"Proson gGmbh","Proson gGmbh Landingpage 2024",[96,97,27,460,99],"\u002Fportfolio\u002Fproson-2024\u002Fproson_portfolio_glass.png",[715],{"title":716,"url":717},"Proson gGmbh Website","https:\u002F\u002Fwww.proson-ggmbh.de",{},"\u002Fportfolio\u002Fproson-2024",{"title":627,"description":711},"portfolio\u002Fproson-2024",[110,111,40,39],"qkOfCDha3RT_cVO-IXFgYJkU9UWNc48WaOveQQ5kvMA",{"id":725,"title":726,"body":727,"client":32,"date":19,"description":898,"extension":21,"featured":22,"features":899,"image":902,"image_transparency":31,"links":903,"meta":907,"navigation":22,"path":908,"seo":909,"stem":910,"types":911,"url":32,"__hash__":914},"portfolio\u002Fportfolio\u002Fradio-tape.md","Radio Tape (macOS)",{"type":8,"value":728,"toc":890},[729,733,739,745,748,752,763,767,818,822,825,857,861,864],[48,730,732],{"id":731},"the-concept-inspiration","The Concept & Inspiration",[11,734,735],{},[736,737,738],"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,740,741,744],{},[70,742,743],{},"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,746,747],{},"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,749,751],{"id":750},"features-technical-implementation","Features & Technical Implementation",[11,753,754,755,758,759,762],{},"RadioTape is built entirely natively for macOS using ",[70,756,757],{},"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 ",[70,760,761],{},"Now Playing"," integration.",[59,764,766],{"id":765},"audio-recording-engine","Audio & Recording Engine",[64,768,769,784,794,808],{},[67,770,771,774,775,778,779,783],{},[70,772,773],{},"Intelligent Track Detection",": The app utilizes ",[70,776,777],{},"AVFoundation"," and custom ",[780,781,782],"code",{},"ICY"," metadata parsing to accurately detect track boundaries and real-time stream metadata.",[67,785,786,789,790,793],{},[70,787,788],{},"Direct Stream Recording",": Recordings are captured efficiently using ",[780,791,792],{},"URLSessionDataTask"," to directly download stream data, ensuring no loss of audio quality and saving system resources.",[67,795,796,799,800,807],{},[70,797,798],{},"Global Radio Access",": Integrated with the public API of ",[801,802,806],"a",{"href":803,"rel":804},"https:\u002F\u002Fwww.radio-browser.info",[805],"nofollow","radio-browser.info",", RadioTape offers an easily navigable database of over 50,000 global internet radio stations categorized by genre, country, and language.",[67,809,810,813,814,817],{},[70,811,812],{},"Reactive Architecture",": Built using ",[70,815,816],{},"Combine"," to manage complex streaming states, buffering, and user interactions flawlessly.",[59,819,821],{"id":820},"file-based-zero-lock-in-library","File-Based \"Zero Lock-In\" Library",[11,823,824],{},"Simplicity and user ownership are at the core of the RadioTape philosophy. The entire library is built upon a transparent, user-accessible folder structure.",[64,826,827,837,847],{},[67,828,829,832,833,836],{},[70,830,831],{},"Standardized Formats",": Every recorded track is saved as a standard ",[780,834,835],{},".mp3"," file.",[67,838,839,842,843,846],{},[70,840,841],{},"Extensible Metadata",": Metadata (such as artist, title, station, and duration) is stored in an accompanying ",[780,844,845],{},".json"," sidecar file alongside the audio.",[67,848,849,852,853,856],{},[70,850,851],{},"Your Files, Your Rules",": Because the library lives directly in a designated directory (by default within your ",[780,854,855],{},"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,858,860],{"id":859},"the-future-a-nostalgic-audio-diary","The Future: A Nostalgic Audio Diary",[11,862,863],{},"The app's roadmap embraces its skeuomorphic roots and the emotional connection of the mixtape era, turning digital files back into tangible memories.",[64,865,866,872,878,884],{},[67,867,868,871],{},[70,869,870],{},"Visual Mixtapes",": Playlists will be visually represented as customizable cassette tapes, complete with user-provided images and back covers populated with tracklists.",[67,873,874,877],{},[70,875,876],{},"Library as a Shelf",": The library interface will evolve into a virtual \"tape shelf,\" bringing back a touch of classic, playful skeuomorphic design.",[67,879,880,883],{},[70,881,882],{},"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.",[67,885,886,889],{},[70,887,888],{},"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":891},[892,893,897],{"id":731,"depth":16,"text":732},{"id":750,"depth":16,"text":751,"children":894},[895,896],{"id":765,"depth":91,"text":766},{"id":820,"depth":91,"text":821},{"id":859,"depth":16,"text":860},"A macOS application that brings the nostalgic joy of recording radio to the modern era. Automated.",[900,901],"Swift","macOS","\u002Fportfolio\u002Fradio-tape\u002Fmain-visual-composite.png",[904],{"title":905,"url":906},"Gitlab Repository","https:\u002F\u002Fgitlab.com\u002Fmarcaux\u002Fradiotape",{},"\u002Fportfolio\u002Fradio-tape",{"title":726,"description":898},"portfolio\u002Fradio-tape",[912,40,39,913],"App","Open Source","jjZI9IIjVK7-fI_ws9Ga2GIcTtqHZXnxDQekXgzzeIg",{"id":916,"title":917,"body":918,"client":1040,"date":93,"description":1041,"extension":21,"featured":22,"features":1042,"image":1043,"image_transparency":31,"links":1044,"meta":1047,"navigation":22,"path":1048,"seo":1049,"stem":1050,"types":1051,"url":32,"__hash__":1055},"portfolio\u002Fportfolio\u002Ftiq-website-2023.md","TIQ.Solutions Website",{"type":8,"value":919,"toc":1030},[920,922,925,929,933,947,951,965,969,989,991,1023,1027],[48,921,303],{"id":302},[11,923,924],{},"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,926,928],{"id":927},"key-technical-highlights","Key Technical Highlights",[59,930,932],{"id":931},"_1-advanced-custom-wordpress-architecture","1. Advanced Custom WordPress Architecture",[64,934,935,941],{},[67,936,937,940],{},[70,938,939],{},"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.",[67,942,943,946],{},[70,944,945],{},"Asset Optimization",": Implemented a custom asset loading strategy that conditionally dequeues unused parent-theme scripts and styles, significantly improving Core Web Vitals performance.",[59,948,950],{"id":949},"_2-ai-powered-assistant-tiq-chatbot","2. AI-Powered Assistant (\"TIQ Chatbot\")",[64,952,953,959],{},[67,954,955,958],{},[70,956,957],{},"Hybrid Architecture",": Developed a custom WordPress integration acting as a bridge to an Azure-hosted Python application.",[67,960,961,964],{},[70,962,963],{},"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.",[59,966,968],{"id":967},"_3-interactive-lead-gen-tool-reifegrad-check","3. Interactive Lead Gen Tool (\"Reifegrad-Check\")",[64,970,971,977,983],{},[67,972,973,976],{},[70,974,975],{},"Elementor Integration",": Created a custom Elementor widget allowing marketing teams to place the assessment tool anywhere on the site via drag-and-drop.",[67,978,979,982],{},[70,980,981],{},"PDF Report Generation",": Integrated PDF generation to dynamically generate personalized \"Maturity Level\" PDF reports for users immediately upon form submission.",[67,984,985,988],{},[70,986,987],{},"Data-Driven Logic",": The plugin calculates maturity scores in real-time and segments users, feeding valuable qualified leads into the sales funnel.",[48,990,310],{"id":309},[64,992,993,999,1005,1011,1017],{},[67,994,995,998],{},[70,996,997],{},"CMS",": WordPress (Custom Child Theme)",[67,1000,1001,1004],{},[70,1002,1003],{},"Frontend",": PHP, SCSS, JavaScript (jQuery\u002FVanilla)",[67,1006,1007,1010],{},[70,1008,1009],{},"Backend\u002FServices",": Python (Azure Web App), MySQL",[67,1012,1013,1016],{},[70,1014,1015],{},"Integrations",": Polylang, Elementor Pro, Advanced Custom Fields (ACF)",[67,1018,1019,1022],{},[70,1020,1021],{},"DevOps",": Docker-based local development environment with Composer\u002FNPM dependency management.",[48,1024,1026],{"id":1025},"impact","Impact",[11,1028,1029],{},"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":1031},[1032,1033,1038,1039],{"id":302,"depth":16,"text":303},{"id":927,"depth":16,"text":928,"children":1034},[1035,1036,1037],{"id":931,"depth":91,"text":932},{"id":949,"depth":91,"text":950},{"id":967,"depth":91,"text":968},{"id":309,"depth":16,"text":310},{"id":1025,"depth":16,"text":1026},"TIQ.Solutions","TIQ website.",[96,97,98,27,460,99],"\u002Fportfolio\u002Ftiq-website-2023\u002Findex-generated.png",[1045],{"title":917,"url":1046},"https:\u002F\u002Fwww.tiq-solutions.de",{},"\u002Fportfolio\u002Ftiq-website-2023",{"title":917,"description":1041},"portfolio\u002Ftiq-website-2023",[110,111,1052,1053,39,1054,40],"AI","Lead Generation","Art Direction","jFTWwZcjLzJtFImKfHHGDOvkcUGE4p_bpSFWIA-Tnkk",1779460354122]