-- **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
+
+ 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+
+
+- Node.js 18.0+
- npm or yarn
### Installation
```bash
-# Clone the repo
+# Clone the repository
git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
cd imagesbyolofsson.se
@@ -60,30 +123,22 @@ npm install
# Start development server
npm run dev
-
-# Build the project
+# Build for production
npm run build
# Preview production build
npm run preview
+```
+
-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 st
+---
+
+
+
+## **Project Structure**
+
+```
src/
├── assets/ # Static resources (images, SVGs)
├── components/ # Reusable Astro components
@@ -101,59 +156,137 @@ src/
│ └── 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
+```
+
+
+
+---
+
+
+
+## **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
-All contributions are welcome! Please follow these steps:
+- **Mobile** `< 768px` - Single column, touch-friendly
+- **Tablet** `768px - 1024px` - Medium layout
+- **Desktop** `> 1024px` - Full experience with all animations
-Fork this repo
-Create a feature branch (git checkout -b feature/AmazingFeature)
-Commit your changes (git commit -m 'Add some AmazingFeature')
-Push to the branch (git push origin feature/AmazingFeature)
-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
-Thanks to all the amazing open-source projects that made this possible:
+---
-Astro - For the fantastic web framework
-Tailwind CSS - For the powerful CSS framework
-Adobe Lightroom - For image processing
-
- 
- 
- 
+