diff --git a/README.md b/README.md index 091b0af..638e6e6 100644 --- a/README.md +++ b/README.md @@ -59,3 +59,101 @@ 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 +
Built by Linus Olofsson
© 2024 Images by Olofsson. All rights reserved.