# Albert Jeffers - Artist Portfolio

A beautiful, modern portfolio website for visual artists to showcase their work with authentication and image upload capabilities.

## Features

- **Stunning Gallery Layout**: Responsive grid layout with hover effects and smooth transitions
- **Artist Authentication**: Secure login system for the artist to manage their portfolio
- **Image Upload**: Upload artwork via file upload or URL with live preview
- **Artwork Management**: Add, view, and delete artworks when authenticated
- **Responsive Design**: Fully responsive layout that works beautifully on all devices
- **Modern UI**: Built with shadcn/ui components for a polished, professional look
- **Dark/Light Mode Support**: CSS variables for easy theme customization

## Tech Stack

- **React 18** with TypeScript
- **Vite** for fast development and optimized builds
- **Tailwind CSS** for utility-first styling
- **shadcn/ui** component library (NOT Bootstrap)
- **Lucide React** for beautiful icons
- **Local Storage** for data persistence (easily replaceable with a backend)

## Getting Started

### Prerequisites

- Node.js 18+ or Bun
- npm, yarn, or pnpm

### Installation

```bash
# Install dependencies
npm install

# Start development server
npm run dev
```

The application will be available at `http://localhost:5173`

### Build for Production

```bash
npm run build
npm run preview
```

## Usage

### For Visitors

- Browse the gallery of artworks
- Click on any artwork to view full details
- Read about the artist in the About section

### For the Artist

1. Click "Artist Login" in the header
2. Enter your credentials (any email/password for demo)
3. Once logged in, you can:
   - Add new artworks using the "Add Artwork" button
   - Delete existing artworks using the trash icon
   - Upload images via file upload or URL

## Project Structure

```
src/
├── components/          # React components
│   ├── ui/             # shadcn/ui components
│   ├── Header.tsx      # Navigation header
│   ├── Hero.tsx        # Hero section
│   ├── Gallery.tsx     # Gallery grid
│   ├── ArtworkCard.tsx # Individual artwork card
│   ├── ArtworkDetail.tsx # Artwork detail modal
│   ├── LoginDialog.tsx # Login modal
│   └── AddArtworkDialog.tsx # Add artwork modal
├── hooks/              # Custom React hooks
│   ├── useAuth.ts      # Authentication logic
│   └── useArtwork.ts   # Artwork management
├── lib/                # Utilities
│   └── utils.ts        # cn() helper for classnames
├── types/              # TypeScript types
│   └── index.ts        # Shared type definitions
├── App.tsx             # Main application
└── main.tsx           # Application entry point
```

## Customization

### Artist Information

Edit the about section in `src/App.tsx` to customize the artist's bio.

### Sample Artworks

Default artworks are defined in `src/hooks/useArtwork.ts`. Replace with your own images.

### Colors and Theme

Modify the CSS variables in `src/index.css` to change the color scheme.

### Adding a Backend

Currently uses localStorage for simplicity. To add a backend:

1. Update `src/hooks/useAuth.ts` to call your authentication API
2. Update `src/hooks/useArtwork.ts` to fetch/save artworks to your database
3. Consider using services like:
   - Supabase (database + authentication + storage)
   - Firebase
   - AWS Amplify
   - Your custom backend API

## Future Enhancements

- [ ] Image optimization and CDN integration
- [ ] Categories/tags for artworks
- [ ] Contact form
- [ ] Social media integration
- [ ] Image lightbox with zoom
- [ ] Admin dashboard with analytics
- [ ] Multiple artist support
- [ ] Comments/testimonials section

## License

MIT

## Credits

Built with React, TypeScript, Vite, Tailwind CSS, and shadcn/ui