From 1e3ac7efe6e78cca213d56aa1f73e8e7eb6aa039 Mon Sep 17 00:00:00 2001 From: "A. Bryant" Date: Sat, 22 Jul 2023 17:32:04 -0600 Subject: [PATCH] new-layout --- src/app/page.module.css | 41 +++++++++++++++++----------- src/app/page.tsx | 53 +++++-------------------------------- src/components/Dots.tsx | 2 +- src/components/Model.tsx | 6 ++--- src/components/Terminal.tsx | 12 +-------- src/css/terminal.module.css | 44 +++--------------------------- 6 files changed, 40 insertions(+), 118 deletions(-) diff --git a/src/app/page.module.css b/src/app/page.module.css index d226c8c..9734abc 100644 --- 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; -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index dc7a724..bda9822 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -13,55 +13,16 @@ export default function Home() { return (
{/* TODO What is wrong with the position 1? */} -
+
-
-
-
- - - -
-
-
+
+
-
-
-
-

Projects

-
-
-
-
- - - -
-
-
404
-
-
-
-
- - - -
-
-
404
-
-
-
-
- - - -
-
-
404
-
+ +
+
hi
+
-

Social Media

) } diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx index 6fc77a3..c3744da 100644 --- 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(null); + const sketchRef = useRef(null!); useEffect(() => { let dotSize: number = 4; diff --git a/src/components/Model.tsx b/src/components/Model.tsx index 26f6e88..0059cc9 100644 --- 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 index 7eee447..5a14e1e 100644 --- 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 ( -
-
-
- - - -
-
{
{output}
} {/* 
{output}
*/} @@ -117,7 +108,6 @@ const Terminal = () => {
-
) }; diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css index fb90414..4154b1e 100644 --- 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;}