Personal Website - Custom Lightmaps, Custom Shaders and Particle Systems

Create my personal website using entirely Three.js to create a fully immersive experience to present my personal and professional works:

https://john-beresford.com

Each view contains a bunch of micro-interactions to indicate what is actionable and what it not.

Initially met with an empty office:

Clicking on the iPad’s will enter their respective views:

about


works

lab

4 Likes

Loving the concept and execution, top notch stuff!

A few bits of feedback:

  • Clicking on the computer zooms in on the computer but feels pointless since you’re not displaying additional content

-seems like the site is absolutely not accessible. It should work with keyboard navigation and for screen readers. At the moment, you can’t navigate by pressing tab and it looks like the content is only in WebGL, so it’s unusable for disabled users. I recommend reading this dude’s articles on the subject. I think developers have a duty to make sure we’re not excluding a portion of the population from accessing our content just because we want to use cool tech and show off our skills. Sadly clients rarely think about it (and if you mention it to them they’ll ignore you until the day until the site goes live to ask you if the site is accessible, even though you’ve been repeating to them that the design looks cool but has a terrible UX…), and the only time most of them will care about it is when they get sued because their site is unusable.

1 Like

Yes I agree 100%, accessibility definitely took the backseat during this project as I was using it as a way to learn Three and React Three Fiber. I will likely be re-writing the project having learned so much (there are many QOL and performance improvements that can be made) and I will make sure that accessibility is paramount.

Thank you so much for the feedback, and the reading resources!