Abdul Rehman

Overview

Abdul Rehman's portfolio embodies 'Technical Minimalism'—a design philosophy that strips away ornament to expose the essential structure of information architecture. The brand serves fullstack developers and technical audiences who value precision, clarity, and functional elegance. The aesthetic is deliberately austere: a pure white canvas (#ffffff) paired with a deep charcoal text (#161b22) and a strategic accent blue (#0066cc) reserved exclusively for interactive elements and calls-to-action. This restraint communicates expertise and confidence; every pixel earns its place. The emotional response is one of calm professionalism—the user feels they are in the hands of someone who understands that small details compound into excellence.

The voice is direct, technical, and unpretentious. Vocabulary favors specificity over flourish: 'Senior Fullstack Developer & 3D Web Specialist' rather than 'Creative Technologist.' Sentences are concise, often structured as fact-statements ('Creating with code. Small details matter.'). The brand personality is methodical, detail-oriented, and quietly confident—someone who ships production code and knows the difference between a 200ms and 300ms transition. Example sentence in brand voice: 'Built a real-time collaboration engine handling 50K concurrent users with sub-100ms latency.'

Colors

The color system is anchored in a grayscale foundation with a single, purposeful accent. Primary (#0066cc) is the signature interaction color—used exclusively on CTAs ('All Posts'), links, focus states, and active navigation. It is a GitHub-inspired blue, chosen because it signals technical credibility and reads as 'clickable' without shouting. Secondary (#1f6feb) provides a slightly warmer blue for supporting interactive elements and hover states. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (surface-container: #e8e8e8, surface-container-high: #e0e0e0) to create subtle depth without introducing color. On-surface text is a near-black (#161b22) with sufficient contrast (18:1) for accessibility and legibility at 16px body size. Outline and outline

Typography

The type system uses IBM Plex Sans exclusively, a geometric sans-serif that conveys both technical precision and human warmth. The hierarchy spans eight levels, from display (60px, 700 weight) down to label-sm (12px, 500 weight), with consistent line-height ratios (1.13–1.5) ensuring readability across sizes. Headlines (headline-lg: 40px, headline-md: 28px) use 600 weight for authority without heaviness; body text (16px, 400 weight) sits at the optical center of legibility, with 24px line-height providing breathing room. Letter-spacing is subtle: -0.04em on display to tighten large text, 0.01em on body to prevent monotony. A critical treatment: apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.05) to small labels (label-sm) when placed over light backgrounds to prevent anti-aliasing blur. Weight

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centered on larger screens. The gutter is 24px (md spacing), maintained consistently between columns and sections. White-space is generous: lg spacing (40px) separates major sections (hero, experience, social links), while md spacing (24px) divides subsections. The container rhythm follows a 'breathing' principle—dense information (like the contact grid) is surrounded by xl spacing (64px) to prevent cognitive overload. Mobile breakpoints collapse to single-column at 640px, with gutter reduced to sm spacing (12px). The hero section uses a centered, narrow column (max ~600px) to focus attention on the name and tagline. Cards and list items use md padding (24px) internally, with sm spacing (12px) between items. This spacing stra

Elevation & Depth

Depth is achieved through subtle shadows and borders rather than color shifts. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting state cards and inputs, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hover/interactive states, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) reserved for modals or overlays (rarely used on this portfolio). All cards carry a 1px border in outline-variant (#c4c7c8) to define edges without relying on shadow alone. On hover, cards transition from sm to md shadow over 200ms, signaling interactivity. Inputs use a 1px border (outline-variant) i

Shapes

The shape philosophy is 'Functional Geometry'—radius is applied strategically based on component purpose, not aesthetically. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel approachable and clickable; this is the only fully rounded element, making it instantly recognizable. Cards and containers use md (0.75rem / 12px) for a subtle, modern softness that avoids the 'bubbly' feel of larger radii. Input fields use DEFAULT (0.5rem / 8px), a tight radius that signals precision and technical control. Dividers and small UI elements use sm (0.25rem / 4px) or none at all. Th

Components

Action Elements Buttons are the primary interaction primitive. Primary buttons (#0066cc on white) use full radius (9999px), 40px height, and 8px 16px padding, with label-md typography (14px, 500 weight). On hover, background darkens to #0052a3 and md shadow appears (0 4px 12px rgba(0,0,0,0.08)), with a 200ms ease transition. Active state uses #003d7a. Secondary buttons use surface-container-high (#e0e0e0) background with a 1px outline-variant border, same dimensions, and hover to surface-container-highest (#d4d4d4). Ghost buttons are transparent with primary text, hover to surface-container-low (#efefef). All buttons use cursor: pointer and disable pointer-events when disabled, with opacity: 0.5.

Containers & Surfaces Cards are the primary container. They use surface background (#

Do's and Don'ts

**Do**

• Do use primary (#0066cc) exclusively for interactive elements: buttons, links, focus states, and active navigation. Never apply it to body text or backgrounds.
• Do maintain 24px gutter spacing between grid columns and 40px lg spacing between major sections; this rhythm creates visual breathing room without introducing visual noise.
• Do apply md shadow (0 4px 12px rgba(0,0,0,0.08)) on hover to cards and buttons, with a 200ms ease transition; this provides clear feedback without jarring the user.
• Do use IBM Plex Sans exclusively at 400, 500, or 600 weights; avoid 300 or 700 in body text, as they reduce legibility at screen sizes.
• Do reserve full border-radius (9999px) for buttons only; use md (12px) for cards and DEFAULT (8px) for inputs to maintain hierarchy.

**Don't**

• Don't use primary color on body text, backgrounds, or decorative elements; it dilutes its signal as the interaction color and violates the minimalist aesthetic.
• Don't apply shadows larger than md (0 4px 12px) on this portfolio; the design is intentionally flat and minimal, and heavy shadows contradict the technical brand voice.
• Don't introduce new colors outside the defined palette (primary, secondary, tertiary, error, and grays); every color must serve a functional purpose.
• Don't use border-radius larger than lg (16px) on any element except buttons; larger radii feel playful and undermine the professional, technical aesthetic.
• Don't animate transitions longer than 300ms or use easing functions other than ease or ease-in-out; snappy, predictable interactions feel more technical and responsive.