Ruhrpottmetaller Corporate Website
Complete Design and Development of the corporate website for Ruhrpottmetaller, a metal recycling company in Germany. Features a modern, responsive design with custom animations and SEO optimization.
Live preview not yet available for this project (Coming soon)
GFOS Attendance Tracking App
Award-winning attendance management solution. 1st Place GFOS Innovationsaward 2024, 2nd Place 2025.
Live preview not yet available for this project (Coming soon)
Orbit – Safe Meetup App
Flutter concept app for discovering and joining small verified meetups like coffee chats or night walks. Features a custom dark design system, map view, and built-in safety tools.
About Me
I'm a student full-stack engineer at HRTime Software, where I lead UI/UX overhauls for enterprise HR platforms. I review designs, gather customer feedback, and ensure pixel-perfect consistency across all applications.
Currently pursuing my Bachelor's in Computer Science at Hochschule Bochum while delivering award-winning solutions that impact thousands of enterprise users daily.
Previous Experience: 4-week internship at GFOS (March 2024)
Technical Expertise
FRONTEND
BACKEND
TOOLS
DESIGN
PHILOSOPHY
"Every pixel matters. Consistency is key. User experience drives business success."
Design System
Built on a modern OKLCH color strategy for perceptual accuracy and scalable components. Every token is engineered with predictable lightness and chroma steps for flawless hover, active, and dark-mode behavior.
OKLCH Color Palette
Colors are defined in oklch(L C H), giving Lightness, Chroma, and Hue direct control.
Interactive states tweak C or L to signal hover/active without changing perceived brightness.
Unlike standard LCH, OKLCH is perceptually uniform - equal steps in lightness and chroma appear consistent to the human eye, making it ideal for accessible UI design and dark/light mode transitions.
Primary
#4F46E5
LCH: oklch(0.555 0.186 264.4)
Core brand violet for buttons, links, and key actions.
Primary Hover
#5A54F0
LCH: oklch(0.523 0.196 264.4)
Hover/focus state slightly increases chroma to signal interactivity.
Secondary
#0EA5E9
LCH: oklch(0.7974 0.1631 129.8)
Accent for highlights, secondary buttons, or links.
Success
#10B981
LCH: oklch(0.7706 0.1167 152.52)
Positive feedback and confirmation states.
Warning
#FBBF24
LCH: oklch(0.8429 0.11 74.6)
Non-critical alerts and attention banners.
Error
#EF4444
LCH: oklch(0.65 0.22 30)
Critical errors or destructive actions.
Background 1
#FFFFFF
LCH: oklch(1 0 0)
Main surface background. Slightly lighter in light mode, slightly darker in dark mode to provide subtle depth.
Background 2
#FBFBFB
LCH: oklch(0.985 0 0)
Secondary surface background. Provides contrast against background-1 for cards, modals, and sections.
Component Library
Interactive states use chroma-stepped tokens. Hover increases saturation while active/pressed slightly darkens the lightness, keeping contrast stable and WCAG compliant.
Enterprise Card
Uses --grey scale in OKLCH for perfectly even lightness steps,
ensuring consistent shadows across light/dark modes.
Featured Card
Demonstrates chroma-boosted primary with a constant lightness hover effect for eye-catching CTAs that remain accessible.
Let's Build Something Amazing
Ready to create enterprise-grade solutions that make a real impact? Let's discuss your next project.
Currently available for freelance projects and full-time opportunities