// ide-shell.jsx — IDE mode: titlebar, file tree, tabs, editor, terminal.
const FILES = [
{ id: 'home', path: 'home.tsx', kind: 'tsx', group: 'about' },
{ id: 'about', path: 'about.html', kind: 'html', group: 'about' },
{ id: 'projects', path: 'projects.js', kind: 'js', group: 'projects' },
{ id: 'contact', path: 'contact.css', kind: 'css', group: 'root' },
{ id: 'skills', path: 'skills.json', kind: 'json', group: 'root' },
{ id: 'resume', path: 'resume.pdf', kind: 'pdf', group: 'root' },
];
// ── File type icons ────────────────────────────────────────────────────────
function FileIcon({ kind, size = 14 }) {
const s = { fontSize: size - 1, fontWeight: 700, fontFamily: 'monospace', lineHeight: 1, display: 'inline-block' };
switch (kind) {
case 'tsx': return ⚛;
case 'html': return {''};
case 'js': return JS;
case 'css': return CS;
case 'json': return {'{}'};
case 'pdf': return PD;
case 'md': return MD;
default: return ·;
}
}
// ── Syntax helpers ─────────────────────────────────────────────────────────
const Kw = ({ c }) => {c ? null : null}; // unused; direct spans below
const Str = ({ s }) => "{s}";
const Num = ({ n }) => {n};
const Cmt = ({ c }) => {c};
const Prop = ({ p }) => {p};
// ── Shared markdown helpers ────────────────────────────────────────────────
const Md = ({ children, style }) => {children}
;
const H1 = ({ children }) => # {children}
;
const H2 = ({ children }) => ## {children}
;
const Tag = ({ children }) => (
{children}
);
// ── File renderers ─────────────────────────────────────────────────────────
function FileHome() {
const V = window.VINOD;
const isMobile = window.innerWidth < 640;
return (
{'// portfolio / home.tsx'}
Hi all. I am
{V.name}
> {V.role}
{/* code block */}
);
}
function FileAbout() {
const V = window.VINOD;
const isMobile = window.innerWidth < 640;
return (
About
> {V.role} · {V.location} · {V.yearsExp} yrs
{V.summary}
links
experience
{window.EXPERIENCE.map((e) => (
● {e.company}
— {e.role} · {e.range}
{e.current && · current}
{e.bullets.map((b, i) => - – {b}
)}
{e.stack.map((s) => {s})}
{e.awards &&
{e.awards.map((a) =>
★ {a}
)}
}
))}
education
{window.EDUCATION.degree} · {window.EDUCATION.school}
{window.EDUCATION.range} · {window.EDUCATION.location}
);
}
// projects.js — rendered as syntax-highlighted JS
function FileProjects() {
const PJ = window.PROJECTS;
const L = ({ indent = 0, children }) => (
{children}
);
return (
const{' '}
{' '}
= [
{PJ.map((p, pi) => (
{'{'}
: ,
: ,
: ,
: [
{p.stack.map((s, i) => (
{i < p.stack.length - 1 && , }
))}
],
: ,
{'}'}{pi < PJ.length - 1 ? ',' : ''}
{pi < PJ.length - 1 &&
}
))}
];
);
}
// contact.css — rendered as CSS
function FileContact() {
const V = window.VINOD;
const rule = (sel, props) => (
{sel}
{'{'}{'\n'}
{props.map(([k, v, isLink]) => (
{k}
:
{isLink
?
"{v}"
:
"{v}"}
;
))}
{'}'}
);
return (
{'\n\n'}
{rule('.contact', [
['email', V.email, `mailto:${V.email}`],
['phone', V.phone, null],
['location', V.location, null],
['website', V.site, `https://${V.site}`],
])}
{rule('.availability', [
['status', 'open to opportunities', null],
['roles', 'senior-IC, tech-lead', null],
['domains', 'React · Vue · Node · TypeScript', null],
])}
{rule('.socials', [
['github', V.github, `https://${V.github}`],
['linkedin', V.linkedin, `https://${V.linkedin}`],
])}
);
}
function FileSkills() {
const SK = window.SKILLS;
return (
{'{'}{'\n'}
{SK.map((s, i) => (
{' '}"{s.name}"
: {'{ '}
"pct":
{s.pct}
,
"years":
{s.years}
{' }'}
{i < SK.length - 1 ? ',' : ''}{'\n'}
))}
{'}'}
);
}
function FileResume() {
return (
resume.pdf
Binary file — preview not available in editor.
↗ open in new tab
);
}
function renderFile(id) {
switch (id) {
case 'home': return ;
case 'about': return ;
case 'projects': return ;
case 'contact': return ;
case 'skills': return ;
case 'resume': return ;
default: return 404 — file not found;
}
}
const FILE_BY_ID = Object.fromEntries(FILES.map((f) => [f.id, f]));
// ── Explorer helpers ───────────────────────────────────────────────────────
function FolderRow({ name, open, onClick }) {
return (
{open ? '▾' : '▸'}
📁
{name}
);
}
function FileRow({ f, depth, active, acc, onOpen }) {
return (
onOpen(f.id)} style={{
display: 'flex', alignItems: 'center', gap: 6,
padding: '3px 8px', paddingLeft: 8 + depth * 16,
background: active ? 'rgba(255,255,255,.07)' : 'transparent',
borderLeft: active ? `2px solid ${acc}` : '2px solid transparent',
color: active ? '#fff' : 'rgba(212,210,203,.75)',
cursor: 'pointer', fontSize: 13,
}}
onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'rgba(255,255,255,.04)'; }}
onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
{f.path.split('/').pop()}
);
}
// ── Titlebar ───────────────────────────────────────────────────────────────
function Titlebar({ activeId, isMobile }) {
const f = FILE_BY_ID[activeId];
const title = f ? `${f.path} — vinod@dev` : 'vinod@dev';
const menus = isMobile ? ['File', 'Help'] : ['File', 'Edit', 'Selection', 'View', 'Go', 'Run', 'Terminal', 'Help'];
return (
{menus.map((m) => (
e.currentTarget.style.background = 'rgba(255,255,255,.08)'}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
{m}
))}
{!isMobile && (
{title}
)}
);
}
// ── Main IDE component ─────────────────────────────────────────────────────
function IdeShell({ theme, density, crt, cli, onExit }) {
const [openTabs, setOpenTabs] = React.useState(['home']);
const [activeId, setActiveId] = React.useState('home');
const [folders, setFolders] = React.useState({ about: true, projects: true });
const [termOpen, setTermOpen] = React.useState(false);
const [termHeight, setTermHeight] = React.useState(220);
const [palette, setPalette] = React.useState(false);
const [palQuery, setPalQuery] = React.useState('');
const [palIdx, setPalIdx] = React.useState(0);
const [chatOpen, setChatOpen] = React.useState(false);
const [explorerOpen, setExplorerOpen] = React.useState(true);
const [sidebarOpen, setSidebarOpen] = React.useState(false); // mobile sidebar overlay
// expose openFile for home-page buttons
React.useEffect(() => {
window._ideOpenFile = openFile;
return () => { delete window._ideOpenFile; };
});
const openFile = (id) => {
setOpenTabs((t) => (t.includes(id) ? t : [...t, id]));
setActiveId(id);
};
const closeTab = (id) => {
setOpenTabs((t) => {
const next = t.filter((x) => x !== id);
if (id === activeId) setActiveId(next[Math.max(0, t.indexOf(id) - 1)] || next[0] || null);
return next;
});
};
const onResizeStart = (e) => {
e.preventDefault();
const startY = e.clientY, startH = termHeight;
const onMove = (ev) => setTermHeight(Math.max(80, Math.min(600, startH + (startY - ev.clientY))));
const onUp = () => {
window.removeEventListener('pointermove', onMove);
window.removeEventListener('pointerup', onUp);
};
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', onUp);
};
React.useEffect(() => {
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'p') {
e.preventDefault(); setPalette((p) => !p); setPalQuery(''); setPalIdx(0);
} else if (e.ctrlKey && e.key === '`') {
e.preventDefault(); setTermOpen((o) => !o);
} else if (e.key === 'Escape' && palette) {
setPalette(false);
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [palette]);
const palMatches = palQuery
? FILES.filter((f) => f.path.toLowerCase().includes(palQuery.toLowerCase()))
: FILES;
const acc = theme.acc;
const fg = '#d4d2cb';
const dim = 'rgba(212,210,203,.55)';
const activeFile = FILE_BY_ID[activeId];
const isMobile = window.innerWidth < 768;
return (
{/* ── Titlebar ── */}
{/* ── Activity bar ── */}
{[
{ icon: 'codicon-files', label: 'Explorer', sel: false, onClick: () => { if (isMobile) { setSidebarOpen(s => !s); } else { setExplorerOpen(e => !e); } } },
{ icon: 'codicon-search', label: 'Search', sel: false, onClick: null },
{ icon: 'codicon-source-control', label: 'Source Control', sel: false, onClick: null },
{ icon: 'codicon-extensions', label: 'Extensions', sel: false, onClick: null },
{ icon: 'codicon-comment-discussion', label: 'Copilot Chat', sel: chatOpen, onClick: () => setChatOpen(o => !o) },
].map(({ icon, label, sel, onClick }) => (
{ if (onClick && !sel) e.currentTarget.style.color = 'rgba(212,210,203,.85)'; }}
onMouseLeave={e => { if (!sel) e.currentTarget.style.color = dim; }}>
))}
{/* ── Explorer sidebar ── */}
{isMobile && sidebarOpen && (
setSidebarOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.5)', zIndex: 90 }} />
)}
Explorer
{isMobile && (
setSidebarOpen(false)} style={{ cursor: 'pointer', opacity: .6, fontSize: 14 }}>✕
)}
▾ vinod-portfolio
setFolders((f) => ({ ...f, about: !f.about }))} />
{folders.about && FILES.filter((f) => f.group === 'about').map((f) => (
{ openFile(id); if (isMobile) setSidebarOpen(false); }} />
))}
setFolders((f) => ({ ...f, projects: !f.projects }))} />
{folders.projects && FILES.filter((f) => f.group === 'projects').map((f) => (
{ openFile(id); if (isMobile) setSidebarOpen(false); }} />
))}
{FILES.filter((f) => f.group === 'root').map((f) => (
{ openFile(id); if (isMobile) setSidebarOpen(false); }} />
))}
{/* ── Tab bar ── */}
{openTabs.map((id) => {
const f = FILE_BY_ID[id];
if (!f) return null;
const active = id === activeId;
return (
setActiveId(id)} style={{
padding: '0 10px 0 12px', display: 'flex', alignItems: 'center', gap: 7,
background: active ? '#1a1c20' : 'transparent',
borderRight: '1px solid rgba(0,0,0,.4)',
borderTop: active ? `2px solid ${acc}` : '2px solid transparent',
color: active ? fg : dim, fontSize: 12, cursor: 'pointer',
flex: '1 1 0', minWidth: 60, maxWidth: 180, whiteSpace: 'nowrap',
}}>
{f.path}
{ e.stopPropagation(); closeTab(id); }}
className="ide-close"
onMouseDown={(e) => e.preventDefault()}
style={{ opacity: .5, padding: '0 3px', borderRadius: 3, fontSize: 11, flexShrink: 0 }}>×
);
})}
{/* ── Editor + terminal ── */}
{/* editor */}
{/* line gutter */}
{Array.from({ length: 60 }).map((_, i) =>
{i + 1}
)}
{activeId ? renderFile(activeId) : (
No file open.
)}
{/* drag handle */}
{termOpen && (
e.currentTarget.style.background = acc}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
/>
)}
{/* terminal panel */}
{termOpen && (
TERMINAL
PROBLEMS
OUTPUT
DEBUG CONSOLE
setTermOpen(false)}>✕
)}
{/* ── Right chat panel ── */}
{chatOpen && (
setChatOpen(false)} />
)}
{/* ── Status bar ── */}
⎇ main
{!isMobile && ⓪ 0 △ 0}
{activeFile?.kind?.toUpperCase() || ''}
{isMobile ? '' : 'UTF-8'}
{!isMobile && LF}
{!isMobile && vinodgopal.dev}
$ terminal
{/* ── Cmd+P palette ── */}
{palette && (
setPalette(false)} style={{
position: 'absolute', inset: 0, background: 'rgba(0,0,0,.35)',
zIndex: 50, display: 'flex', justifyContent: 'center', paddingTop: isMobile ? 40 : 70,
paddingLeft: isMobile ? 12 : 0, paddingRight: isMobile ? 12 : 0,
}}>
e.stopPropagation()} style={{
width: isMobile ? '100%' : 520, maxWidth: 520,
background: '#252830', border: '1px solid rgba(255,255,255,.08)',
borderRadius: 6, boxShadow: '0 14px 40px rgba(0,0,0,.5)',
display: 'flex', flexDirection: 'column', maxHeight: isMobile ? '80vh' : 360, overflow: 'hidden',
}}>
{ setPalQuery(e.target.value); setPalIdx(0); }}
onKeyDown={(e) => {
if (e.key === 'ArrowDown') { e.preventDefault(); setPalIdx((i) => Math.min(palMatches.length - 1, i + 1)); }
if (e.key === 'ArrowUp') { e.preventDefault(); setPalIdx((i) => Math.max(0, i - 1)); }
if (e.key === 'Enter') { e.preventDefault(); const f = palMatches[palIdx]; if (f) { openFile(f.id); setPalette(false); } }
}}
placeholder="Search files…"
style={{
background: 'transparent', border: 0, outline: 0, color: fg,
padding: '12px 14px', fontFamily: "'Inter',sans-serif", fontSize: 13.5,
borderBottom: '1px solid rgba(255,255,255,.08)',
}} />
{palMatches.map((f, i) => (
setPalIdx(i)}
onClick={() => { openFile(f.id); setPalette(false); }}
style={{
padding: '6px 14px', display: 'flex', gap: 10, alignItems: 'center',
background: i === palIdx ? 'rgba(255,255,255,.07)' : 'transparent',
cursor: 'pointer', fontSize: 13,
}}>
{f.path}
{f.path}
))}
{palMatches.length === 0 &&
No matches.
}
)}
{/* keybind hints */}
{!isMobile && (
⌘P files
⌃` terminal
)}
);
}
const kbdS = {
fontFamily: "'JetBrains Mono',monospace", fontSize: 10.5,
padding: '1px 5px', borderRadius: 3,
background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.12)',
};
Object.assign(window, { IdeShell, FILES });