From 29f87cff84d7ba19b10ff4b44ad10be33d087d02 Mon Sep 17 00:00:00 2001
From: Jan Rychly <jrychlyg@gmail.com>
Date: Tue, 14 Nov 2023 18:07:39 -0900
Subject: [PATCH] Add cool 3D art - introduce three.js and tween.js - render a
 group of tiles that react to the mouse position - setup components for a
 background canvas and a moving display target - add a switch to hide the
 art/distraction

---
 package.json                             |   5 +-
 src/components/CoolArt/CoolArt.tsx       |  48 ++++++++++
 src/components/CoolArt/CoolArtSwitch.tsx |  22 +++++
 src/components/CoolArt/CoolArtTarget.tsx |  42 +++++++++
 src/components/CoolArt/animationUtils.ts |  37 ++++++++
 src/components/CoolArt/artPositioning.ts |  46 ++++++++++
 src/components/CoolArt/index.ts          |   3 +
 src/components/CoolArt/three-main.ts     | 109 +++++++++++++++++++++++
 src/components/CoolArt/tileMatrix.ts     |  48 ++++++++++
 src/layouts/Layout.tsx                   |  24 +++--
 src/pages/LandingPage/LandingPage.tsx    |  11 ++-
 src/pages/Things/Things.tsx              |  54 ++++++-----
 src/theme.ts                             |   2 +-
 yarn.lock                                |  40 +++++++++
 14 files changed, 451 insertions(+), 40 deletions(-)
 create mode 100644 src/components/CoolArt/CoolArt.tsx
 create mode 100644 src/components/CoolArt/CoolArtSwitch.tsx
 create mode 100644 src/components/CoolArt/CoolArtTarget.tsx
 create mode 100644 src/components/CoolArt/animationUtils.ts
 create mode 100644 src/components/CoolArt/artPositioning.ts
 create mode 100644 src/components/CoolArt/index.ts
 create mode 100644 src/components/CoolArt/three-main.ts
 create mode 100644 src/components/CoolArt/tileMatrix.ts

diff --git a/package.json b/package.json
index 9087440..4be3e76 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@tweenjs/tween.js": "^21.0.0",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.199",
     "@types/node": "^16.18.49",
