Headshot of front-end developer and growing UX/UI designer, David Journeaux

dvdjrnx.github.io


Hi, I’m David Journeaux, a front-end developer and growing UX/UI designer. I’ve created this simple GitHub Pages site to hold a collection of minor projects I’ve worked on over the years.

To be frank, my most recent professional development and growth has occurred within two private endeavours:

In light of this, I’ve not done much that reflects my current skillset within the public sphere. It’s my hope this site will help to change that, presenting new, public projects that accurately demonstrate my expertise and learnings in development and user experience with time.

I hope you’ll appreciate and enjoy the journey as much as I intend to myself.


Table of Contents

Skip to projects

Three.js learnings

Small prototypes


Three.js learnings

Marble Race

View GitHub repo • View live demo • Requires keyboard to play • Best viewed in landscape orientation


Banner showing the Marble Race starting line.


Project description

TLDR:
A 3D marble race game made with Three.js and React Three Fiber.

Tech used:
React • Three.js • React Three Fiber • React Three Rapier • react-postprocessing • Drei • Zustand • R3F-Perf • JavaScript • HTML • CSS


This project brings together many concepts of working with Three.js and React Three Fiber to create an in-browser game controlled by a keyboard.

It features a marble that can be directed via arrow and WASD keys. It can also jump with the space bar. The goal is to move as quickly as possible down a track with multiple, randomized obstacles.

When you first move, a timer begins. Upon reaching the end of the track, the timer stops and shows you your time. You can then restart to beat your previous record.

The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.


Project image
A purple marble sits at the beginning of a race track filled with moving red obstacles. The words Marble Race appear beside the marble. There's an unstarted timer that appears above the marble and a simplistic display of arrow or WASD keys and a space bar below.


Back to Table of Contents • Back to top


Animated Galaxy

View GitHub repo • View live demo


Banner showing an orange and red spiral galaxy.


Project description

TLDR:
A controllable, animated galaxy presented in 3D with hundreds of thousands of particles. Created with Three.js.

Tech used:
Three.js • lil-gui • JavaScript • HTML • CSS


This project explores particle systems and animation in 3D. It also explores how to handle hundreds of thousands of particle instances in the browser. It was created with Three.js and React Three Fiber.

It features a whirling galaxy with distinct branches. The branches become more homogenous as the animation plays out. In the upper-right corner is a GUI that allows users to dynamically adjust multiple parameters for the scene, including colors, size, branches, and particle count.

The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.


Project image
A whirling orange and yellow galaxy appears against the black backdrop of space.


Back to Table of Contents • Back to top


Scroll-based animation

View GitHub repo • View live demo • Best viewed in landscape orientation


Banner showing a torus floating beside the words Contact Me.


Project description

TLDR:
A simple mock-portfolio front page with 3D animation triggered by scrolling. Made with Three.js.

Tech used:
Three.js • lil-gui • JavaScript • HTML • CSS


This project explores scroll-based animation with 3D elements. It was created with Three.js.

It features a mock portfolio front page with floating 3D elements. The 3D elements will spin quickly in response to entering the viewport, and their position will adjust based on your mouse movement. In the upper-right corner is a GUI that allows users to dynamically adjust the color of the 3D elements.

The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.


Project image
The words My Portfolio sit against a starscape with a green donut shape floating off to the side.


Back to Table of Contents • Back to top


3D Physics

View GitHub repo • View live demo


Banner showing numerous 3D shapes falling onto a green plane under the effects of gravity.


Project description

TLDR:
A chaotic 3D scene implementing physics using Three.js and React Three Fiber.

Tech used:
React • Three.js • React Three Fiber • React Three Rapier • R3F-Perf • Drei • JavaScript • HTML • CSS


This project explores applying physics to a 3D scene created with Three.js and React Three Fiber. At its core, it features a spinning, rectangular block. Numerous models fall into the scene under the effects of gravity and are bounced around by the block, reacting as would be reasonably expected in the real world for their individual shapes.

The project also displays a performance monitor for profiling different performance indicators, such as FPS, memory usage, and GPU load.

The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.


Project image
Multiple peach cubes, a hamburger, and a yellow ball fall to a green floor with a spinning red rectangular block.


Back to Table of Contents • Back to top


Portal Scene

View GitHub repo • View live demo


A wide digital banner depicting a stylized portal with swirling black and white patterns in the center, flanked by wooden structures with lanterns, against a starry night sky backdrop, suggesting a mystical or fantasy setting.


Project description

TLDR:
A low-poly 3D portal scene featuring custom animated shaders. Modeled in Blender, shaded and coded in Three.js and React Three Fiber.

