# Premium Portfolio Template

A modern, elegant portfolio website template built with the RSL (Responsive Slot Layout) framework. Features a sophisticated design with subtle rustic touches, perfect for designers, developers, and creative professionals.

## Features

### RSL Components Used
- ✅ **Navigation** - Sticky navbar with smooth scrolling
- ✅ **Scroll Progress** - Visual progress indicator
- ✅ **Grid System** - Responsive slot-based layouts
- ✅ **Cards** - Project showcases, process steps, testimonials
- ✅ **Buttons** - Multiple variants with hover effects
- ✅ **Breadcrumb** - Portfolio navigation
- ✅ **Pagination** - Project gallery pagination
- ✅ **Modal** - Project detail popups
- ✅ **Toast Notifications** - Form feedback messages
- ✅ **Forms** - Contact and newsletter forms

### Design Highlights
- 🎨 **Color Palette** - Warm, earthy tones with sophisticated neutrals
- 🖋️ **Typography** - Premium font pairing (Cormorant Garamond + Montserrat)
- 🌟 **Animations** - Smooth scroll animations and hover effects
- 📱 **Responsive** - Mobile-first, fully responsive design
- ♿ **Accessible** - WCAG AA compliant, semantic HTML, keyboard navigation
- 🎭 **Rustic Modern** - Clean design with subtle natural textures

## File Structure

```
portfolio-template/
├── index.html              # Main portfolio page
├── portfolio-style.css     # Custom styles with rustic aesthetic
├── portfolio-script.js     # Interactive features & form handling
└── README.md              # This file
```

## How to Use

### Quick Start

1. **Copy the template folder** to your project
2. **Open `index.html`** in a web browser
3. **Customize** the content with your own information

### Customization Guide

#### 1. Personal Information

Replace placeholder text in `index.html`:

- **Line 6**: Update meta description
- **Line 7**: Update page title
- **Lines 42-44**: Update brand name/initials
- **Lines 86-104**: Update hero content
- **Entire About Section**: Replace with your bio and skills
- **Work Section**: Replace with your actual projects
- **Testimonials Section**: Add real client feedback
- **Contact Section**: Update email, phone, location

#### 2. Images

Replace all instances of `../images/placeholder-image.png` with your own images:

- Hero image (workspace/creative shot)
- About image (portrait)
- Project thumbnails (6 projects)
- Testimonial author photos (3 clients)

#### 3. Colors

Edit CSS custom properties in `portfolio-style.css` (lines 8-35):

```css
:root {
    --color-primary: #8B6F47;        /* Your brand color */
    --color-secondary: #2C3E50;      /* Secondary color */
    --color-accent: #D4A574;         /* Accent color */
    /* ... customize other colors ... */
}
```

#### 4. Typography

Change fonts in `index.html` (line 18) and update CSS variables:

```css
--font-display: 'Your Display Font', serif;
--font-body: 'Your Body Font', sans-serif;
```

#### 5. Form Integration

To connect contact form to your backend, update `portfolio-script.js` (line 188-202):

```javascript
// Replace the setTimeout simulation with actual fetch call
fetch('/api/contact', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
    showToast('success', 'Message sent successfully!');
    form.reset();
})
.catch(error => {
    showToast('error', 'Failed to send message.');
});
```

## Navigation Structure

The template uses in-page anchor navigation:

- **Home** → `#home` (Hero section)
- **About** → `#about` (About Me section)
- **Work** → `#work` (Portfolio section)
- **Process** → `#process` (How I Work section)
- **Testimonials** → `#testimonials` (Client Feedback section)
- **Contact** → `#contact` (Contact Form section)

All navigation links use smooth scrolling for a polished user experience.

## Accessibility Features

This template is built with accessibility in mind:

- ✅ Semantic HTML5 elements
- ✅ Proper heading hierarchy (h1 → h2 → h3)
- ✅ ARIA labels on interactive elements
- ✅ Keyboard navigation support
- ✅ Focus indicators on all interactive elements
- ✅ Alt text placeholders for all images
- ✅ Form labels and validation
- ✅ Color contrast meets WCAG AA standards
- ✅ Reduced motion support
- ✅ Screen reader friendly

### Testing Accessibility