@@ -20,7 +21,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
-    "showdown": "^2.1.0"
+    "showdown": "^2.1.0",
+    "three": "^0.157.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -55,6 +57,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/showdown": "^2.0.2",
+    "@types/three": "^0.157.2",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "eslint": "^8.43.0",
diff --git a/src/components/CoolArt/CoolArt.tsx b/src/components/CoolArt/CoolArt.tsx
new file mode 100644
index 0000000..8bb3626
--- /dev/null
+++ b/src/components/CoolArt/CoolArt.tsx
@@ -0,0 +1,48 @@
+import { createContext, useContext, useEffect, useRef } from 'react'
+import { getRendererDomElement, updateRendererSize } from './three-main'
+import { Box, BoxProps } from '@mui/material'
+import { mergeSxProps } from '../../utils'
+
+
+export const CoolArtContext = createContext({ hidden: false, setHidden: (val: boolean) => { val; return } })
+export const useCoolArtContext = () => useContext(CoolArtContext)
+
+export const CoolArt = ({ sx, ...rest }: BoxProps) => {
+  const canvasContainer = useRef<HTMLDivElement>()
+  const handleWindowResize = () => {
+    if (canvasContainer.current)
+      updateRendererSize(canvasContainer.current.offsetWidth, canvasContainer.current.offsetHeight)
+  }
+  // Attach the Three.js canvas to this container through a ref
+  useEffect(() => {
+    canvasContainer.current?.appendChild(getRendererDomElement())
+    handleWindowResize() // also set the size
+  }, [canvasContainer.current])
+
+  // Handle canvas resizing
+  useEffect(() => {
+    handleWindowResize()
+    window.addEventListener('resize', handleWindowResize)
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [canvasContainer, canvasContainer.current])
+
+  const { hidden } = useCoolArtContext()
+
+  return (
+    <Box
+      {...rest}
+      ref={canvasContainer}
+      sx={mergeSxProps({
+        position: 'absolute',
+        zIndex: '-1',
+        top: 0,
+        left: 0,
+        width: '100%',
+        overflowX: 'hidden',
+        visibility: hidden ? 'hidden' : 'visible',
+        opacity: hidden ? 0 : 1,
+        transition: '400ms opacity',
+      }, sx)}
+    />
+  )
+}
diff --git a/src/components/CoolArt/CoolArtSwitch.tsx b/src/components/CoolArt/CoolArtSwitch.tsx
new file mode 100644
index 0000000..263a42d
--- /dev/null
+++ b/src/components/CoolArt/CoolArtSwitch.tsx
@@ -0,0 +1,22 @@
+import { Box, BoxProps, Switch, Typography } from '@mui/material'
+import { mergeSxProps } from '../../utils'
+import { useCoolArtContext } from './CoolArt'
+
+
+export const CoolArtSwitch = ({sx, ...rest}: BoxProps) => {
+  const { hidden, setHidden } = useCoolArtContext()
+  return (
+    <Box
+      {...rest}
+      sx={mergeSxProps({
+        display: 'flex',
+        alignItems: 'center',
+      }, sx)}
+    >
+      <Typography variant="button">Distraction</Typography>
+      <Switch
+        checked={!hidden}
+        onChange={({target}) => { setHidden(!target.checked)}}
+      />
+    </Box>
+  )}
diff --git a/src/components/CoolArt/CoolArtTarget.tsx b/src/components/CoolArt/CoolArtTarget.tsx
new file mode 100644
index 0000000..3d40655
--- /dev/null
+++ b/src/components/CoolArt/CoolArtTarget.tsx
@@ -0,0 +1,42 @@
+import { Box, BoxProps } from '@mui/material'
+import { RefObject, createRef } from 'react'
+import { mergeSxProps } from '../../utils'
+import _ from 'lodash'
+import { CoolArtSwitch } from './CoolArtSwitch'
+import { useCoolArtContext } from './CoolArt'
+
+
+export const coolArtTarget: RefObject<HTMLDivElement | undefined> = createRef()
+
+export const CoolArtTarget = ({ sx, ...rest }: BoxProps) => {
+  const { hidden } = useCoolArtContext()
+  return (
+    <Box
+      ref={coolArtTarget}
+      sx={mergeSxProps({
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+        ...(hidden ? { minHeight: { xs: '9em', md: undefined } } : undefined),
+        transition: '400ms min-height',
+      }, sx)}
+      {...rest}
+    >
+      <CoolArtSwitch sx={{ position: 'absolute', top: '3.5em', right: '-4.2em', transform: 'rotate(90deg)' }} />
+    </Box>
+  )}
+
+
+/** Return position of the target box relative to the canvas and its dimensions */
+export const getArtTargetPosition = (canvasRect: DOMRect) => {
+  if (!coolArtTarget.current)
+    return undefined
+  const targetRect = coolArtTarget.current.getBoundingClientRect()
+  return _.mapValues({
+    left: targetRect.left - canvasRect.left,
+    top: targetRect.top - canvasRect.top,
+    width: targetRect.width,
+    height: targetRect.height,
+  }, (x) => Math.round(x))
+}
+
diff --git a/src/components/CoolArt/animationUtils.ts b/src/components/CoolArt/animationUtils.ts
new file mode 100644
index 0000000..eb3f961
--- /dev/null
+++ b/src/components/CoolArt/animationUtils.ts
@@ -0,0 +1,37 @@
+import { Vector3 } from 'three'
+
+
+export const distancePointToLine = (point: Vector3, lineOrigin: Vector3, lineDirection: Vector3) => {
+  const pointToLineOrigin = new Vector3().subVectors(lineOrigin, point)
+  const crossProduct = new Vector3().crossVectors(lineDirection, pointToLineOrigin)
+  return crossProduct.length() ** 2 / lineDirection.length() ** 2
+}
+
+export const perpendicularToLineFromPoint = (point: Vector3, lineOrigin: Vector3, lineDirection: Vector3) => {
+  const pointTolineOrigin = new Vector3().subVectors(lineOrigin, point)
+  const normalOfPlane = new Vector3().crossVectors(pointTolineOrigin, lineDirection)
+  return new Vector3().crossVectors(pointTolineOrigin, normalOfPlane).normalize()
+}
+
+export const distanceVectorPointToLine = (point: Vector3, lineOrigin: Vector3, lineDirection: Vector3) => {
+  const pointToLineOrigin = new Vector3().subVectors(lineOrigin, point)
+  // normal vector, perpendicular to the plane of the problem (plane defined by the line and the point)
+  const normalOfPlane = new Vector3().crossVectors(pointToLineOrigin, lineDirection)
+  const direction = new Vector3().crossVectors(pointToLineOrigin, normalOfPlane)
+
+  const crossProduct = new Vector3().crossVectors(lineDirection, pointToLineOrigin)
+  const distance = crossProduct.length() ** 2 / lineDirection.length() ** 2
+
+  return direction.setLength(distance)
+}
+
+/**
+ * Exponential easing function (easing in and out) generator
+ * @param aggressivness how quickly the value plateaus; (1 by default)
+ * @param range returned values will be between -`range`/2 and `range`/2; (2 by default)
+ */
+export const getEasingFunc = (aggressivness=1, range=2) => (x: number) =>
+  x < 0
+    ? (Math.pow(2, aggressivness * x) * range/2 - range/2)
+    : ((2 - Math.pow(2, -aggressivness * x))* range/2 - range/2)
+
diff --git a/src/components/CoolArt/artPositioning.ts b/src/components/CoolArt/artPositioning.ts
new file mode 100644
index 0000000..0d28f38
--- /dev/null
+++ b/src/components/CoolArt/artPositioning.ts
@@ -0,0 +1,46 @@
+import { Tween, Easing } from '@tweenjs/tween.js'
+import { Vector2 } from 'three'
+import _ from 'lodash'
+
+import { getArtTargetPosition } from './CoolArtTarget'
+
+
+// the default position if off screen
+const DEFAULT_TARET_BOX_POSITION = { left: 800, top: -600, width: 0, height: 0 }
+
+// state
+let prevTargetBoxPos = DEFAULT_TARET_BOX_POSITION
+const prevCanvasSize = new Vector2()
+
+/**
+ * Mutates object's position to be at the center of the `CoolArtTarget` container.
+ * It is stateful and only updates the object if the container or the canvas have changed since the last execution.
+ * */
+export const followArtTargetPosition = (renderer: THREE.WebGLRenderer, object: THREE.Object3D) => {
+  // get current parameters
+  const newTargetBoxPos = getArtTargetPosition(renderer.domElement.getBoundingClientRect()) ?? DEFAULT_TARET_BOX_POSITION
+  const canvasSize = new Vector2()
+  renderer.getSize(canvasSize)
+
+  // check if parameters changed since last execution
+  if (_.isEqual(newTargetBoxPos, prevTargetBoxPos) && canvasSize.equals(prevCanvasSize)) return
+
+  // some of the parameters have changed => update the object position
+  prevTargetBoxPos = newTargetBoxPos
+  prevCanvasSize.set(canvasSize.x, canvasSize.y)
+
+  const { left, top, width, height } = newTargetBoxPos
+  const SCALE = 0.009 // TODO use a raycaster to actually move the object precisely to the desired position
+
+  new Tween({ x: object.position.x, y: object.position.y })
+    .to({
+      x: (left + width / 2 - canvasSize.x / 2) * SCALE,
+      y: -(top + height / 2 - canvasSize.y / 2) * SCALE,
+    }, 1000)
+    .easing(Easing.Cubic.Out)
+    .onUpdate(({ x, y}) => {
+      object.position.setX(x)
+      object.position.setY(y)
+    })
+    .start()
+}
diff --git a/src/components/CoolArt/index.ts b/src/components/CoolArt/index.ts
new file mode 100644
index 0000000..d2d343f
--- /dev/null
+++ b/src/components/CoolArt/index.ts
@@ -0,0 +1,3 @@
+export { CoolArt, CoolArtContext, useCoolArtContext } from './CoolArt'
+export { CoolArtTarget } from './CoolArtTarget'
+export { CoolArtSwitch } from './CoolArtSwitch'
diff --git a/src/components/CoolArt/three-main.ts b/src/components/CoolArt/three-main.ts
new file mode 100644
index 0000000..4671767
--- /dev/null
+++ b/src/components/CoolArt/three-main.ts
@@ -0,0 +1,109 @@
+import * as THREE from 'three'
+import * as TWEEN from '@tweenjs/tween.js'
+
+import { getTileMatrix, updateTileMatrix } from './tileMatrix'
+import { distancePointToLine } from './animationUtils'
+import { followArtTargetPosition } from './artPositioning'
+
+
+
+/** Initialization */
+const scene = new THREE.Scene()
+
+const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000)
+camera.position.z = 10
+
+const renderer = new THREE.WebGLRenderer()
+renderer.setSize(800, 1000)
+
+const clock = new THREE.Clock()
+
+
+/** Exported API */
+export const getRendererDomElement = () => renderer.domElement
+
+export const updateRendererSize = (...args: Parameters<typeof renderer.setSize>) => {
+  renderer.setSize(...args)
+  camera.aspect = args[0] / args[1]
+  camera.updateProjectionMatrix()
+}
+
+
+/** Set up the scene */
+
+// Ligths
+const directionalLight = new THREE.DirectionalLight(0xffffff, 3)
+directionalLight.target.position.set(0, 0, -0.5)
+scene.add(directionalLight)
+scene.add(directionalLight.target)
+
+const ambientLight = new THREE.AmbientLight(0xfffff, 0.1)
+scene.add(ambientLight)
+
+// Objects
+const MATRIX_ROTATION_X = -Math.PI/10
+const MATRIX_ROTATION_Y = -Math.PI/10
+const MATRIX_ROTATION_Z = -Math.PI/40
+const tileMatrix = getTileMatrix(8, 8, 0.4, 0.2)
+tileMatrix.position.set(0, 5, 0)
+tileMatrix.rotation.x = MATRIX_ROTATION_X
+tileMatrix.rotation.y = MATRIX_ROTATION_Y
+tileMatrix.rotation.z = MATRIX_ROTATION_Z
+scene.add(tileMatrix)
+
+
+/** Animate */
+
+// Animation loop state
+const pointer = new THREE.Vector2() // position of the pointer in normalized coordinates
+/** Calculate pointer position in normalized device coordinates ((-1 to +1) for both components) */
+const onPointerMove = (event: PointerEvent) => {
+  pointer.x = (event.clientX / window.innerWidth) * 2 - 1
+  pointer.y = (-(event.clientY + window.scrollY) / window.innerHeight) * 2 + 1
+}
+window.addEventListener('pointermove', onPointerMove)
+
+const pointerRaycaster = new THREE.Raycaster() // actual pointer position ray
+const floatyPointer = new THREE.Vector2() // position that slowly chases the real pointer
+const floatyRaycaster = new THREE.Raycaster() // ray slowly chasing the actual pointer ray
+let floatyDistance = 0 // variable that slowly chases the distance of the real pointer ray from the matrix
+const FLOATINESS_C = 0.24
+const FLOATINESS_THRESHOLD = 10 // at this distance from the matrix start throtlling down the hover effects
+
+/** Incrementally update the floatyPointer position.
+ * As the pointer moves away from the matrix (past the FLOATINESS_THRESHOLD) the update increments
+ * become extremely small resulting in a near-still pointer. */
+const updateFloatyPointer = (timeDelta: number) => {
+  const distance = distancePointToLine(tileMatrix.position, camera.position, pointerRaycaster.ray.direction)
+  const floatiness = timeDelta / FLOATINESS_C
+  floatyDistance += (distance - floatyDistance) * floatiness // indenpendent of the floatyRaycaster
+  // using `floatyDistance` results in a smoother stopping of the floatyPointer and
+  // therefore the matrix movement stops smoothly as well
+  const incrementMultiplier = floatyDistance < FLOATINESS_THRESHOLD
+    ? floatiness // should be framerate dependant
+    : floatiness / ((floatyDistance - FLOATINESS_THRESHOLD) / 8 + 1)**4
+  
+  floatyPointer.x += (pointer.x - floatyPointer.x) * incrementMultiplier
+  floatyPointer.y += (pointer.y - floatyPointer.y) * incrementMultiplier
+}
+
+// Animation loop
+const animate = (t?: number) => {
+  TWEEN.update(t)
+  requestAnimationFrame(animate)
+  const timeDelta = clock.getDelta()
+  
+  followArtTargetPosition(renderer, tileMatrix)
+
+  updateFloatyPointer(timeDelta)
+
+  // update the raycasters with the camera and pointer positions
+  pointerRaycaster.setFromCamera(pointer, camera)
+  floatyRaycaster.setFromCamera(floatyPointer, camera)
+  
+  updateTileMatrix(tileMatrix, camera.position, floatyRaycaster.ray.direction, MATRIX_ROTATION_X, MATRIX_ROTATION_Y)
+
+  renderer.render( scene, camera )
+}
+
+animate()
diff --git a/src/components/CoolArt/tileMatrix.ts b/src/components/CoolArt/tileMatrix.ts
new file mode 100644
index 0000000..17d5aa0
--- /dev/null
+++ b/src/components/CoolArt/tileMatrix.ts
@@ -0,0 +1,48 @@
+import { BoxGeometry, Group, Mesh, MeshPhongMaterial, Vector3 } from 'three'
+import { PRIMARY_COLOR } from '../../theme'
+import { distanceVectorPointToLine, getEasingFunc } from './animationUtils'
+
+
+const primary = parseInt(PRIMARY_COLOR.substring(1), 16)
+
+/** Creates a group of tiles in a matrix (in the XY plane) centered at [0; 0; 0] */
+export const getTileMatrix = (columnCount: number, rowCount: number, tileSize: number, gap: number) => {
+  const tiles = []
+  for (let col = 0; col < columnCount; col++) {
+    for (let row = 0; row < rowCount; row++) {
+      const geometry = new BoxGeometry(tileSize, tileSize, tileSize * 0.2)
+      const material = new MeshPhongMaterial({ color: primary })
+      const mesh = new Mesh(geometry, material)
+      mesh.position.set(
+        (col - (columnCount -1) / 2) * tileSize * (1 + gap),
+        (row - (rowCount - 1) / 2) * tileSize * (1 + gap),
+        0,
+      )
+      tiles.push(mesh)
+    }
+  }
+  
+  const tileMatrix = new Group()
+  tiles.forEach((tile) => tileMatrix.add(tile))
+
+  return tileMatrix
+}
+
+
+const easing = getEasingFunc()
+const zOffseetEasing = getEasingFunc(0.6, 0.8)
+
+export const updateTileMatrix = (tileMatrix: Group, cameraPosition: Vector3, raycasterDirection: Vector3, groupRotationX=0, groupRotationY=0) => {
+  const floatyDistanceVec = distanceVectorPointToLine(tileMatrix.position, cameraPosition, raycasterDirection)
+  tileMatrix.rotation.x = groupRotationX + easing(floatyDistanceVec.y) * Math.PI/16
+  tileMatrix.rotation.y = groupRotationY - easing(floatyDistanceVec.x) * Math.PI/8
+
+  tileMatrix.children.forEach((child) => {
+    const childAbsolutePosition = new Vector3().addVectors(child.position, tileMatrix.position) // does not account for the rotation of the group
+    const childDistanceVec = distanceVectorPointToLine(childAbsolutePosition, cameraPosition, raycasterDirection)
+
+    child.rotation.x = easing(childDistanceVec.y) * Math.PI/5
+    child.rotation.y = -easing(childDistanceVec.x) * Math.PI/10
+    child.position.z = zOffseetEasing(childDistanceVec.length())
+  })
+}
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
index 4520aeb..38f43c4 100644
--- a/src/layouts/Layout.tsx
+++ b/src/layouts/Layout.tsx
@@ -1,8 +1,9 @@
 import { Navigation } from './Navigation'
 import { Box, Container, Stack } from '@mui/material'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { Footer } from './Footer'