Tech used:
React • Three.js • React Three Fiber • WebGL • WebGL Shaders • Drei • JavaScript • HTML • CSS


This project explores writing custom animated shaders, building a scene in blender, baking lighting, and loading the scene in Three.js. The project also makes use of React Three Fiber.

The shader work is highlighted in the glowing and shifting patterns within the portal’s stone circle. The scene features a low-poly 3D scene of a lantern-lit, fenced pathway leading through rocks and tree stumps to a mysterious stone portal. An axe rests in one of the stumps, and fireflies float against a black sky.

The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.


Project image
A 3D image depicting a stylized portal with swirling black and white patterns in the center, flanked by wooden structures with lanterns, against a starry night sky backdrop, suggesting a mystical or fantasy setting.


Back to Table of Contents • Back to top


Post-processing

View GitHub repo • View live demo • Best viewed in landscape orientation


A digital banner showcasing post-processing effects with a spherical ball and a cube distorted and set against a two-tone green backdrop that creates a surreal, abstract landscape.


Project description

TLDR:
A simple 3D scene with a user-adjustable post-processing “drunk” effect. Created with Three.js and React Three Fiber.

Tech used:
React • Three.js • React Three Fiber • react-postprocessing • Drei • Leva • R3F-Perf • JavaScript • HTML • CSS


This project explores post-processing in 3D, allowing users to dynamically adjust the intensity of an animated, drunken wave effect applied over top of a simple scene. It was created with Three.js and React Three Fiber.

It features a ball and cube on a green plane. In the upper-right corner is a GUI that allows users to adjust two parameters that affect the “drunk” view distortion: frequency and amplitude.

The project also displays a performance monitor for profiling different performance indicators, such as FPS, memory usage, and GPU load.

The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.


Project image
A 3D rendering of a ball and a cube under the influence of a 'Drunk Effect' post-processing filter, evidenced by on-screen sliders for frequency and amplitude adjustments. The ball and cube are resting on a flat surface with a light green background. The ball appears distorted into an egg shape, and the cube has a slightly skewed form, demonstrating the effects of the filter on simple geometric shapes.


Back to Table of Contents • Back to top


Raging Sea

View GitHub repo • View live demo


A wide banner image depicting an abstract representation of a tumultuous sea with dynamic shades of blue, creating the illusion of waves in motion under a stormy sky.


Project description

TLDR:
A low-poly sea with rolling waves and dynamic user controls. Made with Three.js.

Tech used:
Three.js • WebGL • WebGL Shaders • lil-gui • JavaScript • HTML • CSS


This project explores animating WebGL shaders and patterns. It was created with Three.js.

It features a low-poly sea with rolling waves. In the upper-right corner is a GUI that allows users to dynamically adjust multiple parameters for the scene, including wave elevation, frequency, and speed, small wave iterations, and sea colors.

The work was undertaken as one of many steps in acquiring my Three.js certification through Three.js Journey.


Project image
A 3D image that simulates a raging sea at night with varying shades of blue, alongside a control panel with sliders for 'bigWavesElevation', 'bigWavesFrequency', and other parameters, indicating this is a computer-generated visualization with adjustable settings for wave dynamics.


Back to Table of Contents • Back to top



Small prototypes

Model Dimension Extraction Test

View GitHub repo • View live demo • Best viewed on desktop


Banner showing the model dimension extraction test UI.


Project description

TLDR:
A quick and dirty prototype of a Google Model Viewer-based 3D model dimension extractor.

Tech used:
Google Model Viewer • React • JavaScript • HTML • CSS


This project was a prototyping test explored as part of my 3D and AR/VR work with Shopify. It tested <model-viewer>’s getDimensions() method for performance viability in a project that required quickly assessing a model’s dimensions to facilitate further business logic down the line.

The prototype mounts a <model-viewer> instance when a file is dropped on the UI’s drop zone, and the <model-viewer>’s src attribute is set to an object URL of the model. The moment the model loads, getDimensions() is called and x, y, and z dimensions are displayed.

Included in the code is a call to console.time('getDimensions') that runs on file drop, and a console.endTime('getDimensions') call that runs once dimensions are set in state. The results can be viewed in the console tab of Dev Tools and used to help gauge the performance viability of using <model-viewer> to get dimensions from models of various file sizes.

UI was not a focus for this test.


Project image
Screenshot of prototype showing a Marshall amp model loaded in the UI with dimensions displayed and the timing results shown in Dev Tools.


Download a .glb file for testing

How to download
The link above will take you to a GitHub repository page where you can download a .glb file if you don't have your own for testing. The image below shows where you can find the download button on the linked repository page.
Image showing where to download the mentioned .glb file in the linked GitHub repository page.


Back to Table of Contents • Back to top