Skip to content

Latest commit

 

History

History
58 lines (39 loc) · 3.92 KB

File metadata and controls

58 lines (39 loc) · 3.92 KB

Agents Guide

Design Context

Users

Potential employers, collaborators, and fellow developers visiting Aditya's personal portfolio (iditya.dev). They arrive with intent -- evaluating competence, browsing projects, or reading technical writing. They're typically developers or technical hiring managers who appreciate craft and can recognize quality engineering. The job to be done: quickly assess whether Aditya is someone worth working with, hiring, or following.

Brand Personality

Curious, crafted, focused.

  • Voice: Direct, technical, no fluff. Speaks through the work, not about it.
  • Tone: Confident without being loud. The quiet competence of someone who builds things well and lets the output speak.
  • Emotional goals: Visitors should feel: "This person is legit" (credibility), "This is cool as hell" (intrigue), "I'll remember this one" (distinctiveness), and "Clean and professional" (polish).

Aesthetic Direction

Terminal-native monochrome with surgical precision. Inspired by the Vercel/Linear school of design -- fast, sharp, typographically confident -- but filtered through a developer-terminal lens that's distinctly personal.

Visual identity:

  • Monospace-first typography (JetBrains Mono) with zero border radius
  • Grayscale token palette (oklch, achromatic) with green-500 as the singular accent
  • Terminal chrome metaphor: traffic-light dots, $ command headers, file path breadcrumbs, blinking cursors
  • 1px border grid technique (gap-px bg-border) for clean structural lines
  • Dark mode default, narrow 768px content column with visible side borders
  • Offset card hover effect (-1px/-1px shift revealing shadow layer)
  • Extremely deliberate small text sizes (10-11px) for terminal metadata

References: Vercel, Linear -- for their monochrome confidence, sharp typography, and sense of speed.

Anti-references:

  • Generic template portfolios with stock gradients and rounded cards
  • Over-animated sites with excessive parallax and scroll-jacking
  • Corporate/enterprise blandness
  • Overly playful/cute aesthetics with cartoon illustrations

Design Principles

  1. Terminal authenticity over decoration. Every visual choice should reinforce the terminal metaphor. If an element doesn't belong in a CLI, it needs to earn its place. No gratuitous ornamentation.

  2. Monochrome discipline. The grayscale palette is the canvas; green-500 is the only ink. Color is a scalpel, not a paintbrush. Every use of green should carry meaning -- active state, link, accent, signal.

  3. Density with clarity. Small text sizes and tight spacing are intentional, not accidental. Information should be dense like a well-organized terminal, but never cluttered. Every pixel of whitespace is deliberate.

  4. Craft in the details. The offset hover effect, the 1px grid lines, the blinking cursor -- these micro-details are what separate this from a template. New features must maintain this level of care.

  5. Performance is aesthetic. Fast loads, instant transitions, no jank. The site should feel as responsive as a local terminal. Animation exists to communicate state, not to impress.

Technical Constraints

  • Accessibility: WCAG AA compliance. Maintain sufficient contrast ratios (4.5:1 for normal text, 3:1 for large text), keyboard navigation, screen reader support, and respect prefers-reduced-motion.
  • Theme: Dark mode default, full light mode support. All components must work in both themes.
  • Typography: font-mono (JetBrains Mono) for almost everything. font-sans (Inter) only where monospace genuinely hinders readability.
  • Border radius: 0rem everywhere. Sharp corners are non-negotiable.
  • Max width: max-w-3xl (768px) content column. The bordered column aesthetic is core to the identity.
  • Accent color: green-500 only. No introducing new accent hues without explicit intent.
  • Shadows: Subtle in light mode, heavier in dark mode. Follow the existing oklch shadow ramp.