+import { CoolArt, CoolArtContext } from '../components/CoolArt'
 
 
 export const Layout = () => {
@@ -15,16 +16,21 @@ export const Layout = () => {
     }
   }, [navigate, pathname])
 
+  const [hidden, setHidden] = useState(false)
+
   return (
     <Stack sx={{ minHeight: '100vh' }}>
-      <Navigation />
-      {/* a box spacer of the size of the toolbar so that nothing is hidden underneath <Navigation /> */}
-      <Box sx={(theme) => (theme.mixins.toolbar)} />
-      <Container sx={{ px: { xs: 3, md: 20 }, py: 10 }}>
-        <Outlet />
-      </Container>
-      <Box sx={{ flexGrow: 1 }} />
-      <Footer />
+      <CoolArtContext.Provider value={{ hidden, setHidden }}>
+        <Navigation />
+        {/* a box spacer of the size of the toolbar so that nothing is hidden underneath <Navigation /> */}
+        <Box sx={(theme) => theme.mixins.toolbar} />
+        <Container sx={{ px: { xs: 3, md: 20 }, py: 10 }}>
+          <Outlet />
+        </Container>
+        <CoolArt />
+        <Box sx={{ flexGrow: 1 }} />
+        <Footer />
+      </CoolArtContext.Provider>
     </Stack>
   )
 }
diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index 7119973..5dcc9fe 100644
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/src/pages/LandingPage/LandingPage.tsx
@@ -1,11 +1,12 @@
-import { Container, Grid, Stack, Typography } from '@mui/material'
+import { Grid, Stack, Typography } from '@mui/material'
 import { Skills } from './Skills'
 import { Intro } from './Intro'
 import { FilterSelector } from './FilterSelector'
 import { ExperienceList } from './ExperienceList'
 import { EducationList } from './EducationList'
-import { Todo } from '../../components/Todo'
 import { ProjectList } from './ProjectList'
+import { CoolArtTarget } from '../../components/CoolArt'
+
 
 export const LandingPage = () => (
   <Grid container spacing={2} >
@@ -29,11 +30,9 @@ export const LandingPage = () => (
       </Stack>
     </Grid>
     <Grid item xs={12} md={6}>
-      <Container>
-        <Todo sx={{ opacity: 0 }} name="Cool art" />
-      </Container>
+      <CoolArtTarget sx={{ minHeight: '500px' }} />
     </Grid>
-    <Grid item xs="auto">
+    <Grid item xs={12}>
       <FilterSelector />
     </Grid>
     <Grid item xs={12}>
diff --git a/src/pages/Things/Things.tsx b/src/pages/Things/Things.tsx
index 72a3d41..612af7c 100644
--- a/src/pages/Things/Things.tsx
+++ b/src/pages/Things/Things.tsx
@@ -1,10 +1,11 @@
-import { Box, Typography } from '@mui/material'
+import { Box, Grid, Typography } from '@mui/material'
 import rawProjects from '../../configs/projects.json'
 import { unKeyBy } from '../../utils'
 import { useEffect, useMemo, useState } from 'react'
 import { Project } from './Project'
 import { Section } from '../../components/Section'
 import { useParams } from 'react-router-dom'
+import { CoolArtTarget } from '../../components/CoolArt'
 
 
 const SCROLL_OFFSET = 80
@@ -36,27 +37,34 @@ export const Things = () => {
   }, [projectId])
   
   return (
-    <Box>
-      <Typography variant="body1">I like people. They are what matters.</Typography>
-      <Typography variant="h4">
-      But as an engineer I like<br/> 
-        <Typography
-          variant="h1"
-          color="primary" 
-          sx={{ fontWeight: 700 }}
-          component="span"
-        >
-        Things
+    <Grid container>
+      <Grid item xs={12} md={6}>
+        <Typography variant="body1">I like people. They are what matters.</Typography>
+        <Typography variant="h4">
+        But as an engineer I like<br/> 
+          <Typography
+            variant="h1"
+            color="primary" 
+            sx={{ fontWeight: 700 }}
+            component="span"
+          >
+          Things
+          </Typography>
+          <br/>even more
         </Typography>
-        <br/>even more
-      </Typography>
-      <Typography variant="body1" sx={{ mt: 3 }}>
-      I enjoy designing them, making them, and improving them.
-      </Typography>
-      <Typography>Here are some of my favorites that I have made, including software and hardware.</Typography>
-      <Section>
-        {projects.map((project, i) => <Project details={project} key={i} />)}
-      </Section>
-      <Box sx={{ height: extend, widht: '1px' }} />
-    </Box>
+        <Typography variant="body1" sx={{ mt: 3 }}>
+        I enjoy designing them, making them, and improving them.
+        </Typography>
+        <Typography>Here are some of my favorites that I have made, including software and hardware.</Typography>
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <CoolArtTarget />
+      </Grid>
+      <Grid item xs={12}>
+        <Section>
+          {projects.map((project, i) => <Project details={project} key={i} />)}
+        </Section>
+        <Box sx={{ height: extend, widht: '1px' }} />
+      </Grid>
+    </Grid>
   )}
