STUDIO Portfolio Architect
Live Canvas Full-Stack Preset
Available for select advisory & roles

Alex Vance

Senior Systems Engineer & Interface Craftsman

Building resilient real-time interfaces, verifiable distributed data workflows, and typography-first browser runtimes.

Featured Systems & Case Studies
Core Competencies & Technical Stacks
Action completed
Super generates helpful tools and automates fact-checking across the internet proactively. If you enjoyed this tool, build your own with Super and share it with a friend.
`; } // Bind Event Listeners document.addEventListener("DOMContentLoaded", () => { // Inputs binding const nameInput = document.getElementById("input-name"); const titleInput = document.getElementById("input-title"); const statusInput = document.getElementById("input-status"); const bioInput = document.getElementById("input-bio"); nameInput.addEventListener("input", (e) => { portfolioData.name = e.target.value; renderCanvas(); }); titleInput.addEventListener("input", (e) => { portfolioData.title = e.target.value; renderCanvas(); }); statusInput.addEventListener("input", (e) => { portfolioData.status = e.target.value; renderCanvas(); }); bioInput.addEventListener("input", (e) => { portfolioData.bio = e.target.value; renderCanvas(); }); // Archetype switcher document.querySelectorAll(".arch-btn").forEach(btn => { btn.addEventListener("click", () => { document.querySelectorAll(".arch-btn").forEach(b => b.classList.remove("active")); btn.classList.add("active"); const arch = btn.getAttribute("data-arch"); currentArch = arch; portfolioData = JSON.parse(JSON.stringify(PRESETS[arch])); // Re-populate inputs nameInput.value = portfolioData.name; titleInput.value = portfolioData.title; statusInput.value = portfolioData.status; bioInput.value = portfolioData.bio; document.getElementById("canvas-badge").textContent = `${portfolioData.badge} Preset`; activeProjectId = portfolioData.cases[0].id; loadProjectToEditor(activeProjectId); renderCanvas(); showToast(`Switched to ${portfolioData.badge}`); }); }); // View switcher document.querySelectorAll(".view-btn").forEach(btn => { btn.addEventListener("click", () => { document.querySelectorAll(".view-btn").forEach(b => b.classList.remove("active")); btn.classList.add("active"); const layout = btn.getAttribute("data-layout"); const grid = document.getElementById("rendered-case-grid"); if (layout === "compact") { grid.style.gridTemplateColumns = "1fr"; } else { grid.style.gridTemplateColumns = ""; } }); }); // Reset Defaults document.getElementById("btn-reset-preset").addEventListener("click", () => { portfolioData = JSON.parse(JSON.stringify(PRESETS[currentArch])); nameInput.value = portfolioData.name; titleInput.value = portfolioData.title; statusInput.value = portfolioData.status; bioInput.value = portfolioData.bio; activeProjectId = portfolioData.cases[0].id; loadProjectToEditor(activeProjectId); renderCanvas(); showToast("Reset to preset defaults"); }); // Project actions document.getElementById("btn-save-project").addEventListener("click", saveActiveProjectFromEditor); document.getElementById("btn-add-project").addEventListener("click", addNewProject); // Export modal handlers const modal = document.getElementById("export-modal"); const exportDisplay = document.getElementById("export-code-display"); document.getElementById("btn-open-export").addEventListener("click", () => { const html = generateStandaloneHtml(); exportDisplay.textContent = html; modal.hidden = false; }); document.getElementById("btn-close-modal").addEventListener("click", () => { modal.hidden = true; }); modal.addEventListener("click", (e) => { if (e.target === modal) modal.hidden = true; }); document.getElementById("btn-copy-code").addEventListener("click", () => { const html = generateStandaloneHtml(); navigator.clipboard.writeText(html).then(() => { showToast("HTML copied to clipboard!"); }).catch(() => { showToast("Copied code to buffer"); }); }); document.getElementById("btn-download-html").addEventListener("click", () => { const html = generateStandaloneHtml(); const blob = new Blob([html], { type: "text/html" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "index.html"; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast("Downloaded standalone index.html"); }); // Initial render loadProjectToEditor(activeProjectId); renderCanvas(); });