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

Redesign README.md with modern, clean aesthetic

Browse Source 
Co-authored-by: LinusOlofsson-maker <61837116+LinusOlofsson-maker@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-01-28 02:41:26 +00:00
co-authored by LinusOlofsson-maker
parent d1ac1989b9
commit 2ff0dcb8d6
1 changed files with 233 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+233 -100
View File
@@ -1,56 +1,119 @@
<div align="center">
# Images by Olofsson # Images by Olofsson
A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations. A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations.
</div>
<div align="center">
[![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)
## Preview
<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>
<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>
<td align="center" width="33%">
<img src="./public/3d-scroll/img3.jpg" width="250" alt="Hero Section"/>
<br>
<em>Hero Section</em>
</td>
</tr>
</table>
</div> </div>
<br> <br>
## Features <div align="center">
- **Modern Design** - Minimalist and elegant design with focus on images <picture>
- **Advanced Animations** - Wave animations, 3D scroll effects, and smoke particles <source media="(max-width: 768px)" srcset="./public/3d-scroll/img1.jpg">
- **Fully Responsive** - Perfectly adapted for all devices <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);">
- **Blazingly Fast** - Built with Astro for maximum performance </picture>
- **Interactive Elements** - Hover effects, smooth transitions, and dynamic backgrounds
- **SEO Optimized** - Semantic HTML and metadata
## Quick Start </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 ### Prerequisites
- Node.js 18.0+
- Node.js 18.0+
- npm or yarn - npm or yarn
### Installation ### Installation
```bash ```bash
# Clone the repo # Clone the repository
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
@@ -60,30 +123,22 @@ npm install
# Start development server # Start development server
npm run dev npm run dev
# Build for production
# Build the project
npm run build npm run build
# Preview production build # Preview production build
npm run preview npm run preview
```
<br>
src/ ---
├── assets/ # Static resources (images, SVGs)
├── components/ # Reusable Astro components <br>
│ ├── WaveBackground.astro # Animated wave background
│ ├── ThreeDScroll.astro # 3D scroll effect ## **Project Structure**
│ ├── 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/ src/
├── assets/ # Static resources (images, SVGs) ├── assets/ # Static resources (images, SVGs)
├── components/ # Reusable Astro components ├── components/ # Reusable Astro components
@@ -101,59 +156,137 @@ src/
│ └── contact.astro # Contact page │ └── contact.astro # Contact page
└── styles/ # CSS styles └── styles/ # CSS styles
└── global.css # Global styles └── global.css # Global styles
Technologies ```
Astro - Modern web framework
Tailwind CSS - Utility-first CSS framework <br>
TypeScript - Type-safe JavaScript
Exifr - EXIF data reading ---
Design System
Color Palette <br>
Primary: Cyan (#06B6D4)
Secondary: Purple (#A855F7) ## **Technologies**
Neutral: Grayscale (#1F2937 - #F9FAFB)
Typography - **Astro** - Modern web framework
Headings: Font Black, Tracking Tighter - **Tailwind CSS** - Utility-first CSS framework
Body Text: Font Light - **TypeScript** - Type-safe JavaScript
Accent: Uppercase, Tracking Widest - **Exifr** - EXIF data reading
Animations
Waves: SVG-based with filter effects <br>
Smoke: Path animations with gaussian blur
3D Scroll: Parallax with transform3d ---
Transitions: Smooth ease-in/out
Responsive Design <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: The website is optimized for:
Mobile (< 768px) - Single column, touch-friendly - **Mobile** `< 768px` - Single column, touch-friendly
Tablet (768px - 1024px) - Medium layout - **Tablet** `768px - 1024px` - Medium layout
Desktop (> 1024px) - Full experience with all animations - **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:
Fork this repo <br>
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.
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 - For the fantastic web framework <br>
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
## **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>