From 26ca1ad4084b142853eb22be6ae910f6de26d132 Mon Sep 17 00:00:00 2001 From: "A. Bryant" Date: Sat, 19 Aug 2023 17:21:20 -0600 Subject: [PATCH] terminal-css BEM added --- public/next.svg | 1 - public/vercel.svg | 1 - src/app/page.tsx | 10 +++---- src/components/CrtSwitch.tsx | 2 +- src/components/Dots.tsx | 2 +- src/components/Terminal.tsx | 42 +++++++++----------------- src/components/Typewriter.tsx | 2 +- src/css/globals.css | 24 ++------------- src/css/page.module.css | 55 +++++++++++++++++++---------------- src/css/terminal.module.css | 55 ++++++++++++++++++----------------- 10 files changed, 81 insertions(+), 113 deletions(-) delete mode 100644 public/next.svg delete mode 100644 public/vercel.svg diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 763fd00..36691e9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -15,7 +15,7 @@ export default function Home() { const {language, setLanguage} = useLanguageContext(); const scanlines:string = currentCrt ? styles.scanlines : styles.hidden; const scanner:string = currentCrt ? styles.scanner : styles.hidden; - const bright:string = currentCrt ? styles.bright : styles.main; + const text:string = styles.main + " " + (currentCrt ? styles.bright: ""); let title:string if(language == 'English') @@ -32,13 +32,13 @@ export default function Home() { } return ( -
+
image
-
) -} +} \ No newline at end of file diff --git a/src/components/CrtSwitch.tsx b/src/components/CrtSwitch.tsx index 1fb1c37..5f0c88f 100644 --- a/src/components/CrtSwitch.tsx +++ b/src/components/CrtSwitch.tsx @@ -46,4 +46,4 @@ const CrtSwtich: React.FC = ({ changeState }) => { ); }; -export default CrtSwtich; +export default CrtSwtich; \ No newline at end of file diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx index 1e631d4..ecfa5d9 100644 --- a/src/components/Dots.tsx +++ b/src/components/Dots.tsx @@ -102,4 +102,4 @@ const Dots = () => { return
; }; -export default Dots; +export default Dots; \ No newline at end of file diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx index 39919e0..5623cff 100644 --- a/src/components/Terminal.tsx +++ b/src/components/Terminal.tsx @@ -40,7 +40,7 @@ const Terminal = () => { "| [_][______________][_] | (°‿°) reddit ,(u°)> twitter", "|______________________________________________|", "", - "Type \"help\" to view the available commands\n\n" + "Type \"help\" to view the available commands\n\n", ] help = [ @@ -64,7 +64,6 @@ const Terminal = () => { "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", " // ", " (/ \n\n", - "", "Still working on them, most of them are private, sorry :(\n\n", ] @@ -84,7 +83,7 @@ const Terminal = () => { "=^..^= github codepen", "(°‿°) reddit ,(u°)> twitter", "", - "Type \"help\" to view the available commands\n" + "Type \"help\" to view the available commands\n\n" ] smallHelp= [ @@ -98,17 +97,17 @@ const Terminal = () => { "codepen: Opens codpen in a new tab\n", "reddit: Opens reddit in a new tab\n", "twitter: Opens twitter in a new tab\n", - "cls: Clears the content of the terminal\n", + "cls: Clears the content of the terminal\n\n", ] smallProjects = [ - "Still working on them, most of them are private, sorry :(\n" + "Still working on them, most of them are private, sorry :(\n\n" ] smallInfo = [ "This project was build with Next.js 13", "3D model was handled with three.js", - "Dots grid background was made with p5.js\n", + "Dots grid background was made with p5.js\n\n", ] } else if(language == 'Spanish') @@ -149,16 +148,6 @@ const Terminal = () => { "cls Borra el contenido de la terminal\n\n", ] - skills = [ - "CSS [████████████▁▁▁▁] 75% C++ [████████████▁▁▁▁] 75%", - "", - "TS [████████▁▁▁▁▁▁▁▁] 50% PHP [████████▁▁▁▁▁▁▁▁] 50%", - "", - "Angular [███████▁▁▁▁▁▁▁▁▁] 44% Go [█████████▁▁▁▁▁▁▁] 57%", - "", - "React [████████▁▁▁▁▁▁▁▁] 50% Git [████████████▁▁▁▁] 75%\n\n", - ] - projects = [ " _ __ _ __ ___ _________ ,___ ________,", "( / )( / ) / ()( /( / / /( / ( ", @@ -166,7 +155,6 @@ const Terminal = () => { "/ / \\_(___/ _/_ (/____/(___/ _/ (___)", " // ", " (/ \n\n", - "", "Aún no están dispnibles :(\n\n", ] @@ -186,7 +174,7 @@ const Terminal = () => { "=^..^= github codepen", "(°‿°) reddit ,(u°)> twitter", "", - "Type \"help\" to view the available commands\n" + "Type \"help\" to view the available commands\n\n" ] smallHelp= [ @@ -200,17 +188,17 @@ const Terminal = () => { "codepen: Abre codepen en una nueva pestaña\n", "reddit: Abre reddit en una nueva pestaña\n", "twitter: Abre twitter en una nueva pestaña\n", - "cls: Borra el contenido de la terminal\n", + "cls: Borra el contenido de la terminal\n\n", ] smallProjects = [ - "Aún no están dispnibles :(\n", + "Aún no están dispnibles :(\n\n", ] smallInfo = [ "Este proyecto fue hecho con Next.js 13", "Él modelo 3D fue añadido con three.js", - "La cuadrícula de puntos fue hecha con p5.js\n", + "La cuadrícula de puntos fue hecha con p5.js\n\n", ] } else @@ -251,7 +239,7 @@ const Terminal = () => { "", "Reac [████████▁▁▁▁▁▁▁▁] 50%", "", - "Git [████████████▁▁▁▁] 75%\n", + "Git [████████████▁▁▁▁] 75%\n\n", ] let start:string[]; @@ -280,10 +268,10 @@ const Terminal = () => { return (
inputRef.current.focus()}> - 
{output}
-
+ 
{output}
+
@guest from portfolio
-
+

>

{ window.innerWidth<=760 ? newOutput += smallInfo.join('\n') : 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.io/AB10110F", '_blank'); break; case "reddit": - newOutput += "reddit" window.open("https://www.reddit.com/user/AB10110F", '_blank'); break; case "twitter": - newOutput += "twitter" window.open("https://twitter.com/AB10110F", '_blank'); break; case "cls": diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx index 94b7c17..a527ac4 100644 --- a/src/components/Typewriter.tsx +++ b/src/components/Typewriter.tsx @@ -26,4 +26,4 @@ const Typewriter = ({ text }: { text:string }) => { return

>{currentText}

}; -export default Typewriter; +export default Typewriter; \ No newline at end of file diff --git a/src/css/globals.css b/src/css/globals.css index 5bbf830..85ad18a 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -1,15 +1,3 @@ - :root { - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); - } - * { box-sizing: border-box; padding: 0; @@ -20,9 +8,7 @@ ::-webkit-scrollbar{height: 10px; width: 10px;} ::-webkit-scrollbar-thumb{background:#fdfdfd; border-radius: 0px;} -html{ - background-color: black; /*TODO*/ -} +html{ background-color: black; } html, body { @@ -33,10 +19,4 @@ body { a { color: inherit; text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} +} \ No newline at end of file diff --git a/src/css/page.module.css b/src/css/page.module.css index 5064009..fc8472c 100644 --- a/src/css/page.module.css +++ b/src/css/page.module.css @@ -13,20 +13,8 @@ margin: 0 0 2% 0 } -.bright -{ - display: flex; - flex-direction: column; - height: 100vh; - color: white; - padding: 30px; - text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.8em white; -} - -.bright input{ - text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.8em white; -} - +.bright{ text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.8em white; } +.bright input { text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.8em white; } .bright h1{ font-size: 10vh; margin: 0 0 2% 0 @@ -41,7 +29,7 @@ gap: 25px; } -.column +.aside { display: flex; flex-direction: column; @@ -75,7 +63,7 @@ opacity: 1; } -.controls +.crtSwitch { border: 3px solid rgb(255, 255, 255); height: 20%; @@ -140,15 +128,40 @@ @media only screen and (max-width: 1250px) and (min-width: 760px) { + .grid { flex-direction: column} + .aside + { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + height: 100%; + width: 100%; + } .languageContainer { flex-direction: column; + grid-area: 1 / 1 / 3 / 2; + height: 100%; + width: 100%; } .canvas { height: 75%; width: 100%; } + .bars + { + height: 100%; + } + .crtSwitch + { + height: 100%; + } + .main h1 + { + font-size: 7vh; + height: 18vh; + } } @media only screen and (max-width: 760px) @@ -157,7 +170,7 @@ { flex-direction: column; } - .column + .aside { width: 100%; height: 150%; @@ -168,16 +181,8 @@ text-align: center; margin: 0 0 7% 0; height: 12vh; - text-align: center; - justify-content: center; } - .bright h1 - { - font-size: 5vh; - text-align: center; - margin: 0 0 7% 0; - } .canvas { width: 45%; diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css index 8e180e6..b60ee58 100644 --- a/src/css/terminal.module.css +++ b/src/css/terminal.module.css @@ -9,45 +9,25 @@ border: 3px solid rgb(255, 255, 255); } -@keyframes bottom -{ - 0%{ - 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; - } -} - -.history +.terminal__history { padding: 15px 15px 0px 15px; - /* white-space: pre-wrap; - word-wrap: break-word; */ width: 100%; color: white; } -.prompt +.terminal__prompt { padding: 0 15px 15px 15px; } -.promptDown +.terminal__inputRow { display: flex; flex-direction: row; } -.prompt input +.terminal__prompt input { border: none; outline: none; @@ -58,13 +38,34 @@ font-size: 3vh; } -@media only screen and (max-width: 1250px) +@keyframes bottom +{ + 0%{ + 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; + } +} + +/* @media only screen and (max-width: 1250px) */ +@media only screen and (max-width: 1250px) and (min-width: 760px) { .terminal { font-size: 125%; + width: 100%; + height: 135%; } - .prompt input + .terminal__prompt input { font-size: 100%; } @@ -78,7 +79,7 @@ height: 100%; } - .history + .terminal__history { white-space: pre-wrap; word-wrap: break-word;