Update README.md

2026-01-28 03:28:30 +01:00
parent 0dc2d4ec73
commit a00013acfa
1 changed files with 31 additions and 130 deletions
@@ -6,32 +6,42 @@ A modern, responsive photography portfolio website built with Astro, Tailwind CS
 [![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)

-##  Features
+## Preview

-  **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
+<div align="center">
+  <table>
+    <tr>
+      <td align="center" width="33%">
+        <img src="./public/3d-scroll/img1.jpg" width="250" alt="Portfolio Grid"/>
+        <br>
+        <em>Portfolio Grid</em>
+      </td>
+      <td align="center" width="33%">
+        <img src="./public/3d-scroll/img2.jpg" width="250" alt="3D Scroll Effect"/>
+        <br>
+        <em>3D Scroll Effect</em>
+      </td>
+      <td align="center" width="33%">
+        <img src="./public/3d-scroll/img3.jpg" width="250" alt="Hero Section"/>
+        <br>
+        <em>Hero Section</em>
+      </td>
+    </tr>
+  </table>
+</div>

-##  Image Examples
+<br>

-Here are some examples of how images are presented on the site:
+## Features

-### Portfolio Grid
-![Portfolio Grid](./public/3d-scroll/img1.jpg)
-*A beautiful grid of images with hover effects*
+- **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

-### 3D Scroll Effect
-![3D Scroll](https://imagesbyolofsson.se/images/3d-scroll-effect.jpg)
-*Dynamic 3D parallax effect while scrolling*
-
-### Hero Section
-![Hero Section](https://imagesbyolofsson.se/images/hero-section.jpg)
-*Impressive hero section with animated text and backgrounds*
-
-##  Quick Start
+## Quick Start

 ### Prerequisites
 - Node.js 18.0+ 
@@ -49,112 +59,3 @@ npm install

 # Start development server
 npm run dev
-```
-
-Open [http://localhost:4321](http://localhost:4321) in your browser.
-
-### Build for Production
-
-```bash
-# Build the project
-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](https://astro.build/)** - Modern web framework
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[TypeScript](https://www.typescriptlang.org/)** - Type-safe JavaScript
- **[Exifr](https://github.com/mattiasw/ExifReader)** - 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:
-
-1. Fork this repo
-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://www.instagram.com/imagesbyolofsson/)
- **LinkedIn**: [Linus Olofsson](https://www.linkedin.com/in/linus-olofsson-/)
-
-##  Acknowledgments
-
-Thanks to all the amazing open-source projects that made this possible:
- [Astro](https://astro.build/) - For the fantastic web framework
- [Tailwind CSS](https://tailwindcss.com/) - For the powerful CSS framework
- [Adobe Lightroom](https://lightroom.adobe.com/) - 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>