{ "site": { "name": "Felix Häberle", "alternateName": "Felix Haeberle", "url": "https://felixhaeberle.com", "description": "Portfolio and personal website for Felix Häberle, a design engineer building tasteful AI products and interfaces.", "language": "en-US", "llmsTxt": "https://felixhaeberle.com/llms.txt", "llmsFull": "https://felixhaeberle.com/llms-full.txt", "sitemap": "https://felixhaeberle.com/sitemap.xml", "schema": "https://felixhaeberle.com/schema.jsonld" }, "person": { "name": "Felix Häberle", "alternateName": "Felix Haeberle", "jobTitle": "Design Engineer", "email": "kontakt@felixhaeberle.de", "sameAs": [ "https://github.com/felixhaeberle", "https://felixhaeberle.substack.com", "https://twitter.com/felixhaberle", "https://de.linkedin.com/in/felixhaeberle", "https://www.drupal.org/u/fhaeberle" ], "knowsAbout": [ "Design engineering", "AI product design", "Interface design", "Frontend development", "Creative tooling" ] }, "pages": [ { "key": "home", "title": "Home", "path": "/", "markdownPath": "/index.html.md", "description": "Overview, current focus, selected work, selected studies, writings, and stack.", "schemaType": "WebPage", "priority": "1.0", "changefreq": "weekly", "url": "https://felixhaeberle.com/", "markdownUrl": "https://felixhaeberle.com/index.html.md" }, { "key": "work", "title": "Work", "path": "/work", "markdownPath": "/work/index.html.md", "description": "Project archive and shipped work.", "schemaType": "CollectionPage", "priority": "0.8", "changefreq": "weekly", "url": "https://felixhaeberle.com/work", "markdownUrl": "https://felixhaeberle.com/work/index.html.md" }, { "key": "studies", "title": "Studies", "path": "/studies", "markdownPath": "/studies/index.html.md", "description": "Case studies, design explorations, and project writeups.", "schemaType": "CollectionPage", "priority": "0.8", "changefreq": "monthly", "url": "https://felixhaeberle.com/studies", "markdownUrl": "https://felixhaeberle.com/studies/index.html.md" }, { "key": "writings", "title": "Writings", "path": "/writings", "markdownPath": "/writings/index.html.md", "description": "Articles from this site and Felix Häberle’s Substack feed.", "schemaType": "CollectionPage", "priority": "0.8", "changefreq": "weekly", "url": "https://felixhaeberle.com/writings", "markdownUrl": "https://felixhaeberle.com/writings/index.html.md" }, { "key": "about", "title": "About", "path": "/me", "markdownPath": "/me/index.html.md", "description": "Personal background, principles, CV, social links, and contact context.", "schemaType": "ProfilePage", "priority": "0.7", "changefreq": "monthly", "url": "https://felixhaeberle.com/me", "markdownUrl": "https://felixhaeberle.com/me/index.html.md" }, { "key": "legal", "title": "Site Notice / Impressum", "path": "/legal/impressum", "markdownPath": "/legal/impressum/index.html.md", "description": "Legal contact, publisher information, and privacy notice.", "schemaType": "WebPage", "priority": "0.3", "changefreq": "yearly", "url": "https://felixhaeberle.com/legal/impressum", "markdownUrl": "https://felixhaeberle.com/legal/impressum/index.html.md" } ], "currentFocus": "Building something new. – Stealth 🛸", "work": [ { "title": "Seehotel BelRiva – Relaunch", "description": "Family-run lakeside hotel. Arriving here leaves everyday life behind – from the very first moment.", "url": "https://seehotel-belriva.vercel.app/", "releasedAt": "2025-09-01T13:48:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/060acffe9e0adcb26bc26d1af2f6cd6ab6df7a85-2656x1826.png?w=1200&q=90", "imageAlt": "Situated between the water and vineyards, amidst the gentle landscape of the northern Lake Constance region, lies the Seehotel BelRiva. Those who arrive here leave their everyday worries behind – from the very first moment." }, { "title": "Lix – Change control SDK for AI", "description": "An SDK to see, review, and control every change AI agents and humans make — right inside your product.", "url": "https://lix.dev", "releasedAt": "2025-06-01T13:39:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/81731e6e2051ae13b27a22dca0101236c8393a73-1013x588.png?w=1200&q=90", "imageAlt": "The lix SDK provides change control for different file formats. Writing a lix plugin for Markdown files enables collaboration, review flows, automation pipelines, and more change control features." }, { "title": "Inlang – i18n ecosystem", "description": "Inlang is an i18n ecosystem of multiple apps and libraries. One file format, multiple apps, all interoperable.", "url": "https://inlang.com", "releasedAt": "2024-01-01T14:27:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/b5ef4d53e0fb0e2528256308bb50b26d2c0d1702-1312x812.png?w=1200&q=90", "imageAlt": ".inlang files are designed to become the open standard for i18n and enable interoperability between i18n solutions. Such solutions involve apps like Fink, libraries like Paraglide JS, or plugins." }, { "title": "Sherlock – i18n for VS Code", "description": "Visualize, edit & lint translated strings at a glance via Inline Decorations & Hover Support, and extract new strings with a single click.", "url": "https://inlang.com/m/r7kp499g/app-inlang-ideExtension?ref=felixhaeberle.com", "releasedAt": "2023-08-01T19:15:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/635ff61f1b94229b405724bda5c16e3838671345-2880x1600.png?w=1200&q=90", "imageAlt": "Sherlock Visual Studio Code extension i18n" }, { "title": "Stage", "description": "Stage is a next-gen personal website that helps you showcase your projects, skills, and experience.", "url": "https://getstage.app", "releasedAt": "2022-11-01T14:25:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/451d55cc83d2e467b70315d172d1410ea072f12e-1440x800.png?w=1200&q=90", "imageAlt": "Stage is a next-gen personal website" }, { "title": "Frederick Hermann", "description": "Photographer based in Berlin. Special scrolling image show and frontend with Sanity CMS.", "url": "https://www.frederick-herrmann.com/", "releasedAt": "2022-11-01T14:21:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/47902cc77b0f5fc31b83ae6b3fb139aa88828409-1440x800.png?w=1200&q=90", "imageAlt": "Photographer based in Berlin" }, { "title": "Zirkular – Open Source Collaboration", "description": "Zirkular connects contributors and maintainers in a community-first workspace with goal-oriented communication, efficient workflows and smart automations.", "url": "https://www.zirkular.dev/", "releasedAt": "2022-09-30T13:23:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/6ad8cbb7672106bdd15a58eccda8fdf0abeb8b99-1440x800.png?w=1200&q=90", "imageAlt": "Zirkular connects contributors and maintainers in a community-first workspace" }, { "title": "Bitegra Solutions", "description": "Frontend development for the corporate website to showcase services, projects and the team.", "url": "https://www.bitegra-solutions.de/de", "releasedAt": "2020-12-24T23:00:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/658c8a2f91bd1fb22f7e89fc150243de7bbbdf0b-1440x800.png?w=1200&q=90", "imageAlt": "Bitegra Solutions" }, { "title": "Schlösslekeller", "description": "Theatre website with events, event booking and sponsors. Built with the Drupal CMS and has a custom theme.", "url": "https://www.schloesslekeller.li/", "releasedAt": "2020-09-09T22:00:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/76191eb2e6ead7453de7d203c7a7a3c01f9e0c92-1440x800.png?w=1200&q=90", "imageAlt": "Schlösslekeller" }, { "title": "Talanja Noyjing", "description": "Portfolio site with projects, sketches and an about section. Built with the text-based Kirby CMS and has dark-mode support. ", "url": "https://talanja.com/", "releasedAt": "2020-03-19T23:00:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/7ea5ac766d2038a8586b4afbbd3736ff94ea77cf-1440x800.png?w=1200&q=90", "imageAlt": "Talanja Noyjing" }, { "title": "format plus", "description": "Design magazine driven by students of HfG. Built with Kirby CMS out of a bachelor thesis (B.A.) – new articles on a weekly schedule. ", "url": "https://format-plus.design/", "releasedAt": "2020-02-14T23:00:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/0761ab38976722eab3432f369aeb395d3cf33efe-1440x800.png?w=1200&q=90", "imageAlt": "big illustrated microphone in a slider" }, { "title": "Drupal theme \"Olivero\"", "description": "Contributed to the \"Olivero\" frontend theme which is now being used as a default theme by Drupal in all installations.", "url": "https://www.drupal.org/project/olivero", "releasedAt": "2020-01-09T23:00:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/f181875b0c5c87a27aab93b2ed504ccbdfd01646-1440x800.png?w=1200&q=90", "imageAlt": "Drupal theme \"Olivero\"" }, { "title": "OpenMoji", "description": "Contributed to the website with responsive development and envolved the frontend stack for the open-source emoji library. Runs on NodeJS.", "url": "https://openmoji.org/", "releasedAt": "2019-11-14T23:00:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/6310b6d2d3787ba3b9d0c7149a517b33368a0c27-1440x800.png?w=1200&q=90", "imageAlt": "OpenMoji" }, { "title": "Drupal theme \"Claro\"", "description": "Open source contribution and member to the team which initially developed Claro. Claro is highly focused on accessibility and clean design. Claro is now beeing used in over 200.00 websites all around the world.", "url": "https://www.drupal.org/project/claro", "releasedAt": "2019-05-22T17:08:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/7d42cf001555566ad33d3f7a2fc8940ddb1a35d5-1240x688.png?w=1200&q=90", "imageAlt": "Drupal theme \"Claro\"" }, { "title": "Drupal Remote Dashboard", "description": "Open source contribution for a management module with which you can scale and maintain multiple Drupal CMS installations at once.", "url": "https://www.drupal-remote-dashboard.com/", "releasedAt": "2019-05-15T17:05:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/446743d2ce36b0c76a32aedefc421f03e0febe71-1440x800.png?w=1200&q=90", "imageAlt": "Drupal Remote Dashboard website" }, { "title": "Holidaycheck Partner Widget", "description": "Relaunched rating platform plugin based on a new design system. My part was Drupal development with focus on frontend.", "url": "https://review.holidaycheck.com/?q=de/ltur/f20b3e92-c468-36b4-9aca-2ec01cb3eca6", "releasedAt": "2019-02-20T18:02:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/eab3f8b8021bc25c1cdcc85d26539e01ec004cab-1440x800.png?w=1200&q=90", "imageAlt": "Holidaycheck Partner Widget" }, { "title": "KNIME Documentation", "description": "Frontend development. There are multiple buttons with nested versions which can be selected in order to get the right part of documentation.", "url": "https://docs.knime.com/", "releasedAt": "2019-01-09T17:57:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/50ada2cab1fe07076aca557c3be30e3a77c92f86-1440x800.png?w=1200&q=90", "imageAlt": "KNIME Documentation" }, { "title": "Bitech", "description": "Envolved an existing website with responsive frontend development and SVG animations. Cleaned up the website and removed deprecated code.", "url": "https://www.bitech.de/", "releasedAt": "2018-11-15T18:14:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/2365d33610984ed485cc638d9513f986c03bcde7-2800x1600.png?w=1200&q=90", "imageAlt": "Bitech" }, { "title": "KNIME Discourse Forum", "description": "Migration of an old Drupal Forum to the open source software Discourse. Rebranded the complete community forum based on the main websites styleguide and gave it custom interaction behavior.", "url": "https://forum.knime.com/", "releasedAt": "2018-10-10T17:18:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/68421a1532c32556f694f45c9cb39f08e36860a9-1440x800.png?w=1200&q=90", "imageAlt": "KNIME Discourse Forum" }, { "title": "5th Avenue", "description": "Responsive design and development for an existing site. Highlight: Created a custom masonry image grid with JavaScript, at the time when masonry was *hard*.", "url": "https://www.5thavenue.de/", "releasedAt": "2018-09-10T17:26:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/adb804fcd32c3a7249d84ac9cee62120a7ca6fba-2800x1600.png?w=1200&q=90", "imageAlt": "5th Avenue" }, { "title": "Lawyer", "description": "Relaunched a lawyers site with pages for all the employees of the chancellery and contact forms for each of them.", "url": "https://www.rechtsanwalt-bek.de/", "releasedAt": "2018-08-24T17:34:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/a7caad6370e3c742eb1206394b230bd77666b0c2-2800x1600.png?w=1200&q=90", "imageAlt": "lawyer" }, { "title": "BURRI AG", "description": "Worked on the websites frontend of the the swiss public elements manufacturer. Created various new features like the fixed slide-out menu on the right.", "url": "https://www.burri.world/de", "releasedAt": "2017-10-20T17:39:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/acd4cde7cae80e7290f51ad358a4185d5c63d232-2800x1600.png?w=1200&q=90", "imageAlt": "BURRI AG website" }, { "title": "School website", "description": "Improved an already exiting Drupal website with frontend development targeting responsive behavior. ", "url": "https://www.bsz-stockach.de/", "releasedAt": "2017-09-15T17:42:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/130d32764ee4ed8de0d7b831df2b5aea3cd5dd02-2800x1600.png?w=1200&q=90", "imageAlt": "School website" }, { "title": "Heart clinic website", "description": "Simplified the Drupal codebase and introduced responsive design and behavior. Rewrote the frontend to clean it up and get rid of unused code.", "url": "https://www.herz-zentrum.com/", "releasedAt": "2017-07-20T17:46:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/37933fefbdaf665d900195d096285c32f43b5642-2800x1600.png?w=1200&q=90", "imageAlt": "Heart clinic website" }, { "title": "Ancestry tree generator", "description": "Developed together with my friends in the Computer Science B.Sc. courses. You can easily generate an ancestry tree and export it.", "url": "http://www.dhbw-stammbaum.de/", "releasedAt": "2016-05-23T17:49:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/58bd247d2f241cf87fd9ad58f4f9a92358f1d46e-2800x1600.png?w=1200&q=90", "imageAlt": "Ancestry tree generator" }, { "title": "Construction office Bruhn", "description": "Developed the frontend which was accessed by a custom PHP backend. This was my first touchpoint with the Twig template language. Site has been replaced.", "url": "https://www.baubuero-bruhn.de/", "releasedAt": "2016-05-05T17:54:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/b226e9b8133b63a7a85ce224c9c151ac8bc32a5c-2800x1600.png?w=1200&q=90", "imageAlt": "Construction office Bruhn" }, { "title": "Seehotel BelRiva", "description": "Hotel website showcasing apartments and the hotel in general. My first professional website, still online and runs fine. First touchpoints with HTML, CSS and JS. Fell in love with web dev at this time, never stopped. ", "url": "https://www.seehotel-belriva.de/", "releasedAt": "2014-03-10T18:55:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/eefc7a3952c938c6eab183d6823b1c911b857f33-2800x1600.png?w=1200&q=90", "imageAlt": "Seehotel BelRiva website" } ], "studies": [ { "title": "Stage – Your personal website in minutes", "description": "Stage is a next-gen personal website that helps you showcase your projects, skills, and experience. You can personalize it by an evergrowing collection of building blocks and even build your own blocks.", "url": "https://ausstellung.hfg-gmuend.de/w-2223/projekte/stage-ein-system-zur-generativen-erstellung-eines-entwicklerportfolios", "publishedAt": "2023-02-10T13:37:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/89477df2cec922587a5b320511dc3b186f84f94b-1920x1309.png?w=1200&q=90", "imageAlt": "Stage – Your personal website in minutes" }, { "title": "ISO 7010", "description": "ISO registers and lists recommended pictograms, which it calls \"safety signs\", on its website, ISO.org. I created them in Figma for other people to use provided in a community file, because normally they are hard to find on the web.", "url": "https://www.figma.com/community/file/1073600297145890094", "publishedAt": "2022-03-10T14:10:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/6e996ca6f573ea4970e1b12a8634e463399ec95b-2160x1080.png?w=1200&q=90", "imageAlt": "ISO 7010 icons arranged in a grid" }, { "title": "Redesign the Panasonic Image App", "description": "The goal of this project was to fully redesign an existing app: Analysing user needs, competitor research, creating design principles, do the early sketches, wireframes and final redesign & many more tasks. ", "url": "https://ausstellung.hfg-gmuend.de/w-2021/projekte/panasonic-image-app", "publishedAt": "2021-02-02T20:01:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/e614f995ae4a0a581cd9aca097fd720ebafc6e55-1800x900.png?w=1200&q=90", "imageAlt": "panasonic lumix camera next to some app screens " }, { "title": "Speech Therapy for kids", "description": "Me and my team created a new kind of speech therapy for kids, together with speech therapy professionals. The goal was to identify the problems with home schooling. In the process, we created a cute fluffy speech therapy monster. ", "url": "https://ausstellung.hfg-gmuend.de/w-2021/projekte/logux-dein-sprachheld", "publishedAt": "2020-12-15T20:03:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/8eb65f7d8f89a1eef34576621546b10a96f27812-3600x1800.jpg?w=1200&q=90", "imageAlt": "logux speech therapy buddy next to the user interface" }, { "title": "Rethink the text editing experience", "description": "In the UX coding class, we had the challenge to rethink and prototype a common UX pattern from scratch! We picked the text editor and applied various Best-Practices and new ideas, like storing reusable text styles! The coding was done in Svelte.js. ", "url": "https://dtqnb.csb.app/", "publishedAt": "2020-10-31T20:03:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/9003373abf02a5f8c3afd5aa0f43028548edd2e1-1800x900.png?w=1200&q=90", "imageAlt": "new text editing experience build with a baloon menu." }, { "title": "Data Viz: Mental Health in Tech", "description": "Mental health is an essential part of a healthy, balanced life. According to a study, one in five Americans suffers from mental health problems, which equates to more than 40 million adults each year. A data visualization.", "url": "https://ausstellung.hfg-gmuend.de/s-2020/projekte/mental-health-in-tech", "publishedAt": "2020-07-16T11:41:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/1c5f035e56578f38cb69ea84803f2415b903bddd-1800x900.png?w=1200&q=90", "imageAlt": "mental health in tech illustration" }, { "title": "Save humus – the microbiology of our earth", "description": "What is humus? Why is it so important for us? We take you on an interactive journey through the world of the life providing soil and its implications on the environment. Did you know that humus could provide a significant value for climate change?", "url": "https://savehumus.netlify.app/", "publishedAt": "2020-03-13T22:57:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/f4c8d80763b10d1b50f9d61b61e5cc344c1f6e02-2742x1452.png?w=1200&q=90", "imageAlt": "Save humus – the microbiology of our earth" }, { "title": "Open Source: Drupal Design System", "description": "We created a Design System that defines a complete set of principles, patterns, and tools for building a coherent and user-friendly administrative user interface which was designed with accessibility and transparency in mind.", "url": "https://www.drupal.org/docs/8/core/themes/claro-theme/design", "publishedAt": "2019-07-25T15:40:00.000Z", "image": "https://cdn.sanity.io/images/32kc4e2s/production/a165a5d22cf454bfbe5771a80b253ba0582f4dc5-3200x1600.jpg?w=1200&q=90", "imageAlt": "Claro Admin screen with page edit functionality" } ], "writings": [ { "title": "The Only Thing AI Can't Outsource", "teaser": "And why Running Clubs feel like the new religion now", "source": "Substack", "url": "https://felixhaeberle.substack.com/p/the-only-thing-ai-cant-outsource", "publishedAt": "2026-01-26T13:11:10.000Z", "categories": [], "image": "https://substackcdn.com/image/fetch/$s_!Yzqj!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fbb8a864d-e597-43ac-99b1-e128345d0972_997x998.png", "imageAlt": "The Only Thing AI Can't Outsource" }, { "title": "The Cost of Good Intentions", "teaser": "On housing, regulation, and the quiet disappearance of the ordinary life", "source": "Substack", "url": "https://felixhaeberle.substack.com/p/the-cost-of-good-intentions", "publishedAt": "2026-01-19T09:35:20.000Z", "categories": [], "image": "https://substackcdn.com/image/fetch/$s_!lr3A!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F06a28dcb-24d4-4f90-9928-f35a959e39ca_3543x2199.jpeg", "imageAlt": "The Cost of Good Intentions" }, { "title": "After Talking to Machines, People Sound Different", "teaser": "Why patience feels harder in a world of instant answers", "source": "Substack", "url": "https://felixhaeberle.substack.com/p/after-talking-to-machines-people", "publishedAt": "2026-01-12T11:00:37.000Z", "categories": [], "image": "https://substackcdn.com/image/fetch/$s_!XTQc!,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9c5cfc60-5ec7-4530-ad1a-d42331ddc4c7_1000x797.jpeg", "imageAlt": "After Talking to Machines, People Sound Different" }, { "title": "Web Accessibility – A Brief Summary", "teaser": "The Web Content Accessibility Guidelines consist of twelve guidelines that are organized into four basic principles. ", "source": "felixhaeberle.com", "url": "https://felixhaeberle.com/writings/web-accessibility-a-brief-summary", "markdownUrl": "https://felixhaeberle.com/writings/web-accessibility-a-brief-summary.md", "publishedAt": "2021-05-12T20:35:00.000Z", "categories": [ "The Web Of Tomorrow", "Accessibility" ], "image": "https://cdn.sanity.io/images/32kc4e2s/production/3fafb0dce59a347d87ff8e6c6db9fa25a1308363-2336x1558.jpg?w=1200&q=90", "imageAlt": "vision impaired human looking at big letters and small letters" }, { "title": "Responsive fix for the Next.js Image component", "teaser": "I found myself in the situation where I wanted to have real responsive images without providing height or width to the Image component.", "source": "felixhaeberle.com", "url": "https://felixhaeberle.com/writings/responsive-fix-for-the-next-js-image-component", "markdownUrl": "https://felixhaeberle.com/writings/responsive-fix-for-the-next-js-image-component.md", "publishedAt": "2021-05-03T13:20:00.000Z", "categories": [ "Frontend Development" ], "image": "https://cdn.sanity.io/images/32kc4e2s/production/5833e455545c982f2be0dc96841223199fe893bd-4000x6000.jpg?w=1200&q=90", "imageAlt": "height building with interesting shapes" }, { "title": "3 easy steps to fix slow image loading", "teaser": "Loading images on the web can be a pain, especially if you are doing a website mainly for mobile devices.", "source": "felixhaeberle.com", "url": "https://felixhaeberle.com/writings/3-easy-steps-to-fix-slow-image-loading", "markdownUrl": "https://felixhaeberle.com/writings/3-easy-steps-to-fix-slow-image-loading.md", "publishedAt": "2019-09-13T18:40:00.000Z", "categories": [ "Frontend Development", "Thinking & Design" ], "image": "https://cdn.sanity.io/images/32kc4e2s/production/edd66c2399a577a465cab237562e7a9a2d374b26-5472x3648.jpg?w=1200&q=90", "imageAlt": "Car driving in the dark followd by light stripe" }, { "title": "Use CSS Grid in production  —  today", "teaser": "Everyone wants CSS Grid. It’s about a new layout method that will significantly change the way we design our content on the Internet.", "source": "felixhaeberle.com", "url": "https://felixhaeberle.com/writings/use-css-grid-in-production-today", "markdownUrl": "https://felixhaeberle.com/writings/use-css-grid-in-production-today.md", "publishedAt": "2019-08-14T19:25:00.000Z", "categories": [ "Frontend Development" ], "image": "https://cdn.sanity.io/images/32kc4e2s/production/06a85b6bc8391ce634ab4c91aa1fb843364a2853-3326x2661.jpg?w=1200&q=90", "imageAlt": "Rooftop with furniture and bushes placed in a grid from above" } ], "cv": { "professional_experience": [ { "title": "Senior Design Engineer", "place": "Inlang", "placeLink": "https://inlang.com", "location": "Berlin", "startDate": "2023-03-01", "endDate": null, "ongoing": true, "text": "inlang is a whole ecosystem of building blocks for your globalization (internationalization / i18n) efforts with the goal of helping companies enter new markets in no time." }, { "title": "Co-Founder, Design & Development", "place": "Stage", "placeLink": "https://getstage.app", "location": "🌍", "startDate": "2022-10-01", "endDate": "2023-04-01", "ongoing": false, "text": "Next-gen personal website that helps you showcase your projects, skills, and experience. You can personalize it by an evergrowing collection of building blocks, build your own blocks and analyse your growth." }, { "title": "Designer & Developer", "place": "Zirkular", "placeLink": "https://www.zirkular.dev/", "location": "DE", "startDate": "2022-03-03", "endDate": "2022-09-03", "ongoing": false, "text": "Building healthy open-source should be fun. Zirkular connects contributors and maintainers in a community-first workspace with goal-oriented communication, efficient workflows and smart automations." }, { "title": "UX Design Intern", "place": "Kaiser X & Syncier", "placeLink": "https://www.kaiser-x.com/", "location": "Munich, Germany", "startDate": "2021-09-01", "endDate": "2022-02-28", "ongoing": false, "text": "KXL employs a human-centered approach to develop agile services and digital products across Allianz's various divisions, including Sales & Distribution, Asset Management, Property & Casualty, Health & Life, and Business Insurance." }, { "title": "Creative Technologist", "place": "Melo", "placeLink": "https://www.melo-sound.com/", "location": "DE", "startDate": "2021-03-01", "endDate": "2021-08-01", "ongoing": false, "text": "Melo is the place where you can manage, edit and distribute the sounds of your\ndigital experience. Together with a talented team we're creating the sound interaction tool of tomorrow. Sign up to get an early preview! 🎛" }, { "title": "Senior Frontend Developer", "place": "Bitegra Solutions", "placeLink": "https://www.linkedin.com/company/bitegra-solutions-gmbh-co-kg", "location": "DE", "startDate": "2020-08-01", "endDate": "2021-12-22", "ongoing": false, "text": "Design and developing engaging experiences for the real estate sector, with a focus on performance, interoperability and accessibility. The implemented solutions use an API-first Drupal installation with various frontends, like an website, app and digital signage." }, { "title": "Creative Developer & Student", "place": "HfG", "placeLink": "https://www.hfg-gmuend.de/", "location": "Schwäbisch Gmünd", "startDate": "2019-09-01", "endDate": "2023-03-01", "ongoing": false, "text": "Co-founded \"format+\". format+ ist the digital sister of the printed magazine \"Format\", which is published by design students at the HfG. The online-magazine covers design-relevant topics. Also helping with the development of OpenMoji, an open-source emoji set. https://openmoji.org/" }, { "title": "Frontend Developer", "place": "Tojio GmbH", "placeLink": "https://www.tojio.com/", "location": "DE/CH", "startDate": "2016-10-01", "endDate": "2019-07-01", "ongoing": false, "text": "Design & Development for clients like @KNIME, @HolidayCheck or @burriworld & many more. Check out the \"Project\" page to dive into this work." }, { "title": "Dual Student (Work & Study)", "place": "ADAC", "placeLink": "https://www.adac.de/", "location": "DE", "startDate": "2015-10-01", "endDate": "2016-08-01", "ongoing": false, "text": "Applied Computer Science (B.Sc.). The most important feature is the integration of theory and practical experience: Students regularly switch between theoretical phases at the university and practical phases at the work placement." } ], "education": [ { "title": "Bachelor Thesis: API-based developer portfolio", "place": "Stage", "placeLink": "https://getstage.app", "location": "🌍", "startDate": "2022-10-01", "endDate": "2023-02-28", "ongoing": false, "text": "Next-gen developer portfolio that helps you showcase your projects, skills, and experience. Personalize it by an an evergrowing collection of building blocks and analyse your growth." }, { "title": "AWS Solution Architect Certificate", "place": "AWS", "placeLink": "https://www.credly.com/badges/5f372a5a-18e6-4076-a8fd-5b65b5fdff44", "location": "💻", "startDate": "2021-09-01", "endDate": "2022-02-03", "ongoing": false, "text": "Certified individuals possess extensive knowledge of AWS services and can create secure and durable solutions based on client needs. They excel at designing efficient, scalable, and fault-tolerant distributed systems using architectural principles." }, { "title": "Interaction Design (B.A.)", "place": "HfG", "placeLink": "https://www.hfg-gmuend.de/studium/interaktionsgestaltung", "location": "🌍", "startDate": "2019-10-01", "endDate": null, "ongoing": true, "text": "Interaction Design (IxD) is the design of interactive products and services in which a designer’s focus goes beyond the item in development to include the way users will interact with it. @HfG we learn interaction design at the intersection of design, psychology, mechanical engineering and computer science – rooted in the Bauhaus." }, { "title": "Media Design Apprenticeship", "place": "ZGK", "placeLink": "https://www.zgk-konstanz.de/wordpress/?page_id=706", "location": "DE", "startDate": "2016-10-01", "endDate": "2018-12-20", "ongoing": false, "text": "Media designers specializing in the field \"design and technology\" design products and plan production processes. They learn to create designs and how to develop them. This apprenticeship gives a practical deep-dive in the topics digital design and web development." }, { "title": "Applied Computer Science (B.Sc.)", "place": "DHBW", "placeLink": "https://www.dhbw.de/startseite", "location": "DE", "startDate": "2015-09-01", "endDate": "2016-07-01", "ongoing": false, "text": "Students of Applied Computer Science focus on the planning, modelling, design and implementation of complex software and hardware systems and processes. Dropped out to build projects for clients." } ], "open_source": [ { "title": "Open Source Contributor", "place": "Drupal Project", "placeLink": "https://www.drupal.org/", "location": "🌍", "startDate": "2016-10-01", "endDate": null, "ongoing": true, "text": "Among a lot of community work & meetups I challenged myself with the contribution to the Drupal Design System which we build up from scratch.\nThis teamwork led to an excellent new Admin UI for Drupal named Claro. I helped building the frontend components for the Claro theme which is now used by over 200.000 sites." }, { "title": "Emoji Design & Development", "place": "OpenMoji", "placeLink": "https://openmoji.org/", "location": "🌍", "startDate": "2019-08-01", "endDate": "2020-05-01", "ongoing": false, "text": "Student-driven open source emoji library which covers over 3600+ unicode emojis and is updated regularly. All emojis are free to use under the CC BY-SA 4.0 license. All emojis follow a single style guide and fit perfectly together. OpenMoji supports the Fitzpatrick skin tones scale and multiple skin tone combinations as of Emoji v13." }, { "title": "Open Source Firewall Contributor", "place": "pfsense", "placeLink": "https://www.pfsense.org/", "location": "🌍", "startDate": "2016-06-15", "endDate": "2016-07-30", "ongoing": false, "text": "Created a captive portal (wifi login system) for the open source firewall system pfsense. Later, this project was added to the pfsense codebase as a community contribution because the default captive portal needed a refresh." } ] }, "machineResources": [ { "title": "LLM site index", "path": "/llms.txt", "type": "text/markdown", "description": "Concise llms.txt entry point for agents.", "url": "https://felixhaeberle.com/llms.txt" }, { "title": "Full LLM context", "path": "/llms-full.txt", "type": "text/markdown", "description": "Expanded text context, URL map, and fetch guidance.", "url": "https://felixhaeberle.com/llms-full.txt" }, { "title": "AI site data", "path": "/ai.json", "type": "application/json", "description": "Structured site, profile, page, work, study, writing, and CV data.", "url": "https://felixhaeberle.com/ai.json" }, { "title": "Schema.org graph", "path": "/schema.jsonld", "type": "application/ld+json", "description": "Standalone JSON-LD graph for the site and its content collections.", "url": "https://felixhaeberle.com/schema.jsonld" }, { "title": "Sitemap", "path": "/sitemap.xml", "type": "application/xml", "description": "Crawler sitemap including canonical and machine-readable routes.", "url": "https://felixhaeberle.com/sitemap.xml" }, { "title": "Robots policy", "path": "/robots.txt", "type": "text/plain", "description": "Crawler access policy and sitemap pointer.", "url": "https://felixhaeberle.com/robots.txt" } ] }