Merge pull request #3 from Images-by-Olofsson/copilot/revamp-readme-to-modern-style
Revamp README to minimalist style
This commit is contained in:
Linus Olofsson
@@ -2,158 +2,101 @@
|
|||||||
|
|
||||||
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.
|
||||||
|
|
||||||
[](https://imagesbyolofsson.se)
|
<br>
|
||||||
[](https://astro.build)
|
|
||||||
[](https://tailwindcss.com)
|
|
||||||
|
|
||||||
## Preview
|
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td align="center" width="33%">
|
<td align="center">
|
||||||
<img src="./public/3d-scroll/img1.jpg" width="250" alt="Portfolio Grid"/>
|
<img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img1.jpg" width="250" alt="Portfolio Grid">
|
||||||
<br>
|
<br><em>Portfolio Grid</em>
|
||||||
<em>Portfolio Grid</em>
|
|
||||||
</td>
|
</td>
|
||||||
<td align="center" width="33%">
|
<td align="center">
|
||||||
<img src="./public/3d-scroll/img2.jpg" width="250" alt="3D Scroll Effect"/>
|
<img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img2.jpg" width="250" alt="3D Scroll Effect">
|
||||||
<br>
|
<br><em>3D Scroll Effect</em>
|
||||||
<em>3D Scroll Effect</em>
|
|
||||||
</td>
|
</td>
|
||||||
<td align="center" width="33%">
|
<td align="center">
|
||||||
<img src="./public/3d-scroll/img3.jpg" width="250" alt="Hero Section"/>
|
<img src="https://raw.githubusercontent.com/Images-by-Olofsson/homepage/main/public/3d-scroll/img3.jpg" width="250" alt="Hero Section">
|
||||||
<br>
|
<br><em>Hero Section</em>
|
||||||
<em>Hero Section</em>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **Modern Design** - Minimalist and elegant design with focus on images
|
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.
|
||||||
- **Advanced Animations** - Wave animations, 3D scroll effects, and smoke particles
|
|
||||||
- **Fully Responsive** - Perfectly adapted for all devices
|
<br>
|
||||||
- **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
|
## Quick Start
|
||||||
|
|
||||||
### Prerequisites
|
**Prerequisites**
|
||||||
- Node.js 18.0+
|
|
||||||
- npm or yarn
|
|
||||||
|
|
||||||
### Installation
|
Node.js 18.0 or higher
|
||||||
|
|
||||||
|
**Installation**
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Clone the repo
|
git clone https://github.com/Images-by-Olofsson/homepage.git
|
||||||
git clone https://github.com/LinusOlofsson-maker/imagesbyolofsson.se.git
|
cd homepage
|
||||||
cd imagesbyolofsson.se
|
|
||||||
|
|
||||||
# Install dependencies
|
|
||||||
npm install
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
# Start development server
|
**Development**
|
||||||
|
|
||||||
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
**Build**
|
||||||
|
|
||||||
# Build the project
|
```bash
|
||||||
npm run build
|
npm run build
|
||||||
|
|
||||||
# Preview production build
|
|
||||||
npm run preview
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
src/
|
src/
|
||||||
├── assets/ # Static resources (images, SVGs)
|
├── assets/
|
||||||
├── components/ # Reusable Astro components
|
├── components/
|
||||||
│ ├── WaveBackground.astro # Animated wave background
|
│ ├── WaveBackground.astro
|
||||||
│ ├── ThreeDScroll.astro # 3D scroll effect
|
│ ├── ThreeDScroll.astro
|
||||||
│ ├── FloatingOrbs.astro # Floating orb elements
|
│ ├── FloatingOrbs.astro
|
||||||
│ └── Welcome.astro # Welcome component
|
│ └── Welcome.astro
|
||||||
├── layouts/ # Page layouts
|
├── layouts/
|
||||||
│ ├── MainLayout.astro # Main layout
|
│ ├── MainLayout.astro
|
||||||
│ └── Layout.astro # Base layout
|
│ └── Layout.astro
|
||||||
├── pages/ # Page components
|
├── pages/
|
||||||
│ ├── index.astro # Home page
|
│ ├── index.astro
|
||||||
│ ├── portfolio.astro # Portfolio page
|
│ ├── portfolio.astro
|
||||||
│ ├── about.astro # About page
|
│ ├── about.astro
|
||||||
│ └── contact.astro # Contact page
|
│ └── contact.astro
|
||||||
└── styles/ # CSS st
|
└── styles/
|
||||||
src/
|
└── global.css
|
||||||
├── 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
|
<br>
|
||||||
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
|
## Technologies
|
||||||
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
|
Astro, Tailwind CSS, TypeScript, Exifr
|
||||||
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
|
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT License - see LICENSE file for details
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<p>Built by Linus Olofsson</p>
|
||||||
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user