Hey, I'm Ryan :)

Ryan Cheng

Engineering Physics @ UBC

Introduction

01

Hey, I'm Ryan!

This was a website I made back in high school as part of my capstone project. It served as my portfolio website for quite some time, but eventually I realized that the long render times may not be desirable for recruiters who are just performing a cursory glance at my work. Additionally, the compute power required to render the WebGL also was not always satisfied on various devices.

Since making the site, I've decided to open source the code, and use this website more as a showcase of my creative and technical work.

A bit about me...

I'm currently a junior at the University of British Columbia studying Engineering Physics. However, much of my work experience and passion lies in software engineering. As a result, I've thoroughly enjoyed integrating the rigorous, inter-disciplinary curriculum of my major with my passion for computers.

You'd be surprised how much physics has to do with software and computing! Some discoveries off the top of my head include...

  • Semiconductors, which allow for solid-state electronics
  • Photoelectric effect, which forms the basis for digital cameras
  • The Blue LED, which allow for our beautiful modern screens and displays
  • Giant Magnetoresistance, which forms the basis for hard drives
  • Laser physics, which forms the foundation of the internet, allowing us to communicate (and for you to be here!)

About this site

02

How I built this

This site is an amalgamation of quite a few things. Starting off, it was heavily influenced by portfolio website by developer bokoko33, shown here. I also drew lots of wisdom by a tutorial by Andrew Woan, but the YouTube video seems to have been taken down now. The repository for the code is still available here.

Unlike the tutorial site, this website is Vite-built completely on TypeScript. It uses a Singleton Design Pattern to keep a single instance of the 3D model, with everything involved in the site (e.g. animation, rendering, lighting) pointing to this single instance. The scene itself is a custom Three.js scene (with DRACO loader assets) on a canvas, with my custom Experience/Renderer classes to drive the WebGL view.

For a beautiful user experience, I animated everything using GSAP, and added smooth scrolling via Lenis.

Lastly, the 3D model itself was modelled in Blender.

Contact Me

03

Thanks a lot for visiting this site! It means a lot to my highschool self.

You can find me here:



Interested in seeing the website under the hood? I've made the repo for this site public here