Muon Design Portfolio

I own Muon Design*, a digital agency based in Victoria, BC. I recently rebuilt the company's website and gave it a fresh look! Everything was done by hand, no AI generated slop to be found here. Additionally, even the animations were done through code!

Above-the-fold Landing ​

The two moving components to this section work in tandem to contrast between a slow, relaxed energy, and a more intense CTA. The quick changing text immediately grabs the eye, showcasing the different values I want to embody. This harsh jumping text is pacified in part by the soft ripple of the radial effect.

This radial component is an homage to a failed component on a previous site. I had spent a ton of time on it only for it to be overcomplicated and just not quite right, so it's rewarding seeing a similar component work so well here. It's created using SVGs that expand and shrink via CSS classes. This keeps it incredibly simple and performant.

Process Animations ​

By far my favourite part of the entire site is this texting animation. I love how it conveys the type of work that's done at Muon, and how similar it resembles iOS messaging. The other animations make the design and development process look fun and interesting (at least I hope so).

You can view the texting animation code here. You can drop it in to your Next.js/Framer project no problem.

Mobile Responsiveness ​

Making navigation bars are a pain. Nested navigation menus are even worse. I built a component that not only works responds beautifully to different screen sizes, but I also loaded it full of tasteful animation to help ease the transitions.

Additionally, I created a JSON schema that allows for nested URLs which then get used to generate the navigation bar. You can take a look at the different animations I added here.

Backend Shenanigans ​

This site is mostly just a single page lander, but I still wanted some way for prospective clients to reach out to me. To do this, I create a contact page and used Resend to send emails to the client, but also to me. This worked great, but in order to make sure it doesn't get spammed, I took some time to build some anti-spam precautions. I did this based on a score system. Different events are more worrisome and have a higher likelihood of indicating a bot is using the site, so they get a higher score.

1. Honeypot: I hid an input field that users will never see, but still lands in the markup. If this is filled out, I automatically set the score to 7.
2. Nonsense names: If the user inputs first and last names that are absolute gibberish, I flag this and add 4 to the score.
3. Slop input: If the user puts in a bunch of random characters with no spaces, then it's just one word. I had a few attempts from a bot like this, so this is a catch for that. I add 3 for these attempts.

If the score is above a threshold of 7, I don't send out a message to the user, but I do send one to myself with the values that were entered so I can monitor it.

Performance ​

Using server side rendered React, the website loads extremely quickly. The only real metrics I'm losing out on is accessibility for colors on the text bubble animation. The funny thing is, I used the exact colors from Apple's buttons for the texting animation. If that contrast ratio is good enough for Apple then it's good enough for me.

Thanks for reading. Again, if you want to check the site out, click here.