Georgi Nikolov

frontend developer / awwwards dev jury

2022 Portfolio

Personal Work

url -

code -

Technologies Used:

WebGL2, GLSL, Typescript


Design & Development

portfolio render with webgl2

I released my new portfolio for 2022 as a pure webgl2 scene. I wrote all of the graphics, animation, interaction and layouting system from scratch. I did three challenges for my portfolio:

  1. wrote my own webgl2 framework, hwoa-rang-gl2 for the rendering
  2. wrote my minimal tweening library
  3. implemented raycasting against axis aligned bounding boxes, planes and spheres with hwoa-rang-math

debug mode


mega texture render

Here is one slice of my texture atlas. As you can see, it allocates new images via a packing algorithm with the cool texture-atlas library and renders them to the correct texture subregion with gl.texSubImage2D(). Notice the extra small black white images at the top right - they are used for the label masking effect animations.

As usual, I used Redux for state management and Typescript for neat code. Also tried out ViteJS as a new bundler and it worked out swimmingly.

Debug mode

You can enter special debug mode by appending ?debugMode=1 to the end of the url

References and readings