Files

keshavanandmusi 5a5a23aaf8 Enhance particle background with more characters and ambient effects

Update particle background to increase particle spawn rate on mouse move, add ambient particle spawning when idle, and increase max particle limit.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: beb495f8-3942-42fd-9d1b-db8f707d320f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c2b88424-5180-488e-b61b-c1eb8bc69a5c
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/804258ec-282b-434a-9b89-a7ccc1690e42/beb495f8-3942-42fd-9d1b-db8f707d320f/3Fb2Xuc
Replit-Helium-Checkpoint-Created: true

2025-12-14 23:58:20 +00:00

3.4 KiB

Raw Blame History

Terminal Portfolio Website

Overview

A minimalist single-page portfolio website featuring an interactive particle background with terminal/matrix aesthetics. The site displays an SSH command for connecting to the portfolio owner, with cursor-following character effects using the Catppuccin Mocha color scheme.

The application follows a full-stack architecture with a React frontend and Express backend, using TypeScript throughout.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

Framework: React 18 with TypeScript
Routing: Wouter for lightweight client-side routing
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 React plugin

The frontend is a single-page application centered around an HTML5 canvas particle effect that follows mouse movement, displaying random terminal characters. The main interactive element is an SSH command display with a copy-to-clipboard button.

Backend Architecture

Runtime: Node.js with Express
Language: TypeScript (ESM modules)
API Pattern: RESTful routes prefixed with /api
Storage: Abstracted storage interface with in-memory implementation (MemStorage), designed for easy swap to database

The server handles static file serving in production and proxies to Vite dev server in development. Routes are registered in server/routes.ts.

Data Layer

ORM: Drizzle ORM with PostgreSQL dialect
Schema: Defined in shared/schema.ts using Drizzle's table definitions
Validation: Zod schemas generated from Drizzle schemas via drizzle-zod
Migrations: Managed via drizzle-kit push

Currently includes a basic users table for authentication scaffolding.

Project Structure

client/           # React frontend
  src/
    components/   # UI components (shadcn/ui)
    pages/        # Route components
    hooks/        # Custom React hooks
    lib/          # Utilities and query client
server/           # Express backend
  index.ts        # Server entry point
  routes.ts       # API route definitions
  storage.ts      # Data access layer
  vite.ts         # Vite dev server integration
shared/           # Shared types and schemas
  schema.ts       # Drizzle database schema

Design System

Theme: Catppuccin Mocha (dark-only)
Typography: JetBrains Mono monospace font
Colors: CSS custom properties for consistent theming
Layout: Full viewport single-screen design, centered content

External Dependencies

Database

PostgreSQL: Primary database (configured via DATABASE_URL environment variable)
Drizzle ORM: Database toolkit for type-safe queries

Frontend Libraries

Radix UI: Headless UI primitives for accessible components
Lucide React: Icon library
class-variance-authority: Component variant management
embla-carousel-react: Carousel functionality
react-day-picker: Calendar component

Backend Libraries

express-session: Session management
connect-pg-simple: PostgreSQL session store

Build & Development

Vite: Frontend build tool with HMR
esbuild: Server bundling for production
tsx: TypeScript execution for development

3.4 KiB Raw Blame History