# Clash of Clans Portfolio – Astro Edition

Welcome to your professional Clash of Clans–themed portfolio, built with [Astro](https://astro.build/)! This site features a custom animated homepage, stylish navigation, and a modern, game-inspired design.


## ✨ Features

- **Professional Visuals**: Custom styles, themed colors, and polished layout.
- **Island Treasure Map**: Interactive map page with a dark brown island theme, visible red "X" for the start, old ships, coconut trees, and a treasure chest. No legend for a cleaner look.
- **Responsive Design**: Works great on desktop and mobile.
- **Easy Navigation**: Navbar with quick access to the map and other pages.


## 🚀 Getting Started

Clone this repo and install dependencies:

```sh
git clone <your-repo-url>
cd my-website
npm install
```

Start the local development server:

```sh
npm run dev
```

Visit [http://localhost:4321](http://localhost:4321) to view your site.


## 📁 Project Structure

```text
/ (root)
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/         # Images and SVGs
│   ├── components/     # Reusable UI components (e.g., Navbar)
│   ├── layouts/        # Layout wrappers
│   └── pages/          # Site pages (index.astro, map.astro, etc.)
├── package.json
└── README.md
```







## 🧑‍💻 Scripts

| Command           | Action                                    |
|-------------------|-------------------------------------------|
| `npm install`     | Install dependencies                      |
| `npm run dev`     | Start local dev server                    |
| `npm run build`   | Build your production site to `./dist/`   |
| `npm run preview` | Preview your build locally                |


## 📦 Deployment

Build your site for production:

```sh
npm run build
```

Preview the production build:

```sh
npm run preview
```


## 🏝️ Credits

- Built with [Astro](https://astro.build/)
- Inspired by Clash of Clans visuals

---


For more info, see the [Astro documentation](https://docs.astro.build/).