portfolio-site/README.md

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

# Install dependencies
npm install

# Start development server
npm run dev

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

Build for Production

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