# Lumina Vesper Creative Portfolio Template

A modern, colorful single-page portfolio template for creative professionals, designers, and strategists. Built with RSL (Responsive Slot Layout) framework.

## Preview

Open `index.html` in your browser to preview the template.

## Features

- **Modern Design**: Colorful gradients, smooth animations, and sophisticated typography
- **Fully Responsive**: Looks great on desktop, tablet, and mobile devices
- **Dark/Light Mode**: Built-in theme toggle with persistent preferences
- **Accessibility First**: WCAG 2.1 AA compliant with skip links, ARIA labels, and keyboard navigation
- **Accessibility Widget**: Built-in accessibility controls for font size, contrast, and more
- **Smooth Animations**: Scroll-triggered animations that respect `prefers-reduced-motion`
- **Interactive Elements**: Typewriter effect, smooth scrolling, and hover states

## Sections Included

1. **Hero** - Full-screen introduction with animated background shapes and typewriter tagline
2. **Work/Portfolio** - 6-project grid using RSL Thumbnail component with colored overlays
3. **About** - Split layout with portrait image and bio content with skill badges
4. **Services** - Expandable service descriptions using RSL Classic Accordion
5. **Testimonials** - Client testimonials carousel using RSL Testimonial component
6. **Contact** - Two-column layout with contact info, social links, and form

## RSL Components Used

- **Grid System** (`slot-layout`) - Responsive column layouts
- **Navbar** - Sticky navigation with mobile toggle
- **Thumbnail** - Portfolio project cards with hover overlays
- **Classic Accordion** - Expandable service descriptions
- **Testimonial** - Client quotes carousel with star ratings
- **Star Rating** - 5-star rating display
- **Form Elements** - Styled contact form inputs
- **Badge** - Skill/tag badges
- **Buttons** - Primary and outline button styles
- **Animate on Scroll** - Scroll-triggered entrance animations
- **Theme Toggle** - Dark/light mode switcher
- **Accessibility Widget** - User accessibility controls

## Customization

### Colors

The template uses CSS custom properties for easy theming. Edit `lumina-vesper-style.css`:

```css
:root {
    --lv-primary: #FF6B6B;        /* Coral - main accent */
    --lv-secondary: #4ECDC4;      /* Teal - secondary accent */
    --lv-accent: #FFE66D;         /* Yellow - highlight */
    --lv-dark: #2C3E50;           /* Navy - text color */
    --lv-light: #F8F9FA;          /* Off-white - background */
    --lv-cream: #FFF8F0;          /* Warm cream - section bg */
}
```

### Typography

Google Fonts are used for typography:
- **Playfair Display** - Headings (elegant serif)
- **Inter** - Body text (clean sans-serif)
- **Space Grotesk** - UI elements (modern geometric)

### Images

Replace placeholder images from Unsplash with your own:
- Portfolio thumbnails: 600x450px recommended
- About portrait: 500x600px recommended
- Testimonial avatars: 80x80px recommended

### Content

1. Update text content in `index.html`
2. Replace project images and descriptions
3. Update contact information and social links
4. Modify service offerings in the accordion section

## Installation

1. Extract the template folder to your desired location
2. Open `index.html` in a web browser
3. All dependencies are included - no build step required

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Credits

- Built with [Responsive Slot Layout (RSL)](https://rslayout.com)
- Fonts from [Google Fonts](https://fonts.google.com)
- Icons from [Font Awesome](https://fontawesome.com)
- Placeholder images from [Unsplash](https://unsplash.com)

## License

MIT License - Free to use for personal and commercial projects.

---

*Designed with care for creative professionals who value both form and function.*
