responsive-canvas

src/app/layout.tsx

@@ -1,9 +1,10 @@
-/* import '@/css/globals.css' */
-import { Inter } from 'next/font/google'
-import Dots from '@/components/Dots'
+import '@/css/globals.css';
+import { Inter } from 'next/font/google';
+import Dots from '@/components/Dots';
+import {Metadata} from 'next';
 const inter = Inter({ subsets: ['latin'] })
 
-export const metadata = {
+export const metadata: Metadata = {
   title: 'AB10110F',
   description: 'Portfolio',
 }

src/app/page.tsx

@@ -1,11 +1,10 @@
-import Image from 'next/image'
-import styles from './page.module.css'
-import { Metadata } from 'next'
-import  Terminal  from '@/components/Terminal'
-import Typewriter from '@/components/Typewriter'
-import Model from '@/components/Model'
-import localFont from 'next/font/local'
-import { ChevronRight, X, Minus, Square } from 'lucide-react';
+"use client";
+import styles from '../css/page.module.css';
+import  Terminal  from '@/components/Terminal';
+import Typewriter from '@/components/Typewriter';
+import Model from '@/components/Model';
+import Controls from '@/components/Controls'
+import localFont from 'next/font/local';
 
 const dotFont = localFont({ src: './e-dot-digital-7.ttf' })
 
@@ -20,7 +19,9 @@ export default function Home() {
                     <Model/>
                 </article>
                 <article className={styles.bars}></article>
-                <article className={styles.controls}>hi</article>
+                <article className={styles.controls}>
+                    <Controls/>
+                </article>
             </section>
       </div>
     </main>

src/components/Controls.tsx

@@ -0,0 +1,18 @@
+import React, {useState, useEffect, useRef} from 'react';
+import localFont from 'next/font/local';
+import styles from '../css/controls.module.css';
+
+const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf' })
+
+const Controls = () => {
+
+    return (
+      <section className={styles.container}>
+          <input className={styles.checkbox} type="checkbox" />
+          <input className={styles.checkbox} type="checkbox" />
+          <input className={styles.checkbox} type="checkbox" />
+      </section>
+    )
+};
+
+export default Controls;

src/components/Dots.tsx

@@ -1,7 +1,7 @@
-"use client"
+"use client";
 import React, { useEffect, useRef } from 'react';
 import p5 from 'p5';
-import styles from '../css/dots.module.css'
+import styles from '../css/dots.module.css';
 
 const Dots = () => {
   const sketchRef = useRef<HTMLDivElement>(null!);

src/components/Model.tsx

@@ -1,51 +1,51 @@
-"use client"
 import React, { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
+const AsciiCube = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null!);
 
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
 
-const AsciiCube = () => {
-    const canvasRef = useRef<HTMLCanvasElement>(null!);
-
-    useEffect(() => {
-      const canvas = canvasRef.current;
-      const renderer = new THREE.WebGLRenderer({ canvas/* , alpha: true  */});
-
-      const width = 380;
-      const height = 170;
-
-      canvas.style.width = `${width}px`;
-      canvas.style.height = `${height}px`;
-
-      renderer.setSize(width, height);
-
-      const scene = new THREE.Scene();
-      const camera = new THREE.PerspectiveCamera(
-        30,
-        width / height,
-        0.1,
-        1000
-      );
-      camera.position.z = 5;
-
-      const geometry = new THREE.BoxGeometry(1, 1, 1);
-      const material = new THREE.MeshBasicMaterial({ color: 0xffffff, /* transparent:true  */});
-      const cube = new THREE.Mesh(geometry, material);
-      scene.add(cube);
-
-      const animate = () => {
-        requestAnimationFrame(animate);
-
-        cube.rotation.x += 0.01;
-        cube.rotation.y += 0.01;
-
-        renderer.render(scene, camera);
-      };
-
-      animate();
-    }, []);
-
-    return <canvas ref={canvasRef} />;
-  };
-
-  export default AsciiCube;
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
+    camera.position.z = 5;
+
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshBasicMaterial({ color: 0xffffff, /* transparent: true  */});
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    const animate = () => {
+      requestAnimationFrame(animate);
+
+      cube.rotation.x += 0.01;
+      cube.rotation.y += 0.01;
+
+      renderer.render(scene, camera);
+    };
+
+    const onWindowResize = () => {
+      const contenedor = canvas.parentElement;
+      if (contenedor) {
+        camera.aspect = contenedor.clientWidth / contenedor.clientHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(contenedor.clientWidth, contenedor.clientHeight);
+      }
+    };
+
+    onWindowResize();
+    window.addEventListener('resize', onWindowResize);
+
+    animate();
+
+    return () => {
+      window.removeEventListener('resize', onWindowResize);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} />;
+};
+
+export default AsciiCube;

src/components/Terminal.tsx

@@ -1,10 +1,8 @@
-"use client"
 import React from 'react';
 import { useState, useRef, useEffect } from 'react';
 import styles from '../css/terminal.module.css'
 import { ChevronRight } from 'lucide-react';
 
-
 const Terminal = () => {
 
     const banner = [
@@ -15,10 +13,17 @@ const Terminal = () => {
         "╚███╔███╔╝███████╗███████╗╚██████╗╚██████╔╝██║ ╚═╝ ██║███████╗ ",
         " ╚══╝╚══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝",
         "",
-        "You can also check my social media:",
-        "",
-        "GitHub                   CodePen",
-        "Twitter                  Reddit",
+        "________________________________________________",
+        "|      _____________________________           |     Name: Bryant",
+        "| [][] _____________________________ [_][_][_] |     Mail: [email protected]",
+        "| [][] [_][_][_] [_][_][_][_] [_][_] [_][_][_] |     ",
+        "|                                              |     You can also check my",
+        "| [][] [][][][][][][][][][][][][][_] [][][][]  |     social media, just type",
+        "| [][] [_][][][][][][][][][][][][][] [][][][]  |     one of the following options:",
+        "| [][] [__][][][][][][][][][][][][_] [][][][]  |     ",
+        "| [][] [___][][][][][][][][][][][__] [__][][]  |     github             codepen",
+        "|          [_][______________][_]              |     reddit             twitter",
+        "|______________________________________________|",
         "",
         "Type \"help\" to view the available commands"       
     ]
@@ -28,7 +33,12 @@ const Terminal = () => {
         "banner          Displays the initial greeting",
         "help            As you can see it shows a list of commands",
         "skills          Displays the technologies I'm able to use",
+        "projects        List of my projects",
         "info            Shows all the information of the project",
+        "github          Opens github in a new tab",
+        "codepen         Opens codpen in a new tab",
+        "reddit          Opens reddit in a new tab",
+        "twitter         Opens twitter in a new tab",
         "cls             Clears the content of the terminal",
     ]
 
@@ -37,20 +47,29 @@ const Terminal = () => {
         "",
         "TS     [█████████████▁▁▁▁▁▁▁▁▁▁]         PHP    [██████████████▁▁▁▁▁▁▁▁▁]",
         "",
+        "Angular[█████████__▁▁▁▁▁▁▁▁▁▁▁▁]         Go     [█████████████____▁▁▁▁▁▁]",
+        "",
         "React  [███████████▁▁▁▁▁▁▁▁▁▁▁▁]         Git    [██████████████████▁▁▁▁▁▁]",
+    ]
 
+    const projects = [
+        " _ __  _ __    ___  _________   ,___ ________,",
+        "( /  )( /  )  /  ()( /(  /     /   /(  /  (   ",
+        " /--'  /--<  /   /  /   /--   /       /    `. ",
+        "/     /   \\_(___/ _/_ (/____/(___/  _/   (___)",
+        "                 //                           ",
+        "                (/                            ",
+        "",
+        "Still working on them, most of them are private, sorry :(",
     ]
 
     const info = [
-        "888b    | 888~~  Y88b    / ~~~888~~~", 
-        "|Y88b   | 888___  Y88b  /     888   ",
-        "| Y88b  | 888      Y88b/      888   ", 
-        "|  Y88b | 888      /Y88b      888   ", 
+        "888b    | 888~~  Y88b    / ~~~888~~~      This project was built with Next.js 13", 
+        "|Y88b   | 888___  Y88b  /     888         The icons I used are the lucide-icons",
+        "| Y88b  | 888      Y88b/      888         Dots grid background was made with p5.js", 
+        "|  Y88b | 888      /Y88b      888         3D model was handled with three.js", 
         "|   Y88b| 888     /  Y88b     888   ", 
         "|    Y888 888___ /    Y88b    888   ",
-        "",        
-        "This project was built with Next.js 13",
-        "The icons I used are the lucide-icons"
     ]
 
     const preRef = useRef<HTMLDivElement>(null);
@@ -72,7 +91,7 @@ const Terminal = () => {
                     <article className={styles.promptDown}>
                         <ChevronRight />
                         <input 
-                            type="text" 
+                            type="text"
                             value={input} 
                             onChange={e=>setInput(e.target.value)}
                             onKeyDown={e=>{
@@ -91,9 +110,28 @@ const Terminal = () => {
                                         case "skills":
                                             newOutput += skills.join('\n')
                                             break;
+                                        case "projects":
+                                            newOutput += projects.join('\n')
+                                            break;
                                         case "info":
                                             newOutput += info.join('\n')
                                             break;
+                                        case "github":
+                                            newOutput += "github"
+                                            window.open("https://github.com/AB10110F", '_blank');
+                                            break;
+                                        case "codepen":
+                                            newOutput += "codepen"
+                                            window.open("https://codepen.com/AB10110F", '_blank');
+                                            break;
+                                        case "reddit":
+                                            newOutput += "reddit"
+                                            window.open("https://github.com/AB10110F", '_blank');
+                                            break;
+                                        case "twitter":
+                                            newOutput += "twitter"
+                                            window.open("https://github.com/AB10110F", '_blank');
+                                            break;
                                         case "cls":
                                             newOutput = ""
                                             break;

src/components/Typewriter.tsx

@@ -1,6 +1,5 @@
-"use client"
 import React, {useState, useEffect, useRef} from 'react';
-import localFont from 'next/font/local'
+import localFont from 'next/font/local';
 
 const dotFont = localFont({ src: '../app/e-dot-digital-7.ttf' })
 

src/css/controls.module.css

@@ -0,0 +1,30 @@
+.container
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+}
+
+.checkbox
+{
+    width: 2.3em;
+    height: 2.3em;
+    background-color: none;
+    border-radius: 50%;
+    vertical-align: middle;
+    border: 2px solid #ddd;
+    appearance: none;
+    -webkit-appearance: none;
+    outline: none;
+    cursor: pointer;
+}
+
+.checkbox:checked {
+    background-color: white;
+    box-shadow:
+    0 0 60px 20px #fff,  /* inner white */
+    0 0 100px 25px #f0f, /* middle magenta */
+    0 0 140px 30px #0ff; /* outer cyan */
+}