Designing and developing this portfolio was one of our favorite projects to date. Hamayun Zafar knew what he wanted, and he knew it well. We worked with him on 3 options before we ended up with the current masterpiece. He brought the design and ideas, we provided the engineering and infra. Read on to see how we achieved this Senior Designer's portfolio 👇.

Here's the initial idea using light grays and whites:

Based on the initial concept above we first looked into NoCode options such as Framer. However, we wanted a lot of small custom details and realized it would be future proof to go full custom.

CMS: the content in the website would be updated infrequently. Though the home page could be relatively static, a lot of content such as featured projects would still need to change. The individual blog and work pages would need a drag-and-drop experience. After a thorough research into available tools, we chose Storyblok as the CMS.

CSS Framework: at Great Paradigms we adore TailwindCSS making this a no-brainer.

SSG: to get the best performance, we wanted to statically generate our pages and serve them from the edge and we opted for Astro. In addition to being robust with an amazing DX, Astro allows us to use SSG for prod and SSR in dev.

JS Framework: React, Next.js and the like are superb but at Great Paradigms, we believe in going as vanilla as possible. We used the lightweight Alpine.js to have some interactivity without having to go all-in.

For everything else, we went full custom even creating custom components such as our unique slider-within-a-slider 🤯.

With the stack finalized, we worked with Hamayun to flesh out the individual parts of the portfolio. The interactive Hero uses buttons to condense a lot of information effectively.

The slider within a slider was a nice challenge: achieving the effect is doable but ensuring accessibility, which is a huge requirement to us, meant we had to spend time on a custom component that would be accessible as well as beautiful.

Once we had the CMS working and the main content prepared, we entered Phase 3 where Hamayun went for some new "blue" tones (internally codenamed as "ice-blue"). This is also when we got the new "video" behind header effect.

The cover of the site is the first impression creator. Hamayun came up with the idea for a video background and provided us with the unique nebula-like video. We optimized it bringing down the size from the wrong side of a GB all the way to under 1 MB. The first look of the site sets the tone that Hamayun is detail-oriented and an innovative designer to boot. The CTA encourages the user to interact which not only boosts retention but also acts as an art piece.

The "slider within slider" was a really fun item to work on. We needed to modify PhotoSwipe to accomplish this.

Get in touch with Great Paradigms and let's discuss.