Me

DA
Jonas Landt portrait

Aesthetics • Language • Craft

Frontend designer
 Frontend engineer

I am a language-oriented frontend specialist who actively works with identity and expression. I care deeply about semantics, typography, form, and color. I thrive in the tension between design and development, where I can translate visual and verbal intentions into living, accessible, and streamlined interfaces. Interfaces are communication between people and systems, and I strive to make that communication clear and consistent.

About me

My name is Jonas Landt

... and I have worked with interfaces, interactivity, and aesthetics since I graduated with a Master of IT specializing in Multimedia in 2006. I have developed everything from educational material to campaign sites and large commerce and content ecosystems with purchase flows, complex forms, and exploratory content. I work best in close collaboration with visual designers and UX designers when an interface, a system, and a digital identity need to find their final form. Semantics and language are closely connected. I have always been deeply interested in language, etymology, and rhetoric, and I actively use that interest when naming, structuring, and presenting interfaces. I strive to make language and code a solid foundation for experience and expression. The result is good SEO and GEO. After working with digital services and experiences for 20 years, I have acquired strong intuition and judgment that cannot be replaced by language models. That superpower enables me to guide and advise designers, developers, and decision-makers in making the right choices for their digital products.

Tools and technologies

Technologies and trends come and go, but my foundation remains the three core pillars of open web standards: HTML, CSS, and JavaScript. With these technologies, anything is possible. I am generally unimpressed by frameworks, and I strongly advocate a native-first approach. Browsers are optimized for native web technologies, and that is a reliable path to strong performance and a high degree of accessibility. Beyond being a native-first evangelist, I am also a pragmatist. I use frameworks and libraries when they solve real problems or fill gaps in open standards. Some third-party libraries offer a range of possibilities that the base technologies cannot carry alone. Below is a selection of the tools and technologies I have used most in recent years, and that I return to when quality, consistency, and delivery all need to align. You can read a bit about each tool and technology by hover/tap/TAB.

React
React has become an indispensable way to build modern web interfaces, and it's a foundation for many of the projects I work with.
Next.js
Next.js is a practical shortcut to modern website architecture. You get routing, SSR and performance optimization out of the box, and it saves a lot of code.
TypeScript
TypeScript brings type safety into a dynamic language, so you avoid runtime errors and can explicitly document API contracts.
Storybook
Storybook is a central development tool for me because it isolates components from app complexity and enables iterative design without detours.
SCSS
SCSS with BEM syntax and variables makes CSS maintenance predictable in large component systems, where naming conflicts can quickly become unmanageable.
WCAG & Accessibility
Interfaces must work for everyone, regardless of ability or device. It is not an optional feature; it is a fundamental responsibility.
Performance
Slow interfaces undermine user experience and engagement, no matter how beautiful the design is. Performance has become a design discipline.
Responsive Design
Interfaces should work equally well on phone, tablet, and desktop. Mobile-first thinking ensures you do not just build a desktop site and then shrink it.
AI assistance
I use AI in measured ways to accelerate my productivity. I do not use it to write finished solutions, but as a supplement to my own knowledge and experience.
Git & CI/CD
I have worked with Git for version control for many years, and in recent years I have used CI/CD pipelines to automate test, build, and deployment of web interfaces.
JavaScript
JavaScript is the foundation of all interactivity on the web. It is the language I return to again and again, regardless of which framework I use.
Vue 2 + Vuex
Vue 2 was my gateway to modern frontend frameworks. The syntax is intuitive, and Vuex provides state management without Redux boilerplate. I have explored Vue 3, which in many ways feels similar to React.
Nuxt
A predecessor to Next.js, but with Vue 2 as the foundation. I have worked with Nuxt on several projects, and it is a solid foundation for app architecture.
Zustand
Zustand is compact state management and a pragmatic alternative to Redux. It is easy to integrate into existing components without boilerplate.
CSS Modules
CSS Modules automatically prevent naming conflicts in large component systems by scoping styles to the individual file. It is good hygiene, separation of concerns, and predictability in CSS.
Tailwind CSS
Tailwind has become more widespread as a CSS post processor in recent years. I have used it on a handful of projects, but it still feels like an unnecessary abstraction layer.
GSAP
GSAP is the most robust library for complex animation timelines. I have used it since the Flash days, and it is still my go-to tool for precise motion design in web interfaces.
Framer Motion
Framer Motion brings React's declarative approach into motion design, so animations become part of component logic instead of separate JavaScript.
Web Audio API
Web Audio API opens possibilities for sound design and music directly in the browser without external plugins.

Selected work

Below I have handpicked a selection of projects from recent years that I believe represent my craft most clearly. Different technologies, design challenges, and target audiences are at play across these projects, but they all share one thing: I helped shape expression, experience, and interactivity.

Ortec

Modernization of website with modular components, strong accessibility, and high performance.

Scandlines

Modernized website and booking system with modular components and strong accessibility.

Muuto

Long-lived product configurator built with Vuex, variant logic, and deep API integrations.

Sticks'n'Sushi

New website and booking platform focused on menu structure, robust components, and strong performance.

Fritz Hansen

Ecommerce and product configurator with heavy state management, business logic, and complex API integrations.

Samsung Climate Solutions

Standalone Storybook-based component library delivered as a frontend contract for Java/AEM.

Design decisions in play

This microsite serves as both a personal presentation and a showcase of my craft. Below, I have collected a compact overview of the visual rules, technical constraints, and frontend disciplines that are in play on this site.

  • Neumorphism

    Subtle gradients and softened shadows create depth and character without overpowering hierarchy.

    Explore topic

  • Dark mode by user preference

    Theme choices respect both user choice and system preference while visual balance is preserved through shared tokens.

    Explore topic

  • Reduced motion by user preference

    Animation is used deliberately, but scaled back when the user wants less movement.

    Explore topic

  • GPU-friendly motion primitives

    Motion is built in pure CSS with transform and opacity, making transitions pleasant and keeping paint costs low.

    Explore topic

  • Keyboard navigation

    Menus, dialogs, and interactive controls are designed to work cleanly without a pointer.

    Explore topic

  • Token-driven styling

    Spacing, typography, and color are defined through shared tokens instead of one-off values.

    Explore topic

  • Language-aware routing

    Locale is part of the route structure so navigation and content context stay coherent in both Danish and English.

    Explore topic

  • Sticky anchor navigation with scroll tracking

    A persistent header and active section tracking preserve orientation on long pages.

    Explore topic

  • Semantic native dialog patterns

    Modal behavior uses native dialog semantics with predictable close actions and keyboard handling.

    Explore topic

  • Modular component boundaries

    Reusable UI stays bounded in components and documented in Storybook for fast, consistent iteration.

    Explore topic

  • Click target amplification

    Cards use expanded hit areas so interaction stays easy and clear across input methods.

    Explore topic

Technology in play

In addition to the design and language choices, this website is built with a compact set of modern web technologies that support performance, accessibility, and maintainability.

ReactNext.jsTurborepo (monorepo)CSS ModulesTypeScriptStorybookWCAG & AccessibilityPerformanceResponsive DesignAgentic development

The numbers speak for themselves:

Lighthouse score

Get in touch

Do you have feedback, questions, or a project you want to discuss? I am always open to an informal conversation about collaboration, design, and development. I am also happy to elaborate on my opinions over a cup of coffee.

Go to LinkedIn