a63ccf96bf
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
72 lines
2.5 KiB
Markdown
72 lines
2.5 KiB
Markdown
# 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 |