Aditya Domle Portfolio

Overview

Aditya Domle's portfolio embodies a **Technical Minimalism** aesthetic—a design philosophy that strips away ornamentation to expose the clarity and precision of a developer's work. The brand serves self-taught full-stack engineers and hiring managers seeking credible, no-nonsense evidence of technical depth. The visual language is deliberately austere: pure black (#000000) canvas, crisp white typography (oklch(0.98 0 0)), and a single accent blue (#3080ff) reserved exclusively for interactive elements and CTAs. This restraint communicates confidence and professionalism; every pixel earns its place. The UI evokes the aesthetic of a terminal, GitHub dark mode, and VS Code—environments where developers spend their days—making the portfolio feel native to its audience.

The brand voice is precise, humble, and action-oriented. Sentences are short and fact-driven: "Self-taught Full-Stack Developer from India, specializing in modern web technologies." There is no marketing hyperbole, no vague adjectives like "passionate" or "innovative." Instead, the copy lists concrete technologies (Next.js, React, Node.js, MongoDB, DevOps) and specific outcomes ("reviewed code, merged pull requests, ensured smooth project workflow"). The personality is that of a senior engineer writing documentation—clear, direct, and respectful of the reader's time.

Colors

The color system is built on a **high-contrast dark foundation** optimized for readability and technical credibility. Surface (#161b22) is the primary container color, derived from GitHub's dark theme, establishing immediate familiarity for developers. The full surface stack ranges from near-black (#050505 for surface-container-lowest) to mid-gray (#3a3a3a for surface-container-highest), providing subtle depth without sacrificing legibility. On-surface white (#ffffff) achieves WCAG AAA contrast (21:1) against all surfaces, ensuring accessibility. On-surface-variant (#b0b0b0) is reserved for secondary text, metadata, and disabled states, maintaining visual hierarchy at 7.5:1 contrast.

Primary blue (#3080ff) is the sole accent color, used exclusively on CTAs ("Schedule a call" button), acti

Typography

The type system pairs Inter (humanist sans-serif, 400–700 weights) for all body and display text with JetBrains Mono (monospace, 400–500 weights) for headers, timestamps, and code snippets. This pairing reinforces the developer-first positioning: Inter is warm and readable for narrative content, while JetBrains Mono signals technical authority. Display (60px, 700 weight, -0.04em tracking) is used sparingly for the hero name "Aditya Domle," commanding attention without shouting. Headline-lg (40px, 600 weight) anchors section titles like "Professional Journey" and "Tech Arsenal." Body-md (16px, 400 weight, 24px line-height) is the workhorse for job descriptions and project summaries, set at 1.5 line-height for comfortable scanning. Label-md (14px, 600 weight, 0.01em tracking) is applied to b

Layout

The layout follows a **fluid-to-fixed responsive grid** with a max-width of 1024px (container-max), centered on larger screens and edge-to-edge on mobile. The grid uses 12 columns with a 24px gutter (spacing.md), allowing flexible 2-column, 3-column, and full-width layouts. The hero section uses a 2-column layout on desktop (profile image + text) and stacks vertically on mobile, with 40px (spacing.lg) separation between sections. Cards and project tiles use a 2-column grid on tablet and 1-column on mobile. Padding is consistently 24px horizontal (spacing.md) and 40px vertical (spacing.lg) for section separation, creating a rhythm that feels spacious without wasting real estate. The header is sticky with backdrop-blur-sm (8px blur) and semi-transparent black (rgba(0, 0, 0, 0.5)), allowing c

Elevation & Depth

Depth is conveyed through **subtle layering and borders** rather than dramatic shadows, maintaining the minimalist aesthetic. Level 1 (Base): the pure black background (#000000) with no shadow. Level 2 (Cards): surface-container (#161b22) with a 1px solid border at outline-variant (#404040), creating a crisp edge without softness. Level 3 (Elevated/Hover): surface-container-high (#2d2d2d) with a 1px border at outline (#505050), signaling interactivity. Shadows are used sparingly: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) appears only on dropdown panels and modals, creating a subtle lift. Focus

Shapes

The shape language is **Architectural Sharpness with Minimal Softness**—a deliberate rejection of rounded corners in favor of precision and technical authenticity. Buttons use rounded-md (0.75rem / 12px), a subtle curve that softens hard edges without feeling playful. Cards and containers use rounded-lg (1rem / 16px), providing just enough rounding to feel contemporary without compromising the austere aesthetic. Input fields use rounded-DEFAULT (0.5rem / 8px), the smallest radius, emphasizing their functional role. The profile image uses rounded-full (9999px), a full circle, creating a humaniz

Components

Action Elements Buttons are the primary interactive element and use a 44px height (matching touch targets) with 12px vertical and 24px horizontal padding. Primary buttons (#3080ff background, white text) have a 1px solid border matching the background, creating a filled appearance. On hover, the background shifts to primary-container (#1a4d99) with on-primary-container text (#b3d9ff), maintaining the blue family while signaling state change. Secondary buttons are transparent with a 1px border at primary (#3080ff), inverting on hover to a light blue background (rgba(48, 128, 255, 0.08)). All buttons use label-md typography (14px, 600 weight) and rounded-md (12px). Transitions use cubic-bezier(0.4, 0, 0.2, 1) over 150ms, providing snappy feedback without feeling sluggish. Icon buttons ar

Do's and Don'ts

**Do**

• Do use primary blue (#3080ff) exclusively for CTAs and interactive elements—never for decorative accents or backgrounds.
• Do maintain 1px solid borders on all cards and containers; avoid soft shadows except on elevated modals.
• Do pair Inter body text with JetBrains Mono for headers and code snippets to reinforce technical credibility.
• Do preserve aggressive whitespace (40–64px between sections) to aid cognitive load and reflect developer-friendly design.
• Do use high-contrast text (white on #161b22 for 21:1 ratio) to ensure accessibility and readability in all lighting conditions.
• Do apply transitions at 150ms with cubic-bezier(0.4, 0, 0.2, 1) for snappy, professional feedback.

**Don't**

• Don't use rounded corners larger than 1rem (16px) on cards or containers; the aesthetic demands precision, not softness.
• Don't apply shadows to base-level elements; reserve box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for modals and dropdowns only.
• Don't introduce secondary colors (green, purple) into primary CTAs; blue is the sole action color.
• Don't use gradients or glassmorphism effects; the design rejects visual noise in favor of clarity.
• Don't exceed 2–3% of the page in primary accent color; restraint signals confidence.
• Don't use system fonts or generic sans-serif; Inter and JetBrains Mono are non-negotiable for brand consistency.