Skip to content

Commit 4586401

Browse files
nirabonirabo
committed
Initial commit: Terminal-style portfolio website
0 parents  commit 4586401

File tree

4 files changed

+201
-0
lines changed

4 files changed

+201
-0
lines changed

‎.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.DS_Store
2+
node_modules/
3+
.env
4+
.env.local
5+
.env.*.local
6+
npm-debug.log*
7+
yarn-debug.log*
8+
yarn-error.log*
9+
.vscode/
10+
*.log

‎index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CLI Portfolio</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div id="terminal">
11+
<div id="output"></div>
12+
<div id="input-line">
13+
<span class="prompt">$</span>
14+
<input type="text" id="command-input" autofocus autocomplete="off">
15+
</div>
16+
</div>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎script.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
const terminalElement = document.getElementById('terminal');
2+
const outputElement = document.getElementById('output');
3+
const inputElement = document.getElementById('command-input');
4+
5+
const commands = {
6+
help: "Available commands:\n - help: List all commands\n - projects: List all projects\n - project [name]: Show details of a specific project\n - about: Display personal information\n - contact: Display contact information\n - clear: Clear the terminal\n - ls: List available sections/pages",
7+
projects: "Projects:\n - project1\n - project2\n - project3",
8+
about: "About:\n - Name: John Doe\n - Skills: JavaScript, Python, Linux, Software Architecture",
9+
contact: "Contact:\n - Email: [email protected]\n - LinkedIn: linkedin.com/in/johndoe",
10+
ls: "Sections:\n - About\n - Projects\n - Contact",
11+
};
12+
13+
const projectDetails = {
14+
project1: "Project1: A web application built with React.",
15+
project2: "Project2: A machine learning model for predictive analysis.",
16+
project3: "Project3: A terminal-style portfolio website.",
17+
};
18+
19+
let commandHistory = [];
20+
let historyIndex = -1;
21+
22+
const easterEggArt = `
23+
__
24+
/ \\
25+
| |
26+
\\__/
27+
/ \\
28+
| |
29+
| |
30+
\\____/
31+
(____)
32+
`;
33+
34+
commands.easteregg = "Easter Egg discovered! Here's a little surprise:\n" + easterEggArt;
35+
36+
function handleCommand(input) {
37+
const [command, arg] = input.split(' ');
38+
39+
switch (command) {
40+
case 'help':
41+
displayOutput(commands.help);
42+
break;
43+
case 'projects':
44+
displayOutput(commands.projects);
45+
break;
46+
case 'project':
47+
displayOutput(projectDetails[arg] || "Error: Project not found.", !!projectDetails[arg]);
48+
break;
49+
case 'about':
50+
displayOutput(commands.about);
51+
break;
52+
case 'contact':
53+
displayOutput(commands.contact);
54+
break;
55+
case 'clear':
56+
clearTerminal();
57+
break;
58+
case 'ls':
59+
displayOutput(commands.ls);
60+
break;
61+
case 'easteregg': // New Easter Egg command
62+
displayOutput(commands.easteregg);
63+
break;
64+
default:
65+
displayOutput("Error: Command not recognized. Type 'help' for a list of commands.", false);
66+
}
67+
}
68+
69+
70+
function displayOutput(text, success = true) {
71+
const timestamp = new Date().toLocaleTimeString();
72+
const line = `[${timestamp}] ${text}`;
73+
outputElement.innerHTML += `<div class="${success ? '' : 'error'}">${line}</div>`;
74+
scrollToBottom();
75+
}
76+
77+
function clearTerminal() {
78+
outputElement.innerHTML = '';
79+
}
80+
81+
function scrollToBottom() {
82+
outputElement.scrollTop = outputElement.scrollHeight;
83+
}
84+
85+
function handleKeyDown(event) {
86+
if (event.key === 'Enter') {
87+
const input = inputElement.value.trim();
88+
if (input) {
89+
displayOutput(`$ ${input}`);
90+
commandHistory.push(input);
91+
historyIndex = commandHistory.length;
92+
handleCommand(input);
93+
}
94+
inputElement.value = '';
95+
} else if (event.key === 'ArrowUp') {
96+
if (historyIndex > 0) {
97+
historyIndex -= 1;
98+
inputElement.value = commandHistory[historyIndex];
99+
}
100+
} else if (event.key === 'ArrowDown') {
101+
if (historyIndex < commandHistory.length - 1) {
102+
historyIndex += 1;
103+
inputElement.value = commandHistory[historyIndex];
104+
} else {
105+
inputElement.value = '';
106+
historyIndex = commandHistory.length;
107+
}
108+
}
109+
}
110+
111+
// Focus the input field whenever the terminal is clicked
112+
terminalElement.addEventListener('click', () => {
113+
inputElement.focus();
114+
});
115+
116+
inputElement.addEventListener('keydown', handleKeyDown);

‎style.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
body {
2+
margin: 0;
3+
font-family: monospace;
4+
background-color: #0d0d0d;
5+
color: #00ff00;
6+
overflow: hidden;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
height: 100vh;
11+
}
12+
13+
#terminal {
14+
width: 90%;
15+
max-width: 800px;
16+
height: 90%;
17+
max-height: 600px;
18+
background-color: #1a1a1a;
19+
border-radius: 5px;
20+
padding: 10px;
21+
box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
22+
overflow-y: auto;
23+
}
24+
25+
#output {
26+
white-space: pre-wrap;
27+
font-size: 14px;
28+
line-height: 1.5;
29+
}
30+
31+
#input-line {
32+
display: flex;
33+
align-items: center;
34+
}
35+
36+
.prompt {
37+
margin-right: 5px;
38+
}
39+
40+
#command-input {
41+
background: none;
42+
border: none;
43+
color: #00ff00;
44+
font-family: inherit;
45+
font-size: 14px;
46+
outline: none;
47+
width: 100%;
48+
}
49+
50+
.hidden {
51+
display: none;
52+
}
53+
54+
.error {
55+
color: #ff4444;
56+
}

0 commit comments

Comments
 (0)