Jokma Web Solutions

It always feels that a project that represents me and showcases my own brand is ten times as challenging as something produced for a client! This is my personal portfolio site, and it was quite the adventure getting it out there.

As I put this site together, my goal was to showcase my UI strengths:

• Details and flourishes that demonstrate thoughtful consideration.
• Custom animation and interactivity that enhances the user experience.
• Usability and interactivity across all screen sizes, from mobile small screens to desktop 4K monitors.

The Hero

The hero section is above the fold - it's the first thing site visitors will see, and it has to pack a punch. It should also feature a strong call to action guiding visitors to the intended user flow.

For my hero, I wanted to feature my logo prominently and lean into my primary business offering - UI engineering. I went with a fly-in effect splitting the logo into two parts and bringing them together to meet in the middle, fading in the showcase and contact buttons as the final flourish to make sure attention is centered on the call to action.

Partway through the animation

After the call to action fade-in

The Introduction

A couple of the design motifs I chose for this site are the curvy divider lines between sections and the flowing, sumptuous ampersand, scaled up for added flair. Both of these are showcased in the welcome section.

The last thing I wanted to do with the welcome section was bog visitors down with paragraphs of explanatory text, but I also wanted to demonstrate depth and highlight expertise. A minimal accordion gave me the best of both worlds here; a concise identity statement with an arrow inviting curious users to go deeper.

Welcome section with compact introduction.

Expanded intro on click

The Projects

At this nascent stage in my agency development, Jokma.com is a personal portfolio site at heart, and the projects showcased in this section are the main attraction.

Each of my flagship projects needed to really shine in its own right, while prompting the users with an intuitive navigation between projects. I originally considered a standard carousel, but I wanted something more unique and visually appealing. I ended up going with large, full-width cards stacked in a loose, three-dimensional pile. Gentle perspective animation on hover invites visitors to click or tap on the cards, bringing the selected card to the top of the stack.

The challenge here was to get the stack to look right across devices! It took some finesse, but the entire stack is fully responsive, with the project details shifting below the video on the smallest screens.

On Desktop

On Small Screens

On Mobile

The Demos

While a few flagship projects might suffice, I wanted to demonstrate breadth of experience. I've invested a great deal of time into creating various widgets and pages that help to flesh out a fuller picture of what I can do, even if they don't have the scope of a client site.

Here, the key was to preserve visual hierarchy by keeping each demo card significantly smaller than the project cards above them.

The Profiles

A couple of professional profiles can't hurt, especially with a 100% Job Success rating.

The Testimonials

Social credibility is a huge boost for any business, and here I opted to go with a traditional carousel looping across positive feedback from various clients.

The Inspiration

To round out the meat of the site, I wanted to lean into an "out of the box" vibe with an optimistic exploration of the endless possibilities of website design and development. Here I built an interactive honeycomb of website ideas, using ideas and images generated with ChatGPT and Leonardo AI. Hovering over each visual flips the graphic to reveal the website concept. A fun, "magazine" text design for the title of this section adds to the aesthetic novelty.

The Contact Info

For those who are looking to reach out and discuss their project, the page wraps up with email and phone contact buttons.

There is so much more I would like to do with my agency landing page! Because it represents my brand and identity, there is a temptation to hold off publication and continue polishing and expanding it indefinitely.

It was time to get it out there for prospective clients and collaborators, so I took the plunge, called it done (for now 😆), and deployed it to my domain.

I hope you find this site breakdown useful! I'd love to hear your thoughts on jokma.com.