Overview
This portfolio site looks provide an insight into my latest projects as well as information about myself as a designer and developer. The site combines a number of technologies and processes of interest to me; namely use of React, Three.js animations and SVG image filters.
Component Structure
The portfolio site is built using a simplistic React component structure. Since the data structure and state management was fairly minimalistic, no need for Redux or the likes was required.
Pages required to load external resources, such as images and videos, trigger a loading screen before being displayed. Similarly, a number of pages require the use of Three.js and SVG filter animations, both of which were abstracted into their own components.
Loading screen CSS animation
Landing Page
The landing page presents a carousel (of sorts) transitioning between the different case studies housed on the work page.
Three.js animation process
Three.js Animation
The notion of a carousel was applied to a rotating octahedron, with textures produced from case studies transitioning every 10 seconds. In addition to the mesh of the octahedron rotating, the texture’s UV coordinates are also animated to create a kaleidoscopic effect.
Three.js animation in action!
Work Page
The work page provides an array of thumbnails linking to each of the case studies on the site. These thumbnails were pre-rendered using icosahedron geometry in Cinema 4D. To make these somewhat dynamic, an SVG filter is applied to the images and animated when the user hovers over them.
SVG Filter animation in action!
SVG Image Distortion
The SVG filter is comprised of two key steps. First, a turbulence filter using fractal noise is created before being passed along with the source image into a displacement filter. The scale of displacement is incremented each animation frame. The resulting image is then rendered to the screen.
Project Page
Since the majority of my work is already documented thoroughly on Behance or GitHub, the project pages are intended to be primarily visual, linking to other sources of documentation if the viewer is interested in further information.
Three.js header image
Both the Three.js and SVG filter animations are use on project pages. The Three.js animation acts as a header for the pages, while the SVG filter is applied to each of the images on hover.
Project image when user hovers over it for quite some time
One half of the sine wave animation (distorts in the other direction too)
About Page
The about page provides a simple message and again uses the SVG filter component to animate my logo using a simple sine wave.
Ryan Achten, 2018
