135 lines
3.8 KiB
Markdown
135 lines
3.8 KiB
Markdown
# 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
|