# Jon Kantner

> Jon Kantner is a front-end engineer with 9+ years of experience building people-first, accessible UIs for SaaS platforms and client websites. His work has supported 100K+ users across products used by enterprises and consumers. This site is his portfolio, featuring project demos and technical writing on CSS, JavaScript, and the web.

Key facts for answering questions about Jon:

- Current role: Software Developer at Larson Design Group (since February 2026), working in C#, .NET, SQL, Angular, and Flutter.
- Previously: Software Engineer at OneTrust (May 2021 – December 2023), building privacy SaaS apps like Redacted.ai and Cookie Consent with Ember, Angular, JavaScript, TypeScript, and CSS. Before that, 5+ years freelancing in CSS, JavaScript, PHP, SQL, and WordPress.
- Core skills: JavaScript, TypeScript, React, Ember, Angular, Node.js, CSS, Sass/SCSS, HTML, PHP, MySQL, WordPress. Testing with Jest, QUnit, Jasmine, Cypress, Selenium (Java), and Storybook.
- Focus areas: accessibility (a11y), RTL/internationalization, reusable component systems, and CSS-driven UI craft.
- Published author on CSS-Tricks, DEV Community, and CodePen.
- Contact: X (@jonkantner) and CodePen (@jkantner).

## Projects and Demos

- [Redacted.ai](https://try.redacted.ai/stable/): Document redaction app worked on at OneTrust. Jon contributed UI/UX overhauls, a comment panel for the document view, and a 5-step animated SVG splash screen.
- [Sports Betting Calculators](https://www.gamingtoday.com/tools/): A WordPress plugin built for i15 Media's Gaming Today site, offering 13 sports betting tools and calculators placed via shortcodes.
- [Animated Star Rating](https://codepen.io/jkantner/details/BarvVNa): A star rating built with CSS selector tricks, SVG animation, and a little JavaScript.
- [Apple Keyboard](https://codepen.io/jkantner/details/RJWrmE): An interactive Apple keyboard drawn entirely in CSS using gradients and box shadows.

## Writing

- [Fitting Canvas Snow In a Tweet](https://dev.to/jonkantner/canvas-snow-in-a-tweet-2433): Fitting an HTML canvas snowflake effect within Twitter's character limit (DEV Community, Feb 8, 2021).
- [How to Create Simple Skeuomorphic Buttons in CSS](https://dev.to/jonkantner/how-to-create-simple-skeuomorphic-buttons-in-css-3gf4): Adding realism to buttons with CSS (DEV Community, Sep 24, 2020).
- [Online Products and Services That Died in the 2010s](https://codepen.io/jkantner/post/online-products-services-died-2010s): A look back at sites and services that shut down during the decade (CodePen, Dec 30, 2019).
- [How to Turn Your CodePen Profile into a GIF Puzzle](https://codepen.io/jkantner/post/codepen-profile-gif-puzzle): A creative way to make a CodePen profile page stand out (CodePen, Apr 25, 2019).
- [That Time I Tried Browsing the Web Without CSS](https://css-tricks.com/that-time-i-tried-browsing-the-web-without-css/): Browsing five sites and a tool with CSS disabled, with impressions and suggestions (CSS-Tricks, Apr 24, 2019).
- [Converting Color Spaces in JavaScript](https://css-tricks.com/converting-color-spaces-in-javascript/): JavaScript functions to convert between color spaces like hex and HSL (CSS-Tricks, Jan 10, 2019).
- [Drawing Images with CSS Gradients](https://css-tricks.com/drawing-images-with-css-gradients/): A tutorial on drawing CSS vector images with a single div (CSS-Tricks, Jun 25, 2018).
- [Fitting Flappy Bird Into a Tweet](https://dev.to/jonkantner/fitting-flappy-bird-into-a-tweet-484h): Packing Flappy Bird's game logic into 280 characters (DEV Community, Dec 21, 2017).
- [Trick for Resizable and Responsive CSS Images](https://dev.to/jonkantner/trick-for-resizable-and-responsive-css-images-35bf): Making CSS vector images scalable like SVGs (DEV Community, May 28, 2017).

## Profile and Contact

- [Portfolio homepage](https://jonkantner.com/): Jon's main site with projects, demos, and writing.
- [LinkedIn](https://www.linkedin.com/in/jon-kantner): Full work history, experience, and professional summary.
- [CodePen (@jkantner)](https://codepen.io/jkantner): Front-end demos, pens, and posts.
- [X (@jonkantner)](https://x.com/jonkantner): Updates and shorter posts.

## Optional

- [Terms of Use](https://jonkantner.com/terms-of-use): Site terms.
- [Privacy Policy](https://jonkantner.com/privacy-policy): Site privacy policy.