img.portrait · 1249 × 1300
Designer × Developer
I design interfaces and build the software behind them.
Client-focused websites, visual systems, and brand assets crafted for modern digital launches.
> now building: design systems
Khalid Aharran, web designer and developer
Available for new projects
Interface &
identity
- Responsive
- Branding
- Interactive
- Engineering
C toggle code view
About Two disciplines, one pair of hands
Turning rough ideas into polished digital design & code
I design responsive websites, visual identities, and interactive experiences that feel premium from the first click.
From UX direction to production-ready front-end, every detail is shaped for clarity, emotion, and conversion. The person who draws the screen is the person who ships it, so nothing gets lost in a handoff.
Daily stack
- Figma
- HTML / CSS
- JavaScript
- React
- Next.js
- Tailwind CSS
- GSAP
- Three.js
- Lenis
- Prisma
- +56Digital screens designed
From wireframes to launch-ready responsive interfaces.
- 30Live web experiences
SaaS dashboards, luxury storefronts, WebGL worlds, and live client sites, each coded from a blank file.
- 24hReply on new briefs
Send a project and hear back within a day.
Selected work 15 of 30 builds
Built, not just drawn.
Standalone web experiences, each designed and coded from scratch. Open any build to see what it's made of.
15 builds featured here, led by the live Hathor Dahabiya site. All 30 are on the projects page.
Craft Design on the left, code on the right
Designing interfaces that feel inevitable.
From wireframe to launch, typography, motion, and structure are composed as one digital language. Each preview below runs on the code next to it.
Preview
viewport 1440 · 3 columns
Display
OrbitronAharran
OrbitronAharran
Accent
Playfairfeel inevitable
Playfairfeel inevitable
Body
InterClient-focused websites, visual systems, and brand assets.
InterClient-focused websites, visual systems, and brand assets.
Code
JetBrains--ratio: 1.25;
JetBrains--ratio: 1.25;
Aa-1
Aa0
Aa1
Aa2
Aa3
Aa4
Aa5
t 0.00progress 0.00
--gold#c5a059
--gold-light#e6d2a0
--burgundy#6d001a
--panel#0a0a0a
--white#ffffff
default·hover·pressed
Hire Me Now
Hire Me Now
Hire Me Now
Responsive
-
Responsive Web Design
Every layout adapts fluidly from phone to desktop, with breakpoints, touch targets, and content priority tuned so nothing feels cramped.
- Mobile-first grid & flex structures
- Viewport-aware type scaling
- Cross-device QA before launch
-
UI & UX Systems
Interfaces built around how people actually navigate: clear hierarchy, intuitive flows, and reusable components that scale.
- Wireframes & information architecture
- Component-driven UI patterns
- Accessibility-minded interaction
-
Motion & Micro-interaction
Subtle motion that guides attention. Scroll reveals, hover feedback, and transitions that feel polished without slowing anything down.
- Scroll-triggered entrances
- Button, card & menu interactions
- Reduced-motion fallbacks included
-
Performance-first Builds
Fast-loading sites that still look premium, with optimized assets, clean markup, and Core Web Vitals kept in the green.
- Image compression & lazy loading
- Semantic HTML, minimal JS
- Lighthouse-ready delivery
Process Sketch to ship
No handoff.
Design and code stay in the same hands from the first call to launch day, so the live site matches the mockup pixel for pixel.
- 01
Discover
We pin down goals, audience, and content before any pixels move. You get a clear scope and a site map.
Brief · Site map · Moodboard - 02
Design
Wireframes become high-fidelity screens in Figma, on a type and color system built for your brand.
Wireframes · UI kit · Prototype - 03
Build
I code the approved design myself, with motion and interaction tuned on real devices.
Responsive front-end · Components · Motion - 04
Launch
Performance checks, cross-device QA, and a clean handoff of everything you own. Then it goes live.
Lighthouse audit · QA pass · Go-live
Voices 6 clients
Customers Experience
Founders, directors, and marketing leads on what it's like to work with a designer who also builds.
Contact Reply within 24h
Start a Project
Tell me about your product, brand, or launch. I'll come back with questions, a plan, and a timeline.