Portfolio case study

The design system behind this portfolio.

A focused breakdown of the real UI elements used in this portfolio: architecture, file organization, palette, typography, components, iconography and interaction patterns.

AstroReactTypeScriptTailwind CSSScoped Astro CSSFramer MotionLucide ReactAstro API Route

Information architecture

Site structure

Five distinct areas, each with a clear purpose. The portfolio is organised around a single top-level narrative that branches into project depth, personal context and content.

Portfolio
Overview
  • Hero
  • Projects preview
  • Testimonials
  • Contact CTA
Projects
  • Project index
  • Case studies
  • Coming soon
About me
  • Background
  • Design values
  • Tools & stack
How I work
  • Discovery
  • UX strategy
  • UI design
  • Delivery
Blog
  • Articles
  • Design notes
  • Process posts

Project organisation

How the files are organised

Each directory has a single responsibility. Astro pages own routing; components own interactivity; the API directory handles the only server-side concern: contact form delivery.

src/pages

Astro routes. Contains the overview, projects index, blog pages and each single project case-study route.

Skado.astro, PetNoah.astro etc..
src/components

Reusable Astro and React components: hero, project cards, contact popup, blog cards, footer, TOC.

ContactPopup.tsx, ProjectShowcase.tsx etc..
src/layouts

Global page shell. Handles Header, Footer, SEO title and optional TopBanner across pages.

src/layouts/Layout.astro
src/pages/api

Server endpoints. The contact API receives form data and sends the message by email.

src/pages/api/contact.ts
public/images

Static visual assets: logo, avatar, project thumbnails, blog covers and case-study images.

Logo.png, Skado-preview.png etc..
Astro

Used for routing, static structure, page layouts and case-study pages.

React

Used only where interaction is needed: popup, filters, animated UI, hover states.

TypeScript

Used for typed component props, project objects, form state and UI data structures.

Tailwind CSS

Used mostly inside React components for fast visual iteration and component-level styling.

Scoped Astro CSS

Used for page-specific case-study layouts and large visual sections.

Framer Motion

Used for popup transitions, animated labels and controlled UI motion.

Lucide React

Used for functional interface icons like close, send, alerts and checks.

Astro API Route

Used by the contact form to send messages to my email address.

Palette

Black first. Green only as accent.

A restrained, purposeful colour system. Black creates premium focus; soft white ensures legibility; matrix green is used sparingly to signal activity and interaction – never as decoration.

Black Base #000000 Main site background. Keeps the interface premium, calm and focused.
Deep Surface #050706 Modal, cards and heavy surfaces where content needs stronger separation.
Soft Glass rgba(255,255,255,0.03) Glass panels, buttons, cards and subtle elevated surfaces.
Hairline Border rgba(255,255,255,0.10) Neutral dividers and outlines. Used more often than green borders.
Matrix Accent #8EFFA8 Only for active states, small highlights, focus details and refined hover states.
Sage Accent #3C7A5B Subtle glow, gradients and low-opacity depth. Never used as a dominant fill.
Soft White rgba(245,248,246,0.96) Primary headings and high-emphasis text.
Muted Green Grey rgba(193,208,197,0.64) Body copy, metadata, labels and supporting text.

Spacing & layout

Grid, breakpoints and rhythm

A consistent spatial system keeps the interface breathable and aligned. Three max-widths, four breakpoints and a fluid padding scale – all derived from a base-8 unit grid.

Max-widths

1440px Full-width glow & hero backgrounds
1120px Primary content container
860px Text-heavy readable sections

Breakpoints

360pxMobile
640pxTablet
1024pxDesktop
1280px+Wide

Padding scale

8px
16px
24px
32px
48px
80px
120px

Typography

Type styles used across the interface

Four distinct type roles, each serving a specific function. From the scrambled mono hero to the relaxed body copy – every size and weight choice has a clear reason.

Hero / Role text

PRODUCT DESIGNER

Mono, uppercase, wide tracking Used in the hero with the text scramble effect. It gives the page a coded/product-system feeling.

Main headings

Designing digital products

Sansation / strong weight / tight line-height Used for major sections. The goal is to look bold, editorial and premium without feeling noisy.

Body copy

I design interfaces, flows and systems that turn ideas into usable products.

Inter or system sans / 15–17px / relaxed leading Used in descriptions and case-study text to keep long reading comfortable.

Micro labels

AVAILABLE TO WORK

Mono, 10–11px, uppercase, large tracking Used for technical labels, status pills and section eyebrows.

Motion & interactions

How the interface moves

Every animation has a purpose – to reinforce hierarchy, communicate state or reward attention. These are the four core motion patterns used across the portfolio.

opacity 0 · +18px
opacity 1 · translate 0
Scroll reveal Elements enter with opacity + vertical translate via IntersectionObserver. Threshold 0.08, rootMargin −32px.
BxIDKE DPSIQN
Text scramble Characters cycle through random glyphs before landing on the final letter. Used in the hero role display.
Hover me
Hover depth Cards lift with translateY(−4px) and a deeper box-shadow on hover, signalling interactivity through subtle elevation.
Framer presence Modals and overlays animate in via AnimatePresence with scale + opacity. Exit animations mirror the entrance.

UI components

Real components used in the portfolio

Every component shown below exists and is used in production. Each one has a specific purpose, defined interaction states and a consistent visual language aligned with the design system.

