sphere

src/app/page.tsx

@@ -7,8 +7,6 @@ import Model from '@/components/Model';
 import Controls from '@/components/Controls';
 import Image from 'next/image'
 
-var enableCrt:boolean = true;
-
 export default function Home() {
 
   const [currentCrt, setCrt] = useState(false)

src/components/Controls.tsx

@@ -22,7 +22,7 @@ const Controls: React.FC<ControlsProps> = ({ changeState }) => {
         checked={crt}
         onChange={handleChange}
       />
-      <label htmlFor="">CRT Controls</label>
+      <label htmlFor="">CRT EFFECT</label>
     </section>
   );
 };

src/components/Model.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
-const AsciiCube = () => {
+const Sphere = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null!);
 
   useEffect(() => {
@@ -11,18 +11,20 @@ const AsciiCube = () => {
     const scene = new THREE.Scene();
     const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
     camera.position.z = 5;
+    camera.rotateZ(-0.2);
 
-    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const geometry = new THREE.SphereGeometry(1, 22, 22, 0, Math.PI * 2, 0, Math.PI * 2);
     const edges = new THREE.EdgesGeometry(geometry);
     const material = new THREE.LineBasicMaterial({ color: 0xffffff });
-    const wireframe = new THREE.LineSegments(edges, material);
-    scene.add(wireframe);
+    const sphere = new THREE.LineSegments(edges, material);
+    scene.add(sphere);
+    /* sphere.rotation.z = 10 */
 
     const animate = () => {
       requestAnimationFrame(animate);
 
-      wireframe.rotation.x += 0.01;
-      wireframe.rotation.y += 0.01;
+      /* sphere.rotation.x += 0.01; */
+      sphere.rotation.y += 0.01;
 
       renderer.render(scene, camera);
     };
@@ -49,4 +51,4 @@ const AsciiCube = () => {
   return <canvas ref={canvasRef} />;
 };
 
-export default AsciiCube;
+export default Sphere;

src/components/Terminal.tsx

@@ -136,23 +136,27 @@ const Terminal = () => {
     }
 
     const preRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef(document.createElement("input"))
     const [input, setInput] = useState("");
     const [output, setOutput] = useState(start.join('\n'));
 
     useEffect(() => {
         if (preRef.current) {
           preRef.current.scrollTop = preRef.current.scrollHeight;
         }
+
+        inputRef.current.focus()
     }, [output]);
 
     return (
-            <div  ref={preRef} className={styles.terminal}>
+            <div  ref={preRef} className={styles.terminal} onClick={e=>inputRef.current.focus()}>
                 <pre style={vt323.style} className={styles.history}>{output}</pre>
                 <section className={styles.prompt}>
                     <article style={vt323.style}>@guest from portfolio</article>
                     <article className={styles.promptDown}>
                         <p style={vt323.style}>&gt;</p>
                         <input 
+                            ref={inputRef}
                             style={vt323.style}
                             type="text"
                             value={input} 

src/components/Typewriter.tsx

@@ -14,7 +14,7 @@ const Typewriter = ({ text }: { text:string }) => {
         }, 80);
     }, [currentText]);
 
-    return <h1 className={dotFont.className}>&gt;{currentText}|</h1>
+    return <h1 className={dotFont.className}>&gt;{currentText}</h1>
 };
 
-export default Typewriter;
+export default Typewriter;

src/css/page.module.css

@@ -59,8 +59,8 @@
   border: 3px solid rgb(255, 255, 255);
   height: 40%;
   animation: right 1.5s ease;
-  background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 5%, transparent 0, transparent 50%), repeating-linear-gradient(180deg, #ffffff 0, #ffffff 5%, transparent 0, transparent 50%);
-        background-size: 3em 3em;
+  background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 3%, transparent 0, transparent 50%), repeating-linear-gradient(180deg, #ffffff 0, #ffffff 3%, transparent 0, transparent 50%);
+        background-size: 2.5em 2.5em;
         background-color: #00000000;
         opacity: 1;
 }
@@ -88,7 +88,7 @@
 .scanner
 {
   animation: scanning 2s infinite linear;
-  background-color: rgba(133, 133, 133, 0.266);
+  background-color: rgba(133, 133, 133, 0.266); 
   position: fixed;
   top: 0;
   left: 0;
@@ -145,4 +145,10 @@
       font-size: 5vh;
       text-align: center;
     }
+
+    .bright h1 
+    {
+      font-size: 5vh;
+      text-align: center;
+    }
 }

src/css/terminal.module.css

@@ -15,13 +15,15 @@
         transform: translateY(500px);
         opacity: 0%;
         filter: blur(2px);
+        height: 0; /* This is to compensate the effect that makes the terminal be focus from the start */
     }
     75%{
         transform: translateY(-10px);
     }
     100%{
         transform: translateY(0);
         opacity: 100%;
+        height: 100;
     }
 }
 
@@ -64,7 +66,7 @@
     }
     .prompt input
     {
-        font-size: 125%;
+        font-size: 100%;
     }
 }
 
@@ -81,4 +83,4 @@
         white-space: pre-wrap;
         word-wrap: break-word;
     }
-}
+}