From f428479e81c186b4dd8a103e22366769e7b9b65c Mon Sep 17 00:00:00 2001 From: skvprogrammer Date: Tue, 10 Mar 2026 07:44:06 -0400 Subject: [PATCH 1/6] changed omezle.fun to omezle.xyz --- src/components/Terminal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Terminal.js b/src/components/Terminal.js index f00b114..b96a356 100644 --- a/src/components/Terminal.js +++ b/src/components/Terminal.js @@ -277,7 +277,7 @@ const Terminal = () => { }}>
  • Date: Fri, 10 Apr 2026 02:10:27 -0400 Subject: [PATCH 2/6] links updated --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 65ad2e1..c914ffa 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ Type the following commands inside the terminal: * **GitHub**: [https://github.com/skvprogrammer](https://github.com/skvprogrammer) * **LeetCode**: [https://leetcode.com/u/skvprogrammer](https://leetcode.com/u/skvprogrammer) * **Linktree**: [https://linktr.ee/skvprogrammer](https://linktr.ee/skvprogrammer) -* **Omezle**: [https://omezle.fun](https://omezle.fun) +* **Omezle**: [https://omezle.xyz](https://omezle.xyz) --- From 39df4566cdb9a27ec50d825c5e15b003d1b7dfd7 Mon Sep 17 00:00:00 2001 From: skvprogrammer Date: Fri, 10 Apr 2026 03:09:20 -0400 Subject: [PATCH 3/6] updated --- src/components/Terminal.js | 817 +++++++++++++++++++------------------ 1 file changed, 418 insertions(+), 399 deletions(-) diff --git a/src/components/Terminal.js b/src/components/Terminal.js index b96a356..daf5e72 100644 --- a/src/components/Terminal.js +++ b/src/components/Terminal.js @@ -1,430 +1,449 @@ -import React, { useState } from "react"; -import { motion } from "framer-motion"; -import { FaSun, FaMoon,FaChevronRight } from "react-icons/fa"; -import { TypeAnimation } from "react-type-animation"; -import styled from "styled-components"; +import React, { useState, useRef, useEffect, useCallback } from "react"; +const THEMES = { + dark: { + bg: "#080b19", + headerBg: "#0d1126", + footerBg: "#0d1126", + text: "#c8ffd4", + accent: "#00ff88", + accentDim: "#00cc6a", + prompt: "#00bfff", + error: "#ff4d6d", + muted: "#445566", + border: "rgba(0,255,136,0.12)", + headerText: "#7effd4", + buttonBg: "rgba(0,255,136,0.08)", + buttonHover: "rgba(0,255,136,0.18)", + link: "#00e5ff", + }, + light: { + bg: "#f4f6f0", + headerBg: "#e8ede2", + footerBg: "#e8ede2", + text: "#1a2e1a", + accent: "#1a7a40", + accentDim: "#2a9a55", + prompt: "#1a5a8a", + error: "#c0392b", + muted: "#7a8a7a", + border: "rgba(26,122,64,0.18)", + headerText: "#2a5a2a", + buttonBg: "rgba(26,122,64,0.07)", + buttonHover: "rgba(26,122,64,0.15)", + link: "#0a6aaa", + }, +}; -const TerminalContainer = styled.div` - background: ${(props) => (props.theme === "dark" ? "#1e1e1e" : "#f9f9f9")}; - color: ${(props) => (props.theme === "dark" ? "#ff0000" : "#333")}; - width: 90%; - height: 80vh; - margin: 0 auto; /* Removed 50px margin to center vertically */ - padding: 20px; - font-family: "Courier New", Courier, monospace; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); - border-radius: 10px; - display: flex; - flex-direction: column; - position: relative; - top: 45%; - transform: translateY(-50%); -`; +// Line shapes: +// { text, color } — plain text +// { type:"link", prefix, label, url, color } — clickable link +// { text: "" } — blank spacer +const COMMANDS = { + help: { + output: [ + { text: "┌─ AVAILABLE COMMANDS ─────────────────────────────┐", color: "accent" }, + { text: "│ help Show this help menu │", color: "text" }, + { text: "│ about About Satyam Kumar Verman │", color: "text" }, + { text: "│ skills Technical skill set │", color: "text" }, + { text: "│ projects Projects with live links │", color: "text" }, + { text: "│ links All social & profile links │", color: "text" }, + { text: "│ achievements Certs · contests · open source │", color: "text" }, + { text: "│ contact Get in touch │", color: "text" }, + { text: "│ clear Clear terminal output │", color: "text" }, + { text: "│ theme Toggle dark / light mode │", color: "text" }, + { text: "│ banner Show ASCII banner │", color: "text" }, + { text: "└───────────────────────────────────────────────────┘", color: "accent" }, + ], + }, + about: { + output: [ + { text: "▸ SATYAM KUMAR VERMAN", color: "accent" }, + { text: " Full-Stack Developer · DSA · Open Source · AI-Augmented Dev", color: "text" }, + { text: "", color: "text" }, + { text: " Self-taught developer with strong foundations in DS&A, OS,", color: "muted" }, + { text: " Networking & System Design. Built Omezle — a WebRTC platform", color: "muted" }, + { text: " handling 20K+ concurrent users. Active open-source contributor", color: "muted" }, + { text: " to freeCodeCamp & CPython. 500+ DSA problems solved.", color: "muted" }, + { text: "", color: "text" }, + { text: " Status → Available for hire", color: "prompt" }, + { text: " Location → Ramgarh, Jharkhand, India", color: "prompt" }, + { text: " Phone → +91 6200872019", color: "prompt" }, + { type: "link", prefix: " Email → ", label: "satyamkumarverman@gmail.com", url: "mailto:satyamkumarverman@gmail.com", color: "prompt" }, + ], + }, -const TerminalHeader = styled.div` - background: ${(props) => (props.theme === "dark" ? "#2c2c2c" : "#ddd")}; - color: ${(props) => (props.theme === "dark" ? "#fff" : "#000")}; - padding: 10px 20px; - font-size: 14px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 10px 10px 0 0; - flex-direction: column; - gap: 10px; -`; + skills: { + output: [ + { text: "▸ TECHNICAL SKILLS", color: "accent" }, + { text: "", color: "text" }, + { text: " Languages Python · C++ · JavaScript · Java · C", color: "text" }, + { text: "", color: "text" }, + { text: " Frontend React.js · HTML5/CSS3 · ES6+ · WebSockets", color: "text" }, + { text: " WebRTC · RESTful API · Responsive Design", color: "text" }, + { text: "", color: "text" }, + { text: " Backend Node.js · Express.js · Flask · MongoDB", color: "text" }, + { text: " REST API · System Design (HLD + LLD)", color: "text" }, + { text: "", color: "text" }, + { text: " DevOps Linux (Ubuntu/CLI) · Git · Docker", color: "text" }, + { text: " Vercel · Render · Railway.app", color: "text" }, + { text: "", color: "text" }, + { text: " CS Core DSA · OS · Networking · DBMS · OOP", color: "text" }, + { text: " SDLC · Penetration Testing", color: "text" }, + { text: "", color: "text" }, + { text: " AI Tools ChatGPT · Google Gemini · Claude", color: "muted" }, + ], + }, -// const HeaderButtons = styled.div` -// display: flex; -// gap: 8px; + projects: { + output: [ + { text: "▸ PROJECTS", color: "accent" }, + { text: "", color: "text" }, + { text: " [01] Omezle — Real-Time Random Chat Web App", color: "text" }, + { text: " MERN + WebRTC · 20K+ concurrent users · Socket.IO", color: "muted" }, + { text: " Matchmaking · rate limiting · moderation · microservices WIP", color: "muted" }, + { type: "link", prefix: " → Live: ", label: "omezle.xyz", url: "https://omezle.xyz", color: "accent" }, + { text: "", color: "text" }, + { text: " [02] Terminal Theme Portfolio", color: "text" }, + { text: " You're inside it! Interactive terminal-based UI portfolio.", color: "muted" }, + { text: " Stack: React · Node.js · Express · MongoDB · Vercel", color: "muted" }, + { text: "", color: "text" }, + { text: " [03] URL Shortener Web App", color: "text" }, + { text: " Flask REST API · long URLs → short slugs · minimal UI", color: "muted" }, + { text: " Stack: Python · Flask · REST API · Vercel", color: "muted" }, + { text: "", color: "text" }, + { text: " [04] Pomodoro Timer Web App", color: "text" }, + { text: " Real-time WebSocket sync · session tracking · modern UI", color: "muted" }, + { text: " Stack: Python · Flask · WebSockets · Vercel", color: "muted" }, + ], + }, -// span { -// width: 12px; -// height: 12px; -// border-radius: 50%; -// display: inline-block; -// background: ${(props) => props.color}; -// } -// `; + links: { + output: [ + { text: "▸ LINKS & PROFILES", color: "accent" }, + { text: "", color: "text" }, + { type: "link", prefix: " ✉ Email → ", label: "satyamkumarverman@gmail.com", url: "mailto:satyamkumarverman@gmail.com", color: "prompt" }, + { type: "link", prefix: " ⌥ GitHub → ", label: "Github", url: "https://github.com/skvprogrammer", color: "accent" }, + { type: "link", prefix: " ◈ LinkedIn → ", label: "LinkedIn", url: "https://www.linkedin.com/in/satyam-kumar-verman-b77272190/", color: "accent" }, + { type: "link", prefix: " ⚡ Portfolio → ", label: "Live portfolio", url: "#", color: "accent" }, + { type: "link", prefix: " ⊞ LeetCode → ", label: "Leetcode", url: "https://leetcode.com/u/skvprogrammer", color: "accentDim" }, + { type: "link", prefix: " ◉ Omezle → ", label: "Omezle", url: "https://omezle.xyz", color: "accentDim" }, + { text: "", color: "text" }, + { text: " → Open to full-time roles & collaborations.", color: "muted" }, + ], + }, -// const Menu = styled.div` -// display: flex; -// gap: 20px; + achievements: { + output: [ + { text: "▸ ACHIEVEMENTS & CERTIFICATIONS", color: "accent" }, + { text: "", color: "text" }, + { text: " DSA", color: "accent" }, + { text: " ⬡ 500+ problems solved on LeetCode & HackerRank", color: "text" }, + { text: " ⬡ LeetCode Rank #125 — Weekly Contest 477", color: "text" }, + { text: " ⬡ LeetCode Rank #453 — Biweekly Contest 170", color: "text" }, + { text: "", color: "text" }, + { text: " Open Source", color: "accent" }, + { type: "link", prefix: " ⬡ freeCodeCamp → ", label: "4–5 PRs merged into main curriculum", url: "https://github.com/freeCodeCamp/freeCodeCamp", color: "text" }, + { type: "link", prefix: " ⬡ CPython → ", label: "1 PR merged into official Python interpreter", url: "https://github.com/python/cpython", color: "text" }, + { text: "", color: "text" }, + { text: " Certifications", color: "accent" }, + { text: " ⬡ C++ Programming — Beginner to Ultimate Level (Udemy)", color: "muted" }, + { text: " ⬡ Software Engineer Role Certification", color: "muted" }, + { text: " ⬡ Penetration Testing Certification", color: "muted" }, + { text: " ⬡ HackerRank — Java · Python · SQL", color: "muted" }, + ], + }, -// a { -// text-decoration: none; -// color: ${(props) => (props.theme === "dark" ? "#ff0000" : "#333")}; -// font-weight: bold; -// transition: color 0.3s; + contact: { + output: [ + { text: "▸ CONTACT SATYAM", color: "accent" }, + { text: "", color: "text" }, + { type: "link", prefix: " ✉ ", label: "satyamkumarverman@gmail.com", url: "mailto:satyamkumarverman@gmail.com", color: "prompt" }, + { text: " ☎ +91 6200872019", color: "text" }, + { type: "link", prefix: " ⌥ GitHub → ", label: "Github", url: "https://github.com/skvprogrammer", color: "accent" }, + { type: "link", prefix: " ◈ LinkedIn → ", label: "LinkedIn", url: "https://www.linkedin.com/in/satyam-kumar-verman-b77272190/", color: "accent" }, + { text: "", color: "text" }, + { text: " → Open to full-time roles & collaborations.", color: "prompt" }, + ], + }, -// &:hover { -// color: ${(props) => (props.theme === "dark" ? "#fff" : "#000")}; -// } -// } -// `; + banner: { + output: [ + { text: " ███████╗██╗ ██╗██╗ ██╗", color: "accent" }, + { text: " ██╔════╝██║ ██╔╝██║ ██║", color: "accent" }, + { text: " ███████╗█████╔╝ ██║ ██║", color: "accentDim" }, + { text: " ╚════██║██╔═██╗ ╚██╗ ██╔╝", color: "accentDim" }, + { text: " ███████║██║ ██╗ ╚████╔╝ ", color: "muted" }, + { text: " ╚══════╝╚═╝ ╚═╝ ╚═══╝ ", color: "muted" }, + { text: "", color: "text" }, + { text: " Full-Stack Dev · DSA · Open Source · AI Dev", color: "prompt" }, + { text: " Type 'help' to explore · Type 'links' for socials", color: "muted" }, + ], + }, +}; +const BOOT_SEQUENCE = [ + "Initializing system...", + "Loading profile: satyam@portfolio", + "Mounting filesystem...", + "Starting terminal session...", + "", + "Session ready. Type 'help' to get started.", +]; -const TerminalBody = styled.div` - flex: 1; - overflow-y: auto; - margin-top: 10px; -`; +function GlowCursor({ theme }) { + const t = THEMES[theme]; + return ( + + ); +} -const Line = styled.div` - display: flex; - align-items: center; - gap: 10px; -`; +export default function Terminal() { + const [theme, setTheme] = useState("dark"); + const [output, setOutput] = useState([]); + const [command, setCommand] = useState(""); + const [history, setHistory] = useState([]); + const [historyIdx, setHistoryIdx] = useState(-1); + const [booted, setBooted] = useState(false); + const [focused, setFocused] = useState(false); + const bodyRef = useRef(null); + const inputRef = useRef(null); + const t = THEMES[theme]; -const Prompt = styled.span` - font-family: "Courier New", Courier, monospace; - color: ${(props) => (props.theme === "dark" ? "#ff0000" : "#990000")}; - font-weight: 700; - font-size: 0.95rem; -`; + // Boot sequence then auto-show banner + useEffect(() => { + let i = 0; + const interval = setInterval(() => { + if (i < BOOT_SEQUENCE.length) { + const idx = i; + const line = BOOT_SEQUENCE[idx]; + setOutput((prev) => [ + ...prev, + { + type: "boot", + text: line, + color: idx === BOOT_SEQUENCE.length - 1 ? "accent" : idx < 3 ? "prompt" : "muted", + }, + ]); + i++; + } else { + clearInterval(interval); + setOutput((prev) => [...prev, { type: "out", lines: COMMANDS.banner.output }]); + setBooted(true); + setTimeout(() => inputRef.current?.focus(), 50); + } + }, 150); + return () => clearInterval(interval); + }, []); -const Cursor = styled.span` - background: ${(props) => (props.theme === "dark" ? "#ff0000" : "#333")}; - width: 8px; - height: 16px; - display: inline-block; - animation: blink 0.8s infinite; - @keyframes blink { - 0%, 50% { - opacity: 1; - } - 51%, 100% { - opacity: 0; - } - } -`; + // Auto-scroll + useEffect(() => { + bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight, behavior: "smooth" }); + }, [output]); -const ThemeToggle = styled.button` - background: none; - border: 1px solid ${(props) => (props.theme === "dark" ? "#ff0000" : "#333")}; - color: ${(props) => (props.theme === "dark" ? "#ff0000" : "#333")}; - padding: 10px 10px; - border-radius: 50%; - cursor: pointer; - font-size: 14px; - transition: all 0.3s; + const resolveColor = useCallback( + (colorKey) => { + const map = { + accent: t.accent, accentDim: t.accentDim, text: t.text, + muted: t.muted, prompt: t.prompt, error: t.error, link: t.link, + }; + return map[colorKey] || t.text; + }, + [t] + ); - &:hover { - background: ${(props) => (props.theme === "dark" ? "#ff0000" : "#333")}; - color: ${(props) => (props.theme === "dark" ? "#000" : "#fff")}; - } -`; + const runCommand = useCallback((raw) => { + const cmd = raw.trim().toLowerCase(); + if (!cmd) return; + setHistory((prev) => [raw, ...prev].slice(0, 50)); + setHistoryIdx(-1); + setOutput((prev) => [...prev, { type: "cmd", text: raw }]); -const Terminal = () => { - const [command, setCommand] = useState(""); - const [output, setOutput] = useState([]); - const [theme, setTheme] = useState("dark"); + if (cmd === "clear") { setOutput([]); return; } + if (cmd === "theme") { + setTheme((prev) => (prev === "dark" ? "light" : "dark")); + setOutput((prev) => [...prev, { type: "out", lines: [{ text: "Theme toggled.", color: "accent" }] }]); + return; + } + const def = COMMANDS[cmd]; + if (def) { + setOutput((prev) => [...prev, { type: "out", lines: def.output }]); + } else { + setOutput((prev) => [ + ...prev, + { type: "out", lines: [ + { text: `bash: ${raw}: command not found`, color: "error" }, + { text: "Type 'help' to see available commands.", color: "muted" }, + ]}, + ]); + } + }, []); - const handleCommand = (e) => { - if (e.key === "Enter") { - const newOutput = [...output]; - switch (command.trim().toLowerCase()) { - case "about": - newOutput.length=0; - newOutput.push( - "I am a competitive programmer skilled in React, Node.js, and more.\n" + - "I also explore machine learning, blockchain, and ethical hacking." - ); - break; - case "skills": - newOutput.length=0; - newOutput.push( - "Skills:\n" + - "- Programming: C,C++, Python, JavaScript,Java,\n" + - "- Machine Learning: TensorFlow, PyTorch\n" + - "- Web Dev: MERN , Flask , Django\n" + - "- Blockchain: Solidity, Ethereum\n" + - "- Ethical Hacking: Kali Linux, Metasploit" - ); - break; - case "projects": - newOutput.length=0; - newOutput.push( - "Projects:\n" + - "- URL Shortner\n" + - "- Random Chat Web App\n" + - "- Personal Portfolio Terminal\n" + - "- Whiteboard Web App\n" + - "- Notes Web App\n" + const handleKeyDown = (e) => { + if (e.key === "Enter") { runCommand(command); setCommand(""); } + else if (e.key === "ArrowUp") { + e.preventDefault(); + const next = Math.min(historyIdx + 1, history.length - 1); + setHistoryIdx(next); setCommand(history[next] || ""); + } else if (e.key === "ArrowDown") { + e.preventDefault(); + const next = Math.max(historyIdx - 1, -1); + setHistoryIdx(next); setCommand(next === -1 ? "" : history[next] || ""); + } else if (e.key === "Tab") { + e.preventDefault(); + const cmds = Object.keys(COMMANDS).concat(["clear", "theme"]); + const match = cmds.find((c) => c.startsWith(command.toLowerCase())); + if (match) setCommand(match); + } + }; - ); - break; - case "hobbies": - newOutput.length=0; - newOutput.push( - "Hobbies:\n" + - "- Solving competitive programming challenges\n" + - "- Ethical hacking\n" + - "- Exploring AI advancements" - ); - break; - // case "achievements": - // newOutput.push( - // "Achievements:\n" + - // "- B\n" + - // "- Built a blockchain app with 100+ active users\n" + - // "- Completed advanced ethical hacking certification" - // ); - // break; - case "goals": - newOutput.length=0; - newOutput.push( - "Goals:\n" + - "- Build scalable AI-based systems\n" + - "- Contribute to open-source blockchain projects\n" + - "- Participate in global hackathons" - ); - break; - case "contact": - newOutput.length=0; - newOutput.push( - "Contact Information:\n" + - "- Email: satyamkumarverman@gmail.com\n" + - "- GitHub: https://github.com/skvprogrammer\n" + - "- Linktree: https://linktr.ee/skvprogrammer" - ); - break; - case "help": - newOutput.length=0; - newOutput.push( - "Available commands:\n" + - "- about: Learn about me\n" + - "- skills: See my skill set\n" + - "- projects: Explore my projects\n" + - "- hobbies: Know what I do for fun\n" + - "- achievements: See my accomplishments\n" + - "- goals: My future ambitions\n" + - "- contact: Get my contact info\n" + - "- clear: Clear the terminal" - ); - break; - case "clear": - setOutput([]); - setCommand(""); - return; - default: - newOutput.push(`'${command}' is not recognized as a command.`); - } - setOutput(newOutput); - setCommand(""); + const renderLine = (l, j) => { + if (l.type !== "link" && (l.text === "" || l.text === undefined)) { + return
    ; } + if (l.type === "link") { + return ( +
    + {l.prefix && {l.prefix}} + e.stopPropagation()} + style={{ color: t.link, textDecoration: "underline", textDecorationStyle: "dotted", textUnderlineOffset: "3px", cursor: "pointer", transition: "color 0.15s" }} + onMouseEnter={(e) => (e.currentTarget.style.color = t.accent)} + onMouseLeave={(e) => (e.currentTarget.style.color = t.link)} + > + {l.label} + +
    + ); + } + return ( +
    + {l.text} +
    + ); }; return ( - - - {/* - - - - - - SATYAM KUMAR VERMAN - I like to work with tech - | GitHub | - | Linktree | - -

    - -     */} - {/* -
    Satyam Kumar Verman I love to work with tech
    -     */} - setTheme(theme === "dark" ? "light" : "dark")} - > - {theme === "dark" ? : } - - Developer Logo { - e.currentTarget.style.transform = "scale(1.05)"; - e.currentTarget.style.filter = "drop-shadow(0 0 15px #00ffee)"; - }} - onMouseOut={(e) => { - e.currentTarget.style.transform = "scale(1)"; - e.currentTarget.style.filter = "drop-shadow(0 0 10px #00ffcc)"; - }} -/> - - + {/* STICKY INPUT */} +
    + root + @ + kali + :~$  +
    + setCommand(e.target.value)} + onKeyDown={handleKeyDown} + onFocus={() => setFocused(true)} + onBlur={() => setFocused(false)} + disabled={!booted} + autoComplete="off" + spellCheck={false} + style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: t.text, fontFamily: "inherit", fontSize: "inherit", caretColor: "transparent", letterSpacing: "0.02em", minWidth: 0 }} + /> + {booted && focused && } +
    +
    -     - -

    - -

    -
    - {output.map((line, index) => ( - - {line.split("\n").map((text, idx) => ( - - {text} -
    -     - ))} -     + {/* KEYBOARD HINTS */} +
    + {[["TAB","autocomplete"],["↑↓","history"],["ENTER","execute"]].map(([key, label]) => ( + + {key} + {label} + ))}
    - - - root@kali - - setCommand(e.target.value)} - onKeyDown={handleCommand} - style={{ - background: "transparent", - color: theme === "dark" ? "#ff0000" : "#333", - border: "none", - outline: "none", - fontWeight: "bolder", - flex: 1, - }} - autoFocus - /> - - - +
    + ); -}; - -export default Terminal; +} \ No newline at end of file From c2c3b045911f53638e3eeebcfd96ad8fd6ddc085 Mon Sep 17 00:00:00 2001 From: skvprogrammer Date: Wed, 15 Apr 2026 01:57:12 -0400 Subject: [PATCH 4/6] updated code working --- src/components/Terminal.js | 485 +++++++++++++++++++++++++++++++------ 1 file changed, 407 insertions(+), 78 deletions(-) diff --git a/src/components/Terminal.js b/src/components/Terminal.js index daf5e72..e2fac8e 100644 --- a/src/components/Terminal.js +++ b/src/components/Terminal.js @@ -35,10 +35,6 @@ const THEMES = { }, }; -// Line shapes: -// { text, color } — plain text -// { type:"link", prefix, label, url, color } — clickable link -// { text: "" } — blank spacer const COMMANDS = { help: { output: [ @@ -51,6 +47,7 @@ const COMMANDS = { { text: "│ achievements Certs · contests · open source │", color: "text" }, { text: "│ contact Get in touch │", color: "text" }, { text: "│ clear Clear terminal output │", color: "text" }, + { text: "│ reset Reset to initial state │", color: "text" }, { text: "│ theme Toggle dark / light mode │", color: "text" }, { text: "│ banner Show ASCII banner │", color: "text" }, { text: "└───────────────────────────────────────────────────┘", color: "accent" }, @@ -170,17 +167,23 @@ const COMMANDS = { banner: { output: [ - { text: " ███████╗██╗ ██╗██╗ ██╗", color: "accent" }, - { text: " ██╔════╝██║ ██╔╝██║ ██║", color: "accent" }, - { text: " ███████╗█████╔╝ ██║ ██║", color: "accentDim" }, - { text: " ╚════██║██╔═██╗ ╚██╗ ██╔╝", color: "accentDim" }, - { text: " ███████║██║ ██╗ ╚████╔╝ ", color: "muted" }, - { text: " ╚══════╝╚═╝ ╚═╝ ╚═══╝ ", color: "muted" }, + { text: " ███████╗██╗ ██╗██╗ ██╗", color: "accent" }, + { text: " ██╔════╝██║ ██╔╝██║ ██║", color: "accent" }, + { text: " ███████╗█████╔╝ ██║ ██║", color: "accentDim" }, + { text: " ╚════██║██╔═██╗ ╚██╗ ██╔╝", color: "accentDim" }, + { text: " ███████║██║ ██╗ ╚████╔╝ ", color: "muted" }, + { text: " ╚══════╝╚═╝ ╚═╝ ╚═══╝ ", color: "muted" }, { text: "", color: "text" }, { text: " Full-Stack Dev · DSA · Open Source · AI Dev", color: "prompt" }, { text: " Type 'help' to explore · Type 'links' for socials", color: "muted" }, ], }, + + reset: { + output: [ + { text: "Resetting terminal...", color: "muted" }, + ], + }, }; const BOOT_SEQUENCE = [ @@ -198,8 +201,8 @@ function GlowCursor({ theme }) { { + const handleResize = () => { + setIsMobile(window.innerWidth < 768); + }; + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + // Boot sequence then auto-show banner useEffect(() => { let i = 0; @@ -242,7 +256,14 @@ export default function Terminal() { i++; } else { clearInterval(interval); - setOutput((prev) => [...prev, { type: "out", lines: COMMANDS.banner.output }]); + const bannerOutput = { type: "out", lines: COMMANDS.banner.output }; + setOutput((prev) => [...prev, bannerOutput]); + // Store persistent output (boot sequence + banner) to restore after clear + setPersistentOutput((prev) => [ + ...prev, + ...output.map((item) => item), + bannerOutput, + ]); setBooted(true); setTimeout(() => inputRef.current?.focus(), 50); } @@ -258,8 +279,13 @@ export default function Terminal() { const resolveColor = useCallback( (colorKey) => { const map = { - accent: t.accent, accentDim: t.accentDim, text: t.text, - muted: t.muted, prompt: t.prompt, error: t.error, link: t.link, + accent: t.accent, + accentDim: t.accentDim, + text: t.text, + muted: t.muted, + prompt: t.prompt, + error: t.error, + link: t.link, }; return map[colorKey] || t.text; }, @@ -273,7 +299,48 @@ export default function Terminal() { setHistoryIdx(-1); setOutput((prev) => [...prev, { type: "cmd", text: raw }]); - if (cmd === "clear") { setOutput([]); return; } + if (cmd === "clear") { + // Clear command now restores the initial banner and boot sequence + setTimeout(() => { + setOutput([ + { + type: "boot", + text: "Visit Omezle.xyz! ", + color: "muted", + }, + { type: "out", lines: COMMANDS.banner.output }, + ]); + }, 100); + return; + } + + if (cmd === "reset") { + // Reset command shows boot sequence all over again + setTimeout(() => { + setOutput([]); + let i = 0; + const interval = setInterval(() => { + if (i < BOOT_SEQUENCE.length) { + const idx = i; + const line = BOOT_SEQUENCE[idx]; + setOutput((prev) => [ + ...prev, + { + type: "boot", + text: line, + color: idx === BOOT_SEQUENCE.length - 1 ? "accent" : idx < 3 ? "prompt" : "muted", + }, + ]); + i++; + } else { + clearInterval(interval); + setOutput((prev) => [...prev, { type: "out", lines: COMMANDS.banner.output }]); + } + }, 150); + }, 100); + return; + } + if (cmd === "theme") { setTheme((prev) => (prev === "dark" ? "light" : "dark")); setOutput((prev) => [...prev, { type: "out", lines: [{ text: "Theme toggled.", color: "accent" }] }]); @@ -285,24 +352,31 @@ export default function Terminal() { } else { setOutput((prev) => [ ...prev, - { type: "out", lines: [ - { text: `bash: ${raw}: command not found`, color: "error" }, - { text: "Type 'help' to see available commands.", color: "muted" }, - ]}, + { + type: "out", + lines: [ + { text: `bash: ${raw}: command not found`, color: "error" }, + { text: "Type 'help' to see available commands.", color: "muted" }, + ], + }, ]); } }, []); const handleKeyDown = (e) => { - if (e.key === "Enter") { runCommand(command); setCommand(""); } - else if (e.key === "ArrowUp") { + if (e.key === "Enter") { + runCommand(command); + setCommand(""); + } else if (e.key === "ArrowUp") { e.preventDefault(); const next = Math.min(historyIdx + 1, history.length - 1); - setHistoryIdx(next); setCommand(history[next] || ""); + setHistoryIdx(next); + setCommand(history[next] || ""); } else if (e.key === "ArrowDown") { e.preventDefault(); const next = Math.max(historyIdx - 1, -1); - setHistoryIdx(next); setCommand(next === -1 ? "" : history[next] || ""); + setHistoryIdx(next); + setCommand(next === -1 ? "" : history[next] || ""); } else if (e.key === "Tab") { e.preventDefault(); const cmds = Object.keys(COMMANDS).concat(["clear", "theme"]); @@ -313,18 +387,40 @@ export default function Terminal() { const renderLine = (l, j) => { if (l.type !== "link" && (l.text === "" || l.text === undefined)) { - return
    ; + return
    ; } if (l.type === "link") { return ( -
    - {l.prefix && {l.prefix}} +
    + {l.prefix && ( + + {l.prefix} + + )} e.stopPropagation()} - style={{ color: t.link, textDecoration: "underline", textDecorationStyle: "dotted", textUnderlineOffset: "3px", cursor: "pointer", transition: "color 0.15s" }} + style={{ + color: t.link, + textDecoration: "underline", + textDecorationStyle: "dotted", + textUnderlineOffset: "3px", + cursor: "pointer", + transition: "color 0.15s", + wordBreak: "break-word", + overflowWrap: "break-word", + }} onMouseEnter={(e) => (e.currentTarget.style.color = t.accent)} onMouseLeave={(e) => (e.currentTarget.style.color = t.link)} > @@ -334,12 +430,30 @@ export default function Terminal() { ); } return ( -
    +
    {l.text}
    ); }; + // Responsive font sizes and spacing + const fontSize = isMobile ? "12px" : "13.5px"; + const padding = isMobile ? "12px 16px" : "18px 24px"; + const inputPadding = isMobile ? "10px 16px" : "11px 24px"; + const headerPadding = isMobile ? "8px 12px" : "10px 18px"; + const lineHeight = isMobile ? "1.6" : "1.75"; + const bottomPadding = isMobile ? "0px" : "12px"; + const footerGap = isMobile ? "12px" : "20px"; + return ( <>
    inputRef.current?.focus()} > {/* CRT scanlines */} {theme === "dark" && ( -
    +
    )} {/* HEADER */} -
    -
    -
    - {["#ff5f57","#febc2e","#28c840"].map((c, i) => ( -
    +
    +
    +
    + {["#ff5f57", "#febc2e", "#28c840"].map((c, i) => ( +
    ))}
    - - satyam@portfolio: ~ + + satyam@portfolio
    {/* SCROLLABLE OUTPUT */} -
    +
    {output.map((line, i) => { - if (line.type === "boot") return ( -
    - {line.text === "" ?
    : {"› "}{line.text}} -
    - ); - if (line.type === "cmd") return ( -
    - root - @ - kali - :~$  - {line.text} -
    - ); - if (line.type === "out") return ( -
    - {line.lines.map((l, j) => renderLine(l, j))} -
    - ); + if (line.type === "boot") + return ( +
    + {line.text === "" ?
    : {"› "}{line.text}} +
    + ); + if (line.type === "cmd") + return ( +
    + root + @ + kali + :~$  + + {line.text} + +
    + ); + if (line.type === "out") + return ( +
    + {line.lines.map((l, j) => renderLine(l, j))} +
    + ); return null; })} -
    +
    {/* STICKY INPUT */} -
    - root - @ - kali - :~$  -
    +
    + + root + + + @ + + + kali + + + :~$  + +
    {booted && focused && }
    - {/* KEYBOARD HINTS */} -
    - {[["TAB","autocomplete"],["↑↓","history"],["ENTER","execute"]].map(([key, label]) => ( - - {key} - {label} - - ))} -
    + {/* KEYBOARD HINTS - Hidden on mobile, shown on larger screens */} + {!isMobile && ( +
    + {[ + ["TAB", "autocomplete"], + ["↑↓", "history"], + ["ENTER", "execute"], + ].map(([key, label]) => ( + + + {key} + + {label} + + ))} +
    + )}
    ); From 644880fda9af684702ee259baf0adb6a17494c39 Mon Sep 17 00:00:00 2001 From: skvprogrammer Date: Wed, 15 Apr 2026 02:01:11 -0400 Subject: [PATCH 5/6] updated code working --- src/components/Terminal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Terminal.js b/src/components/Terminal.js index e2fac8e..e598782 100644 --- a/src/components/Terminal.js +++ b/src/components/Terminal.js @@ -452,7 +452,7 @@ export default function Terminal() { const headerPadding = isMobile ? "8px 12px" : "10px 18px"; const lineHeight = isMobile ? "1.6" : "1.75"; const bottomPadding = isMobile ? "0px" : "12px"; - const footerGap = isMobile ? "12px" : "20px"; + // const footerGap = isMobile ? "12px" : "20px"; return ( <> From 6432e549ad38e54385ba9301b6249c2f5e2504bc Mon Sep 17 00:00:00 2001 From: skvprogrammer Date: Wed, 15 Apr 2026 02:07:30 -0400 Subject: [PATCH 6/6] updated code working --- src/components/Terminal.js | 79 +++++++++++++++++++++++--------------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/src/components/Terminal.js b/src/components/Terminal.js index e598782..9abc7e6 100644 --- a/src/components/Terminal.js +++ b/src/components/Terminal.js @@ -237,40 +237,55 @@ export default function Terminal() { window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); +const outputRef = useRef([]); - // Boot sequence then auto-show banner - useEffect(() => { - let i = 0; - const interval = setInterval(() => { - if (i < BOOT_SEQUENCE.length) { - const idx = i; - const line = BOOT_SEQUENCE[idx]; - setOutput((prev) => [ - ...prev, - { - type: "boot", - text: line, - color: idx === BOOT_SEQUENCE.length - 1 ? "accent" : idx < 3 ? "prompt" : "muted", - }, - ]); - i++; - } else { - clearInterval(interval); - const bannerOutput = { type: "out", lines: COMMANDS.banner.output }; - setOutput((prev) => [...prev, bannerOutput]); - // Store persistent output (boot sequence + banner) to restore after clear - setPersistentOutput((prev) => [ - ...prev, - ...output.map((item) => item), - bannerOutput, - ]); - setBooted(true); - setTimeout(() => inputRef.current?.focus(), 50); - } - }, 150); - return () => clearInterval(interval); - }, []); +useEffect(() => { + outputRef.current = output; +}, [output]); + +useEffect(() => { + let i = 0; + const interval = setInterval(() => { + if (i < BOOT_SEQUENCE.length) { + const idx = i; + const line = BOOT_SEQUENCE[idx]; + setOutput((prev) => [ + ...prev, + { + type: "boot", + text: line, + color: + idx === BOOT_SEQUENCE.length - 1 + ? "accent" + : idx < 3 + ? "prompt" + : "muted", + }, + ]); + i++; + } else { + clearInterval(interval); + + const bannerOutput = { + type: "out", + lines: COMMANDS.banner.output, + }; + + setOutput((prev) => [...prev, bannerOutput]); + + setPersistentOutput((prev) => [ + ...prev, + ...outputRef.current, + bannerOutput, + ]); + + setBooted(true); + setTimeout(() => inputRef.current?.focus(), 50); + } + }, 150); + return () => clearInterval(interval); +}, []); // Auto-scroll useEffect(() => { bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight, behavior: "smooth" });