Note: This case study is a work in progress, but feel free to check it out!
A UX designer came to me with a portfolio design that needed to be coded into mobile-friendly website. For privacy reasons, I’m unable to name this client and post their URL, so with their permission I hosted a clone of it (using placeholder images and text).
To create a portfolio where you can switch between projects without the page refreshing. This is something you’d typically find in frameworks like React or Gatsby, but I wanted to give it a shot using a static site, as my client already had experience with static sites.
The landing page
The landing page consists of a fixed sidebar, with a clean list of projects and social links. On their actual site their headshot is shown on the right-hand side.
Making content appear on scroll
My client wanted the content to appear on scroll, so I ended up creating a “lazy load” effect, which discreetly displays the content as you scroll down. Shown below:
The mobile design
On mobile (and tablets), the sidebar takes up the full width of the screen. The content is then loaded upon clicking on a project. A back arrow at the top-left allows the user to easily head back to the main menu.
What they said
Ashley is very a knowledgable web designer, with a good eye for details. He followed the project from start to finish and I had a great experience throughout. He was able to provide sleek solutions to various things in a very proactive and professional way. Truly recommended!!!
- Framework: None
- Languages: HTML, SCSS, and jQuery
- Completed: January 2021
- Live site (may have been modified since)