Jannik Portz—Software Engineer in Berlin

CV

since 2025

SoundCloud Global Limited & Co. KG
Berlin (D)

Principal Software Engineer

Projects

🎨 🤖 p5-webpack-yeoman-generator

p5.js is a programming environment based on JavaScript aiming to "make coding accessible for artists, designers, educators and beginners".

generator-p5-webpack is a custom generator for the Yeoman platform with which p5 users can interactively set up a new project using webpack.

With the integrated babel support, p5 users are also capable of using next generation JavaScript language features without worrying about browser compatibility. Also, the option to use instance mode instead of the default global mode increases project modularization.
Technology

Yeoman platform, Node.js, p5.js, JavaScript

Quicklinks

GitHub Repository

npm package

yeoman.io

p5js.org
⚛️ 🖼 class-bound-components

React components bound to class names. As simple as that.

CSS-in-JS approaches like styled-components can be cute, but there's plenty of projects where you're not able or don't want to commit to a styling approach that's tightly coupled to React – who knows what the future holds in terms of rendering technology?

class-bound-components is the glue between your StyleSheet and a comprehensible component interface that can be reused all over your application. Compatible with anything producing class names, be it global CSS, CSS modules or vanilla-extract. It creates functional components applying class names without the tedious boilerplate.
Technology

React, TypeScript, npm

Quicklinks

npm package

GitHub Repository
👄 🔌 babel-plugin-class-bound-components

Babel is a JavaScript compiler. babel-plugin-class-bound-components is a plugin which detects code using the class-bound-components package and applies some convenience transformations to it.

E.g., it infers the display name of components created with the classBound function and inserts it into the correct position in the signatures in the compiled code. If you cannot use ES6 Proxy in your client-side codebase, it transforms calls to the classBound[JSX.IntrinsicElement]() helper signature to one that can be used without erroring on browsers without Proxies, like IE11.
Technology

Babel, TypeScript

Quicklinks

npm package

GitHub Repository
🔌 ⏰ wp-opening-hours

Opening Hours is the context aware business hours plugin for WordPress. I started this project in 2013 mainly for fun and to get to know the way the WordPress plugin and theme repositories work.

Over time it became the most used business hours plugin on the WordPress.org platform with over 10,000 active installations and about 100,000 downloads.

It stands out by time context aware widgets and shortcodes, multi-venue capability and extensive developer APIs for individual adjustments or third party extensions.
Technology

PHP, WordPress platform

Quicklinks

GitHub Repository / Documentation

WordPress.org Plugin Page
🧰 🔮 opening-hours-shortcode-builder

In WordPress, the so called Shortcodes are powerful building blocks to include rich content in posts and pages. Nevertheless, through the XML like syntax they are not so easy to assemble for non-technical users.

The opening-hours-shortcode-builder is an interactive GUI to assemble shortcodes for the Opening Hours WordPress plugin without requiring any knowledge of the shortcode syntax. It's hosted as an external website, but integrates well with the Opening Hours plugin itself as a popup that gets pre-populated with the user's settings. With its help ~1,000 shortcodes are generated per month from within the WordPress plugin.
Technology

React, TypeScript

Quicklinks

Shortcode Builder

GitHub Repository

jannikportz.de 🔥

CV

Projects

🎨 🤖 p5-webpack-yeoman-generator

⚛️ 🖼 class-bound-components

👄 🔌 babel-plugin-class-bound-components

🔌 ⏰ wp-opening-hours

🧰 🔮 opening-hours-shortcode-builder

Elsewhere on the Web

🎺 👨‍🎤 Music

💻 👽 Code

🌴 📷 Social Media