Skip to content

Commit

Permalink
projects-section
Browse files Browse the repository at this point in the history
  • Loading branch information
@AB10110F
AB10110F committed Jul 20, 2023
1 parent 965d63f commit 2d3f271
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 46 deletions.
60 changes: 60 additions & 0 deletions src/app/page.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,64 @@
min-height: 100vh;
font-size: 50px;
color: white;
}

.projects
{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 70%;
}

.windowContainer
{
width: 280px;
background-color: rgb(31, 31, 31);
border: 1px solid rgb(113, 113, 113);
}

.windowOptions
{
display: flex;
justify-content: end;
background-color: rgb(255, 255, 255);
height: 30px;
align-items: center;
font-size: 15px;
position: sticky;
top: 0;
}
.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;
}

.windowContent
{
font-size: 15px;
color: rgb(114, 114, 114);
display: flex;
justify-content: center;
align-items: center;
height: 180px;
}
35 changes: 35 additions & 0 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Metadata } from 'next'
import Terminal from '@/components/Terminal'
import Typewriter from '@/components/Typewriter'
import localFont from 'next/font/local'
import { ChevronRight, X, Minus, Square } from 'lucide-react';

const dotFont = localFont({ src: './e-dot-digital-7.ttf' })

Expand All @@ -12,6 +13,40 @@ export default function Home() {
<main className={styles.main}>
<Typewriter text={' Front-End Developer'}/> {/* TODO What is wrong with the position 1? */}
<Terminal/>
<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>
</div>
<h1 className={dotFont.className}>Social Media</h1>
</main>
)
}
84 changes: 43 additions & 41 deletions src/components/Terminal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,56 +65,58 @@ const Terminal = () => {
}, [output]);

return (
<div ref={preRef} className={styles.terminal}>
<div className={styles.windowContainer}>
<section className={styles.windowOptions}>
<article>
<Minus />
<Square />
<X />
</article>
</section>
{<pre className={styles.history}>{output}</pre>}
{/* <pre style={{ color: 'green' }}>{output}</pre>*/}
<section className={styles.prompt}>
<article>@guest from portfolio</article>
<article className={styles.promptDown}>
<ChevronRight />
<input
type="text"
value={input}
onChange={e=>setInput(e.target.value)}
onKeyDown={e=>{
let newOutput = "";
if (e.key === "Enter")
{
newOutput = output + "\n\n@guest from portfolio\n" + "> " + input + "\n\n";
switch (input)
<div ref={preRef} className={styles.terminal}>
{<pre className={styles.history}>{output}</pre>}
{/* <pre style={{ color: 'green' }}>{output}</pre>*/}
<section className={styles.prompt}>
<article>@guest from portfolio</article>
<article className={styles.promptDown}>
<ChevronRight />
<input
type="text"
value={input}
onChange={e=>setInput(e.target.value)}
onKeyDown={e=>{
let newOutput = "";
if (e.key === "Enter")
{
case "banner":
newOutput += banner.join('\n')
break;
case "help":
newOutput += help.join('\n')
break;
case "skills":
newOutput += skills.join('\n')
break;
case "info":
newOutput += info.join('\n')
break;
case "cls":
newOutput = ""
break;
default:
newOutput += "x_x Syntax Error \"" + input + "\" is not a command"
newOutput = output + "\n\n@guest from portfolio\n" + "> " + input + "\n\n";
switch (input)
{
case "banner":
newOutput += banner.join('\n')
break;
case "help":
newOutput += help.join('\n')
break;
case "skills":
newOutput += skills.join('\n')
break;
case "info":
newOutput += info.join('\n')
break;
case "cls":
newOutput = ""
break;
default:
newOutput += "x_x Syntax Error \"" + input + "\" is not a command"
}
setOutput(newOutput)
setInput("")
}
setOutput(newOutput)
setInput("")
}
}}
/>
</article>
</section>
}}
/>
</article>
</section>
</div>
</div>
)
};
Expand Down
28 changes: 23 additions & 5 deletions src/css/terminal.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,34 @@
.windowContainer
{
width: 800px;
box-sizing: border-box;
animation: bottom 2s ease;
}
.terminal
{
height: 400px;
width: 800px;
overflow-Y:auto;
overflow-X:hidden;
background-color: rgb(31, 31, 31);
color: white;
box-sizing: border-box;
font-size: 15px;
overflow-y:auto;
overflow-x: hidden;
border: 1px solid rgb(113, 113, 113);
}

@keyframes bottom{
0%{
transform: translateY(500px);
opacity: 0%;
}
75%{
transform: translateY(-10px);
}
100%{
transform: translateY(0);
opacity: 100%;
}
}

.windowOptions
{
display: flex;
Expand Down Expand Up @@ -55,7 +73,7 @@
/* white-space: pre-wrap;
word-wrap: break-word; */
width: 100%;
color: rgb(214, 214, 214);
color: white;
}

.prompt
Expand Down

0 comments on commit 2d3f271

Please sign in to comment.