Aahana Bobade Portfolio

Overview

Aahana Bobade's portfolio embraces the **Code Editor Aesthetic**—a design movement that transforms developer tools into narrative interfaces. The brand personality is technical yet approachable, leveraging the familiar VS Code UI paradigm to communicate expertise in backend engineering, AI/ML, and data science. The interface acts as a living codebase where portfolio content becomes executable narrative: file trees reveal projects, syntax highlighting draws attention to key skills, and the editor canvas becomes the stage for accomplishment. The emotional response is one of clarity and competence—users immediately recognize the environment and trust the creator's technical depth. Voice: precise, direct, and conversational. Vocabulary leans on developer idioms ("building intelligent systems," "backend engineering," "scalable solutions") without pretension. Example sentence: "I build systems that are genuinely intelligent and scalable."

Colors

The color system mirrors VS Code's dark theme with intentional accent layers. **Primary (#007acc)** is the signature VS Code blue, used exclusively for interactive CTAs (the "Projects" button), active tab indicators, and focus states—it commands attention without overwhelming the monochromatic canvas. **Secondary (#ff6fd8)** is a vibrant magenta that appears in the hero name treatment ("Bobade") and badge accents, providing brand personality and visual pop against the dark background. **Tertiary (#4ec9b0)** is a teal accent used for syntax highlighting and secondary interactive elements, reinforcing the code editor metaphor. The surface stack progresses from #1e1e1e (base background) through #252526 (container), #2d2d2d (elevated), and #333333 (highest), creating subtle depth without relyi

Typography

The type system pairs **Syne** (display/headline weights: 700–800) for hero and section titles with **JetBrains Mono** (body/label weights: 400–600) for all interface text and code content. This pairing communicates the duality of the brand: Syne's geometric boldness conveys creative confidence, while JetBrains Mono's monospace precision anchors the technical narrative. Display text (68px, 800 weight, -0.04em tracking) creates immediate visual hierarchy; headlines (32–48px, 700 weight) organize content sections. Body text (14–16px, 400 weight, 0.01em tracking) maintains readability in the dense editor layout. Labels (11–12px, 400–500 weight, 0.05–0.08em tracking) provide micro-hierarchy for badges, buttons, and metadata. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (11px

Layout

The layout follows a **VS Code grid model**: a fixed 48px activity bar (left), a 220px collapsible sidebar (file explorer), and a fluid main editor canvas. The container max-width is 1100px, ensuring content remains scannable on wide displays while respecting the editor's visual boundaries. Spacing uses a semantic scale: **xs (4px)** for micro-spacing (icon gaps, badge padding), **sm (12px)** for component internal padding, **md (24px)** for section gutters and card padding, **lg (40px)** for major section separation, and **xl (64px)** for hero-to-content transitions. The grid employs 12 columns with a 24px gutter, allowing flexible 2/3/4-column layouts for project cards and skill grids. White-space is intentional: the hero section uses lg spacing above and below to isolate the name treatm

Elevation & Depth

Depth is achieved through a **layered surface stack** rather than dramatic shadows, mirroring VS Code's flat-with-borders aesthetic. Level 1 (Base): the background (#1e1e1e) with no shadow. Level 2 (Standard Card): surface-container (#252526) with a 1px solid border at {colors.outline} (#3c3c3c) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modals): surface-container-high (#2d2d2d) with the same border and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25). Hover states increase the shadow to md (0 3px 8px) and shift the background to the next level in the stack, creating a subtle l

Shapes

The shape philosophy is **Precise Minimalism**: border-radius values are small and intentional, reflecting the geometric precision of code editors. Buttons and inputs use **md (5px)** radius, creating a subtle softness without compromising the technical aesthetic. Cards and elevated containers use **lg (6px)** radius for slightly more breathing room. Badges and pills use **full (9999px)** radius for a cohesive, token-like appearance. The activity bar buttons use **md (5px)** radius to align with the editor's compact icon grid. Tab buttons have **0px** radius (sharp corners) to reinforce the ed

Components

Action Elements **Button-Primary** (#007acc, 40px height, 12px 24px padding, md radius, label-md typography) is the exclusive CTA for primary actions ("Projects" button). Hover state brightens to #0097a7 (primary-fixed-dim) with filter: brightness(1.1) and a 0.15s ease transition. **Button-Secondary** (transparent bg, 1px outline border, same dimensions) is used for secondary actions ("About Me", "Contact"). Hover state adds rgba(255, 255, 255, 0.08) background and shifts border to on-surface-variant. **Button-Ghost** (rgba(255, 255, 255, 0.07), 28px height, 3px 12px padding, label-sm typography) is used for tertiary actions and metadata buttons (file tabs, menu items). Hover state increases background opacity to 0.12 and text color to on-surface. All buttons use transition: background

Do's and Don'ts

**Do**

• Do use primary (#007acc) exclusively for the most important CTA on each page—typically one button per section—to maintain visual hierarchy and prevent decision fatigue.
• Do apply the surface stack progression (surface → surface-container → surface-container-high) for nested or elevated UI elements to create depth without shadows.
• Do use JetBrains Mono for all body text and labels to reinforce the code editor aesthetic; reserve Syne for display and headline text only.
• Do include 1px solid borders at {colors.outline} on all cards and containers to define edges in the flat, layered design system.
• Do use rgba-based overlays (e.g., rgba(255, 255, 255, 0.07)) for ghost buttons and hover states instead of solid color shifts to maintain the glass-like aesthetic.
• Do keep border-radius values small (2–6px) and intentional; avoid large radii that soften the technical precision of the editor metaphor.

**Don't**

• Don't use secondary (#ff6fd8) or tertiary (#4ec9b0) for CTAs; these are accent colors for highlights and badges, not primary actions.
• Don't apply shadows larger than lg (0 8px 24px) or use blur/backdrop-filter effects; the editor aesthetic relies on flat layers and borders, not atmospheric depth.
• Don't mix Syne and JetBrains Mono within a single text element; maintain clear typographic separation between display and body content.
• Don't use colors outside the defined palette (e.g., arbitrary hex values) for interactive elements; all buttons, links, and states must reference the token system.
• Don't apply rounded corners larger than lg (6px) to buttons or cards; the technical aesthetic demands precision, not softness.
• Don't use on-surface-variant (#777777) for primary text; it's reserved for secondary labels, disabled states, and metadata only.