Linus Olofsson
33c9ea4157
A blurred light pulse glides along one of the 5 wave threads (wave1/2/3, thread1/2) every 2.5-7s. Color matches the active theme (cyan on home/portfolio/about, pink/magenta on contact). Pulse also follows the outline of designated boxes marked with data-trail-box: - Home: 'Looking for inspiration?' + 'Ready to collaborate?' - Contact: 'Waiting to hear from you' card Boxes are rebuilt on every pulse so they stay aligned during scroll and respect viewport (off-screen boxes are skipped). Pulse uses requestAnimationFrame + path.getPointAtLength for native smoothness, fade-in 15% / hold 70% / fade-out 15%, screen blend mode so it blends with the dark background.
Images by Olofsson
A modern, responsive photography portfolio website built with Astro, Tailwind CSS, and advanced animations.
More |
At |
Imagesbyolofsson.se |
Features
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 or higher
Installation
git clone https://github.com/Images-by-Olofsson/homepage.git
cd homepage
npm install
Development
npm run dev
Build
npm run build
npm run preview
Project Structure
src/
├── 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
Technologies
Astro, Tailwind CSS, TypeScript, Exifr
License
MIT License - see LICENSE file for details
Built by Linus Olofsson