Luke Jameson Portfolio

A modern developer portfolio built with SvelteKit 5, featuring project showcases, a hidden admin panel, and dual theme support.

Features

• Public Portfolio: Hero section, about, skills showcase, project grid, contact & hire forms
• Project Pages: Full case studies with image galleries
• Admin Panel: Hidden admin interface for content management
• Theme Toggle: Dark/light mode with smooth transitions
• Image Optimization: Automatic WebP conversion and resizing with Sharp
• Email Notifications: Form submissions via Resend

Tech Stack

• Frontend: SvelteKit 5, TypeScript, Tailwind CSS
• Database: PostgreSQL with Drizzle ORM
• Authentication: Lucia (session-based)
• UI: Custom shadcn-style components
• Rich Text: TipTap WYSIWYG editor
• Email: Resend
• Deployment: Docker with Node adapter

Quick Start

Prerequisites

• Node.js 20+
• pnpm
• PostgreSQL (or Docker)

Development Setup

1. Clone the repository and install dependencies:

pnpm install

2. Create a .env file from the example:

cp .env.example .env

3. Update the .env file with your settings:

DATABASE_URL=postgresql://postgres:postgres@localhost:5432/lukejameson
SESSION_SECRET=your-secret-at-least-32-characters
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=your-secure-password

4. Start the database (if using Docker):

docker-compose up -d postgres

5. Push the database schema:

pnpm db:push

6. Seed the database with sample data:

pnpm db:seed

7. Start the development server:

pnpm dev

Visit http://localhost:5173 to see the site.

Admin Access

Navigate to /admin/login and sign in with the credentials set in your .env file.

Docker Deployment

1. Create a .env file with production settings:

SESSION_SECRET=your-production-secret-32-chars
ADMIN_EMAIL=admin@yourdomain.com
ADMIN_PASSWORD=secure-password
POSTGRES_PASSWORD=strong-db-password
RESEND_API_KEY=re_xxxxx
EMAIL_FROM=noreply@yourdomain.com
PUBLIC_SITE_URL=https://yourdomain.com

2. Build and start the containers:

docker-compose up -d --build

The site will be available on port 3000.

Available Scripts

Command	Description
pnpm dev	Start development server
pnpm build	Build for production
pnpm preview	Preview production build
pnpm check	Run type checking
pnpm db:push	Push schema to database
pnpm db:generate	Generate migrations
pnpm db:seed	Seed database with sample data
pnpm db:studio	Open Drizzle Studio

Project Structure

src/
├── lib/
│   ├── components/     # UI components
│   │   └── ui/        # Base shadcn-style components
│   ├── server/
│   │   ├── db/        # Database schema and client
│   │   ├── auth.ts    # Lucia authentication
│   │   ├── email.ts   # Resend integration
│   │   └── uploads.ts # Image processing
│   ├── stores/        # Svelte stores
│   └── utils/         # Utilities and validation schemas
├── routes/
│   ├── admin/         # Admin panel routes
│   ├── api/           # API endpoints
│   └── projects/      # Project detail pages
└── app.css            # Global styles and theme

Environment Variables

Variable	Required	Description
DATABASE_URL	Yes	PostgreSQL connection string
SESSION_SECRET	Yes	Session encryption key (32+ chars)
ADMIN_EMAIL	Yes	Admin user email
ADMIN_PASSWORD	Yes	Admin user password (for seeding)
RESEND_API_KEY	No	Resend API key for emails
EMAIL_FROM	No	Sender email address
PUBLIC_SITE_URL	No	Site URL for meta tags
PHOTO_STORAGE_PATH	No	Image upload directory

License

MIT