# Images by Olofsson

A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations.

<br>

<div align="center">
  <table>
    <tr>
      <td align="center">
        <img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img1.jpg" width="250" alt="Portfolio Grid">
        <br><em>Portfolio Grid</em>
      </td>
      <td align="center">
        <img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img2.jpg" width="250" alt="3D Scroll Effect">
        <br><em>3D Scroll Effect</em>
      </td>
      <td align="center">
        <img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img3.jpg" width="250" alt="Hero Section">
        <br><em>Hero Section</em>
      </td>
    </tr>
  </table>
</div>

<br>
<br>

## Features

Modern design with minimalist aesthetics and focus on imagery. Advanced animations including wave effects, 3D scroll transforms, and smoke particles. Fully responsive across all devices with optimized performance.

<br>

## Quick Start

**Prerequisites**

Node.js 18.0 or higher

**Installation**

```bash
git clone https://github.com/Images-by-Olofsson/homepage.git
cd homepage
npm install
```

**Development**

```bash
npm run dev
```

**Build**

```bash
npm run build
npm run preview
```

<br>

## Project Structure

```
src/
├── assets/
├── components/
│   ├── WaveBackground.astro
│   ├── ThreeDScroll.astro
│   ├── FloatingOrbs.astro
│   └── Welcome.astro
├── layouts/
│   ├── MainLayout.astro
│   └── Layout.astro
├── pages/
│   ├── index.astro
│   ├── portfolio.astro
│   ├── about.astro
│   └── contact.astro
└── styles/
    └── global.css
```

<br>

## Technologies

Astro, Tailwind CSS, TypeScript, Exifr

<br>

## License

MIT License - see LICENSE file for details

<br>

<div align="center">
  <p>Built by Linus Olofsson</p>
</div>