Files

keshavanandmusi a63ccf96bf Enhance background effect with continuous matrix rain and mouse gravity

Update client-side rendering to implement a dynamic matrix rain effect with ambient particle movement, enhanced blue color palette, and interactive cursor gravity, alongside adding Japanese Katakana characters to the character set.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8a5dc88f-13c6-40ab-96e7-e09ad06db4dd
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 0a96ed7d-db0f-4da3-8775-c22ce131e135
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/804258ec-282b-434a-9b89-a7ccc1690e42/8a5dc88f-13c6-40ab-96e7-e09ad06db4dd/6x1aYhq
Replit-Helium-Checkpoint-Created: true

2025-12-14 23:55:49 +00:00

2.5 KiB

Raw Blame History

Keshav Anand Portfolio

Overview

A minimalist terminal-themed portfolio website featuring an interactive particle background with cursor-following character effects. The site displays a single SSH command that visitors can copy to connect. Built with React frontend and Express backend, using the Catppuccin Mocha color palette for a dark terminal aesthetic.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

Framework: React 18 with TypeScript
Routing: Wouter (lightweight React router)
Styling: Tailwind CSS with custom Catppuccin Mocha theme variables
UI Components: shadcn/ui component library (New York style variant)
State Management: TanStack React Query for server state
Build Tool: Vite with path aliases (@/, @shared/, @assets/)

Backend Architecture

Runtime: Node.js with Express
Language: TypeScript (ESM modules)
API Pattern: RESTful routes prefixed with /api
Storage: Pluggable storage interface (currently in-memory, prepared for PostgreSQL)

Project Structure

client/           # React frontend
  src/
    components/   # UI components (shadcn/ui)
    pages/        # Route pages
    hooks/        # Custom React hooks
    lib/          # Utilities and query client
server/           # Express backend
  index.ts        # Entry point
  routes.ts       # API route definitions
  storage.ts      # Data storage interface
shared/           # Shared types and schemas
  schema.ts       # Drizzle ORM schema definitions

Design System

Theme: Catppuccin Mocha (dark-only)
Typography: JetBrains Mono monospace font
Key Colors:
- Background: #1e1e2e
- Primary green: #a6e3a1
- Teal accent: #94e2d5
- Text: #cdd6f4

Build Configuration

Development: npm run dev (tsx with Vite dev server)
Production: npm run build (esbuild for server, Vite for client)
Output: dist/ directory with index.cjs and public/ folder

External Dependencies

Database

ORM: Drizzle ORM with PostgreSQL dialect
Schema Location: shared/schema.ts
Migrations: ./migrations directory
Connection: DATABASE_URL environment variable required for production

Third-Party Services

Google Fonts: JetBrains Mono font family loaded via CDN

Key NPM Packages

UI: Radix UI primitives, Lucide React icons, class-variance-authority
Forms: react-hook-form with zod validation
Data: @tanstack/react-query for async state
Utilities: clsx, tailwind-merge, date-fns

2.5 KiB Raw Blame History