Overview Projects About me Blog

Header / Navigation

Main navigation with logo on the left, primary routes in the center and CV action on the right.

  • Sticky header
  • Logo image from /images/Logo.png
  • Active route state
  • Soft underline hover
  • Matrix-green accent only on active/hover details

Open to Product Design opportunities across Europe.

Let's talk ↗

Top recruiter banner

Small sticky conversion banner used on strategic pages to communicate availability.

  • Sticky below navbar
  • Pulse availability dot
  • Single CTA
  • Stored dismiss logic supported
  • Glass surface with subtle green glow
Avatar
Available to Work

BRIDGE DESIGNER

Hero content

First impression of the portfolio: avatar, availability status, animated role and social/contact actions.

  • Fixed avatar block
  • TextScramble role animation
  • Available to Work status pill
  • Social buttons
  • Email button opens ContactProjectPopup

Social buttons

Compact hero actions for LinkedIn, GitHub and direct contact.

  • LinkedIn and GitHub open external pages
  • Email opens internal popup
  • Same icon language across footer and hero
  • Soft scale on hover
  • Arrow icon reinforces external/action behavior

Contact

Send me a message

Tell me briefly what you need and I'll get back to you by email.

Your name*
Email address*
Object*
Message*
Message must contain at least 10 characters.

ContactProjectPopup

Main contact flow. Lets users send a project message directly from the interface.

  • Framer Motion entrance/exit
  • Fixed overlay above every layer
  • Body scroll lock
  • ESC close + click outside to close
  • Form validation and honeypot
  • Cooldown protection
  • Success state reset on close
Email address*

Insert a valid email address.

Animated form input

Premium input used inside the contact form with animated floating label.

  • Animated label letters
  • Focus state on border
  • Validation error message
  • Transparent background
  • Consistent textarea variant
Portfolio
Skado
Elmax

Project showcase

Visual grid used to show project previews in a premium editorial way.

  • Three-column image layout
  • Offset columns
  • Hover dimming
  • Image saturation state
  • Linked project actions
Skado

Website + Mobile App

F ◎ ↗

Project row actions

Interactive project list item with project name, type and quick links.

  • Hover active state
  • Indicator pill
  • Figma link
  • Live project link
  • Behance/case link support
  • Arrow affordance
Blog cover
Article · 8 min read

From fridge chaos to MVP

Mapping habits, prioritising flows and keeping the UI clean.

Blog expandable card

Blog card used to preview article content before opening the full post.

  • Cover image
  • Date and reading time
  • Excerpt
  • Preview content + tags
  • Expandable interaction
Home › Projects › Elmax
☀
☾

Case study topbar

Fixed navigation bar present in every case study. Holds breadcrumb navigation and an optional light/dark mode toggle for the page.

  • Fixed, z-index 200, 48px tall
  • ProjectBreadcrumbs: Home → Projects → Case
  • ThemeSwitch (omitted on dark-only studies)
  • Glass backdrop blur surface
  • Accent color adapts per project identity
Design System
Portfolio
› information-architecture.ts
› file-structure.ts
Design System
› components.tsx
› iconography.tsx

DynamicIslandTOC

Floating bottom pill that expands into a code-editor-style table of contents. Used in all newer case studies as the primary in-page navigation.

  • Folder/file tree with custom icon colors
  • Smooth scroll to section on click
  • Intersection-observer active-section highlight
  • phaseAnchors for dynamic progress ring color
  • Framer Motion expand/collapse animation
Phase 01
Empathize

Understanding the user's context, pain points and needs through qualitative research.

Phase section header

Full-viewport editorial divider between UX phases in case studies. Creates a dramatic, high-contrast transition before the detail sections.

  • 100dvh full-screen layout
  • Giant numeric watermark (01–05)
  • Phase chip badge with glowing dot
  • Radial accent glow per phase color
  • data-reveal scroll entrance animations
Overview Projects About Blog

FloatingNav

Sticky pill-shaped navigation bar that floats at the bottom center, providing quick section access within long project pages.

  • Fixed position, bottom center
  • Framer Motion entrance on scroll
  • Active section highlight
  • CTA button on the right
  • Blur glass background

I design interfaces, flows and systems that turn ideas into products.

MagicText scroll reveal

Scroll-triggered animation that fades in each word individually as text enters the viewport, creating a premium reading experience.

  • IntersectionObserver per word
  • Opacity 0.15 → 1 per word
  • Staggered delay per word index
  • Works on any text length
  • Framer Motion spring easing

Iconography

Icons used in the interface

All icons come from Lucide React, chosen for their consistent stroke weight and clean geometric style. Each icon serves a specific semantic role – none are purely decorative.

LinkedIn Hero social button / Footer social link
GitHub Hero social button / Footer social link
Email Contact popup trigger
Arrow Up Right External link / CTA affordance
Close Popup close action
Send Submit button inside contact popup
Alert Circle Form validation error
Check Circle Message sent success state
Figma Project row quick link
Globe Live project quick link
Layers Behance / case reference quick link
Home ProjectBreadcrumbs – first topbar step
Folder ProjectBreadcrumbs – Projects step
ChevronRight Breadcrumb separator icon
PenTool Hero role chip in case study headers
X Close action in banners and modals
Moon ThemeSwitch – dark mode toggle
Sun ThemeSwitch – light mode toggle