copilot-swe-agent[bot]andLinusOlofsson-maker
2ff0dcb8d6
Co-authored-by: LinusOlofsson-maker <61837116+LinusOlofsson-maker@users.noreply.github.com>
293 lines
5.9 KiB
Markdown
293 lines
5.9 KiB
Markdown
<div align="center">
|
|
|
|
# Images by Olofsson
|
|
|
|
A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations.
|
|
|
|
</div>
|
|
|
|
<div align="center">
|
|
|
|
[](https://imagesbyolofsson.se)
|
|
[](https://astro.build)
|
|
[](https://tailwindcss.com)
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div align="center">
|
|
|
|
<picture>
|
|
<source media="(max-width: 768px)" srcset="./public/3d-scroll/img1.jpg">
|
|
<img src="./public/3d-scroll/img1.jpg" alt="Photography Portfolio Preview" width="70%" style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
|
|
</picture>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
<br>
|
|
|
|
## **Preview**
|
|
|
|
<div align="center">
|
|
|
|
<table>
|
|
<tr>
|
|
<td align="center" width="33%">
|
|
<img src="./public/3d-scroll/img2.jpg" alt="Portfolio Grid" width="280" style="border-radius: 6px;">
|
|
<br><br>
|
|
<strong>Portfolio Grid</strong>
|
|
<br>
|
|
<sub>Elegant image gallery with smooth transitions</sub>
|
|
</td>
|
|
<td align="center" width="33%">
|
|
<img src="./public/3d-scroll/img3.jpg" alt="3D Scroll Effect" width="280" style="border-radius: 6px;">
|
|
<br><br>
|
|
<strong>3D Scroll Effect</strong>
|
|
<br>
|
|
<sub>Immersive parallax scrolling experience</sub>
|
|
</td>
|
|
<td align="center" width="33%">
|
|
<img src="./public/3d-scroll/img4.jpg" alt="Dynamic Animations" width="280" style="border-radius: 6px;">
|
|
<br><br>
|
|
<strong>Dynamic Animations</strong>
|
|
<br>
|
|
<sub>Wave effects and floating elements</sub>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **Features**
|
|
|
|
<table>
|
|
<tr>
|
|
<td width="50%">
|
|
|
|
**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
|
|
|
|
</td>
|
|
<td width="50%">
|
|
|
|
**Blazingly Fast**
|
|
Built with Astro for maximum performance
|
|
|
|
**Interactive Elements**
|
|
Hover effects, smooth transitions, and dynamic backgrounds
|
|
|
|
**SEO Optimized**
|
|
Semantic HTML and metadata
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **Quick Start**
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 18.0+
|
|
- npm or yarn
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Clone the repository
|
|
git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
|
|
cd imagesbyolofsson.se
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start development server
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Preview production build
|
|
npm run preview
|
|
```
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **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
|
|
```
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **Technologies**
|
|
|
|
- **Astro** - Modern web framework
|
|
- **Tailwind CSS** - Utility-first CSS framework
|
|
- **TypeScript** - Type-safe JavaScript
|
|
- **Exifr** - EXIF data reading
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **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
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **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
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **Performance**
|
|
|
|
- **Lighthouse Score:** 95+ Performance
|
|
- **First Contentful Paint:** < 1.5s
|
|
- **Largest Contentful Paint:** < 2.5s
|
|
- **Cumulative Layout Shift:** < 0.1
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **Contributing**
|
|
|
|
Contributions are welcome! Please follow these steps:
|
|
|
|
1. Fork this repository
|
|
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
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **License**
|
|
|
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **Contact**
|
|
|
|
- **Website:** [imagesbyolofsson.se](https://imagesbyolofsson.se)
|
|
- **Email:** info@imagesbyolofsson.se
|
|
- **Instagram:** [@imagesbyolofsson](https://instagram.com/imagesbyolofsson)
|
|
- **LinkedIn:** [Linus Olofsson](https://linkedin.com/in/linus-olofsson)
|
|
|
|
<br>
|
|
|
|
---
|
|
|
|
<br>
|
|
|
|
## **Acknowledgments**
|
|
|
|
Special thanks to these amazing open-source projects:
|
|
|
|
- [Astro](https://astro.build) - For the fantastic web framework
|
|
- [Tailwind CSS](https://tailwindcss.com) - For the powerful CSS framework
|
|
- [Adobe Lightroom](https://www.adobe.com/products/photoshop-lightroom.html) - For image processing
|
|
|
|
<br>
|
|
<br>
|
|
|
|
<div align="center">
|
|
|
|
<sub>Built with passion by [Linus Olofsson](https://github.com/LinusOlofsson-maker)</sub>
|
|
|
|
<br>
|
|
|
|
<sub>© 2024 Images by Olofsson. All rights reserved.</sub>
|
|
|
|
</div>
|