feat: update thing

1 files changed, 187 insertions, 162 deletions

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 7d434ca..ea68c78 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -4,178 +4,203 @@ import logo from "./texturemap.jpeg";
 
 import './App.css';
 export const ThreeApp = (): ReactElement => {
-    const refContainer = useRef<HTMLDivElement>(null);
-    useEffect(() => {
-        console.log("effect running...")
-        const scene = new THREE.Scene();
-        scene.background = new THREE.Color(0x000000)
-        scene.backgroundIntensity = 0.2
-        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        const renderer = new THREE.WebGLRenderer();
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        window.onresize = () => {
-            camera.aspect = window.innerWidth / window.innerHeight
-            camera.updateProjectionMatrix()
-            renderer.setSize(window.innerWidth, window.innerHeight)
-            renderer.render(scene, camera)
-        }
-        // render objects
-        const geometry = new THREE.BoxGeometry(2, 2, 2);
-        const material = new THREE.MeshStandardMaterial({});
-        material.map = new THREE.TextureLoader().load(logo)
-        const cube = new THREE.Mesh(geometry, material);
-        const ambientLight = new THREE.AmbientLight(0xffffff, 1);
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
-        scene.add(directionalLight)
-        scene.add(ambientLight)
-        scene.add(cube);
-        document.body.appendChild(renderer.domElement);
+  const refContainer = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    console.log("effect running...")
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x000000)
+    scene.backgroundIntensity = 0.2
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    window.onresize = () => {
+      camera.aspect = window.innerWidth / window.innerHeight
+      camera.updateProjectionMatrix()
+      renderer.setSize(window.innerWidth, window.innerHeight)
+      renderer.render(scene, camera)
+    }
+    // render objects
+    const geometry = new THREE.BoxGeometry(2, 2, 2);
+    const material = new THREE.MeshStandardMaterial({});
+    material.map = new THREE.TextureLoader().load(logo)
+    const cube = new THREE.Mesh(geometry, material);
+    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
+    scene.add(directionalLight)
+    scene.add(ambientLight)
+    scene.add(cube);
+    document.body.appendChild(renderer.domElement);
 
-        camera.position.z = 5;
-        camera.position.y = 2;
-        camera.lookAt(cube.position)
+    camera.position.z = 5;
+    camera.position.y = 2;
+    camera.lookAt(cube.position)
 
-        // progressive animation through scrolling
-        function lerp(x: number, y: number, a: number): number {
-            return (1 - a) * x + a * y
-        }
-        function scalePercent(start: number, end: number) {
-            return (scrollPercent - start) / (end - start)
-        }
-        const animationKeyframes: { start: number; end: number; func: () => void }[] = []
+    // progressive animation through scrolling
+    function lerp(x: number, y: number, a: number): number {
+      return (1 - a) * x + a * y
+    }
+    function scalePercent(start: number, end: number) {
+      return (scrollPercent - start) / (end - start)
+    }
+    const animationKeyframes: { start: number; end: number; func: () => void }[] = []
 
-        animationKeyframes.push({
-            start: 0,
-            end: 15,
-            func: () => {
-                camera.lookAt(cube.position.x - 5, cube.position.y, cube.position.z - 10)
-                cube.rotation.x += 0.01
-                cube.rotation.y += 0.01
-                cube.position.z = lerp(0, 5, scalePercent(0, 15))
-                cube.position.x = lerp(10, -10, scalePercent(0, 15))
+    animationKeyframes.push({
+      start: 0,
+      end: 15,
+      func: () => {
+        camera.lookAt(cube.position.x - 5, cube.position.y, cube.position.z - 10)
+        cube.rotation.x += 0.01
+        cube.rotation.y += 0.01
+        cube.position.z = lerp(0, 5, scalePercent(0, 15))
+        cube.position.x = lerp(10, -10, scalePercent(0, 15))
 
-                //console.log(cube.position.z)
-            },
-        })
-        animationKeyframes.push({
-            start: 15,
-            end: 30,
-            func: () => {
-                cube.rotation.x += 0.01
-                cube.rotation.y += 0.01
-                camera.lookAt(cube.position.x - 5, cube.position.y, cube.position.z - 10)
-                //console.log(cube.rotation.z)
-            },
-        })
-        animationKeyframes.push({
-            start: 30,
-            end: 45,
-            func: () => {
-                cube.rotation.x += 0.01
-                cube.rotation.y += 0.01
-                camera.position.x = lerp(0, 5, scalePercent(30, 45))
-                camera.position.z = lerp(5, -5, scalePercent(30, 45))
-                camera.lookAt(lerp(cube.position.x - 5, cube.position.x + 10, scalePercent(30, 45)), cube.position.y, lerp(cube.position.z - 10, cube.position.z + 10, scalePercent(30, 45)))
-                //console.log(camera.position.x + " " + camera.position.y)
-            },
-        })
-        animationKeyframes.push({
-            start: 45,
-            end: 60,
-            func: () => {
-                cube.rotation.x += 0.01
-                cube.rotation.y += 0.01
-                camera.lookAt(cube.position.x + 10, cube.position.y, cube.position.z + 10)
-                //console.log(cube.rotation.z)
-            },
-        })
-        animationKeyframes.push({
-            start: 60,
-            end: 70,
-            func: () => {
-                //auto rotate
-                cube.rotation.x += 0.01
-                cube.rotation.y += 0.01
-                cube.position.x = lerp(-10, 20, scalePercent(60, 70))
-                camera.lookAt(lerp(cube.position.x + 10, cube.position.x - 10, scalePercent(60, 70)), cube.position.y, cube.position.z + 10)
-            },
-        })
-        animationKeyframes.push({
-            start: 70,
-            end: 80,
-            func: () => {
-                cube.rotation.x += 0.01
-                cube.rotation.y += 0.01
-                camera.lookAt(cube.position.x - 10, cube.position.y, cube.position.z + 10)
-            },
-        })
-        animationKeyframes.push({
-            start: 80,
-            end: 101,
-            func: () => {
-                cube.rotation.x += 0.01
-                cube.rotation.y += 0.01
-                cube.position.x = lerp(20, -5, scalePercent(80, 100))
-                camera.lookAt(lerp(cube.position.x - 10, cube.position.x + 10, scalePercent(80, 101)), cube.position.y, cube.position.z + 10)
-            },
-        })
+        //console.log(cube.position.z)
+      },
+    })
+    animationKeyframes.push({
+      start: 15,
+      end: 30,
+      func: () => {
+        cube.rotation.x += 0.01
+        cube.rotation.y += 0.01
+        camera.lookAt(cube.position.x - 5, cube.position.y, cube.position.z - 10)
+        //console.log(cube.rotation.z)
+      },
+    })
+    animationKeyframes.push({
+      start: 30,
+      end: 45,
+      func: () => {
+        cube.rotation.x += 0.01
+        cube.rotation.y += 0.01
+        camera.position.x = lerp(0, 5, scalePercent(30, 45))
+        camera.position.z = lerp(5, -5, scalePercent(30, 45))
+        camera.lookAt(lerp(cube.position.x - 5, cube.position.x + 10, scalePercent(30, 45)), cube.position.y, lerp(cube.position.z - 10, cube.position.z + 10, scalePercent(30, 45)))
+        //console.log(camera.position.x + " " + camera.position.y)
+      },
+    })
+    animationKeyframes.push({
+      start: 45,
+      end: 60,
+      func: () => {
+        cube.rotation.x += 0.01
+        cube.rotation.y += 0.01
+        camera.lookAt(cube.position.x + 10, cube.position.y, cube.position.z + 10)
+        //console.log(cube.rotation.z)
+      },
+    })
+    animationKeyframes.push({
+      start: 60,
+      end: 70,
+      func: () => {
+        //auto rotate
+        cube.rotation.x += 0.01
+        cube.rotation.y += 0.01
+        cube.position.x = lerp(-10, 20, scalePercent(60, 70))
+        camera.lookAt(lerp(cube.position.x + 10, cube.position.x - 10, scalePercent(60, 70)), cube.position.y, cube.position.z + 10)
+      },
+    })
+    animationKeyframes.push({
+      start: 70,
+      end: 80,
+      func: () => {
+        cube.rotation.x += 0.01
+        cube.rotation.y += 0.01
+        camera.lookAt(cube.position.x - 10, cube.position.y, cube.position.z + 10)
+      },
+    })
+    animationKeyframes.push({
+      start: 80,
+      end: 101,
+      func: () => {
+        cube.rotation.x += 0.01
+        cube.rotation.y += 0.01
+        cube.position.x = lerp(20, -5, scalePercent(80, 100))
+        camera.lookAt(lerp(cube.position.x - 10, cube.position.x + 10, scalePercent(80, 101)), cube.position.y, cube.position.z + 10)
+      },
+    })
 
-        function playScrollAnimations() {
-            animationKeyframes.forEach((a) => {
-                if (scrollPercent >= a.start && scrollPercent < a.end) {
-                    a.func()
-                }
-            })
+    function playScrollAnimations() {
+      animationKeyframes.forEach((a) => {
+        if (scrollPercent >= a.start && scrollPercent < a.end) {
+          a.func()
         }
+      })
+    }
 
-        let scrollPercent = 0
-        window.onscroll = () => {
-            scrollPercent =
-                ((document.documentElement.scrollTop || document.body.scrollTop) /
-                    ((document.documentElement.scrollHeight ||
-                        document.body.scrollHeight) -
-                        document.documentElement.clientHeight)) *
-                100;
-        }
+    let scrollPercent = 0
+    window.onscroll = () => {
+      scrollPercent =
+        ((document.documentElement.scrollTop || document.body.scrollTop) /
+          ((document.documentElement.scrollHeight ||
+            document.body.scrollHeight) -
+            document.documentElement.clientHeight)) *
+        100;
+    }
 
-        function animate() {
-            requestAnimationFrame(animate);
-            playScrollAnimations()
-            renderer.render(scene, camera);
-        }
-        window.scrollTo({ top: 0, behavior: 'smooth' })
-        animate();
-    }, [])
+    function animate() {
+      requestAnimationFrame(animate);
+      playScrollAnimations()
+      renderer.render(scene, camera);
+    }
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+    animate();
+  }, [])
+
+  return (
+    <main ref={refContainer}>
+      <h1>Website Under Construction</h1>
+      <section className='left'>
+        <h2>Steven Liu</h2>
+        <p>Web- and Game-developer and GNU/Linux enthusiast.</p>
+        <button onClick={() => { window.location.assign("https://gitlab.com/stvnliu"); }}>My GitLab page</button>
+        <button onClick={() => { window.location.assign("/assets/resume.pdf"); }}>Read my CV</button>
+      </section>
+      <section className='right'>
+        <h2>Extended Project Qualification</h2>
+
+        <h3><a href="/assets/paper.pdf">How can privacy and web inter-connectivity be
+          enshrined as core principles in self-hosted online chat applications?
+        </a></h3>
+        <p>An Edexcel Level 3 Artifact Extended Project Qualification (EPQ) on
+          the topic of web chat applications, awarded an A* grade by Edexcel</p>
+        <p>You may find the relevant GitLab repositories here:</p>
+        <span>
+          GitHub repositories for
+          <a href="https://github.com/stvnliu/epq-web">web</a> and
+          <a href="https://github.com/stvnliu/epq-api">backend API</a>
+        </span><br />
+        <span>
+          GitLab repository for
+          <a href="https://gitlab.com/stvnliu/epq-web">web</a> and
+          <a href="https://gitlab.com/stvnliu/epq-api">backend API</a>
+        </span>
+        <hr />
 
-    return (
-        <main ref={refContainer}>
-            <h1>Website Under Construction</h1>
-            <section className='left'>
-                <h2>Steven Liu</h2>
-                <p>I write sometimes-functional code in JavaScript React, Java, and a bit of Python.</p>
-            </section>
-            <section className='right'>
-                <h2>Changing Objects Position</h2>
-                <p>The cubes position is now changing</p>
-            </section>
+      </section>
 
-            <section className='left'>
-                <h2>Changing Objects Rotation</h2>
-                <p>The cubes rotation is now changing</p>
-            </section>
+      <section className='left'>
+        <h2><a href='https://gitlab.com/stvnliu/proteinpedia-next'>
+          Proteinpedia
+        </a>
+        </h2>
+        <p>A content management platform for displaying and managing informatio
+          n of proteins and other chemical</p>
+        <hr></hr>
+      </section>
 
-            <section className='right'>
-                <h2>Changing Camera Position</h2>
-                <p>The camera position is now changing</p>
-            </section>
+      <section className='right'>
+        <h2>Changing Camera Position</h2>
+        <p>The camera position is now changing</p>
+      </section>
 
-            <section className='left'>
-                <h2>You are at the bottom</h2>
-                <p>The cube will now be auto rotating</p>
-                <p>
-                    Now you can scroll back to the top to reverse the animation
-                </p>
-            </section>
-        </main>
-    )
+      <section className='left'>
+        <h2>You are at the bottom</h2>
+        <p>The cube will now be auto rotating</p>
+        <p>
+          Now you can scroll back to the top to reverse the animation
+        </p>
+      </section>
+    </main>
+  )
 }