3 Commits
+15 -152
View File
@@ -1,159 +1,22 @@
# Images by Olofsson
# Homepage
A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations.
Welcome to the Homepage!\
![Image 3](img3.jpg)\
![Image 4](img4.jpg)\
[![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)
## Navigation
## Preview
- Home\
- About\
- Contact\
<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>
This is a modern design layout that showcases our projects. The use of images and text is intended to maintain an aesthetic appeal.<br>
<br>
## Gallery
## 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 repo
git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
cd imagesbyolofsson.se
# Install dependencies
npm install
# Start development server
npm run dev
# Build the project
npm run build
# Preview production build
npm run preview
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:
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.
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
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
Here are some images that represent our work:<br>
- ![Image 1](img1.jpg)<br>
- ![Image 2](img2.jpg)<br>
- ![Image 3](img3.jpg)<br>
Thank you for visiting!