Revamp README.md with minimalist modern style

Co-authored-by: LinusOlofsson-maker <61837116+LinusOlofsson-maker@users.noreply.github.com>

README.md

@@ -2,158 +2,101 @@
 
 A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations.
 
-[![Live Demo](https://img.shields.io/badge/Live-Demo-brightgreen?style=for-the-badge)](https://imagesbyolofsson.se)
+<br>
-[![Astro](https://img.shields.io/badge/Astro-5.16.7-FF5E01?style=for-the-badge&logo=astro)](https://astro.build)
-[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.1.18-06B6D4?style=for-the-badge&logo=tailwindcss)](https://tailwindcss.com)
-
-## Preview
 
 <div align="center">
   <table>
     <tr>
-      <td align="center" width="33%">
+      <td align="center">
-        <img src="./public/3d-scroll/img1.jpg" width="250" alt="Portfolio Grid"/>
+        <img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img1.jpg" width="250" alt="Portfolio Grid">
-        <br>
+        <br><em>Portfolio Grid</em>
-        <em>Portfolio Grid</em>
       </td>
-      <td align="center" width="33%">
+      <td align="center">
-        <img src="./public/3d-scroll/img2.jpg" width="250" alt="3D Scroll Effect"/>
+        <img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img2.jpg" width="250" alt="3D Scroll Effect">
-        <br>
+        <br><em>3D Scroll Effect</em>
-        <em>3D Scroll Effect</em>
       </td>
-      <td align="center" width="33%">
+      <td align="center">
-        <img src="./public/3d-scroll/img3.jpg" width="250" alt="Hero Section"/>
+        <img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img3.jpg" width="250" alt="Hero Section">
-        <br>
+        <br><em>Hero Section</em>
-        <em>Hero Section</em>
       </td>
     </tr>
   </table>
 </div>
 
+<br>
 <br>
 
 ## Features
 
-- **Modern Design** - Minimalist and elegant design with focus on images
+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.
-- **Advanced Animations** - Wave animations, 3D scroll effects, and smoke particles
+
-- **Fully Responsive** - Perfectly adapted for all devices
+<br>
-- **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
+**Prerequisites**
-- Node.js 18.0+ 
-- npm or yarn
 
-### Installation
+Node.js 18.0 or higher
+
+**Installation**
 
 ```bash
-# Clone the repo
+git clone https://github.com/Images-by-Olofsson/homepage.git
-git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
+cd homepage
-cd imagesbyolofsson.se
-
-# Install dependencies
 npm install
+```
 
-# Start development server
+**Development**
+
+```bash
 npm run dev
+```
 
+**Build**
 
-# Build the project
+```bash
 npm run build
-
-# Preview production build
 npm run preview
+```
 
+<br>
 
+## Project Structure
+
+```
 src/
-├── assets/           # Static resources (images, SVGs)
+├── assets/
-├── components/       # Reusable Astro components
+├── components/
-│   ├── WaveBackground.astro    # Animated wave background
+│   ├── WaveBackground.astro
-│   ├── ThreeDScroll.astro      # 3D scroll effect
+│   ├── ThreeDScroll.astro
-│   ├── FloatingOrbs.astro      # Floating orb elements
+│   ├── FloatingOrbs.astro
-│   └── Welcome.astro           # Welcome component
+│   └── Welcome.astro
-├── layouts/          # Page layouts
+├── layouts/
-│   ├── MainLayout.astro        # Main layout
+│   ├── MainLayout.astro
-│   └── Layout.astro            # Base layout
+│   └── Layout.astro
-├── pages/            # Page components
+├── pages/
-│   ├── index.astro             # Home page
+│   ├── index.astro
-│   ├── portfolio.astro         # Portfolio page
+│   ├── portfolio.astro
-│   ├── about.astro             # About page
+│   ├── about.astro
-│   └── contact.astro           # Contact page
+│   └── contact.astro
-└── styles/           # CSS st
+└── styles/
-src/
+    └── global.css
-├── 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
+<br>
-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:
 
-Fork this repo
+## Technologies
-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
+Astro, Tailwind CSS, TypeScript, Exifr
-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
+<br>
-Tailwind CSS - For the powerful CSS framework
-Adobe Lightroom - For image processing
-<div align="center"> <p>Built by <a href="https://github.com/LinusOlofsson-maker">Linus Olofsson</a></p> <p>© 2024 Images by Olofsson. All rights reserved.</p> </div> ```
-Please confirm you want Copilot to make this change in the LinusOlofsson-maker/Images-by-Olofsson/homepage repository on branch main.yles
-    └── global.css             # Global styles
 
+## License
+
+MIT License - see LICENSE file for details
+
+<br>
+
+<div align="center">
+  <p>Built by Linus Olofsson</p>
+</div>