tej chhabra

A portfolio site that demonstrates technical depth through visual craft. Built with Next.js 16, featuring a custom business card component with physically-accurate cardstock texture rendering using normal maps and real-time lighting calculations.

View Live Site, or View on GitHub

Technical Implementation

Core Technologies:

Next.js 16 (App Router) with React 19 Server Components
TypeScript (strict mode) with comprehensive type safety
Custom canvas-based rendering engine
Tailwind CSS v4 for styling system

Key Technical Achievement: Developed a modular texture rendering library that simulates realistic cardstock using computer graphics techniques typically found in game engines. The system decodes normal maps (RGB-encoded surface vectors) and applies Lambertian reflectance models per-pixel to generate dynamic, high-fidelity paper textures at runtime.

Engineering Highlights:

Designed clean separation between rendering logic and component layer
Implemented performance optimizations (image caching, pre-computed light vectors)
Built fully type-safe API with pure functional lighting calculations
Documented architectural decisions for long-term maintainability

Skills

Frontend Architecture: Modern React patterns, Server Components, modular library design
Computer Graphics: Normal mapping, lighting models, canvas rendering optimization
TypeScript Expertise: Advanced type systems, strict mode compliance
Performance Engineering: Caching strategies, runtime optimization
Visual Design: Attention to detail, color theory, responsive scaling
Documentation: Comprehensive technical documentation and decision logs