Linus Olofsson
b0b633d32b
- 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
161 lines
5.1 KiB
Markdown
161 lines
5.1 KiB
Markdown
# Images by Olofsson
|
|
|
|
En modern, responsiv fotografportfolio webbplats byggd med Astro, Tailwind CSS och avancerade animationer.
|
|
|
|
[](https://imagesbyolofsson.se)
|
|
[](https://astro.build)
|
|
[](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
|
|
|
|
*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
|
|
|
|
```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>
|