# Studio Ghibli Gallery

An elegant showcase of Studio Ghibli films with detailed information, character profiles, and high-quality artwork galleries.

**GITHUB:** https://github.com/HighnessAtharva/studio-ghibli-gallery

**DEMO:** https://studio-ghibli-gallery.vercel.app

![Studio Ghibli Gallery](/projects/images/studio-ghibli.webp)

## Features

- **Film Database**: Comprehensive information about all Studio Ghibli movies
- **Character Profiles**: Detailed character information and artwork
- **High-Quality Gallery**: Beautiful artwork and screenshots from films
- **Search and Filter**: Find films by year, director, or genre
- **Responsive Design**: Optimized for all devices

## Technology Stack

- **Vue.js**: Progressive JavaScript framework
- **Nuxt.js**: Vue.js framework for server-side rendering
- **SCSS**: Enhanced CSS with variables and mixins
- **Studio Ghibli API**: Official API for film data

## Getting Started

### Prerequisites

Make sure you have the following installed:
- Node.js (v14 or higher)
- npm or yarn package manager

### Installation

1. Clone the repository:
```bash
git clone https://github.com/HighnessAtharva/studio-ghibli-gallery
cd studio-ghibli-gallery
```

2. Install dependencies:
```bash
npm install
```

3. Start the development server:
```bash
npm run dev
```

4. Build for production:
```bash
npm run build
npm run start
```

## Usage

### Film Gallery
- Browse all Studio Ghibli films
- View detailed film information
- Watch trailers and clips
- Read plot summaries and reviews

### Character Profiles
- Explore character galleries
- Learn about character backgrounds
- View character relationships
- See character development across films

### Search Features
- Search by film title
- Filter by release year
- Sort by director
- Find films by genre or theme

## Film Database

The gallery includes information about:

### Classic Films
- **My Neighbor Totoro** (1988)
- **Spirited Away** (2001)
- **Princess Mononoke** (1997)
- **Howl's Moving Castle** (2004)
- **Kiki's Delivery Service** (1989)

### Directors Featured
- **Hayao Miyazaki** - Legendary animator and director
- **Isao Takahata** - Co-founder and acclaimed director
- **Gorō Miyazaki** - Next generation filmmaker

### Themes Explored
- Environmental conservation
- Coming of age stories
- Magic and fantasy
- Strong female protagonists
- Japanese culture and folklore

## API Integration

The application uses the Studio Ghibli API to fetch:

```javascript
// Get all films
fetch('https://ghibliapi.herokuapp.com/films')

// Get film details
fetch('https://ghibliapi.herokuapp.com/films/{id}')

// Get characters
fetch('https://ghibliapi.herokuapp.com/people')

// Get locations
fetch('https://ghibliapi.herokuapp.com/locations')
```

## Component Structure

```
components/
├── FilmCard.vue          # Individual film display
├── CharacterCard.vue     # Character profile card
├── Gallery.vue           # Image gallery component
├── SearchBar.vue         # Search and filter
└── Navigation.vue        # Site navigation

pages/
├── index.vue             # Home page
├── films/
│   └── _id.vue          # Film detail page
├── characters/
│   └── _id.vue          # Character detail page
└── about.vue            # About Studio Ghibli
```

## Styling

The application uses SCSS for enhanced styling:

```scss
// Variables
$primary-color: #4a90e2;
$secondary-color: #7ed321;
$ghibli-green: #8fbc8f;

// Mixins
@mixin card-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

// Responsive design
@media (max-width: 768px) {
  .film-grid {
    grid-template-columns: 1fr;
  }
}
```

## Performance Optimization

- **Lazy Loading**: Images load as needed
- **Server-Side Rendering**: Fast initial page loads
- **Image Optimization**: Compressed and responsive images
- **Caching**: API responses cached for better performance

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request with:
- New film information
- Character details
- UI improvements
- Bug fixes

## License

This project is licensed under the MIT License - see the LICENSE file for details.

## Contact

For questions or suggestions, feel free to reach out through GitHub issues.