I designed and developed a professional portfolio website for American photographer and journalist Maggie Steber.

Client requirements

1. A simple, clean and elegant portfolio site
2. Aesthetic landing page
3. 7 sections each presenting one category of her work
4. Targeted younger editors who want quick glance on her work
5. A special dark side section

Wireframes

Mockup

When going through each picture, the background color will slightly change according to the dominant color of the focused image. The Dark Side section is specially designed: When mouse over the image, the whole view will turn to black to resonate the feeling.

Structure and Techniques

1. Parallax image panning response to mouse position, plugin used: jQuery image panning
2. Display one random image from 5 selected ones every time a user visit/refresh the site

3. One page design for easier navigating and time saving
4. Lazy load image to ensure maximum performance, plugin used: Lazy Load
5. Horizontal scroll mapping with mouse's vertical scroll for quick navigating through photos in the same section
6. Fixed navigation bar with detailed transition on hover
7. Two images stacked on top of each other. When hover on them, the top one fade out generating a going-dark illusion of one single image
8. Javascript buttons to click through each photo with different width

View Project Online