From 25732fcfc835161d69e0aa6e4a9800f216f1bbcf Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 28 Jan 2026 02:42:56 +0000 Subject: [PATCH] Revamp README.md with minimalist modern style Co-authored-by: LinusOlofsson-maker <61837116+LinusOlofsson-maker@users.noreply.github.com> --- README.md | 181 +++++++++++++++++++----------------------------------- 1 file changed, 62 insertions(+), 119 deletions(-) diff --git a/README.md b/README.md index 638e6e6..cbc3a03 100644 --- a/README.md +++ b/README.md @@ -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 +
- - -
- Portfolio Grid -
- Portfolio Grid + 		+ Portfolio Grid +
Portfolio Grid 		- 3D Scroll Effect -
- 3D Scroll Effect + 		+ 3D Scroll Effect +
3D Scroll Effect 		- Hero Section -
- Hero Section + 		+ Hero Section +
Hero Section
+

## 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. + +
## 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 +``` +
+## 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: +
-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 -

Built by Linus Olofsson

© 2024 Images by Olofsson. All rights reserved.

``` -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 +
+## License + +MIT License - see LICENSE file for details + +
+ +
+

Built by Linus Olofsson

+