Rishabh Upadhyay Portfolio

Overview

Rishabh Upadhyay's portfolio embodies a 'Neon-Minimalist' aesthetic—a fusion of high-contrast brutalism and ethereal glassmorphism that mirrors the precision of blockchain architecture and the fluidity of AI systems. The brand serves engineers and investors seeking technical credibility wrapped in cutting-edge visual sophistication. The UI evokes a sense of controlled energy: pure black (#000000) as the foundational void, punctuated by electric blue (#3b82f6) that commands attention without aggression, and frosted glass surfaces (backdrop-filter: blur(20px), rgba(255,255,255,0.05)) that suggest transparency and depth simultaneously.

The voice is direct, technical, and unadorned—no marketing flourish, only substance. Vocabulary favors precision: 'smart contracts,' 'agentic systems,' 'DeFi protocols' appear alongside clean, geometric language. The tone is confident but not arrogant; it speaks to peers in the Web3 and AI space. Example sentence in brand voice: 'Built production-grade DeFi infrastructure handling $50M+ TVL—architected for resilience, not hype.'

Colors

The color system operates on a principle of 'luminous contrast'—maximum readability and visual hierarchy through extreme value separation, not saturation. Primary (#3b82f6, electric blue) is the signature accent, deployed on all interactive elements (buttons, links, focus states) and glowing accents (box-shadow: 0 0 30px rgba(59, 130, 246, 0.4)). It appears sparingly but decisively, commanding 8–12% of screen real estate. Secondary (#bedbff, pale blue) serves as a supporting highlight for secondary CTAs and data visualization. Tertiary (#60a5fa, sky blue) bridges primary and secondary, used for tertiary actions and status indicators.

The surface stack anchors the design: surface (#000000, pure black) is the canvas; surface-container-lowest (#0a0a0a) and surface-container-low (#131313) cre

Typography

The type system pairs Oxanium (geometric, tech-forward display and headlines) with Geist Mono (monospace body text for code-like precision) and MuseoModerno (geometric labels for UI chrome). Display (72px, 700 weight, -0.03em letter-spacing) anchors hero sections with commanding presence; headline-lg (48px, 600 weight) breaks major sections; body-lg (18px, 400 weight, Geist Mono) ensures readability at distance. The monospace body text (16px, line-height 24px) reinforces the engineering identity—every paragraph reads like documentation, not marketing copy. Labels use MuseoModerno at 14px with 0.05em letter-spacing to create visual rhythm in UI controls. Apply text-shadow: 0 2px 8px rgba(0,0,0,0.4) on small labels (12px) over animated backgrounds to maintain legibility during motion.

Layout

The layout operates on a 12-column grid with a 1280px max-width container, but embraces full-bleed sections for hero and immersive canvas elements (e.g., the animated gradient background). Spacing follows a strict 8px unit system: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, xl (64px) for hero breathing room. The portfolio uses a 'scroll-snap' rhythm (snap-y snap-mandatory on the main container) to enforce full-height sections, creating a cinematic pacing. White-space is aggressive—sections breathe at 40–64px vertical margins, and cards maintain 24px internal padding. This restraint mirrors the minimalist ethos: every pixel earns its place.

Elevation & Depth

Depth is conveyed through glassmorphism and glow, not traditional shadows. Level 1 (Base): the background is a dynamic canvas (animated gradient or solid #000000) with no shadow. Level 2 (Standard Card): backdrop-filter: blur(20px), background: rgba(255,255,255,0.05), border: 1px solid rgba(255,255,255,0.1), box-shadow: 0 0 20px rgba(255,255,255,0.1), inset 0 0 20px rgba(59,130,246,0.05). Level 3 (Elevated/Modal): backdrop-filter: blur(40px), background: rgba(59,130,246,0.08), border: 1px solid rgba(59,130,246,0.2), box-shadow: 0 0 30px rgba(59,130,246,0.3), inset 0 0 30px rgba(59,130,246,0.08

Shapes

The shape philosophy is 'Geometric Precision'—sharp, intentional corners that echo the angular nature of code and blockchain architecture. Buttons and primary CTAs use rounded.lg (1rem / 16px) for approachability without softness; cards and containers use rounded.xl (1.5rem / 24px) to create visual breathing room; inputs and small UI elements use rounded.DEFAULT (0.5rem / 8px) for technical precision. The full radius (9999px) is reserved for badges and pill-shaped elements (nav items, status indicators). This hierarchy—sharp for action, slightly rounded for containers, fully rounded for labels

Components

Action Elements Buttons are the primary interaction vector. button-primary uses {colors.primary} (#3b82f6) with a 1px border at rgba(255,255,255,0.2), 12px 24px padding, and a glow box-shadow: 0 0 20px rgba(59,130,246,0.3). On hover, the background shifts to {colors.primary-fixed} (#60a5fa) and the glow intensifies to 0 0 30px rgba(59,130,246,0.5); transition: all 200ms ease. On active, the background dims to {colors.primary-fixed-dim} (#3b82f6) and the glow reduces to 0 0 20px rgba(59,130,246,0.2). button-secondary uses a transparent background with rgba(255,255,255,0.05), a 1px border at rgba(59,130,246,0.3), and backdrop-filter: blur(10px); on hover, the background lifts to rgba(59,130,246,0.1) and the border brightens to rgba(59,130,246,0.6).

Containers & Surfaces glass-card i

Do's and Don'ts

**Do**

• Do use the primary blue (#3b82f6) exclusively for interactive elements and focus states—it is the only accent color and must remain distinctive.
• Do apply backdrop-filter: blur(20px) to all glass surfaces; this is the signature visual treatment and must be consistent across cards, modals, and overlays.
• Do maintain 1px borders at rgba(255,255,255,0.1) or rgba(59,130,246,0.2) on all glass surfaces to define edges without breaking the ethereal aesthetic.
• Do use Oxanium for all headlines and display text; reserve Geist Mono for body copy to reinforce the engineering identity.
• Do preserve the 8px spacing unit rigorously—all padding, margins, and gaps must be multiples of 8px (4px, 12px, 24px, 40px, 64px).
• Do apply glow effects (box-shadow: 0 0 Xpx rgba(59,130,246,Y)) to interactive elements on hover to signal responsiveness and energy.

**Don't**

• Don't use drop shadows (0 4px 12px rgba(0,0,0,0.1)) or traditional elevation—this is a glassmorphic system, not Material Design; depth comes from blur and glow, not shadow.
• Don't introduce secondary accent colors (reds, greens, oranges) for status or alerts; use the error color (#ff6b6b) sparingly and only for destructive actions or critical errors.
• Don't round corners beyond {rounded.xl} (1.5rem) on cards or containers; excessive rounding softens the technical aesthetic and dilutes the geometric precision.
• Don't use opacity below 0.05 for borders or dividers; they will disappear on most displays and break the visual hierarchy.
• Don't apply text-shadow or text-stroke to body text; reserve these effects for small labels (12px) over animated backgrounds only.
• Don't mix typefaces within a single component; Oxanium for headlines, Geist Mono for body, MuseoModerno for labels—no exceptions.