/* ========================================================== App shell — CMHH portfolio v3 - VS Code default theme + 8 themes - resizable sidebar - activity bar panels (files / search / git / extensions) - terminal panels (Terminal / Problems / Output / Debug) - quote ticker ========================================================== */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* -------- File registry -------- */ const FILES = [ { id: "home.py", label: "home.py", icon: "py", group: "src", render: () => window.__openFile?.(f)} /> }, { id: "about.md", label: "about.md", icon: "md", group: "src", render: () => }, { id: "projects.ipynb", label: "projects.ipynb", icon: "nb", group: "src", render: () => }, { id: "skills.json", label: "skills.json", icon: "json", group: "data", render: () => }, { id: "experience.ts", label: "experience.ts", icon: "ts", group: "src", render: () => }, { id: "education.yml", label: "education.yml", icon: "yml", group: "data", render: () => }, { id: "contact.css", label: "contact.css", icon: "css", group: "src", render: () => }, { id: "README.md", label: "README.md", icon: "md", group: "root", render: () => }, { id: "resume.pdf", label: "Carlos_Manuel_CV.pdf", icon: "pdf", group: "root", external: true }, ]; const isMobileVP = () => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches; /* -------- File icons -------- */ function FileIcon({ kind, size = 14 }) { const s = size; const common = { width: s, height: s }; switch (kind) { case "py": return ( ); case "md": return ( ); case "nb": return ( ); case "json": return ( ); case "ts": return ( TS ); case "yml": return ( YML ); case "css": return ( CSS ); case "pdf": return ( PDF ); default: return ; } } /* -------- Activity bar icons -------- */ function ABIcon({ kind, active }) { const c = active ? "currentColor" : "currentColor"; if (kind === "files") return ( ); if (kind === "search") return ( ); if (kind === "git") return ( ); if (kind === "pkg") return ( ); if (kind === "spark") return ( ); if (kind === "gear") return ( ); if (kind === "account") return ( ); return null; } /* ===================================================================== */ /* Themes registry */ const THEMES = [ { id: "vscode", label: "Default Dark+", swatch: ["#1e1e1e", "#007acc", "#4fc1ff"] }, { id: "midnight", label: "Tokyo Night", swatch: ["#1a1b26", "#7aa2f7", "#bb9af7"] }, { id: "onedark", label: "One Dark Pro", swatch: ["#282c34", "#61afef", "#c678dd"] }, { id: "dracula", label: "Dracula", swatch: ["#282a36", "#bd93f9", "#ff79c6"] }, { id: "monokai", label: "Monokai", swatch: ["#272822", "#f92672", "#a6e22e"] }, { id: "github-dark", label: "GitHub Dark", swatch: ["#0d1117", "#58a6ff", "#d2a8ff"] }, { id: "pinewood", label: "Gruvbox", swatch: ["#282828", "#fabd2f", "#fe8019"] }, { id: "paper", label: "Paper Mono", swatch: ["#f6f2e7", "#6b3fa0", "#2a5599"] }, ]; /* Quotes for the ticker */ const QUOTES = [ ["Premature optimization is the root of all evil.", "Donald Knuth"], ["The best way to predict the future is to invent it.", "Alan Kay"], ["Talk is cheap. Show me the code.", "Linus Torvalds"], ["Machines take me by surprise with great frequency.", "Alan Turing"], ["Artificial intelligence is the new electricity.", "Andrew Ng"], ["Code is like humor. When you have to explain it, it's bad.", "Cory House"], ["Any sufficiently advanced technology is indistinguishable from magic.", "Arthur C. Clarke"], ["There are only two hard things: cache invalidation and naming things.", "Phil Karlton"], ["Programs must be written for people to read.", "Harold Abelson"], ["Simplicity is prerequisite for reliability.", "Edsger W. Dijkstra"], ["Stay hungry. Stay foolish.", "Steve Jobs"], ["Innovation distinguishes between a leader and a follower.", "Steve Jobs"], ["Design is not just what it looks like. Design is how it works.", "Steve Jobs"], ["When something is important enough, you do it even if the odds are not in your favor.", "Elon Musk"], ["The first step is to establish that something is possible; then probability will occur.", "Elon Musk"], ["The advance of technology is based on making it fit in so you don't really even notice it.", "Bill Gates"], ["Your most unhappy customers are your greatest source of learning.", "Bill Gates"], ["Software is a great combination between artistry and engineering.", "Bill Gates"], ["First, solve the problem. Then, write the code.", "John Johnson"], ["Computers are useless. They can only give you answers.", "Pablo Picasso"], ["Any fool can write code that a computer can understand.", "Martin Fowler"], ["Make it work, make it right, make it fast.", "Kent Beck"], ["The function of good software is to make the complex appear to be simple.", "Grady Booch"], ["The best error message is the one that never shows up.", "Thomas Fuchs"], ["Move fast and break things.", "Mark Zuckerberg"], ["By far the greatest danger of AI is that people conclude too early that they understand it.", "Eliezer Yudkowsky"], ["The real problem is not whether machines think but whether men do.", "B.F. Skinner"], ["It's not a bug, it's an undocumented feature.", "Anonymous"], ]; /* ===================================================================== */ function App() { const [activeFile, setActiveFile] = useState("home.py"); const [openTabs, setOpenTabs] = useState(["home.py", "about.md", "projects.ipynb", "skills.json"]); const [isMobile, setIsMobile] = useState(isMobileVP); const [sidebarOpen, setSidebarOpen] = useState(() => !isMobileVP()); const [sidebarWidth, setSidebarWidth] = useState(260); const [activityBarVisible, setActivityBarVisible] = useState(true); const [copilotOpen, setCopilotOpen] = useState(false); const [terminalOpen, setTerminalOpen] = useState(() => !isMobileVP()); const [terminalTab, setTerminalTab] = useState("terminal"); const [terminalHeight, setTerminalHeight] = useState(220); const [paletteOpen, setPaletteOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(null); const [theme, setTheme] = useState("vscode"); const [activityTab, setActivityTab] = useState("files"); const [searchQ, setSearchQ] = useState(""); const [collapsedGroups, setCollapsedGroups] = useState({}); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]); useEffect(() => { document.documentElement.style.setProperty("--sidebar-w", sidebarWidth + "px"); }, [sidebarWidth]); useEffect(() => { const mq = window.matchMedia("(max-width: 768px)"); const onChange = (e) => setIsMobile(e.matches); if (mq.addEventListener) mq.addEventListener("change", onChange); else mq.addListener(onChange); return () => { if (mq.removeEventListener) mq.removeEventListener("change", onChange); else mq.removeListener(onChange); }; }, []); useEffect(() => { window.__openFile = (id) => openFile(id); window.__toggleSidebar = () => setSidebarOpen(s => !s); window.__toggleTerminal = () => setTerminalOpen(t => !t); window.__openPalette = () => setPaletteOpen(true); window.__toggleFullscreen = async () => { const el = document.documentElement; try { const isFs = document.fullscreenElement || document.webkitFullscreenElement; if (!isFs) { const req = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen; if (req) await req.call(el); } else { const exit = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen; if (exit) await exit.call(document); } } catch (e) { // iframe preview blocks fullscreen — open in new tab as fallback try { window.top.location.href = window.location.href; } catch (_) { window.open(window.location.href, "_blank"); } } }; return () => { delete window.__openFile; delete window.__toggleSidebar; delete window.__toggleFullscreen; delete window.__toggleTerminal; delete window.__openPalette; }; }); const openFile = useCallback((id) => { const f = FILES.find(x => x.id === id); if (!f) return; if (f.external) { window.open("uploads/Carlos_Manuel_CV_v2-6a0482d3.pdf", "_blank", "noopener"); return; } setActiveFile(id); setOpenTabs(t => t.includes(id) ? t : [...t, id]); setPaletteOpen(false); setSettingsOpen(false); setMenuOpen(null); if (isMobileVP()) { setSidebarOpen(false); setCopilotOpen(false); } }, []); const handleCopilotToggle = () => { setCopilotOpen(c => !c); if (isMobileVP()) setSidebarOpen(false); }; const closeTab = (id, e) => { e?.stopPropagation(); setOpenTabs(t => { const next = t.filter(x => x !== id); if (id === activeFile && next.length) setActiveFile(next[next.length - 1]); if (!next.length) setActiveFile(null); return next; }); }; useEffect(() => { const handler = (e) => { const mod = e.metaKey || e.ctrlKey; if (mod && e.key.toLowerCase() === "k") { e.preventDefault(); setPaletteOpen(p => !p); } else if (mod && e.key.toLowerCase() === "p") { e.preventDefault(); setPaletteOpen(true); } else if (mod && e.key.toLowerCase() === "b") { e.preventDefault(); setSidebarOpen(s => !s); } else if (mod && e.key.toLowerCase() === "j") { e.preventDefault(); setTerminalOpen(t => !t); } else if (mod && e.key.toLowerCase() === "i") { e.preventDefault(); handleCopilotToggle(); } else if (mod && e.key.toLowerCase() === ",") { e.preventDefault(); setSettingsOpen(s => !s); } else if (e.key === "F11") { e.preventDefault(); window.__toggleFullscreen?.(); } else if (e.key === "Escape") { setPaletteOpen(false); setSettingsOpen(false); setMenuOpen(null); } }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []); const activeFileObj = FILES.find(f => f.id === activeFile); const fileTypeLabel = useMemo(() => { if (!activeFileObj) return "—"; return { py: "Python", md: "Markdown", nb: "Jupyter", json: "JSON", ts: "TypeScript", css: "CSS", pdf: "PDF", yml: "YAML", }[activeFileObj.icon] || "Text"; }, [activeFileObj]); const toggleGroup = (g, force) => { if (g === "__set_src") return setCollapsedGroups(c => ({ ...c, src: force })); if (g === "__set_data") return setCollapsedGroups(c => ({ ...c, data: force })); if (g === "__set_root") return setCollapsedGroups(c => ({ ...c, root: force })); setCollapsedGroups(c => ({ ...c, [g]: !c[g] })); }; /* Sidebar resize — collapses below threshold */ const startResize = (e) => { e.preventDefault(); e.stopPropagation(); const onMove = (ev) => { ev.preventDefault(); const newW = ev.clientX - 48; if (newW < 140) { setSidebarOpen(false); } else { if (!sidebarOpen) setSidebarOpen(true); setSidebarWidth(Math.min(500, Math.max(180, newW))); } }; const onUp = () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); document.body.style.userSelect = ""; document.body.classList.remove("resizing-ew"); }; document.body.style.userSelect = "none"; document.body.classList.add("resizing-ew"); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); }; return (
setSidebarOpen(s => !s)} toggleTerminal={() => setTerminalOpen(t => !t)} toggleCopilot={handleCopilotToggle} openPalette={() => setPaletteOpen(true)} openSettings={() => setSettingsOpen(true)} openTabs={openTabs} closeTab={closeTab} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
{isMobile && sidebarOpen && (
setSidebarOpen(false)} /> )} {activityBarVisible && ( { if (isMobile && activityTab === k && sidebarOpen) { setSidebarOpen(false); } else { setActivityTab(k); setSidebarOpen(true); if (isMobile) setCopilotOpen(false); } }} onSettings={() => setSettingsOpen(true)} onCopilot={handleCopilotToggle} copilotOpen={copilotOpen} onHide={() => setActivityBarVisible(false)} /> )} {!activityBarVisible && ( )} {sidebarOpen && ( )} {sidebarOpen &&
} {copilotOpen && ( setCopilotOpen(false)} /> )}
setSettingsOpen(true)} copilotOpen={copilotOpen} /> {paletteOpen && ( setPaletteOpen(false)} openFile={openFile} toggleTerminal={() => setTerminalOpen(t => !t)} toggleSidebar={() => setSidebarOpen(s => !s)} toggleCopilot={handleCopilotToggle} setTheme={setTheme} /> )} {settingsOpen && ( setSettingsOpen(false)} /> )}
); } /* -------- TitleBar -------- */ function TitleBar() { return (
cmhh22 · portfolio ⌘K
v3.0 · live
); } /* -------- MenuBar -------- */ function MenuBar({ openFile, toggleSidebar, toggleTerminal, toggleCopilot, openPalette, openSettings, openTabs, closeTab, menuOpen, setMenuOpen }) { const menus = { "File": [ { label: "New tab", kbd: "⌘T" }, { label: "Open file…", kbd: "⌘P", action: openPalette }, { label: "Close tab", kbd: "⌘W", action: () => activeClose(openTabs, closeTab) }, { type: "divider" }, { type: "section", label: "Open recent" }, { label: "home.py", action: () => openFile("home.py") }, { label: "projects.ipynb", action: () => openFile("projects.ipynb") }, { label: "experience.ts", action: () => openFile("experience.ts") }, { type: "divider" }, { label: "Download CV", action: () => openFile("resume.pdf") }, ], "Edit": [ { label: "Undo", kbd: "⌘Z" }, { label: "Redo", kbd: "⌘⇧Z" }, { type: "divider" }, { label: "Cut", kbd: "⌘X" }, { label: "Copy", kbd: "⌘C" }, { label: "Paste", kbd: "⌘V" }, { type: "divider" }, { label: "Find", kbd: "⌘F" }, ], "View": [ { label: "Toggle sidebar", kbd: "⌘B", action: toggleSidebar }, { label: "Toggle terminal", kbd: "⌘J", action: toggleTerminal }, { label: "Toggle Copilot", kbd: "⌘I", action: toggleCopilot }, { label: "Toggle fullscreen", kbd: "F11", action: () => window.__toggleFullscreen?.() }, { type: "divider" }, { label: "Settings", kbd: "⌘,", action: openSettings }, ], "Go": [ { label: "Go to file", kbd: "⌘P", action: openPalette }, { label: "Command palette", kbd: "⌘K", action: openPalette }, { type: "divider" }, { label: "Go to home.py", action: () => openFile("home.py") }, { label: "Go to README.md", action: () => openFile("README.md") }, ], "Help": [ { label: "Keyboard shortcuts", action: openPalette }, { label: "About this site", action: () => openFile("README.md") }, { label: "GitHub ↗", action: () => window.open("https://github.com/cmhh22", "_blank", "noopener") }, ], "Copilot": [ { label: "Open Copilot panel", kbd: "⌘I", action: toggleCopilot }, { label: "Ask about Carlos", action: () => { toggleCopilot(); setTimeout(() => window.__copilotAsk?.("Tell me about Carlos"), 80); } }, { label: "Ask about projects", action: () => { toggleCopilot(); setTimeout(() => window.__copilotAsk?.("What projects has Carlos built?"), 80); } }, { label: "Ask about ETECSA", action: () => { toggleCopilot(); setTimeout(() => window.__copilotAsk?.("Tell me about his ETECSA experience"), 80); } }, ], }; return (
setMenuOpen(null)}> {Object.keys(menus).map(name => (
setMenuOpen(menuOpen === name ? null : name)} onMouseEnter={() => menuOpen && setMenuOpen(name)}> {name} {menuOpen === name && (
e.stopPropagation()}> {menus[name].map((row, i) => { if (row.type === "divider") return
; if (row.type === "section") return
{row.label}
; return (
{ row.action?.(); setMenuOpen(null); }}> {row.label} {row.kbd && {row.kbd}}
); })}
)}
))}
); } function activeClose(openTabs, closeTab) { const last = openTabs[openTabs.length - 1]; if (last) closeTab(last); } /* -------- ActivityBar -------- */ function ActivityBar({ activity, setActivity, onSettings, onCopilot, copilotOpen }) { return (
); } /* -------- Sidebar -------- */ function Sidebar({ activeFile, openFile, onCopilot, activityTab, collapsedGroups, toggleGroup, searchQ, setSearchQ }) { if (activityTab === "search") return ; if (activityTab === "git") return ; if (activityTab === "pkg") return ; // default: files const allCollapsed = collapsedGroups.src && collapsedGroups.data && collapsedGroups.root; const toggleAll = () => { const next = !allCollapsed; toggleGroup("__set_src", next); toggleGroup("__set_data", next); toggleGroup("__set_root", next); }; return ( ); } function TreeGroup({ label, collapsed, onToggle, children }) { return ( <>
▾ {label}
{!collapsed && children} ); } function FileRow({ f, active, onClick }) { // mock git status const mod = (f.id === "projects.ipynb" || f.id === "skills.json") ? "M" : null; return (
{f.label} {mod && {mod}}
); } /* -------- Search Pane -------- */ const SEARCHABLE = [ { file: "home.py", text: "Carlos Manuel Hernández AI-Driven Software Engineer ML Engineer Data Scientist UCLV Cuba LLMs MLOps deep learning Python PyTorch Django" }, { file: "about.md", text: "4th-year Computer Science student UCLV Universidad Central Marta Abreu Las Villas AI ML portfolio ETECSA telecom Telegram bot LLMs RAG Transformers" }, { file: "projects.ipynb", text: "ETECSA Asset Sync Django Pandas Docker NYC Taxi XGBoost LightGBM SHAP Dask Streamlit Minecraft LLM Agent Bartolo GPT-4 Mistral Grok Socket.io Transformer BERT Qwen RAG ChromaDB PyTorch MLP CNN EfficientNet LSTM Attention EDA Airbnb K-means" }, { file: "skills.json", text: "Python SQL JavaScript TypeScript C++ PyTorch Scikit-learn XGBoost LightGBM TensorFlow HuggingFace SHAP LangChain RAG ChromaDB LLM Agents OpenAI Django FastAPI Node Socket.io Pandas NumPy Polars Dask PostgreSQL MySQL Docker GitHub Actions MLflow Git Streamlit" }, { file: "experience.ts", text: "AI-Driven Software Engineer Freelance Telegram bot OpenAI ETECSA University Intern Asset Sync Django Pandas Docker GitHub Actions MySQL" }, { file: "education.yml", text: "B.S. Computer Science UCLV Universidad Central Marta Abreu Las Villas Cuba HackerRank Kaggle HuggingFace NLP Course Spanish English" }, { file: "contact.css", text: "email carlosmanuelhdezhdez@gmail.com phone +53 56658638 Cuba github.com/cmhh22 linkedin.com/in/cmhh22 internships research remote AI ML positions" }, { file: "README.md", text: "cmhh22 portfolio IDE VS Code sidebar command palette terminal Copilot themes Dracula Monokai" }, ]; function SearchPane({ openFile, searchQ, setSearchQ }) { const results = useMemo(() => { const q = searchQ.trim(); if (!q) return []; const re = new RegExp(escapeRegex(q), "gi"); return SEARCHABLE.map(s => { const matches = []; let m; const local = new RegExp(escapeRegex(q), "gi"); while ((m = local.exec(s.text)) && matches.length < 4) { const start = Math.max(0, m.index - 24); const end = Math.min(s.text.length, m.index + q.length + 28); matches.push((start > 0 ? "…" : "") + s.text.slice(start, end) + (end < s.text.length ? "…" : "")); } return { file: s.file, matches }; }).filter(r => r.matches.length); }, [searchQ]); return ( ); } function escapeRegex(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); } function highlight(s, q) { if (!q.trim()) return s; const re = new RegExp("(" + escapeRegex(q) + ")", "gi"); return s.replace(/[<>&]/g, c => ({"<":"<",">":">","&":"&"}[c])).replace(re, "$1"); } /* -------- Git Pane -------- */ function GitPane({ openFile }) { return ( ); } /* -------- Extensions Pane -------- */ function ExtIcon({ kind }) { const stroke = "currentColor"; const common = { width: 18, height: 18, fill: "none", stroke, strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }; if (kind === "copilot") return ( ); if (kind === "palette") return ( ); if (kind === "notebook") return ( ); if (kind === "search") return ( ); if (kind === "terminal") return ( ); if (kind === "git") return ( ); return null; } function ExtensionsPane() { const exts = [ { icon: "copilot", tint: "violet", name: "CMHH's Copilot", pub: "cmhh22", desc: "Carlos's AI assistant — answers about projects, skills, experience.", status: "installed" }, { icon: "palette", tint: "blue", name: "Theme Switcher", pub: "cmhh22", desc: "8 hand-picked color themes including Default Dark+, Dracula, Monokai.", status: "installed" }, { icon: "notebook", tint: "amber", name: "Notebook Renderer", pub: "cmhh22", desc: "Jupyter-style cells for projects.ipynb.", status: "installed" }, { icon: "search", tint: "mint", name: "Workspace Search", pub: "cmhh22", desc: "Full-text search across all portfolio files.", status: "installed" }, { icon: "terminal", tint: "rose", name: "Integrated Terminal", pub: "cmhh22", desc: "Fake but opinionated terminal with easter eggs.", status: "installed" }, { icon: "git", tint: "cyan", name: "Source Control", pub: "cmhh22", desc: "Mock git panel — changes, recent commits.", status: "installed" }, ]; return ( ); } /* -------- Editor -------- */ function Editor({ openTabs, activeFile, setActiveFile, closeTab, terminalOpen, setTerminalOpen, terminalTab, setTerminalTab, terminalHeight, setTerminalHeight, openFile, activeFileObj, setTheme }) { return (
{openTabs.map(id => { const f = FILES.find(x => x.id === id); if (!f) return null; return (
setActiveFile(id)}> {f.label}
); })}
{activeFileObj ? ( <> cmhh22-portfolio {activeFileObj.group === "root" ? "." : activeFileObj.group} {activeFileObj.label} ) : no file open}
{activeFileObj ? activeFileObj.render() : (
No file open. Press ⌘P to open one.
)}
{terminalOpen && ( setTerminalOpen(false)} openFile={openFile} terminalTab={terminalTab} setTerminalTab={setTerminalTab} setTheme={setTheme} terminalHeight={terminalHeight} setTerminalHeight={setTerminalHeight} /> )}
); } /* -------- Ticker (type then erase) -------- */ function Ticker() { const [qi, setQi] = useState(0); const [typed, setTyped] = useState(""); const [phase, setPhase] = useState("type"); // type | hold | erase useEffect(() => { const [text] = QUOTES[qi]; let id; if (phase === "type") { let i = typed.length; id = setInterval(() => { i++; setTyped(text.slice(0, i)); if (i >= text.length) { clearInterval(id); setPhase("hold"); } }, 32); } else if (phase === "hold") { id = setTimeout(() => setPhase("erase"), 2400); } else if (phase === "erase") { let i = typed.length; id = setInterval(() => { i--; setTyped(text.slice(0, Math.max(0, i))); if (i <= 0) { clearInterval(id); setQi(q => (q + 1) % QUOTES.length); setPhase("type"); } }, 18); } return () => { clearInterval(id); clearTimeout(id); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [phase, qi]); const [, attr] = QUOTES[qi]; return (
QUOTE {typed} {phase !== "erase" && typed.length > 0 ? `— ${attr}` : ""}
); } /* -------- StatusBar -------- */ function StatusBar({ fileType, theme, onThemeClick, copilotOpen }) { const themeLabel = THEMES.find(t => t.id === theme)?.label || "Theme"; const now = useClock(); return (
window.open("https://github.com/cmhh22", "_blank", "noopener")}> ⎇ main
↑1 ↓0
⚠ 0 ✗ 0
cmhh22's portfolio
{copilotOpen ? "✦ Copilot · on" : "✦ Copilot"}
{fileType}
UTF-8
LF
{themeLabel}
{now}
); } function useClock() { const [t, setT] = useState(() => fmtClock(new Date())); useEffect(() => { const id = setInterval(() => setT(fmtClock(new Date())), 30 * 1000); return () => clearInterval(id); }, []); return t; } function fmtClock(d) { return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false }); } /* -------- Terminal Panel (with tabs) -------- */ function TerminalPanel({ onClose, openFile, terminalTab, setTerminalTab, setTheme, terminalHeight, setTerminalHeight }) { const handleRef = useRef(null); useEffect(() => { const handle = handleRef.current; if (!handle) return; const onDown = (e) => { e.preventDefault(); e.stopPropagation(); const startY = e.clientY; const startH = terminalHeight; const onMove = (ev) => { ev.preventDefault(); const delta = startY - ev.clientY; const newH = startH + delta; if (newH < 60) { onClose(); cleanup(); } else { setTerminalHeight(Math.max(80, Math.min(window.innerHeight - 160, newH))); } }; const cleanup = () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); document.body.style.userSelect = ""; document.body.classList.remove("resizing-ns"); }; const onUp = () => cleanup(); document.body.style.userSelect = "none"; document.body.classList.add("resizing-ns"); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); }; handle.addEventListener("mousedown", onDown); return () => handle.removeEventListener("mousedown", onDown); }, [terminalHeight, onClose, setTerminalHeight]); return (
setTerminalTab("terminal")}>Terminal
setTerminalTab("problems")}> Problems 4
setTerminalTab("output")}>Output
setTerminalTab("debug")}>Debug Console
{terminalTab === "terminal" && } {terminalTab === "problems" && } {terminalTab === "output" && } {terminalTab === "debug" && }
); } function Terminal({ openFile, setTheme }) { const [lines, setLines] = useState(() => initialLines()); const [input, setInput] = useState(""); const [history, setHistory] = useState([]); const [histIdx, setHistIdx] = useState(-1); const [cwd, setCwd] = useState("~"); const bodyRef = useRef(null); const inputRef = useRef(null); useEffect(() => { window.__clearTerminal = () => setLines(initialLines()); return () => { delete window.__clearTerminal; }; }, []); useEffect(() => { bodyRef.current?.scrollTo({ top: 1e9 }); }, [lines]); function append(content) { setLines(l => [...l, ...(Array.isArray(content) ? content : [content])]); } function runCommand(raw) { const cmd = raw.trim(); setHistory(h => [...h, cmd]); setHistIdx(-1); append({ kind: "prompt", cwd, text: cmd }); if (!cmd) return; const lower = cmd.toLowerCase(); if (lower === "sudo hire me") { append([ { kind: "text", text: "[sudo] authorizing recruiter privileges…", color: "ok" }, { kind: "text", text: "✓ Permission granted. Redirecting to contact…", color: "ok" }, ]); openFile("contact.css"); return; } const [base, ...args] = cmd.split(/\s+/); switch (base) { case "help": append([ { kind: "help", text: "COMMANDS" }, { kind: "help-row", left: "ls", right: "list files" }, { kind: "help-row", left: "open ", right: "open file in editor" }, { kind: "help-row", left: "whoami", right: "short bio" }, { kind: "help-row", left: "contact", right: "contact info" }, { kind: "help-row", left: "resume", right: "download CV" }, { kind: "help-row", left: "github", right: "open my GitHub" }, { kind: "help-row", left: "theme ", right: "switch color theme" }, { kind: "help-row", left: "copilot", right: "✦ open AI assistant" }, { kind: "help-row", left: "clear", right: "clear terminal" }, { kind: "text", text: "" }, { kind: "text", text: "hidden gems: joke · coffee · sudo hire me", color: "text-muted" }, ]); break; case "ls": append({ kind: "text", text: FILES.map(f => f.label).join(" "), color: "ok" }); break; case "pwd": append({ kind: "text", text: "/home/cmhh22/portfolio" }); break; case "whoami": append([ { kind: "text", text: "carlos_manuel — ai-driven software engineer" }, { kind: "text", text: "4th-year CS @ UCLV · Cuba · open to opportunities" }, ]); break; case "cat": case "open": { const target = args[0]; const f = FILES.find(x => x.id === target); if (!f) { append({ kind: "text", text: `${base}: ${target || ""} not found`, color: "err" }); break; } openFile(target); append({ kind: "text", text: `→ opened ${target}`, color: "ok" }); break; } case "skills": openFile("skills.json"); append({ kind: "text", text: "→ opening skills.json", color: "ok" }); break; case "experience": openFile("experience.ts"); append({ kind: "text", text: "→ opening experience.ts", color: "ok" }); break; case "contact": openFile("contact.css"); append({ kind: "text", text: "carlosmanuelhdezhdez@gmail.com · github.com/cmhh22", color: "ok" }); break; case "github": window.open("https://github.com/cmhh22", "_blank", "noopener"); append({ kind: "text", text: "→ github.com/cmhh22", color: "ok" }); break; case "resume": case "cv": window.open("uploads/Carlos_Manuel_CV_v2-6a0482d3.pdf", "_blank", "noopener"); append({ kind: "text", text: "[cv] opening Carlos_Manuel_CV.pdf", color: "ok" }); break; case "theme": { const t = args[0]; const ok = THEMES.map(x => x.id); if (!ok.includes(t)) { append({ kind: "text", text: `theme: choose one of: ${ok.join(", ")}`, color: "err" }); break; } setTheme(t); append({ kind: "text", text: `✓ theme → ${t}`, color: "ok" }); break; } case "copilot": append({ kind: "text", text: "✦ opening Copilot panel…", color: "ok" }); window.__toggleCopilot?.(); break; case "joke": { const jokes = [ "Why do ML engineers love nature? Because of all the trees and random forests.", "There are only 10 types of people: those who understand binary and those who don't.", "My code doesn't have bugs. It develops random unsupervised features.", "How many prompts does it take to change a lightbulb? Just one — but it has to be very specific.", "A SQL query walks into a bar, walks up to two tables and asks: 'Can I join you?'", ]; append({ kind: "text", text: "› " + jokes[Math.floor(Math.random() * jokes.length)], color: "acc" }); break; } case "coffee": append({ kind: "text", text: "[coffee] brewing... fueling the ML pipeline", color: "ok" }); break; case "clear": setLines([]); break; case "exit": window.__closeTerminal?.(); break; case "echo": append({ kind: "text", text: args.join(" ") }); break; case "cd": if (!args[0] || args[0] === "~") setCwd("~"); else if (args[0] === "..") setCwd("~"); else setCwd(`~/${args[0]}`); break; case "date": append({ kind: "text", text: new Date().toString() }); break; case "sudo": append({ kind: "text", text: "nice try.", color: "err" }); break; case "rm": append({ kind: "text", text: "denied: this portfolio is immutable.", color: "err" }); break; default: append({ kind: "text", text: `${base}: command not found — try 'help'`, color: "err" }); } } const onKey = (e) => { if (e.key === "Enter") { e.preventDefault(); runCommand(input); setInput(""); } else if (e.key === "ArrowUp") { e.preventDefault(); if (!history.length) return; const next = histIdx === -1 ? history.length - 1 : Math.max(0, histIdx - 1); setHistIdx(next); setInput(history[next]); } else if (e.key === "ArrowDown") { e.preventDefault(); if (histIdx === -1) return; const next = histIdx + 1; if (next >= history.length) { setHistIdx(-1); setInput(""); } else { setHistIdx(next); setInput(history[next]); } } }; return (
inputRef.current?.focus()}> {lines.map((l, i) => )}
setInput(e.target.value)} onKeyDown={onKey} spellCheck="false"/>
); } function initialLines() { return [ { kind: "text", text: "Welcome! Type 'help' to see available commands.", color: "ok" }, { kind: "text", text: "" }, ]; } function Prompt({ cwd }) { return ( cmhh22 @ portfolio : {cwd} $ ); } function TermLine({ line, cwd }) { if (line.kind === "prompt") { return (
{line.text}
); } if (line.kind === "help") { return
{line.text}
; } if (line.kind === "help-row") { return (
{line.left} {line.right}
); } const cls = line.color === "text-muted" ? "" : (line.color || ""); const style = line.color === "text-muted" ? { color: "var(--fg-muted)" } : undefined; return (
{line.text || "\u00a0"}
); } /* -------- Problems / Output / Debug -------- */ const PROBLEMS = [ { sev: "info", text: "Tip: press ⌘K for the command palette.", where: "README.md", pos: "L4:14" }, { sev: "info", text: "Hint: try `theme dracula` in the terminal.", where: "skills.json", pos: "L1:1" }, { sev: "warn", text: "TODO: ship Tinta cyanotype demo before summer.", where: "projects.ipynb", pos: "L42:8" }, { sev: "warn", text: "Coffee level critically low.", where: "kitchen.yaml", pos: "L1:1" }, ]; function ProblemsPane({ openFile }) { return (
{PROBLEMS.map((p, i) => (
{ const f = FILES.find(x => x.id === p.where); if (f) openFile(p.where); }}> {p.sev === "warn" ? "▲" : p.sev === "err" ? "✗" : "ⓘ"} {p.text} {p.where} {p.pos}
))}
); } function OutputPane() { const [extra, setExtra] = useState([]); useEffect(() => { const id = setInterval(() => { const msgs = [ "Heartbeat ok", "Indexing skills.json (cache hit)", "Background: refreshing about.md", "No file changes", "Watcher: idle", ]; setExtra(e => [...e.slice(-12), { stamp: new Date().toLocaleTimeString(), tag: "info", text: msgs[Math.floor(Math.random()*msgs.length)], }]); }, 6000); return () => clearInterval(id); }, []); const initial = [ { tag: "info", text: "Loaded portfolio v3.0", stamp: "11:14:02" }, { tag: "info", text: "Mounting React tree…", stamp: "11:14:02" }, { tag: "ok", text: "Mount complete (1438 ms)", stamp: "11:14:03" }, { tag: "info", text: "Theme: VSCode Default Dark+", stamp: "11:14:03" }, { tag: "ok", text: "Copilot ready", stamp: "11:14:04" }, ]; return (
{[...initial, ...extra].map((l, i) => (
{l.stamp} [{l.tag}]{" "} {l.text}
))}
); } function DebugPane() { return (
[debug] No debug session running.
▸ Tip: run node portfolio.js from the terminal (it'll ignore you politely).
{new Date().toLocaleTimeString()} [info] idle
); } function CopilotBlob() { return (