diff --git a/src/theme.ts b/src/theme.ts
index fcdd413..f71569e 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,6 +1,6 @@
 import { createTheme } from '@mui/material/styles'
 
-const PRIMARY_COLOR = '#48b53f'
+export const PRIMARY_COLOR = '#48b53f'
 
 const DEFAULT_BACKGROUND = '#010302'
 const PAPER_BACKGROUND = '#091209'
diff --git a/yarn.lock b/yarn.lock
index ab8c172..18138c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2134,6 +2134,11 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@tweenjs/tween.js@^21.0.0":
+  version "21.0.0"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-21.0.0.tgz#73f993c2d1de37b78b4c1246163e20bc6ae3b75e"
+  integrity sha512-qVfOiFh0U8ZSkLgA6tf7kj2MciqRbSCWaJZRwftVO7UbtVDNsZAXpWXqvCDtIefvjC83UJB+vHTDOGm5ibXjEA==
+
 "@types/aria-query@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
@@ -2465,6 +2470,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
+"@types/stats.js@*":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.2.tgz#97b6fa9bbb534e8e65c693cf0e90588756783574"
+  integrity sha512-j1oI+BOPiAAAKFysNNutE9aAIjvHqqILubCs2EeHKc19pi4uybaGAgBfLXsCgJYcyKWkiilEvl8CkFF/SL+baA==
+
 "@types/testing-library__jest-dom@^5.9.1":
   version "5.14.9"
   resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz#0fb1e6a0278d87b6737db55af5967570b67cb466"
