R/A Portfolio Site

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.

Landing Page

The landing page presents a carousel (of sorts) transitioning between the different case studies housed on the work page.

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.

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

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.

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.

Ryan Achten, 2018