# Images by Olofsson
A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations.
[](https://imagesbyolofsson.se)
[](https://astro.build)
[](https://tailwindcss.com)
## **Preview**
Portfolio Grid
Elegant image gallery with smooth transitions
|
3D Scroll Effect
Immersive parallax scrolling experience
|
Dynamic Animations
Wave effects and floating elements
|
---
## **Features**
|
**Modern Design**
Minimalist and elegant design with focus on images
**Advanced Animations**
Wave animations, 3D scroll effects, and smoke particles
**Fully Responsive**
Perfectly adapted for all devices
|
**Blazingly Fast**
Built with Astro for maximum performance
**Interactive Elements**
Hover effects, smooth transitions, and dynamic backgrounds
**SEO Optimized**
Semantic HTML and metadata
|
---
## **Quick Start**
### Prerequisites
- Node.js 18.0+
- npm or yarn
### Installation
```bash
# Clone the repository
git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
cd imagesbyolofsson.se
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
```
---
## **Project Structure**
```
src/
├── assets/ # Static resources (images, SVGs)
├── components/ # Reusable Astro components
│ ├── WaveBackground.astro # Animated wave background
│ ├── ThreeDScroll.astro # 3D scroll effect
│ ├── FloatingOrbs.astro # Floating orb elements
│ └── Welcome.astro # Welcome component
├── layouts/ # Page layouts
│ ├── MainLayout.astro # Main layout
│ └── Layout.astro # Base layout
├── pages/ # Page components
│ ├── index.astro # Home page
│ ├── portfolio.astro # Portfolio page
│ ├── about.astro # About page
│ └── contact.astro # Contact page
└── styles/ # CSS styles
└── global.css # Global styles
```
---
## **Technologies**
- **Astro** - Modern web framework
- **Tailwind CSS** - Utility-first CSS framework
- **TypeScript** - Type-safe JavaScript
- **Exifr** - EXIF data reading
---
## **Design System**
### Color Palette
- **Primary:** Cyan `#06B6D4`
- **Secondary:** Purple `#A855F7`
- **Neutral:** Grayscale `#1F2937` - `#F9FAFB`
### Typography
- **Headings:** Font Black, Tracking Tighter
- **Body Text:** Font Light
- **Accent:** Uppercase, Tracking Widest
### Animations
- **Waves:** SVG-based with filter effects
- **Smoke:** Path animations with gaussian blur
- **3D Scroll:** Parallax with transform3d
- **Transitions:** Smooth ease-in/out
---
## **Responsive Design**
The website is optimized for:
- **Mobile** `< 768px` - Single column, touch-friendly
- **Tablet** `768px - 1024px` - Medium layout
- **Desktop** `> 1024px` - Full experience with all animations
---
## **Performance**
- **Lighthouse Score:** 95+ Performance
- **First Contentful Paint:** < 1.5s
- **Largest Contentful Paint:** < 2.5s
- **Cumulative Layout Shift:** < 0.1
---
## **Contributing**
Contributions are welcome! Please follow these steps:
1. Fork this repository
2. Create a feature branch `git checkout -b feature/AmazingFeature`
3. Commit your changes `git commit -m 'Add some AmazingFeature'`
4. Push to the branch `git push origin feature/AmazingFeature`
5. Open a Pull Request
---
## **License**
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
## **Contact**
- **Website:** [imagesbyolofsson.se](https://imagesbyolofsson.se)
- **Email:** info@imagesbyolofsson.se
- **Instagram:** [@imagesbyolofsson](https://instagram.com/imagesbyolofsson)
- **LinkedIn:** [Linus Olofsson](https://linkedin.com/in/linus-olofsson)
---
## **Acknowledgments**
Special thanks to these amazing open-source projects:
- [Astro](https://astro.build) - For the fantastic web framework
- [Tailwind CSS](https://tailwindcss.com) - For the powerful CSS framework
- [Adobe Lightroom](https://www.adobe.com/products/photoshop-lightroom.html) - For image processing
Built with passion by [Linus Olofsson](https://github.com/LinusOlofsson-maker)
© 2024 Images by Olofsson. All rights reserved.
