Responses by Takumi Hasegawa.

Background: My portfolio site shows projects I was involved in and appeals to visitors with my technical capabilities.

Design core: The WebGL 3-D object. It transforms into various shapes suitable for each page. On the “Top” page, it transforms into a framed cube inspired by the logomark; on the “About” page, it transforms into an extruded logomark object; and on the “Works” page, it transforms into a board to display a main visual of each project. This feature was taken from my previous site.

Visitors can change settings for some experimental functions. The “display mode” setting provides you with three different options: “Full” mode is rich with WebGL effects. “Simple” mode removes the WebGL for a simple layout. “Minimum” mode is the simplest setting, without any extra decorations or effects.

You can also select the main color of this site with the “light” and “dark” settings. And if “auto light/dark mode” is on, the site color changes automatically depending on the user’s operating system color scheme.

Process: I didn’t use a WebGL library (like three.js.) Instead, I built a minimal WebGL library by myself. And I built an auto-deploy back-end system composed of Firebase, GitHub and the Nuxt.js Circle CI static site generator. When I update the site’s contents and push it to the GitHub repository, the Circle CI task will run, which includes a Nuxt.js generate function and a Firebase deploy function. I did this so I could learn more about web development!

Navigation: Visitors can change the layout of the “Works” page list. If you set the display mode to “simple,” you can easily find the information you’re looking for and browse comfortably, because the “simple” setting has no WebGL. It provides high performance on low-spec devices. When on mobile platforms, you can also change the position of the menu button; for example, if you are lefthanded, putting the menu on the left-bottom corner makes it easy to use.

Technology: HTML, CSS, JavaScript, WebGL, Nuxt.js, GSAP, Firebase, Circle CI.