So I'm trying to make a portafolio with three.js. The problem is that I can't see the object in the page and I don't know what is wrong with my code. here is the project https://codepen.io/BernardoOlisan/pen/vYJmpVZ What is wrong with my code?

<h1>Three.js</h1>
<canvas id="bg"></canvas>

CSS

canvas {
  position: relative;
  width: 100%;
  top: 200px;
}

JS

    // Main js for Three.js seciton work
import * as THREE from "https://cdn.skypack.dev/three";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.ineerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
camera.position.setZ(30);

renderer.render( scene, camera)

const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 )
const material = new THREE.MeshBasicMaterial( { color: 0xFF6347 } );
const torus = new THREE.Mesh( geometry, material );

scene.add(torus)

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
}

animate()