diff --git a/.gitignore b/.gitignore index fd3dbb5..a815299 100644 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,7 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +dev_server.log # local env files .env*.local @@ -34,3 +35,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# screenshots +portfolio-3d-view.png diff --git a/dev_server.log b/dev_server.log index 0abdc82..355bacf 100644 --- a/dev_server.log +++ b/dev_server.log @@ -2,5 +2,3 @@ > portfolio@0.1.0 dev > next dev - ▲ Next.js 14.0.4 - - Local: http://localhost:3000 diff --git a/portfolio-3d-view.png b/portfolio-3d-view.png index 683f387..3ae1c6c 100644 Binary files a/portfolio-3d-view.png and b/portfolio-3d-view.png differ diff --git a/src/app/_components/Projects/page.tsx b/src/app/_components/Projects/page.tsx index 809b0b5..53b2ee0 100644 --- a/src/app/_components/Projects/page.tsx +++ b/src/app/_components/Projects/page.tsx @@ -6,9 +6,10 @@ import React, { useState, Suspense, useEffect, + useMemo, } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; - import { OrbitControls, Preload, Image as ImageImpl } from "@react-three/drei"; + import { OrbitControls, Preload, Image as ImageImpl, type ImageProps } from "@react-three/drei"; import { a as aThree } from "@react-spring/three"; import * as THREE from "three"; @@ -47,12 +48,13 @@ import React, { const damp = THREE.MathUtils.damp; - function Image({ c = new THREE.Color(), ...props }) { - const ref = useRef(null!); + function Image({ ...props }: ImageProps) { + const c = useMemo(() => new THREE.Color(), []); + const ref = useRef(null!); const [hovered, hover] = useState(false); useFrame((state, delta) => { - ref.current.material.color.lerp( + (ref.current.material as THREE.MeshBasicMaterial).color.lerp( c.set(hovered ? "white" : "#ccc"), hovered ? 0.4 : 0.05 ); @@ -78,9 +80,8 @@ import React, { {projects[i].title} onImageClick(i)} /> ))} diff --git a/verify.spec.ts b/verify.spec.ts index 790b85a..1c6a771 100644 --- a/verify.spec.ts +++ b/verify.spec.ts @@ -2,6 +2,7 @@ import { test, expect } from '@playwright/test'; test('homepage has a canvas for the 3D portfolio', async ({ page }) => { + test.setTimeout(60000); // 60 seconds const FgRed = "\x1b[31m" page.on('console', msg => { if (msg.type() === 'error')