Author SHA1 Message Date
copilot-swe-agent[bot]andLinusOlofsson-maker 25732fcfc8 Revamp README.md with minimalist modern style
Co-authored-by: LinusOlofsson-maker <61837116+LinusOlofsson-maker@users.noreply.github.com>
2026-01-28 02:42:56 +00:00
copilot-swe-agent[bot] 70faed6c9b Initial plan 2026-01-28 02:40:46 +00:00
+62 -119
View File
@@ -2,158 +2,101 @@
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)
[![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)
## Preview
<br>
<div align="center">
<table>
<tr>
<td align="center" width="33%">
<img src="./public/3d-scroll/img1.jpg" width="250" alt="Portfolio Grid"/>
<br>
<em>Portfolio Grid</em>
<td align="center">
<img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img1.jpg" width="250" alt="Portfolio Grid">
<br><em>Portfolio Grid</em>
</td>
<td align="center" width="33%">
<img src="./public/3d-scroll/img2.jpg" width="250" alt="3D Scroll Effect"/>
<br>
<em>3D Scroll Effect</em>
<td align="center">
<img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img2.jpg" width="250" alt="3D Scroll Effect">
<br><em>3D Scroll Effect</em>
</td>
<td align="center" width="33%">
<img src="./public/3d-scroll/img3.jpg" width="250" alt="Hero Section"/>
<br>
<em>Hero Section</em>
<td align="center">
<img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img3.jpg" width="250" alt="Hero Section">
<br><em>Hero Section</em>
</td>
</tr>
</table>
</div>
<br>
<br>
## Features
- **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
- **Blazingly Fast** - Built with Astro for maximum performance
- **Interactive Elements** - Hover effects, smooth transitions, and dynamic backgrounds
- **SEO Optimized** - Semantic HTML and metadata
Modern design with minimalist aesthetics and focus on imagery. Advanced animations including wave effects, 3D scroll transforms, and smoke particles. Fully responsive across all devices with optimized performance.
<br>
## Quick Start
### Prerequisites
- Node.js 18.0+
- npm or yarn
**Prerequisites**
### Installation
Node.js 18.0 or higher
**Installation**
```bash
# Clone the repo
git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
cd imagesbyolofsson.se
# Install dependencies
git clone https://github.com/Images-by-Olofsson/homepage.git
cd homepage
npm install
```
# Start development server
**Development**
```bash
npm run dev
```
**Build**
# Build the project
```bash
npm run build
# Preview production build
npm run preview
```
<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 st
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
Technologies
Astro - Modern web framework
Tailwind CSS - Utility-first CSS framework
TypeScript - Type-safe JavaScript
Exifr - EXIF data reading
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
Responsive Design
The website is optimized for:
├── assets/
├── components/
│ ├── WaveBackground.astro
│ ├── ThreeDScroll.astro
│ ├── FloatingOrbs.astro
│ └── Welcome.astro
├── layouts/
│ ├── MainLayout.astro
│ └── Layout.astro
├── pages/
│ ├── index.astro
│ ├── portfolio.astro
│ ├── about.astro
│ └── contact.astro
└── styles/
└── global.css
```
Mobile (< 768px) - Single column, touch-friendly
Tablet (768px - 1024px) - Medium layout
Desktop (> 1024px) - Full experience with all animations
Performance
Lighthouse Score: 95+ Performance
First Contentful Paint: < 1.5s
Largest Contentful Paint: < 2.5s
Cumulative Layout Shift: < 0.1
Contributing
All contributions are welcome! Please follow these steps:
<br>
Fork this repo
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
## Technologies
Contact
Website: imagesbyolofsson.se
Email: info@imagesbyolofsson.se
Instagram: @imagesbyolofsson
LinkedIn: Linus Olofsson
Acknowledgments
Thanks to all the amazing open-source projects that made this possible:
Astro, Tailwind CSS, TypeScript, Exifr
Astro - For the fantastic web framework
Tailwind CSS - For the powerful CSS framework
Adobe Lightroom - For image processing
<div align="center"> <p>Built by <a href="https://github.com/LinusOlofsson-maker">Linus Olofsson</a></p> <p>© 2024 Images by Olofsson. All rights reserved.</p> </div> ```
Please confirm you want Copilot to make this change in the LinusOlofsson-maker/Images-by-Olofsson/homepage repository on branch main.yles
└── global.css # Global styles
<br>
## License
MIT License - see LICENSE file for details
<br>
<div align="center">
<p>Built by Linus Olofsson</p>
</div>