diff --git a/public/favicon.png b/public/favicon.png deleted file mode 100644 index 2deb141..0000000 Binary files a/public/favicon.png and /dev/null differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..a4661f2 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/index.html b/public/index.html index e7d4938..96d2c59 100644 --- a/public/index.html +++ b/public/index.html @@ -1,55 +1,69 @@ - + + + - - + - + + + - - - + + + + - - - - + + + + - - - - + + + + - - - - - - - - - - - - - - - -
- + + + + + + + + +
+ diff --git a/public/sitemap.xml b/public/sitemap.xml index ed9af39..3861ec8 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -36,4 +36,10 @@ monthly 0.8 + + https://trueblue.hamishw.com + 2020-02-01 + monthly + 0.8 + diff --git a/src/components/Carousel/index.js b/src/components/Carousel/index.js index 9ee407e..11ebb87 100644 --- a/src/components/Carousel/index.js +++ b/src/components/Carousel/index.js @@ -1,23 +1,16 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'; -import { - WebGLRenderer, - OrthographicCamera, - Scene, - Mesh, - Color, - ShaderMaterial, - LinearFilter, - TextureLoader, - PlaneBufferGeometry, - LoadingManager, -} from 'three'; +import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer'; +import { LinearFilter } from 'three/src/constants'; +import { OrthographicCamera } from 'three/src/cameras/OrthographicCamera'; +import { Scene } from 'three/src/scenes/Scene'; +import { PlaneBufferGeometry } from 'three/src/geometries/PlaneGeometry'; +import { TextureLoader } from 'three/src/loaders/TextureLoader'; +import { LoadingManager } from 'three/src/loaders/LoadingManager'; +import { ShaderMaterial } from 'three/src/materials/ShaderMaterial'; +import { Mesh } from 'three/src/objects/Mesh'; +import { Color } from 'three/src/math/Color'; import styled from 'styled-components/macro'; -import { - Easing, - Tween, - update as updateTween, - remove as removeTween, -} from 'es6-tween'; +import { Easing, Tween, update as updateTween, remove as removeTween } from 'es6-tween'; import Swipe from 'react-easy-swipe'; import Icon from 'components/Icon'; import { cornerClip } from 'utils/style'; @@ -61,12 +54,7 @@ export default function Carousel(props) { }`; const goToIndex = useCallback( - ({ - index, - direction = 1, - duration = 1200, - easing = Easing.Exponential.InOut, - }) => { + ({ index, direction = 1, duration = 1200, easing = Easing.Exponential.InOut }) => { if (!sliderImages) return; setImageIndex(index); const uniforms = material.current.uniforms; @@ -109,12 +97,7 @@ export default function Carousel(props) { return; } - const finalIndex = determineIndex( - imageIndex, - index, - sliderImages, - direction - ); + const finalIndex = determineIndex(imageIndex, index, sliderImages, direction); goToIndex({ index: finalIndex, direction: direction, ...rest }); }, [goToIndex, imageIndex, loaded, sliderImages] @@ -153,14 +136,7 @@ export default function Carousel(props) { useEffect(() => { const containerElement = container.current; - const cameraOptions = [ - width / -2, - width / 2, - height / 2, - height / -2, - 1, - 1000, - ]; + const cameraOptions = [width / -2, width / 2, height / 2, height / -2, 1, 1000]; renderer.current = new WebGLRenderer({ antialias: false }); camera.current = new OrthographicCamera(...cameraOptions); scene.current = new Scene(); @@ -294,10 +270,7 @@ export default function Carousel(props) { return function cleanUp() { if (placeholderElement) { - placeholderElement.removeEventListener( - 'transitionend', - purgePlaceholder - ); + placeholderElement.removeEventListener('transitionend', purgePlaceholder); } }; } @@ -312,14 +285,8 @@ export default function Carousel(props) { if (absoluteX > 20) event.preventDefault(); lastSwipePosition.current = x; swipeDirection.current = x > 0 ? -1 : 1; - const swipePercentage = - 1 - ((absoluteX - containerWidth) / containerWidth) * -1; - const nextIndex = determineIndex( - imageIndex, - null, - images, - swipeDirection.current - ); + const swipePercentage = 1 - ((absoluteX - containerWidth) / containerWidth) * -1; + const nextIndex = determineIndex(imageIndex, null, images, swipeDirection.current); const uniforms = material.current.uniforms; const displacementClamp = Math.min(Math.max(swipePercentage, 0), 1); @@ -385,11 +352,7 @@ export default function Carousel(props) { return ( - + { const theme = useTheme(); const { dispatch } = useAppContext(); const isDark = theme.id === 'dark'; @@ -44,7 +44,7 @@ export default function ThemeToggle({ isMobile, ...rest }) { ); -} +}; const ThemeToggleButton = styled(Button)` position: fixed; @@ -110,3 +110,5 @@ const ThemeTogglePath = styled.path` transition-delay: ${props => (props.isDark ? '0s' : '0.3s')}; opacity: ${props => (props.isDark ? 0 : 1)}; `; + +export default ThemeToggle; diff --git a/src/index.js b/src/index.js index aee09c0..bb4dbd2 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ import App from './app'; import * as serviceWorker from './serviceWorker'; const rootElement = document.getElementById('root'); + if (rootElement.hasChildNodes()) { hydrate(, rootElement); } else { diff --git a/src/pages/Home/DisplacementSphere.js b/src/pages/Home/DisplacementSphere.js index 1104207..2ecd2ab 100644 --- a/src/pages/Home/DisplacementSphere.js +++ b/src/pages/Home/DisplacementSphere.js @@ -1,20 +1,17 @@ import React, { useEffect, useRef, memo } from 'react'; import styled, { useTheme } from 'styled-components/macro'; -import { - Vector2, - WebGLRenderer, - PerspectiveCamera, - Scene, - DirectionalLight, - AmbientLight, - UniformsUtils, - UniformsLib, - ShaderLib, - SphereBufferGeometry, - Mesh, - Color, - ShaderMaterial, -} from 'three'; +import { Vector2 } from 'three/src/math/Vector2'; +import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer'; +import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera'; +import { Scene } from 'three/src/scenes/Scene'; +import { DirectionalLight } from 'three/src/lights/DirectionalLight'; +import { AmbientLight } from 'three/src/lights/AmbientLight'; +import { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils'; +import { UniformsLib } from 'three/src/renderers/shaders/UniformsLib'; +import { MeshPhongMaterial } from 'three/src/materials/MeshPhongMaterial'; +import { SphereBufferGeometry } from 'three/src/geometries/SphereGeometry'; +import { Mesh } from 'three/src/objects/Mesh'; +import { Color } from 'three/src/math/Color'; import { Easing, Tween, update as updateTween, remove as removeTween } from 'es6-tween'; import innerHeight from 'ios-inner-height'; import vertShader from './shaders/sphereVertShader'; @@ -53,19 +50,21 @@ function DisplacementSphere(props) { camera.current = new PerspectiveCamera(55, width.current / height.current, 0.1, 200); scene.current = new Scene(); - uniforms.current = UniformsUtils.merge([ - UniformsLib['ambient'], - UniformsLib['lights'], - ShaderLib.phong.uniforms, - { time: { type: 'f', value: 0 } }, - ]); - - material.current = new ShaderMaterial({ - uniforms: uniforms.current, - vertexShader: vertShader, - fragmentShader: fragShader, - lights: true, - }); + material.current = new MeshPhongMaterial(); + + material.current.onBeforeCompile = shader => { + uniforms.current = UniformsUtils.merge([ + UniformsLib['ambient'], + UniformsLib['lights'], + shader.uniforms, + { time: { type: 'f', value: 0 } }, + ]); + + shader.uniforms = uniforms.current; + shader.vertexShader = vertShader; + shader.fragmentShader = fragShader; + shader.lights = true; + }; geometry.current = new SphereBufferGeometry(32, 128, 128); sphere.current = new Mesh(geometry.current, material.current); @@ -184,7 +183,9 @@ function DisplacementSphere(props) { const animate = () => { animation = requestAnimationFrame(animate); - uniforms.current.time.value = 0.00005 * (Date.now() - start.current); + if (uniforms.current !== undefined) { + uniforms.current.time.value = 0.00005 * (Date.now() - start.current); + } sphere.current.rotation.z += 0.001; renderer.current.render(scene.current, camera.current); updateTween(); diff --git a/src/pages/Home/Profile.js b/src/pages/Home/Profile.js index 040609b..732dc2c 100644 --- a/src/pages/Home/Profile.js +++ b/src/pages/Home/Profile.js @@ -71,6 +71,8 @@ function Profile(props) { srcSet={`${ProfileImg} 480w, ${ProfileImgLarge} 960w`} sizes={`(max-width: ${media.mobile}px) 100vw, 480px`} alt="Me at the Torii (gate) on Miyajima, an island off the coast of Hiroshima in Japan" + width={480} + height={560} />