Initial commit: Modern photography portfolio with Astro

- Built with Astro 5.16.7 and Tailwind CSS 4.1.18 - Features advanced animations (waves, 3D scroll, smoke effects) - Fully responsive design with mobile-first approach - SEO optimized with semantic HTML - Interactive elements and smooth transitions - Professional portfolio showcase
2026-01-28 00:05:23 +01:00
commit b0b633d32b
84 changed files with 1656 additions and 0 deletions
@@ -0,0 +1,160 @@
+# Images by Olofsson
+
+En modern, responsiv fotografportfolio webbplats byggd med Astro, Tailwind CSS och avancerade animationer.
+
+[![Live Demo](https://img.shields.io/badge/Live-Demo-brightgreen?style=for-the-badge)](https://imagesbyolofsson.se)
+[![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)
+
+##  Funktioner
+
+-  **Modern Design** - Minimalistisk och elegant design med fokus på bilder
+-  **Avancerade Animationer** - Våg-animationer, 3D-scroll effekter och rök-partiklar
+-  **Fullt Responsiv** - Perfekt anpassad för alla enheter
+-  **Blazingly Fast** - Byggd med Astro för maximal prestanda
+-  **Interaktiva Element** - Hover-effekter, smooth transitions och dynamiska bakgrunder
+-  **SEO-optimerad** - Semantisk HTML och metadata
+
+##  Bildexempel
+
+Här är några exempel på hur bilder presenteras på sidan:
+
+### Portfolio Grid
+![Portfolio Grid](https://imagesbyolofsson.se/images/portfolio-grid.jpg)
+*Ett snyggt rutnät av bilder med hover-effekter*
+
+### 3D Scroll Effect
+![3D Scroll](https://imagesbyolofsson.se/images/3d-scroll-effect.jpg)
+*Dynamisk 3D-parallax effekt vid scrollning*
+
+### Hero Section
+![Hero Section](https://imagesbyolofsson.se/images/hero-section.jpg)
+*Imponerande hero-sektion med animerad text och bakgrunder*
+
+##  Snabbstart
+
+### Förutsättningar
+- Node.js 18.0+ 
+- npm eller yarn
+
+### Installation
+
+```bash
+# Klona repot
+git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
+cd imagesbyolofsson.se
+
+# Installera dependencies
+npm install
+
+# Starta utvecklingsservern
+npm run dev
+```
+
+Öppna [http://localhost:4321](http://localhost:4321) i din webbläsare.
+
+### Bygg för produktion
+
+```bash
+# Bygg projektet
+npm run build
+
+# Förhandsgranska production build
+npm run preview
+```
+
+##  Projektstruktur
+
+```
+src/
+├── assets/           # Statiska resurser (bilder, SVG:er)
+├── components/       # Återanvändbara Astro-komponenter
+│   ├── WaveBackground.astro    # Animerad vågbakgrund
+│   ├── ThreeDScroll.astro      # 3D scroll-effekt
+│   ├── FloatingOrbs.astro      # Flytande orb-element
+│   └── Welcome.astro           # Välkomstkomponent
+├── layouts/          # Sid-layouter
+│   ├── MainLayout.astro        # Huvudlayout
+│   └── Layout.astro            # Bas-layout
+├── pages/            # Sid-komponenter
+│   ├── index.astro             # Startsida
+│   ├── portfolio.astro         # Portfolio-sida
+│   ├── about.astro             # Om-sida
+│   └── contact.astro           # Kontakt-sida
+└── styles/           # CSS-stilar
+    └── global.css             # Globala stilar
+```
+
+##  Teknologier
+
+- **[Astro](https://astro.build/)** - Modern webb-ramverk
+- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
+- **[TypeScript](https://www.typescriptlang.org/)** - Typsäker JavaScript
+- **[Exifr](https://github.com/mattiasw/ExifReader)** - EXIF-data läsning
+
+##  Designsystem
+
+### Färgpalett
+- **Primär**: Cyan (#06B6D4)
+- **Sekundär**: Lila (#A855F7)
+- **Neutral**: Gråskalor (#1F2937 - #F9FAFB)
+
+### Typografi
+- **Rubriker**: Font Black, Tracking Tighter
+- **Brödtext**: Font Light
+- **Accent**: Uppercase, Tracking Widest
+
+### Animationer
+- **Vågor**: SVG-baserade med filter-effekter
+- **Rök**: Path-animationer med gaussian blur
+- **3D Scroll**: Parallax med transform3d
+- **Transitions**: Smooth ease-in/out
+
+##  Responsiv Design
+
+Webbplatsen är optimerad för:
+-  **Mobil** (< 768px) - Enkel kolumn, touch-vänlig
+-  **Tablet** (768px - 1024px) - Mellanstor layout
+-  **Desktop** (> 1024px) - Full upplevelse med alla animationer
+
+##  Prestanda
+
+- **Lighthouse Score**: 95+ Performance
+- **First Contentful Paint**: < 1.5s
+- **Largest Contentful Paint**: < 2.5s
+- **Cumulative Layout Shift**: < 0.1
+
+##  Bidrag
+
+Alla bidrag är välkomna! Vänligen följ dessa steg:
+
+1. Forka detta repo
+2. Skapa en feature branch (`git checkout -b feature/AmazingFeature`)
+3. Committa dina ändringar (`git commit -m 'Add some AmazingFeature'`)
+4. Pusha till branchen (`git push origin feature/AmazingFeature`)
+5. Öppna en Pull Request
+
+##  Licens
+
+Detta projekt är licensierat under MIT License - se [LICENSE](LICENSE) filen för detaljer.
+
+##  Kontakt
+
+- **Webbplats**: [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-/)
+
+##  Tack
+
+Tack till alla fantastiska open-source projekt som gjort detta möjligt:
+- [Astro](https://astro.build/) - För det fantastiska webb-ramverket
+- [Tailwind CSS](https://tailwindcss.com/) - För det kraftfulla CSS-ramverket
+- [Adobe Lightroom](https://lightroom.adobe.com/) - För bildbehandling
+
+---
+
+<div align="center">
+  <p>Byggd av <a href="https://github.com/LinusOlofsson-maker">Linus Olofsson</a></p>
+  <p>© 2024 Images by Olofsson. Alla rättigheter reserverade.</p>
+</div>