new-layout

AB10110F · Jul 22, 2023 · 1e3ac7e · 1e3ac7e
1 parent b82050f
commit 1e3ac7e
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 118 deletions.
diff --git a/src/app/page.module.css b/src/app/page.module.css
@@ -1,38 +1,47 @@
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  min-height: 100vh;
   color: white;
+  padding: 30px;
 }
 
-.main h1
+.main h1{font-size: 10vh; margin: 0 0 2% 0}
+
+.grid
 {
-  font-size: 100px;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 72vh;
+  gap: 25px;
 }
 
-.home
+.column
 {
-  width: 70%;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
+  gap:25px;
+  width: 35%;
 }
 
-.canvasContainer
+.canvas
 {
-  width: 380px;
-  background-color: rgb(31, 31, 31);
   border: 1px solid rgb(113, 113, 113);
+  height: 40%;
 }
 
-.canvasContent
+.bars
 {
-  height: 180px;
+  border: 1px solid rgb(113, 113, 113);
+  height: 40%;
 }
 
-.projects
+.controls
+{
+  border: 1px solid rgb(113, 113, 113);
+  height: 20%;
+}
+/* .projects
 {
   display: flex;
   flex-direction: row;
@@ -90,4 +99,4 @@
     justify-content: center;
     align-items: center;
     height: 180px;
-}
+} */
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -13,55 +13,16 @@ export default function Home() {
   return (
     <main className={styles.main}>
       <Typewriter text={'  Front-End Developer'}/> {/* TODO What is wrong with the position 1? */}
-        <div className={styles.home}>
+      <div className={styles.grid}>
             <Terminal/>
-            <div className={styles.canvasContainer}>
-                <section className={styles.windowOptions}>
-                    <article>
-                        <Minus />
-                        <Square />
-                        <X />
-                    </article>
-                </section>
-                <section className={styles.canvasContent}>
+            <section className={styles.column}>
+                <article className={styles.canvas}>
                     <Model/>
-                </section>    
-            </div>
-        </div>
-      <h1 className={dotFont.className}>Projects</h1>
-      <div className={styles.projects}>
-          <div className={styles.windowContainer}>
-              <section className={styles.windowOptions}>
-                  <article>
-                      <Minus />
-                      <Square />
-                      <X />
-                  </article>
-              </section>
-              <section className={styles.windowContent}>404</section>
-          </div>
-          <div className={styles.windowContainer}>
-              <section className={styles.windowOptions}>
-                  <article>
-                      <Minus />
-                      <Square />
-                      <X />
-                  </article>
-              </section>
-              <section className={styles.windowContent}>404</section>
-          </div>
-          <div className={styles.windowContainer}>
-              <section className={styles.windowOptions}>
-                  <article>
-                      <Minus />
-                      <Square />
-                      <X />
-                  </article>
-              </section>
-              <section className={styles.windowContent}>404</section>
-          </div>
+                </article>
+                <article className={styles.bars}></article>
+                <article className={styles.controls}>hi</article>
+            </section>
       </div>
-      <h1 className={dotFont.className}>Social Media</h1>
     </main>
   )
 }
diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx
@@ -4,7 +4,7 @@ import p5 from 'p5';
 import styles from '../css/dots.module.css'
 
 const Dots = () => {
-  const sketchRef = useRef<HTMLDivElement>(null);
+  const sketchRef = useRef<HTMLDivElement>(null!);
 
   useEffect(() => {
     let dotSize: number = 4;

diff --git a/src/components/Model.tsx b/src/components/Model.tsx
@@ -9,10 +9,10 @@ const AsciiCube = () => {
 
     useEffect(() => {
       const canvas = canvasRef.current;
-      const renderer = new THREE.WebGLRenderer({ canvas });
+      const renderer = new THREE.WebGLRenderer({ canvas/* , alpha: true  */});
 
       const width = 380;
-      const height = 400;
+      const height = 170;
 
       canvas.style.width = `${width}px`;
       canvas.style.height = `${height}px`;
@@ -29,7 +29,7 @@ const AsciiCube = () => {
       camera.position.z = 5;
 
       const geometry = new THREE.BoxGeometry(1, 1, 1);
-      const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
+      const material = new THREE.MeshBasicMaterial({ color: 0xffffff, /* transparent:true  */});
       const cube = new THREE.Mesh(geometry, material);
       scene.add(cube);
 

diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
@@ -2,12 +2,11 @@
 import React from 'react';
 import { useState, useRef, useEffect } from 'react';
 import styles from '../css/terminal.module.css'
-import { ChevronRight, X, Minus, Square } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 
 
 const Terminal = () => {
 
-
     const banner = [
         "██╗    ██╗███████╗██╗      ██████╗ ██████╗ ███╗   ███╗███████╗ ",
         "██║    ██║██╔════╝██║     ██╔════╝██╔═══██╗████╗ ████║██╔════╝ ",
@@ -65,14 +64,6 @@ const Terminal = () => {
     }, [output]);
 
     return (
-        <div className={styles.windowContainer}>
-            <section className={styles.windowOptions}>
-                <article>
-                    <Minus />
-                    <Square />
-                    <X />
-                </article>
-            </section>
             <div  ref={preRef} className={styles.terminal}>
                 {<pre className={styles.history}>{output}</pre>}
                 {/* <pre style={{ color: 'green' }}>{output}</pre>*/}
@@ -117,7 +108,6 @@ const Terminal = () => {
                     </article>
                 </section>
             </div>
-        </div>
     )
 };
 

diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css
@@ -1,15 +1,10 @@
-.windowContainer
-{
-    width: 60%;
-    box-sizing: border-box;
-    animation: bottom 1s ease;
-}
 .terminal 
 {
-    height: 400px;
+    animation: bottom 1s ease;
+    box-sizing: border-box;
+    width: 65%;
     overflow-Y:auto;
     overflow-X:hidden;
-    background-color: rgb(31, 31, 31);
     color: white;
     font-size: 15px;
     border: 1px solid rgb(113, 113, 113);
@@ -30,39 +25,6 @@
     }
   }
 
-.windowOptions
-{
-    display: flex;
-    justify-content: end;
-    background-color: rgb(255, 255, 255);
-    height: 30px;
-    align-items: center;
-    font-size: 15px;
-}
-.windowOptions svg
-{
-    width: 25px;
-    height: 30px;
-    padding: 0 10px; 
-    color: rgb(142, 142, 142);
-}
-.windowOptions svg:nth-last-child(1):hover
-{
-    background-color: red;
-}
-
-.windowOptions svg:hover
-{
-    background-color: rgb(177, 177, 177);
-    color: white;
-}
-
-.windowOptions article
-{
-    width: 110px;
-    display: flex;
-}
-
 .terminal::-webkit-scrollbar{height: 10px; width: 8px;}
 .terminal::-webkit-scrollbar-thumb{background:#878787; border-radius: 50px;}