Imagesbyolofsson.se/imagesbyolofsson-se
7
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Initial commit: Modern photography portfolio website

Browse Source
This commit is contained in:
Linus Olofsson
2026-01-28 01:22:12 +01:00
parent b0b633d32b
commit 31f9f7d24e
2 changed files with 83 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -2,6 +2,9 @@
node_modules/ node_modules/
package-lock.json package-lock.json
# Cloned repos
uv/
# Build outputs # Build outputs
dist/ dist/
.build/ .build/
README.md
+80 -80
View File
@@ -1,160 +1,160 @@
# Images by Olofsson # Images by Olofsson
En modern, responsiv fotografportfolio webbplats byggd med Astro, Tailwind CSS och avancerade animationer. 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) [![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) [![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) [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.1.18-06B6D4?style=for-the-badge&logo=tailwindcss)](https://tailwindcss.com)
## Funktioner ## Features
- **Modern Design** - Minimalistisk och elegant design med fokus på bilder - **Modern Design** - Minimalist and elegant design with focus on images
- **Avancerade Animationer** - Våg-animationer, 3D-scroll effekter och rök-partiklar - **Advanced Animations** - Wave animations, 3D scroll effects, and smoke particles
- **Fullt Responsiv** - Perfekt anpassad för alla enheter - **Fully Responsive** - Perfectly adapted for all devices
- **Blazingly Fast** - Byggd med Astro för maximal prestanda - **Blazingly Fast** - Built with Astro for maximum performance
- **Interaktiva Element** - Hover-effekter, smooth transitions och dynamiska bakgrunder - **Interactive Elements** - Hover effects, smooth transitions, and dynamic backgrounds
- **SEO-optimerad** - Semantisk HTML och metadata - **SEO Optimized** - Semantic HTML and metadata
## Bildexempel ## Image Examples
Här är några exempel på hur bilder presenteras på sidan: Here are some examples of how images are presented on the site:
### Portfolio Grid ### Portfolio Grid
![Portfolio Grid](https://imagesbyolofsson.se/images/portfolio-grid.jpg) ![Portfolio Grid](https://imagesbyolofsson.se/images/portfolio-grid.jpg)
*Ett snyggt rutnät av bilder med hover-effekter* *A beautiful grid of images with hover effects*
### 3D Scroll Effect ### 3D Scroll Effect
![3D Scroll](https://imagesbyolofsson.se/images/3d-scroll-effect.jpg) ![3D Scroll](https://imagesbyolofsson.se/images/3d-scroll-effect.jpg)
*Dynamisk 3D-parallax effekt vid scrollning* *Dynamic 3D parallax effect while scrolling*
### Hero Section ### Hero Section
![Hero Section](https://imagesbyolofsson.se/images/hero-section.jpg) ![Hero Section](https://imagesbyolofsson.se/images/hero-section.jpg)
*Imponerande hero-sektion med animerad text och bakgrunder* *Impressive hero section with animated text and backgrounds*
## Snabbstart ## Quick Start
### Förutsättningar ### Prerequisites
- Node.js 18.0+ - Node.js 18.0+
- npm eller yarn - npm or yarn
### Installation ### Installation
```bash ```bash
# Klona repot # Clone the repo
git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
cd imagesbyolofsson.se cd imagesbyolofsson.se
# Installera dependencies # Install dependencies
npm install npm install
# Starta utvecklingsservern # Start development server
npm run dev npm run dev
``` ```
Öppna [http://localhost:4321](http://localhost:4321) i din webbläsare. Open [http://localhost:4321](http://localhost:4321) in your browser.
### Bygg för produktion ### Build for Production
```bash ```bash
# Bygg projektet # Build the project
npm run build npm run build
# Förhandsgranska production build # Preview production build
npm run preview npm run preview
``` ```
## Projektstruktur ## Project Structure
``` ```
src/ src/
├── assets/ # Statiska resurser (bilder, SVG:er) ├── assets/ # Static resources (images, SVGs)
├── components/ # Återanvändbara Astro-komponenter ├── components/ # Reusable Astro components
│ ├── WaveBackground.astro # Animerad vågbakgrund │ ├── WaveBackground.astro # Animated wave background
│ ├── ThreeDScroll.astro # 3D scroll-effekt │ ├── ThreeDScroll.astro # 3D scroll effect
│ ├── FloatingOrbs.astro # Flytande orb-element │ ├── FloatingOrbs.astro # Floating orb elements
│ └── Welcome.astro # Välkomstkomponent │ └── Welcome.astro # Welcome component
├── layouts/ # Sid-layouter ├── layouts/ # Page layouts
│ ├── MainLayout.astro # Huvudlayout │ ├── MainLayout.astro # Main layout
│ └── Layout.astro # Bas-layout │ └── Layout.astro # Base layout
├── pages/ # Sid-komponenter ├── pages/ # Page components
│ ├── index.astro # Startsida │ ├── index.astro # Home page
│ ├── portfolio.astro # Portfolio-sida │ ├── portfolio.astro # Portfolio page
│ ├── about.astro # Om-sida │ ├── about.astro # About page
│ └── contact.astro # Kontakt-sida │ └── contact.astro # Contact page
└── styles/ # CSS-stilar └── styles/ # CSS styles
└── global.css # Globala stilar └── global.css # Global styles
``` ```
## Teknologier ## Technologies
- **[Astro](https://astro.build/)** - Modern webb-ramverk - **[Astro](https://astro.build/)** - Modern web framework
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework - **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[TypeScript](https://www.typescriptlang.org/)** - Typsäker JavaScript - **[TypeScript](https://www.typescriptlang.org/)** - Type-safe JavaScript
- **[Exifr](https://github.com/mattiasw/ExifReader)** - EXIF-data läsning - **[Exifr](https://github.com/mattiasw/ExifReader)** - EXIF data reading
## Designsystem ## Design System
### Färgpalett ### Color Palette
- **Primär**: Cyan (#06B6D4) - **Primary**: Cyan (#06B6D4)
- **Sekundär**: Lila (#A855F7) - **Secondary**: Purple (#A855F7)
- **Neutral**: Gråskalor (#1F2937 - #F9FAFB) - **Neutral**: Grayscale (#1F2937 - #F9FAFB)
### Typografi ### Typography
- **Rubriker**: Font Black, Tracking Tighter - **Headings**: Font Black, Tracking Tighter
- **Brödtext**: Font Light - **Body Text**: Font Light
- **Accent**: Uppercase, Tracking Widest - **Accent**: Uppercase, Tracking Widest
### Animationer ### Animations
- **Vågor**: SVG-baserade med filter-effekter - **Waves**: SVG-based with filter effects
- **Rök**: Path-animationer med gaussian blur - **Smoke**: Path animations with gaussian blur
- **3D Scroll**: Parallax med transform3d - **3D Scroll**: Parallax with transform3d
- **Transitions**: Smooth ease-in/out - **Transitions**: Smooth ease-in/out
## Responsiv Design ## Responsive Design
Webbplatsen är optimerad för: The website is optimized for:
- **Mobil** (< 768px) - Enkel kolumn, touch-vänlig - **Mobile** (< 768px) - Single column, touch-friendly
- **Tablet** (768px - 1024px) - Mellanstor layout - **Tablet** (768px - 1024px) - Medium layout
- **Desktop** (> 1024px) - Full upplevelse med alla animationer - **Desktop** (> 1024px) - Full experience with all animations
## Prestanda ## Performance
- **Lighthouse Score**: 95+ Performance - **Lighthouse Score**: 95+ Performance
- **First Contentful Paint**: < 1.5s - **First Contentful Paint**: < 1.5s
- **Largest Contentful Paint**: < 2.5s - **Largest Contentful Paint**: < 2.5s
- **Cumulative Layout Shift**: < 0.1 - **Cumulative Layout Shift**: < 0.1
## Bidrag ## Contributing
Alla bidrag är välkomna! Vänligen följ dessa steg: All contributions are welcome! Please follow these steps:
1. Forka detta repo 1. Fork this repo
2. Skapa en feature branch (`git checkout -b feature/AmazingFeature`) 2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
3. Committa dina ändringar (`git commit -m 'Add some AmazingFeature'`) 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Pusha till branchen (`git push origin feature/AmazingFeature`) 4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Öppna en Pull Request 5. Open a Pull Request
## Licens ## License
Detta projekt är licensierat under MIT License - se [LICENSE](LICENSE) filen för detaljer. This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Kontakt ## Contact
- **Webbplats**: [imagesbyolofsson.se](https://imagesbyolofsson.se) - **Website**: [imagesbyolofsson.se](https://imagesbyolofsson.se)
- **Email**: info@imagesbyolofsson.se - **Email**: info@imagesbyolofsson.se
- **Instagram**: [@imagesbyolofsson](https://www.instagram.com/imagesbyolofsson/) - **Instagram**: [@imagesbyolofsson](https://www.instagram.com/imagesbyolofsson/)
- **LinkedIn**: [Linus Olofsson](https://www.linkedin.com/in/linus-olofsson-/) - **LinkedIn**: [Linus Olofsson](https://www.linkedin.com/in/linus-olofsson-/)
## Tack ## Acknowledgments
Tack till alla fantastiska open-source projekt som gjort detta möjligt: Thanks to all the amazing open-source projects that made this possible:
- [Astro](https://astro.build/) - För det fantastiska webb-ramverket - [Astro](https://astro.build/) - For the fantastic web framework
- [Tailwind CSS](https://tailwindcss.com/) - För det kraftfulla CSS-ramverket - [Tailwind CSS](https://tailwindcss.com/) - For the powerful CSS framework
- [Adobe Lightroom](https://lightroom.adobe.com/) - För bildbehandling - [Adobe Lightroom](https://lightroom.adobe.com/) - For image processing
--- ---
<div align="center"> <div align="center">
<p>Byggd av <a href="https://github.com/LinusOlofsson-maker">Linus Olofsson</a></p> <p>Built by <a href="https://github.com/LinusOlofsson-maker">Linus Olofsson</a></p>
<p>© 2024 Images by Olofsson. Alla rättigheter reserverade.</p> <p>© 2024 Images by Olofsson. All rights reserved.</p>
</div> </div>