Trying to add floating logos

src/App.tsx

@@ -1,9 +1,22 @@
+import { useEffect, useRef } from "react";
 import Background from "./components/Background";
 import "./main.css";
+import { init } from "./scripts/lang";
 
 export function App() {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+      init(canvasRef.current);
+  }, []);
+
   return (
+    <>
+      <div id="language-div">
+				<canvas ref={canvasRef} id="language-renderer"></canvas>
+			</div>
       <Background />
+    </>
   );
 }
 

src/components/Background.tsx

@@ -9,9 +9,11 @@ export default function Background() {
     }, []);
 
     return (
-        <>
-            <div className="gradient-overlay"></div>
-            <canvas ref={canvasRef} />
-        </>
+        <div id="background">
+            <div className="gradient-overlay">
+                <div style={{marginTop: "10%", marginLeft: "85%", animationDelay: "-1s"}}><img src={require("../images/android.svg")} /></div>
+            </div>
+            <canvas ref={canvasRef} id="background-renderer" />
+        </div>
     );
 }

src/main.css

@@ -83,7 +83,7 @@ body {
     rotate: 90deg;
 }
 #language-div {
-    position: absolute; padding: 10px; padding-right: 20px; z-index: 3;
+    position: absolute; padding: 10px; z-index: 3; right: 20px;
 }
 #language-renderer {
     width: 100%; height: 100vh; display: block; margin: 0; padding: 0; cursor: grab;
@@ -94,6 +94,10 @@ body {
 #projects {
     position: absolute; top: 50vh; left: 20%; transform: translateX(-50%); z-index: 11; width: 900px; height: auto; display: grid; grid-template-columns: 50% 50%; left: 50%; width: 90%;
 }
+#background {
+    position: fixed;
+    z-index: -10;
+}
 #footer {
     background: linear-gradient(to bottom left, rgb(41, 11, 41),  rgb(44, 18, 44)); 
     margin-bottom: 0px; 
@@ -128,7 +132,9 @@ body {
   background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.5), rgba(107, 29, 107, 0.3));
   background: -webkit-linear-gradient(to bottom right, rgba(0, 0, 0, 0.5), rgba(107, 29, 107, 0.3) 100%);
   background: -moz-linear-gradient(to bottom right, rgba(0, 0, 0, 0.5), rgba(107, 29, 107, 0.3) 100%);
-  position: fixed; width: 100%; height: 100%;
+  position: fixed;
+  width: 100%; height: 100%;
+  top: 0px;
   z-index: 1000000;
 }
 .devider {
@@ -287,6 +293,8 @@ a.icon:hover {
     width: fit-content; height: fit-content; animation: float 5s ease-in-out infinite;
 }
 .gradient-overlay img {
+    position: absolute;
+    z-index: 100000000;
     width: 7vh; height: 7vh; transform-origin: 50% 50%; animation: float-rotate 6s ease-in-out infinite;
     filter: blur(0.5svh);
     transition-duration: 0.5s;
@@ -294,6 +302,7 @@ a.icon:hover {
 .gradient-overlay img:hover {
     filter: none;
     scale: 1.4;
+    cursor: pointer;
 }
 .rotate-away {
     transform-origin: 50% 0px 50vh;

src/scripts/background.js

@@ -11,7 +11,7 @@ export async function init(canvas) {
     const scene = new THREE.Scene();
     const camera = new THREE.PerspectiveCamera(0, window.innerWidth / window.innerHeight, 0.1, 1000);
     const renderer = new THREE.WebGLRenderer({antialias: false, canvas: canvas});
-    renderer.setSize(window.innerWidth/2, window.innerHeight);
+    renderer.setSize(window.innerWidth, window.innerHeight);
     const composer = new EffectComposer( renderer );
     
     const uniforms = {

src/scripts/lang.js

@@ -4,6 +4,7 @@ import engPath from '../images/english.png'
 import nldPath from '../images/dutch.jpg'
 import rusPath from '../images/russian.jpg'
 
+export async function init(canvas) {
   let language = "en";
 
   function determineLanguage(){
@@ -42,7 +43,6 @@ const aspect = 1;
   const near = 0.1;
   const far = 5;
 
-const canvas = document.querySelector('#language-renderer');
   const renderer = new THREE.WebGLRenderer({antialias: false, canvas});
   renderer.setSize( 90,90 );
   renderer.setClearColor( 0xffffff, 0);
@@ -183,7 +183,6 @@ canvas.addEventListener("mouseleave", endDrag);
   canvas.addEventListener('mouseup', endDrag);
   canvas.addEventListener('touchend', endDrag);
 
-//cube.rotation.x = 0.5;
   function render(time) {
     renderer.render(scene, camera);
 
@@ -193,3 +192,4 @@ function render(time) {
     requestAnimationFrame(render);
   }
   requestAnimationFrame(render);
+}