5a5a23aaf8
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
84 lines
3.4 KiB
Markdown
84 lines
3.4 KiB
Markdown
# 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 |