mariohamann/mariohamann-blog

👋 Hi!

I'm Mario from Freiburg, Germany. I studied to be a teacher for Music, German and Math, but work as Principal Engineer and Design System Architect at Virtual Identity AG.

🎨 Design Systems

I have a passion to work at the intersection of design and development. One result of that is my work on design systems:

• Synergy for SICK AG
• Solid for Union Investment

🧪 Experiments

I love to experiment and enjoy sharing my thoughts and results:

• Lean Landing Page: 54kB landing page with 100% Lighthouse score
• Legend of Monomax: Adventure about MonoMax, a modern but monolithic CMS – includes pixel art and self-made retro music
• Figma Unleashed: Run arbitrary JS from Figma prototypes
• Activity Graph: How I built a web component for client side & Node-independent SSR utilizing Enhance, Extism, and WASM.
• Enhance SSR with WASM: What started as a discussion on Mastodon led into this experiment which layed the foundation for the Enhance team to run their WASM strategy
• Live-Preview for Storyblok & Astro: What started as an experiment led into a collaboration with the Storyblok team and found its way into Storyblok's Astro SDK
• more...

📦 Packages

When solving problems, sometimes they are generic and useful enough to be extracted into a package:

• bentogrid.js: Smart library for responsive bentogrids
• tailwindcss-var: Tailwind CSS plugin for CSS variables
• activity-graph: Web component to visualize data in style of GitHub's contribution graph
• figma-export-assets: Highly customizable library for exporting assets from Figma API
• vendorism: Utility to manage and override vendor files.
• more...

🎬 Prototypes

I love to prototype ideas and concepts with demo videos:

• Pinbox: "macOS creates file chaos. Let's fix it."
• Textparty: "Make text collaboration fun again."
• Unio: Software prototype for creating analog and digital worksheets
• Digital worksheet for Film lessons
• Digital worksheet for German lessons

🛠️ Stack

I'm most experienced in JavaScript, but enjoy using PHP for backend stuff much more. Therefore I'm most productive with the following stack, that allows me to fulfill my Principles for Web Development:

• CMS: Statamic
• Backend: Laravel + Livewire
• SSG: Astro
• Web Components: Lit
• CSS: TailwindCSS
• Package Manager: PNPM

I also worked a lot with Inertia.js, Alpine.js, Stencil.js, Vue.js, WordPress, NX.