Images by Olofsson

En modern, responsiv fotografportfolio webbplats byggd med Astro, Tailwind CSS och avancerade animationer.

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

Ett snyggt rutnät av bilder med hover-effekter

3D Scroll Effect

Dynamisk 3D-parallax effekt vid scrollning

Hero Section

Imponerande hero-sektion med animerad text och bakgrunder

Snabbstart

Förutsättningar

• Node.js 18.0+
• npm eller yarn

Installation

# 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 i din webbläsare.

Bygg för produktion

# 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 - Modern webb-ramverk
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Typsäker JavaScript
• Exifr - 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 filen för detaljer.

Kontakt

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

Tack

Tack till alla fantastiska open-source projekt som gjort detta möjligt:

• Astro - För det fantastiska webb-ramverket
• Tailwind CSS - För det kraftfulla CSS-ramverket
• Adobe Lightroom - För bildbehandling

---

Byggd av Linus Olofsson

© 2024 Images by Olofsson. Alla rättigheter reserverade.