Hafidz Humaidi Portfolio

Overview

Hafidz Humaidi's portfolio embodies a 'Dark Aurora Minimalism' aesthetic—a fusion of deep, near-black surfaces (#1a1a1a) with vibrant teal accents (#14b8a6) and dynamic aurora-inspired gradients that evoke technical sophistication and creative energy. The design philosophy prioritizes clarity through contrast: a monochromatic canvas allows the teal accent and interactive elements to command attention, while subtle glassmorphic layers (backdrop-filter: blur(12px), rgba backgrounds at 0.05–0.2 opacity) create depth without visual clutter. The brand serves developers and designers seeking a portfolio that speaks both technical precision and artistic vision.

The voice is direct, confident, and unpretentious. Sentences are short and action-oriented ('Saya membantu bisnis dan individu mengubah ide menjadi solusi dig'—help businesses transform ideas into solutions). Typography is bold and modern (Outfit at 800 weight for headlines), reinforcing a maker's sensibility. The tone avoids corporate jargon; instead, it celebrates craft, learning, and tangible outcomes. Example: 'Perjalanan saya di dunia digital dimulai sejak bangku SMK' (My journey in the digital world began in vocational school)—personal, grounded, and relatable.

Colors

The color system is anchored in a near-black surface (#1a1a1a) that serves as the primary canvas, with a full grayscale stack (surface-dim: #0f0f0f, surface-bright: #2a2a2a, surface-container-high: #242424) for layering and depth. Primary accent is teal (#14b8a6), used exclusively for interactive CTAs, focus states, and brand highlights—it appears on the 'Lihat Proyek' button (rgba(20, 184, 166, 0.1) background with 1px border at rgba(20, 184, 166, 0.2)), navigation active states, and hover effects. Secondary accent is indigo (#6366f1), reserved for card borders and section highlights (e.g., the 'Tentang Saya' section uses border-indigo-500). Tertiary accent is orange (#f97316) for supporting UI elements and badges. On-surface text is light gray (#e5e7eb) for primary readability, with on-s

Typography

The type system uses Outfit exclusively, a geometric sans-serif that conveys modern technical confidence. Display (60px, 800 weight, -0.04em letter-spacing) anchors hero sections and major headings; headline-lg (48px, 800 weight) is used for primary names and section titles ('Hafidz Humaidi'); headline-md (32px, 700 weight) for subsections; title-lg (24px, 700 weight) for card titles. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive paragraphs and longer-form content, while body-md (16px, 400 weight, 24px line-height) serves input fields and secondary text. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text and navigation links; label-sm (12px, 600 weight, 0.05em letter-spacing) for badges and micro-copy. All headlines use tight line-heights (5

Layout

The layout employs a 12-column grid with a max-width of 1280px (max-w-6xl in Tailwind), centered via mx-auto. The hero section uses a two-column layout on desktop (md:grid-cols-2) with asymmetric spacing: the left column (text content) aligns to the start with pt-24 (96px top padding), while the right column (avatar card) uses justify-end to float right. Sections are separated by py-20 (80px vertical padding), creating a rhythm of lg spacing (40px) between major content blocks. Horizontal padding is consistent at px-4 (16px on mobile) to px-6 (24px on desktop), providing a gutter that scales with viewport. The container uses overflow-visible to allow aurora effects and floating elements to extend beyond bounds. White-space is generous: the hero section reserves min-h-[85vh] (85% viewport h

Elevation & Depth

Depth is achieved through a layered glassmorphic system rather than traditional shadows. Level 1 (Base): the background is a dark canvas (#1a1a1a) with an aurora animation overlay (canvas element with dynamic gradients) and a semi-transparent black scrim (bg-black/40, rgba(0, 0, 0, 0.4)) to reduce contrast and create atmospheric depth. Level 2 (Standard Cards & Buttons): backdrop-filter: blur(8px–12px), background: rgba(255, 255, 255, 0.05–0.1), border: 1px solid rgba(255, 255, 255, 0.1–0.15). Example: the 'Lihat Proyek' button uses rgba(20, 184, 166, 0.1) with a 1px teal border at rgba(20, 18

Shapes

The shape philosophy is 'Soft-Technical Precision'—rounded corners are used strategically to soften the austere dark aesthetic while maintaining geometric clarity. Buttons use rounded-full (9999px border-radius) for primary CTAs ('Lihat Proyek', 'Kontak Saya'), creating pill-shaped forms that feel approachable and modern. Secondary buttons and input fields use rounded-md (0.75rem / 12px) for a more structured, technical appearance. Cards use rounded-lg (1rem / 16px) for standard containers and rounded-xl (1.5rem / 24px) for elevated surfaces like the 'Tentang Saya' section. The avatar card use

Components

Action Elements Buttons are the primary interaction mechanism. The primary CTA button uses a teal-tinted glassmorphic treatment: background rgba(20, 184, 166, 0.1), border 1px solid rgba(20, 184, 166, 0.2), rounded-full, padding 12px 32px, height 48px. On hover, the background brightens to rgba(20, 184, 166, 0.2) and the border shifts to rgba(20, 184, 166, 0.5), with a transition: all 300ms ease-out. The secondary button uses a neutral glass layer: background rgba(255, 255, 255, 0.05), border 1px solid rgba(255, 255, 255, 0.1), rounded-md, padding 12px 16px, height 44px. Hover state increases opacity to rgba(255, 255, 255, 0.1) and shifts text to on-surface (#e5e7eb). All buttons use label-md typography (14px, 600 weight) and include a 300ms transition for smooth state changes.

Co

Do's and Don'ts

**Do**

• Do use teal (#14b8a6) exclusively for primary interactive elements—buttons, focus states, and active navigation—to create a consistent, recognizable accent throughout the interface.
• Do apply glassmorphic treatments (backdrop-filter: blur(8px–20px), rgba backgrounds at 0.05–0.2 opacity, 1px borders) to all interactive surfaces to maintain visual cohesion and depth.
• Do pair Outfit at 800 weight for headlines and 400 weight for body text to create strong typographic contrast and reinforce the modern, technical aesthetic.
• Do use rounded-full (9999px) for primary CTAs and rounded-md/lg for secondary containers to signal interaction hierarchy through shape language.
• Do maintain generous white-space (py-20 between sections, pt-24 in hero) to emphasize breathing room and focus user attention on key content.

**Don't**

• Don't use colors other than teal for primary interactive states—avoid red, orange, or other accent colors for CTAs, as they dilute brand recognition and confuse interaction hierarchy.
• Don't apply solid backgrounds or hard shadows to cards and buttons; the glassmorphic aesthetic depends on transparency, blur, and subtle borders to feel cohesive.
• Don't mix font families; Outfit is the exclusive typeface. Avoid system fonts, serif fonts, or monospace fonts in body copy, as they break the modern, unified aesthetic.
• Don't reduce border-radius on primary buttons below rounded-full (9999px); smaller radii make CTAs feel less inviting and undermine the approachable brand voice.