Skip to content

Commit

Permalink
terminal-css BEM added
Browse files Browse the repository at this point in the history
  • Loading branch information
@AB10110F
AB10110F committed Aug 19, 2023
1 parent 411d3d1 commit 26ca1ad
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 113 deletions.
1 change: 0 additions & 1 deletion public/next.svg
View file

This file was deleted.

1 change: 0 additions & 1 deletion public/vercel.svg
View file

This file was deleted.

10 changes: 5 additions & 5 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -32,25 +32,25 @@ export default function Home() {
}

return (
<main className={bright}>
<main className={text}>
<span className={scanner}></span>
<Image src="/scanlines.jpg" width={500} height={500} className={scanlines} alt="image" />
<Typewriter text={title}/>
<div className={styles.grid}>
<Terminal/>
<aside className={styles.column}>
<aside className={styles.aside}>
<section className ={styles.languageContainer}>
<article className={styles.canvas}>
<Model/>
</article>
<LanguageSwitch/>
</section>
<article className={styles.bars}></article>
<article className={styles.controls}>
<article className={styles.crtSwitch}>
<CrtSwitch changeState={(currentCrt) => setCrt(currentCrt)} />
</article>
</aside>
</div>
</main>
)
}
}
2 changes: 1 addition & 1 deletion src/components/CrtSwitch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,4 @@ const CrtSwtich: React.FC<CrtProps> = ({ changeState }) => {
);
};

export default CrtSwtich;
export default CrtSwtich;
2 changes: 1 addition & 1 deletion src/components/Dots.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,4 +102,4 @@ const Dots = () => {
return <div className={styles.background} ref={sketchRef} />;
};

export default Dots;
export default Dots;
42 changes: 13 additions & 29 deletions src/components/Terminal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -64,7 +64,6 @@ const Terminal = () => {
"/ / \\_(___/ _/_ (/____/(___/ _/ (___)",
" // ",
" (/ \n\n",
"",
"Still working on them, most of them are private, sorry :(\n\n",
]

Expand All @@ -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= [
Expand All @@ -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')
Expand Down Expand Up @@ -149,24 +148,13 @@ 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 = [
" _ __ _ __ ___ _________ ,___ ________,",
"( / )( / ) / ()( /( / / /( / ( ",
" /--' /--< / / / /-- / / `. ",
"/ / \\_(___/ _/_ (/____/(___/ _/ (___)",
" // ",
" (/ \n\n",
"",
"Aún no están dispnibles :(\n\n",
]

Expand All @@ -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= [
Expand All @@ -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
Expand Down Expand Up @@ -251,7 +239,7 @@ const Terminal = () => {
"",
"Reac [████████▁▁▁▁▁▁▁▁] 50%",
"",
"Git [████████████▁▁▁▁] 75%\n",
"Git [████████████▁▁▁▁] 75%\n\n",
]

let start:string[];
Expand Down Expand Up @@ -280,10 +268,10 @@ const Terminal = () => {

return (
<div ref={preRef} className={styles.terminal} onClick={e=>inputRef.current.focus()}>
<pre style={vt323.style} className={styles.history}>{output}</pre>
<section className={styles.prompt}>
<pre style={vt323.style} className={styles.terminal__history}>{output}</pre>
<section className={styles.terminal__prompt}>
<article style={vt323.style}>@guest from portfolio</article>
<article className={styles.promptDown}>
<article className={styles.terminal__inputRow}>
<p style={vt323.style}>&gt;</p>
<input
ref={inputRef}
Expand Down Expand Up @@ -315,19 +303,15 @@ const Terminal = () => {
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":
Expand Down
2 changes: 1 addition & 1 deletion src/components/Typewriter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@ const Typewriter = ({ text }: { text:string }) => {
return <h1 style={dotFont.style} >&gt;{currentText}</h1>
};

export default Typewriter;
export default Typewriter;
24 changes: 2 additions & 22 deletions src/css/globals.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
Expand All @@ -33,10 +19,4 @@ body {
a {
color: inherit;
text-decoration: none;
}

@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
}
55 changes: 30 additions & 25 deletions src/css/page.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -41,7 +29,7 @@
gap: 25px;
}

.column
.aside
{
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -75,7 +63,7 @@
opacity: 1;
}

.controls
.crtSwitch
{
border: 3px solid rgb(255, 255, 255);
height: 20%;
Expand Down Expand Up @@ -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)
Expand All @@ -157,7 +170,7 @@
{
flex-direction: column;
}
.column
.aside
{
width: 100%;
height: 150%;
Expand All @@ -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%;
Expand Down
Loading

0 comments on commit 26ca1ad

Please sign in to comment.