<div class="terminal-window">
<div class="terminal-header">
<div class="buttons">
<span class="close"></span>
<span class="minimize"></span>
<span class="maximize"></span>
</div>
<div class="title">guest@portfolio:~</div>
</div>
<div class="terminal-body" id="term-body">
<div class="line">Welcome to my portfolio! Type <span class="highlight">help</span> to see available commands.</div>
<div id="output-area"></div>
<div class="input-line">
<span class="prompt">guest@portfolio:~$</span>
<input type="text" id="term-input" autocomplete="off" autofocus>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.terminal-window {
width: 100%;
max-width: 700px;
background: #1e1e1e;
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
overflow: hidden;
font-family: "Courier New", Courier, monospace;
}
.terminal-header {
background: #323233;
padding: 12px 16px;
display: flex;
align-items: center;
position: relative;
}
.buttons {
display: flex;
gap: 8px;
}
.buttons span {
width: 12px;
height: 12px;
border-radius: 50%;
}
.close { background: #ff5f56; }
.minimize { background: #ffbd2e; }
.maximize { background: #27c93f; }
.title {
position: absolute;
width: 100%;
text-align: center;
left: 0;
color: #9ca3af;
font-size: 0.875rem;
pointer-events: none;
}
.terminal-body {
padding: 20px;
height: 350px;
overflow-y: auto;
color: #e5e5e5;
font-size: 1rem;
line-height: 1.6;
}
.line { margin-bottom: 8px; }
.highlight { color: #3b82f6; font-weight: bold; }
.prompt { color: #10b981; margin-right: 8px; }
.input-line {
display: flex;
align-items: center;
margin-top: 8px;
}
#term-input {
background: transparent;
border: none;
color: #e5e5e5;
font-family: "Courier New", Courier, monospace;
font-size: 1rem;
outline: none;
flex-grow: 1;
}
const input = document.getElementById("term-input");
const output = document.getElementById("output-area");
const body = document.getElementById("term-body");
input.addEventListener("keydown", function(e) {
if (e.key === "Enter") {
const val = input.value.trim().toLowerCase();
// Create the history line showing what was typed
const historyLine = document.createElement("div");
historyLine.className = "line";
historyLine.innerHTML = "<span class=\"prompt\">guest@portfolio:~$</span> " + val;
output.appendChild(historyLine);
// Handle specific commands
if (val === "help") {
const response = document.createElement("div");
response.className = "line";
response.innerHTML = "Available commands:<br>- <span class=\"highlight\">about</span>: Learn about me<br>- <span class=\"highlight\">skills</span>: View my tech stack<br>- <span class=\"highlight\">clear</span>: Clear the terminal";
output.appendChild(response);
} else if (val === "about") {
const response = document.createElement("div");
response.className = "line";
response.innerText = "I am a frontend developer passionate about modern web design and clean code.";
output.appendChild(response);
} else if (val === "skills") {
const response = document.createElement("div");
response.className = "line";
response.innerText = "> HTML, CSS, JavaScript, React, SQL";
output.appendChild(response);
} else if (val === "clear") {
output.innerHTML = "";
} else if (val !== "") {
const response = document.createElement("div");
response.className = "line";
response.innerText = "Command not found. Type help for a list of commands.";
output.appendChild(response);
}
// Clear input and scroll to bottom
input.value = "";
body.scrollTop = body.scrollHeight;
}
});
// Auto focus when clicking anywhere in the terminal
body.addEventListener("click", function() {
input.focus();
});