1. **Keyboard Navigation**: Tab through the entire page
2. **Screen Reader**: Test with NVDA, JAWS, or VoiceOver
3. **Color Contrast**: Use WebAIM's contrast checker
4. **WAVE Tool**: Run through wave.webaim.org

## Browser Support

- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ⚠️ IE11 (partial support - some modern CSS features may not work)

## 🎯 Icons

This template uses **Font Awesome 6** icons for easy local preview. Icons work immediately when you open the HTML file directly in your browser.

### Why Font Awesome?

RSL includes its own zero-dependency icon system (300+ SVG icons), but SVG sprite icons require a web server to work due to browser security restrictions. Font Awesome works without a server, making it easier for you to preview and customize templates locally.

### Migrating to RSL Icons (Optional)

For true zero-dependency deployment, you can convert to RSL Icons:

**1. Include RSL Icons CSS:**
```html
<link rel="stylesheet" href="styles/rsl-icons.css">
```

**2. Replace Font Awesome icons:**
```html
<!-- Before (Font Awesome) -->
<i class="fas fa-check"></i>

<!-- After (RSL Icons) -->
<svg class="rsl-icon" aria-hidden="true">
    <use href="images/rsl-icons.svg#rsl-icon-check"></use>
</svg>
```

**3. Common icon mappings:**
| Font Awesome | RSL Icon |
|--------------|----------|
| `fa-check` | `rsl-icon-check` |
| `fa-times` | `rsl-icon-times` |
| `fa-chevron-down` | `rsl-icon-chevron-down` |
| `fa-phone` | `rsl-icon-phone` |
| `fa-envelope` | `rsl-icon-envelope` |
| `fa-clock` | `rsl-icon-clock` |
| `fa-map-marker-alt` | `rsl-icon-map-marker` |
| `fa-arrow-right` | `rsl-icon-arrow-right` |
| `fa-star` | `rsl-icon-star` |
| `fa-user` | `rsl-icon-user` |

**4. Run a local server** (required for RSL Icons):
```bash
python3 -m http.server 8000
# Then visit http://localhost:8000
```

**Note:** RSL Icons work perfectly on any web hosting - the server requirement is only for local development.

See the [RSL Icons Documentation](../../docs/components/icons/index.html) for the full icon list and API reference.

## Performance Optimization Tips

1. **Optimize Images**
   - Use WebP format with fallbacks
   - Implement lazy loading
   - Compress images (TinyPNG, ImageOptim)

2. **Minify Assets**
   - Minify CSS and JavaScript
   - Remove unused CSS
   - Use production builds

3. **Caching**
   - Set proper cache headers
   - Use service workers for offline support

4. **CDN**
   - Host images on a CDN
   - Use CDN for Font Awesome if needed

## Deployment

### GitHub Pages

1. Push template to GitHub repository
2. Go to Settings → Pages
3. Select source branch
4. Your site will be live at `https://username.github.io/repo-name`

### Netlify

1. Connect your GitHub repository
2. Set build command: (none needed for static site)
3. Deploy!

### Vercel

1. Import your project
2. Configure settings (auto-detected for static sites)
3. Deploy!

## Customization Ideas

- Add a **Blog Section** with articles
- Include a **Resume/CV Download** button
- Add **Project Filtering** by category
- Implement **Dark Mode Toggle**
- Create **Case Study Pages** for detailed project views
- Add **Animation on Scroll** libraries (AOS, ScrollReveal)
- Integrate **Analytics** (Google Analytics, Plausible)
- Add **Live Chat** widget

## Support & Documentation

For RSL framework documentation and support:
- Visit: [RSL Documentation](../../docs/overview.html)
- Components: [Component Docs](../../docs/components/index.html)
- Layouts: [Layout Docs](../../docs/layout/index.html)

## Credits

- **Framework**: RSL (Responsive Slot Layout)
- **Icons**: Font Awesome
- **Fonts**: Google Fonts (Cormorant Garamond, Montserrat)
- **Design**: Premium rustic aesthetic
- **Built with**: Semantic HTML5, CSS3, Vanilla JavaScript

## License

This template is part of the RSL framework. Feel free to use it for personal or commercial projects.

---

**Made with ❤️ using RSL Framework**

For questions or issues, please refer to the main RSL documentation or create an issue in the RSL repository.
