diff --git a/README.md b/README.md index 1cef2f2..5788d40 100644 --- a/README.md +++ b/README.md @@ -1,292 +1,22 @@ -
+# Homepage -# Images by Olofsson +Welcome to the Homepage!\ +![Image 3](img3.jpg)\ +![Image 4](img4.jpg)\ -A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations. +## Navigation -
+- Home\ +- About\ +- Contact\ -
+This is a modern design layout that showcases our projects. The use of images and text is intended to maintain an aesthetic appeal.
-[![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) +## Gallery -
+Here are some images that represent our work:
+- ![Image 1](img1.jpg)
+- ![Image 2](img2.jpg)
+- ![Image 3](img3.jpg)
-
- -
- - - - Photography Portfolio Preview - - -
- -
-
- -## **Preview** - -
- - - - - - - -
- Portfolio Grid -

- Portfolio Grid -
- Elegant image gallery with smooth transitions - 		- 3D Scroll Effect -

- 3D Scroll Effect -
- Immersive parallax scrolling experience - 		- Dynamic Animations -

- Dynamic Animations -
- Wave effects and floating elements -
- -
- -
- ---- - -
- -## **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 - -
- -
- ---- - -
- -## **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 -``` - -
- ---- - -
- -## **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 -``` - -
- ---- - -
- -## **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: - -- **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** - -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 - -
- ---- - -
- -## **License** - -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. - -
- ---- - -
- -## **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) - -
- ---- - -
- -## **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 - -
-
- -
- -Built with passion by [Linus Olofsson](https://github.com/LinusOlofsson-maker) - -
- -© 2024 Images by Olofsson. All rights reserved. - -
+Thank you for visiting! \ No newline at end of file