Images by Olofsson

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

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

# 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 file for details.

---

Contact

• Website: imagesbyolofsson.se
• Email: info@imagesbyolofsson.se
• Instagram: @imagesbyolofsson
• LinkedIn: Linus Olofsson

---

Acknowledgments

Special thanks to these amazing open-source projects:

• Astro - For the fantastic web framework
• Tailwind CSS - For the powerful CSS framework
• Adobe Lightroom - For image processing

_{Built with passion by Linus Olofsson}

_{© 2024 Images by Olofsson. All rights reserved.}