Building user interfaces for the web. A craft, about UI components and design systems.
Hey there! 👋
My work is committed to the frontend. I like to create and build dynamic interfaces that are designed to be for an interactive web.
Building user interfaces is something i follow for almost 10 years now. In that area, i found myself enjoying building components and setting up the design system for it as the most fitting and fulfilling thing for me.
One component can connect to the next, and the next, and the next, and all of a sudden we have a complete, streamlined and holistic user interface, that can be adjusted in color, size, spacing, typography and other theme-related settings from some root files.
Toolshelp me to visualize the application we build. I use
- Open Figma
Figmafor user interface design and prototyping
- Open WebStorm
WebStormas IDE
- Open Craft
Craftas my main note and documentation tool
- Open GitHub
GitHubto store my private codebase
- Open GitLab
GitLabis mostly used at workspace
Accessibility
Experience levelLighthouse
Professionalpa11ty
Not started
Analytics
Google Analytics
UsedHotjar
UsedVercel Speedinsights
ExperiencedVercel Web Analytics
Experienced
CMS
Contentserv
Not startedStoryblok
DailyTypo3
Not started
Color
Color Designer
Not starteduicolors
Used
Cookie Consent
CookieHub
Not startedUsercentrics
Used
Deployment + Hosting
AWS Amplify
UsedNetlify
Usedplatform.sh
UsedVercel
Professional
Design + Interface
Adobe XD (deprecated)
ProfessionalCanva
UsedFigma
DailyFramer
UsedInVision Studio
UsedSketch
Experienced
Digital Art
Procreate
Used
Icons
heroicons
Dailyluicide-react
ProfessionalMaterial Icons
Used
IDE + Editor
Cursor AI
Not startedSublime Text
UsedVS Code
ProfessionalWebStorm
Dailyzed
Used
Image
Dall-E
Not startedMidjourney
Not startedUnplash
Experienced
Learning
animations.dev
ExperiencedBuild UI
ProfessionalBuilder.io
Not startedDesign+Code
Experienceddev.to
UsedFireship
ProfessionalFrontendMasters
Not startedfrontendmentor.io
DailyLearn Next.js
DailyRefactoring UI
DailyUdemy
Professional
Motion
jitter.video
Not startedLottieFiles
Not startedLottieFiles for Developers
Not startedMotion
DailyProcreate Dreams
Not started
Packages
@eslint/config
Daily@heroicons/react
Daily@shopware/api-client
Daily@shopware/api-gen
Professional@storyblok/react
Daily@vercel/analytics
Dailyclass-variance-authority
Experiencedclsx
Dailyhtml-react-parser
Experiencedlucide-react
Professionalnext-view-transitions
Not startedprettier
Dailyreact-hook-form
Professionalreact-instantsearch
Experiencedreact-instantsearch-nextjs
Experienceduse-debounce
Dailyzod
Daily
Performance
Lighthouse
Professional
Photo + Graphics
Illustrator
ProfessionalInDesign
ProfessionalPhotoshop
Experienced
Research + Study
Baymard Institute
DailyHuman Interface Guidelines (Apple)
Experiencednn/g Group
ExperiencedStatista
Experienced
Search
Algolia
ExperiencedElastic Search
Not startedmeilisearch
Used
Shop System + Ecommerce
Adobe Commerce (Magento)
Not startedShopify
Not startedShopware
Daily
Testing
Ghost Inspector
UsedJest
Used
UI
Headless UI
ExperiencedMaterial UI
UsedPractical UI
ProfessionalRadix UI
ExperiencedRefactoring UI
Dailyshadcn/ui
DailyTailwind UI
Experienced
Technologiesare the foundation of writing production-ready code. I use
- Open React
Reactas frontend web library
- Open Next.js
Next.jsas fullstack web application framework
- Open TypeScript
TypeScriptas superset to JavaScript
- Open Tailwind CSS
Tailwind CSSas superset to CSS
- Open Motion
Motionas animation library
Animation
Experience levelMotion
Daily
Build Tool
Vite
Used
Full-Stack Framework
Next.js
DailyNuxt.js
UsedReact Router
UsedRemix
Used
Preprocessor
Sass
Experienced
Programming Language
JavaScript
DailySwift
UsedTypeScript
Daily
Query Language
GraphQL
Not started
Style Sheet Language + Framework
CSS
DailyTailwind CSS
Daily
Social accountsYou can see my social presence on
- Open LinkedIn
LinkedInas business profile
- Open Xing
Xingas business profile
Open InstagramInstagramfor private posts