Typography

Our typography system uses a monospace-inspired aesthetic for headings and clean sans-serif for body text.

Headings

H1 - Page Title

Welcome to My Portfolio

H2 - Section Title

Featured Projects

H3 - Subsection

Latest Posts

H4 - Minor Heading

Paragraphs

Large

Fullstack developer based in Bielefeld, NRW, Germany. Specializing in Swift, Python backend, React, and Next.js.

Medium (default)

I build performant, accessible web applications and mobile apps. My journey in development started when I built my first website in college.

Small

Thoughts on development, design, and everything in between.

Lists

Unordered List

JavaScript / TypeScript
React / Next.js
Python / Node.js

Navigation List

Blog
Projects
About
Contact

Code

npm install next

const greeting = 'Hello World';
function sayHello() {
  console.log(greeting);
}

Colors

Our color palette features a vibrant orange accent with alternative accent colors for specific use cases.

Backgroundvar(--bg)#0a0a0a / #fafafa

Textvar(--text)#ffffff / #1a1a1a

Primary Orangevar(--accent)#ff6600

Neon Green Accent#4BFF00Alt accent color

Error Red#ef4444Error states

Mutedvar(--muted)#888 / #666

Bordervar(--border)#262626 / #e5e5e5

Card Backgroundvar(--card-bg)#18181b / #f4f4f5

Primary Orangevar(--accent)#ff6600

Pink#FF9CEAAccent option

Buttons

Buttons are used for primary actions. Use sparingly to maintain emphasis.

Primary

Secondary

Ghost

Sizes

Loading State

Form Elements

Input fields for user data collection. Always include labels for accessibility.

Text Input

Textarea

Message

With Error

EmailInvalid email address

Cards

Cards display grouped content. Used for blog posts, projects, and featured items.

Project Card

German Police Shootings

Interactive timeline analyzing police shootings in Germany from 2000-2024.

Data AnalysisD3.js

Blog Post Card

March 15, 2024

Building Accessible Web Apps

A deep dive into ARIA attributes and keyboard navigation.

AccessibilityReact

Icons

SF Symbol-inspired icons for navigation and file system visualization.

Folder

File

Person

Paperplane

Chevron

Chevron Expanded

Loading States

Loading indicators for async operations and content placeholders.

Spinner

Skeleton

Card Skeleton

Borders & Dividers

Subtle borders for separation and structure.

Default Border

Accent Border

Hover State

Dividers

Tags & Badges

Small labels for categorization and metadata.

JavaScriptReactTypeScriptNext.jsActive TagClickable Tag

Layout Sections

Common page layouts and content arrangements.

Content Grid

Card 1

Card 2

Card 3

Two Column Layout

Left Column

Primary content area with detailed information.

Right Column

Secondary content or navigation.

Terminal Frame

~/portfolioOnline

~ > Featured Projects

Hero Section

C++ • Swift • Python • TS