@@ -2472,11 +2482,26 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/three@^0.157.2":
+  version "0.157.2"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.157.2.tgz#f22b9a4b6c9f2ed35de88f4346e57ee7296473cb"
+  integrity sha512-2kykrMgvO5LTAiahadM6ijoER+GcbEJ61pQVOyGxIJTCASoUnzwJvfhilsLxvEw4+glzhLYUDvvTvNjx+58Vzw==
+  dependencies:
+    "@types/stats.js" "*"
+    "@types/webxr" "*"
+    fflate "~0.6.10"
+    meshoptimizer "~0.18.1"
+
 "@types/trusted-types@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
   integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
 
+"@types/webxr@*":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.7.tgz#7a3aaaf1ceeaaad13f1dda66d6571852405bb221"
+  integrity sha512-Rcgs5c2eNFnHp53YOjgtKfl/zWX1Y+uFGUwlSXrWcZWu3yhANRezmph4MninmqybUYT6g9ZE0aQ9QIdPkLR3Kg==
+
 "@types/ws@^8.5.5":
   version "8.5.5"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.5.tgz#af587964aa06682702ee6dcbc7be41a80e4b28eb"
@@ -4908,6 +4933,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fflate@~0.6.10:
+  version "0.6.10"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
+  integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -6877,6 +6907,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+meshoptimizer@~0.18.1:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/meshoptimizer/-/meshoptimizer-0.18.1.tgz#cdb90907f30a7b5b1190facd3b7ee6b7087797d8"
+  integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -9269,6 +9304,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+three@^0.157.0:
+  version "0.157.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.157.0.tgz#5baac531941fc8c4ca62d45ee4265652e03318d0"
+  integrity sha512-CeAwQrf4x3z0/e+MC4F+nXLW5t0gh3pw+L6CCBqpHvOq3bGYIgRYub7Pv0j/9wR+d++OiEglyZzWyuSYbwWGOA==
+
 throat@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.2.tgz#51a3fbb5e11ae72e2cf74861ed5c8020f89f29fe"