// ========================================================================= // XAVIER VILLARROEL - 5 DISTINCT UI DESIGN PARADIGMS (v1 to v5) // Dynamic URL Routing: /v1, /v2, /v3, /v4, /v5 (or ?v=1..5) // Admin Career Intelligence Mode (/admin) supported across all versions // ========================================================================= const { useState, useEffect, useMemo, useRef } = React; // --- Helper Utilities --- function parseMatchValue(matchStr) { if (!matchStr) return 0; const num = parseInt(matchStr.replace(/[^0-9]/g, ''), 10); return isNaN(num) ? 0 : num; } function parseSalaryValue(salaryStr) { if (!salaryStr || salaryStr.toLowerCase().includes('unknown')) return 0; const matches = salaryStr.match(/\$([0-9,]+)/g); if (matches && matches.length > 0) { const nums = matches.map(m => parseInt(m.replace(/[^0-9]/g, ''), 10)); return Math.max(...nums); } return 0; } // --- Icons (Clean Minimal Outline SVG matching Figma Community Design) --- const Icons = { User: () => ( ), Briefcase: () => ( ), Rocket: () => ( ), Cpu: () => ( ), Search: () => ( ), Chart: () => ( ), Document: () => ( ), CloudDownload: () => ( ), ExternalLink: () => ( ), Check: () => ( ), ArrowUp: () => ( ), ArrowDown: () => ( ), Reset: () => ( ), Filter: () => ( ), ChevronLeft: () => ( ), ChevronRight: () => ( ), Mail: () => ( ) }; // ========================================================================= // REUSABLE PORTRAIT & IDENTITY CARD (Dual-Mode: Public vs Admin) // ========================================================================= function PortraitCard({ skillsData, onExploreJobs, isAdmin, isMobile = false }) { return (
{/* Studio Lighting Portrait Photo */}
Xavier Villarroel - Systems Architect
{/* Candidate Identity Details */}

{skillsData?.personalInfo?.fullName || 'Xavier Villarroel'}

Distributed Systems Architect & AI Automation Specialist

{/* Quick Stats Pills */}
100% REMOTE LATAM 8+ YEARS EXP AWS SOLUTIONS ARCHITECT
{/* Contact Details */}
📍 Santiago, Chile (AMER / Global Timezones)
✉️ xavier.villarroel@outlook.com
🌐 English C2 (Bilingual) • Spanish Native
{/* 4 Quick-Stats Badges: Modern Frontier AI Architecture Focus */}
Agentic AI
MCP & Multi-Agent Flows
Context Eng
BrainLifts & Prompt Systems
RAG & Vectors
Pinecone, FAISS & Search
Voice AI & IVR
Voiceflow & Auto-Triage
{/* Admin Switch Indicator or Public Hire Button */} {isAdmin ? (
ADMIN VIEW Public View
) : (
Contact Xavier / Hire →
)}
); } // ========================================================================= // TAB 1: EXECUTIVE OVERVIEW VIEW (Responsive Widescreen) // ========================================================================= function OverviewView({ data, onSelectMetric }) { if (!data) return null; const { executiveSummary, metricsAndImpact, verifiedEndorsements } = data; return (
{/* Executive Pitch Banner */}
// Executive Summary & Value Proposition

Senior Systems Architect & Distributed AI Specialist

{executiveSummary?.pitch}

{/* 4 Core Architectural Pillars (Fluid across screen) */}

// Core Architectural Pillars

4 Proven Engineering Domains
{executiveSummary?.corePillars?.map((pillar, idx) => (

{pillar.title}

{pillar.description}

))}
{/* 4 Quantified Impact Cards (Fluid 4-Col Widescreen) */}

// Quantified Production Impact

Click any card to inspect specs →
{metricsAndImpact?.map((m) => (
onSelectMetric(m)} className="p-5 rounded-xl bg-[#151821] border border-white/[0.07] hover:border-cyan-500/50 hover:bg-slate-900/80 transition duration-300 cursor-pointer group relative overflow-hidden flex flex-col justify-between" >
{m.value} VERIFIED

{m.label}

{m.detail}

Inspect technical breakdown →
))}
{/* Bare-Metal Diagnostic Lab Specs Breakdown (Widescreen 6-Col Grid) */}

⚡ Private Bare-Metal Diagnostic Rig & Multi-OS Lab

192GB+ RAM • 64TB NAS • ZERO CLOUD DEPENDENCY

Dedicated on-premise multi-node laboratory built to replicate high-throughput client topologies, kernel crash dumps, and multi-node distributed clusters without external cloud dependencies.

1x Linux Ubuntu Rig
Headless kernel debugging, PCAP packets, Docker clusters.
1x Extreme Win11 Rig
Core i9 14th Gen, 128GB RAM. Local distributed cluster & VM swarm.
1x Mac Studio M4 Pro
Apple Silicon ARM64 native builds & Metal GPU validation.
1x Alienware Laptop
Core i9 13th Gen, 64GB RAM. Mobile Sev-1 emergency triage station.
1x Enterprise NAS 64TB
Multi-terabyte crash dumps, PCAP traces, offline mirrors.
Client Edge Telemetry
3x Microsoft Surfaces, Raspberry Pi ARM, iPad testing nodes.
{/* Verified Peer & Leadership Endorsements */}

// Verified Leadership Endorsements

Peer & Management References
{verifiedEndorsements?.map((end, idx) => (

"{end.quote}"

{end.author}
{end.role}
Verified Reference
))}
); } // ========================================================================= // TAB 2: WORK EXPERIENCE & FORMAL EDUCATION // ========================================================================= function ExperienceView({ data }) { if (!data) return null; const { workExperience, educationAndCertifications } = data; return (
{/* Work Experience Timeline */}

// Detailed Career History (March 2018 – Present)

8+ Continuous Remote Years
{workExperience?.map((role, idx) => (
{/* Role Header */}

{role.role || role.title}

{role.company}
{role.period} {role.location}
{/* Bullet Points / Highlights */}
    {role.highlights?.map((h, i) => (
  • ▹ {h}
    • ))}
{/* Technologies Tag Cloud */}
{role.techStack?.map((t, i) => ( {t} ))}
))}
{/* Formal Education & Certifications */}
{/* Education */}

🎓 Formal Education

{educationAndCertifications?.education?.map((edu, idx) => (
{edu.degree}
{edu.institution} • {edu.period}
{edu.focus}
))}
{/* Certifications */}

📜 Certifications & Credentials

{educationAndCertifications?.certifications?.map((cert, idx) => (
{cert.name}
{cert.issuer}
{cert.status}
))}
); } // ========================================================================= // TAB 3: FLAGSHIP PRODUCTION SYSTEMS // ========================================================================= function ProjectsView({ data }) { if (!data) return null; const { flagshipProjects } = data; return (

// Flagship Production Systems

Autonomous AI & Tooling Fleet
{flagshipProjects?.map((proj) => (
{proj.category} Production Ready

{proj.name}

{proj.description}

{/* Capabilities checklist */}
{proj.keyCapabilities?.map((cap, i) => (
{cap}
))}
{/* Technologies */}
{proj.technologies?.map((tech, i) => ( {tech} ))}
))}
); } // ========================================================================= // TAB 4: TECHNICAL SKILLS & ENTERPRISE PRODUCTS CATALOG // ========================================================================= // ========================================================================= // TAB 4: TECHNICAL SKILLS & ENTERPRISE PRODUCTS CATALOG // ========================================================================= const DOMAIN_METADATA = { agenticAIAndLLMs: { title: 'Agentic AI & Large Language Models', subtitle: 'Model Context Protocol (MCP), Context Engineering & Agentic Workflows', icon: '🤖', badge: 'Core Focus' }, cloudAndDevOps: { title: 'Cloud Architecture & Production DevOps', subtitle: 'AWS Certified Solutions Architect, Containers & Stealth Automation', icon: '☁️', badge: 'AWS Certified' }, softwareAndData: { title: 'Distributed Software, Databases & Web3', subtitle: 'Modern Backend, High-Performance Streaming & SQL Optimization', icon: '⚡', badge: 'Full Stack' }, supportAndQuality: { title: 'L3 Support Engineering & Incident RCA', subtitle: 'Deep Forensic Triage, 5 Whys & Zero-Downtime Maintenance', icon: '🛡️', badge: '390+ RCAs' } }; function SkillsView({ data }) { if (!data) return null; const { technicalSkillsMatrix, enterpriseProductsCatalog } = data; return (
{/* 1. Technical Skills Domains (4 Architecture Pillars) */}

// Technical Competency Matrix

Quantified proficiencies across agentic AI, AWS cloud architecture, modern software engineering, and L3 incident diagnostics.

4 Architecture Domains
{technicalSkillsMatrix && Object.keys(technicalSkillsMatrix).map((key) => { const meta = DOMAIN_METADATA[key] || { title: key, subtitle: 'Technical Competency Domain', icon: '❖', badge: 'Architecture' }; const skillsList = technicalSkillsMatrix[key] || []; return (
{/* Domain Header */}
{meta.icon}

{meta.title}

{meta.subtitle}

{meta.badge}
{/* Skills List with Proficiency & Highlights */}
{skillsList.map((s, idx) => { const pct = s.level === 'Expert' ? 96 : s.level === 'Advanced' ? 88 : 78; const badgeStyle = s.level === 'Expert' ? 'bg-cyan-500/15 text-cyan-400 border-cyan-500/30' : s.level === 'Advanced' ? 'bg-sky-500/15 text-sky-300 border-sky-500/30' : 'bg-slate-800 text-slate-300 border-white/[0.08]'; return (
{s.name} {s.level}
{/* Progress Bar */}
{/* Highlight / Real-World Evidence */} {s.highlight && (
↳ {s.highlight}
)}
); })}
); })}
{/* 2. Enterprise Systems Track Record (Readable, Spacious 4-Col Grid) */}

// Enterprise Systems Track Record

Documented hands-on operational, administrative, and forensics mastery across 1,900+ enterprise customer cases.

Documented Production Cases
{enterpriseProductsCatalog?.map((prod, idx) => (
{/* Product Title & Case Count Badge (Full, readable title - No truncate!) */}
{prod.product}
{prod.documentedCases}
{/* Subtitle / Label */}
Core Expertise Areas:
{/* Expertise Areas Pills (Generous, clean, readable) */}
{prod.expertiseAreas?.map((area, i) => ( {area} ))}
))}
); } // Insert Legacy Components with Cyan theme and Mobile Card enhancement function ClickHouseJobsView({ jobs, onSelectJob }) { // Sorting state const [sortField, setSortField] = useState('match'); // 'title' | 'department' | 'location' | 'match' | 'salary' const [sortDirection, setSortDirection] = useState('desc'); // 'asc' | 'desc' // Filtering state const [globalSearch, setGlobalSearch] = useState(''); const [colTitleFilter, setColTitleFilter] = useState(''); const [colDeptFilter, setColDeptFilter] = useState('All'); const [colLocFilter, setColLocFilter] = useState('All'); const [colMinMatch, setColMinMatch] = useState(0); // 0, 70, 80, 90 const [colSalaryFilter, setColSalaryFilter] = useState(''); // Pagination state const [currentPage, setCurrentPage] = useState(1); const pageSize = 20; // Extract unique departments & locations const departments = useMemo(() => { const set = new Set(); jobs.forEach(j => { if (j.department) set.add(j.department); }); return ['All', ...Array.from(set).sort()]; }, [jobs]); const locations = useMemo(() => { const counts = {}; jobs.forEach(j => { const loc = j.location || 'Unknown'; counts[loc] = (counts[loc] || 0) + 1; }); const sorted = Object.keys(counts).sort((a, b) => counts[b] - counts[a]); return { counts, list: ['All', ...sorted] }; }, [jobs]); // Handle header click to toggle sorting (A-Z / Z-A) const handleSort = (field) => { if (sortField === field) { setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'); } else { setSortField(field); setSortDirection(field === 'match' || field === 'salary' ? 'desc' : 'asc'); } setCurrentPage(1); }; // Reset all filters helper const resetFilters = () => { setGlobalSearch(''); setColTitleFilter(''); setColDeptFilter('All'); setColLocFilter('All'); setColMinMatch(0); setColSalaryFilter(''); setCurrentPage(1); }; const isAnyFilterActive = Boolean( globalSearch || colTitleFilter || colDeptFilter !== 'All' || colLocFilter !== 'All' || colMinMatch > 0 || colSalaryFilter ); // Filter and Sort Pipeline const filteredAndSortedJobs = useMemo(() => { let result = [...jobs]; // Global Search if (globalSearch.trim()) { const q = globalSearch.toLowerCase(); result = result.filter(j => (j.title && j.title.toLowerCase().includes(q)) || (j.department && j.department.toLowerCase().includes(q)) || (j.location && j.location.toLowerCase().includes(q)) || (j.overview && j.overview.toLowerCase().includes(q)) ); } // Column Filter: Title if (colTitleFilter.trim()) { const q = colTitleFilter.toLowerCase(); result = result.filter(j => j.title && j.title.toLowerCase().includes(q)); } // Column Filter: Department if (colDeptFilter !== 'All') { result = result.filter(j => j.department === colDeptFilter); } // Column Filter: Location if (colLocFilter !== 'All') { if (colLocFilter.toLowerCase() === 'latam') { result = result.filter(j => j.location && ( j.location.toLowerCase().includes('latam') || j.location.toLowerCase().includes('latin') || j.location.toLowerCase().includes('mexico') || j.location.toLowerCase().includes('brazil') || j.location.toLowerCase().includes('chile') ) ); } else { result = result.filter(j => j.location === colLocFilter); } } // Column Filter: Min Match % if (colMinMatch > 0) { result = result.filter(j => parseMatchValue(j.match) >= colMinMatch); } // Column Filter: Salary Text if (colSalaryFilter.trim()) { const q = colSalaryFilter.toLowerCase(); result = result.filter(j => j.salary && j.salary.toLowerCase().includes(q)); } // Sort Logic result.sort((a, b) => { let valA, valB; if (sortField === 'match') { valA = parseMatchValue(a.match); valB = parseMatchValue(b.match); return sortDirection === 'asc' ? valA - valB : valB - valA; } if (sortField === 'salary') { valA = parseSalaryValue(a.salary); valB = parseSalaryValue(b.salary); return sortDirection === 'asc' ? valA - valB : valB - valA; } // String sorting (A-Z / Z-A) valA = (a[sortField] || '').toString().toLowerCase(); valB = (b[sortField] || '').toString().toLowerCase(); if (valA < valB) return sortDirection === 'asc' ? -1 : 1; if (valA > valB) return sortDirection === 'asc' ? 1 : -1; return 0; }); return result; }, [jobs, globalSearch, colTitleFilter, colDeptFilter, colLocFilter, colMinMatch, colSalaryFilter, sortField, sortDirection]); // Paginated slice const paginatedJobs = useMemo(() => { const start = (currentPage - 1) * pageSize; return filteredAndSortedJobs.slice(start, start + pageSize); }, [filteredAndSortedJobs, currentPage]); const totalPages = Math.ceil(filteredAndSortedJobs.length / pageSize) || 1; // Render sort indicator const renderSortIndicator = (field) => { if (sortField !== field) { return ↕; } return sortDirection === 'asc' ? : ; }; return (
{/* Search & Quick Filter Controls Card */}

ClickHouse Open Roles Explorer {filteredAndSortedJobs.length} of {jobs.length} Positions

Live Ashby data with multi-column sorting (A-Z & Z-A), direct header filters, and LatAm regional focus.

{/* Global Search Input */}
{ setGlobalSearch(e.target.value); setCurrentPage(1); }} placeholder="Search across all fields..." className="w-full pl-9 pr-8 py-2 bg-slate-950/80 border border-white/[0.1] rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 transition" />
{globalSearch && ( )}
{isAnyFilterActive && ( )}
{/* Quick Region Pills (Including LatAm) */}
Filter by Region: {colLocFilter !== 'All' && ( Active Filter: {colLocFilter} ({filteredAndSortedJobs.length} matches) )}
{/* LATAM Highlighted Pill */} {/* Popular Regions */} {['AMER', 'United States', 'EMEA', 'United Kingdom', 'Germany', 'Spain', 'APJ'].map((locName) => { const count = locations.counts[locName] || 0; if (count === 0) return null; const isSelected = colLocFilter === locName; return ( ); })}
{/* Secondary Filters Bar: Department & Match Tier */}
{/* Department Dropdown */}
Department:
{/* Match Tier Filter */}
Match:
{/* Active Sort Indicator */}
Sorted by: {sortField} ({sortDirection === 'asc' ? 'A-Z / Low-to-High' : 'Z-A / High-to-Low'})
{/* Main Interactive Table with Direct Header Filters */}
{/* Header Row: Clickable Sort Labels */} {/* Direct Header Filter Controls Row */} {/* Title Filter */} {/* Department Filter */} {/* Location Filter */} {/* Match Filter */} {/* Salary Filter */} {/* Reset Action */} {/* Table Body */} {paginatedJobs.length === 0 ? ( ) : ( paginatedJobs.map((job, idx) => { const matchVal = parseMatchValue(job.match); const matchBadgeClass = matchVal >= 90 ? 'bg-cyan-500/10 text-cyan-400 border-cyan-500/30 font-bold' : matchVal >= 80 ? 'bg-sky-500/10 text-sky-300 border-sky-500/30 font-semibold' : matchVal >= 70 ? 'bg-amber-500/10 text-amber-300 border-amber-500/30' : 'bg-slate-800 text-slate-300 border-slate-700'; const isLatAm = job.location && (job.location.toLowerCase().includes('latam') || job.location.toLowerCase().includes('latin') || job.location.toLowerCase().includes('mexico')); return ( onSelectJob(job)} > {/* Title */} {/* Department */} {/* Location */} {/* Match */} {/* Salary */} {/* Actions */} ); }) )}
handleSort('title')} className="py-3 px-4 cursor-pointer hover:text-white transition group" >
Job Title
Sort {renderSortIndicator('title')}
handleSort('department')} className="py-3 px-4 cursor-pointer hover:text-white transition group w-48" >
Department
Sort {renderSortIndicator('department')}
handleSort('location')} className="py-3 px-4 cursor-pointer hover:text-white transition group w-44" >
Location
Sort {renderSortIndicator('location')}
handleSort('match')} className="py-3 px-4 cursor-pointer hover:text-white transition group text-center w-28" >
Match % {renderSortIndicator('match')}
handleSort('salary')} className="py-3 px-4 cursor-pointer hover:text-white transition group hidden lg:table-cell w-56" >
Compensation
Sort {renderSortIndicator('salary')}
Actions
{ setColTitleFilter(e.target.value); setCurrentPage(1); }} placeholder="Filter title..." className="w-full px-2.5 py-1 text-xs bg-slate-900 border border-white/[0.08] rounded-lg text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500" /> { setColSalaryFilter(e.target.value); setCurrentPage(1); }} placeholder="Filter salary..." className="w-full px-2.5 py-1 text-xs bg-slate-900 border border-white/[0.08] rounded-lg text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500 font-mono" /> {isAnyFilterActive && ( )}

No positions match your selected filter criteria.

Try clearing or loosening your filters (e.g., location, department, or minimum match score).

{job.title} {isLatAm && ( LatAm )}
{job.overview || 'Overview description available in details view.'}
{job.department} 📍 {job.location} {job.match || '50%'} {job.salary}
e.stopPropagation()} className="px-2.5 py-1 text-xs rounded-lg bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 transition flex items-center" > Ashby
{/* Pagination Controls */}
Showing page {currentPage} of{' '} {totalPages} ({filteredAndSortedJobs.length} matching positions)
{currentPage} / {totalPages}
); } // ========================================================================= // METRIC MODAL (Centered Modal with Blurred Dark Backdrop & Forensic Breakdown) // ========================================================================= function MetricModal({ metric, onClose, onSelectPrev, onSelectNext }) { if (!metric) return null; useEffect(() => { function handleKeyDown(e) { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowLeft' && onSelectPrev) onSelectPrev(); if (e.key === 'ArrowRight' && onSelectNext) onSelectNext(); } window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [onClose, onSelectPrev, onSelectNext]); return (
{ if (e.target === e.currentTarget) onClose(); }} >
{/* Top Header Controls */}
METRIC FORENSIC DOSSIER Verified Enterprise Track Record
{metric.value}

{metric.label}

{/* Narrative Detail */}
Core Scope & Technical Context

{metric.detail}

{/* Quantified Business Impact */} {metric.businessImpact && (
★
Quantified Business Impact {metric.businessImpact}
)} {/* Forensic Proof Bullets */} {metric.extendedBreakdown && metric.extendedBreakdown.length > 0 && (

Forensic Engineering Methodology & Evidence

{metric.extendedBreakdown.map((item, idx) => (
› {item}
))}
)} {/* Footer Navigation & Close */}
{onSelectPrev && ( )} {onSelectNext && ( )}
); } // ========================================================================= // JOB DETAILS MODAL / DRAWER // ========================================================================= function JobDetailsModal({ job, onClose }) { if (!job) return null; useEffect(() => { function handleKeyDown(e) { if (e.key === 'Escape') onClose(); } window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [onClose]); return (
{ if (e.target === e.currentTarget) onClose(); }} >
{/* Close Button */} {/* Modal Header */}
{job.department} 📍 {job.location}

{job.title}

{/* Quick Stats Grid */}
Match Score
{job.match || '50%'}
Calculated against Xavier's profile
Compensation Band
{job.salary}
Market benchmark estimation
{/* Overview Section */}

Role Overview & Mission (from Ashby)

{job.overview || 'Detailed overview available directly on the ClickHouse Ashby listing.'}
{/* Modal Actions */}
Apply via Ashby
); } // ========================================================================= // ========================================================================= // TAB 3: RAW DOCS VIEW (Dual-Pane Reader for Markdown Files) // ========================================================================= function renderMarkdownSafely(md) { if (!md) return ''; // Try using window.marked if available try { if (typeof window !== 'undefined' && window.marked) { if (typeof window.marked.parse === 'function') { return window.marked.parse(md); } else if (typeof window.marked === 'function') { return window.marked(md); } } } catch (err) { console.warn('marked.parse failed, using fallback markdown parser:', err); } // Reliable Fallback Parser (Zero External Dependencies) let html = md .replace(/&/g, '&') .replace(//g, '>'); // Headings html = html.replace(/^#### (.*$)/gim, '

$1

'); html = html.replace(/^### (.*$)/gim, '

$1

'); html = html.replace(/^## (.*$)/gim, '

$1

'); html = html.replace(/^# (.*$)/gim, '

$1

'); // Bold & Italic html = html.replace(/\*\*\*(.*?)\*\*\*/gim, '$1'); html = html.replace(/\*\*(.*?)\*\*/gim, '$1'); html = html.replace(/\*(.*?)\*/gim, '$1'); // Links html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '$1'); // Code blocks & inline code html = html.replace(/```([\s\S]*?)```/gim, '
$1
'); html = html.replace(/`([^`]+)`/gim, '$1'); // Horizontal rules html = html.replace(/^---$/gim, '
'); // Lists html = html.replace(/^\* (.*$)/gim, '
  • $1
    • '); html = html.replace(/^- (.*$)/gim, '
  • $1
    • '); // Paragraphs html = html.split('\n\n').map(p => { p = p.trim(); if (!p) return ''; if (p.startsWith('' + p.replace(/\n/g, '
    ') + '

    '; }).join('\n'); return html; } function RawDocsView({ skillsMd, positionsMd, isAdmin }) { const [docType, setDocType] = useState('skills'); // 'skills' | 'positions' const [copied, setCopied] = useState(false); const activeContent = (docType === 'positions' && isAdmin) ? positionsMd : skillsMd; const activeFileName = (docType === 'positions' && isAdmin) ? 'positions_analysis.md' : 'xavier_skills.md'; const parsedHtml = useMemo(() => { return renderMarkdownSafely(activeContent); }, [activeContent]); const handleCopy = () => { if (activeContent && navigator.clipboard) { navigator.clipboard.writeText(activeContent).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }).catch(() => {}); } }; const handleDownload = () => { if (!activeContent) return; const blob = new Blob([activeContent], { type: 'text/markdown;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.setAttribute('download', activeFileName); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return (
    {/* Top Controls Bar */}
    // Dossier Artifact {activeFileName}

    {docType === 'positions' && isAdmin ? 'Ashby Roles Scrape & Gap Analysis' : 'Executive Systems Architecture & Skills Dossier'}

    {isAdmin ? 'Live Markdown inspection and export interface.' : 'Official production-grade engineering dossier and verified credentials.'}

    {/* Admin Document Switcher OR Public Actions */}
    {isAdmin && (
    )} {/* Quick Copy & Download Buttons */}
    {/* Rendered Markdown Body */}
    {parsedHtml ? (
    ) : activeContent ? ( 
                {activeContent}
    ) : (

    Loading Technical Dossier Markdown...

    )}
    ); } function ChartCanvas({ type, data, options, height = 260 }) { const canvasRef = useRef(null); const chartRef = useRef(null); useEffect(() => { if (!canvasRef.current || !window.Chart || !data) return; if (chartRef.current) { chartRef.current.destroy(); } // Default typography and palette for dark enterprise theme Chart.defaults.color = '#94a3b8'; Chart.defaults.font.family = "'Geist Sans', 'Inter', -apple-system, sans-serif"; const ctx = canvasRef.current.getContext('2d'); chartRef.current = new Chart(ctx, { type, data, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: (type === 'doughnut' || type === 'pie' || type === 'polarArea'), position: 'bottom', labels: { boxWidth: 10, boxHeight: 10, padding: 12, color: '#cbd5e1', font: { size: 10, weight: '500' } } }, tooltip: { backgroundColor: '#0d1527', borderColor: 'rgba(255, 255, 255, 0.12)', borderWidth: 1, titleColor: '#ffffff', bodyColor: '#cbd5e1', padding: 10, boxPadding: 4, usePointStyle: true, titleFont: { size: 11, weight: 'bold' }, bodyFont: { size: 10 } } }, scales: (type === 'doughnut' || type === 'pie' || type === 'polarArea') ? {} : { x: { grid: { color: 'rgba(255, 255, 255, 0.04)' }, ticks: { color: '#64748b', font: { size: 10 } } }, y: { grid: { color: 'rgba(255, 255, 255, 0.04)' }, ticks: { color: '#64748b', font: { size: 10 } } } }, ...options } }); return () => { if (chartRef.current) { chartRef.current.destroy(); chartRef.current = null; } }; }, [type, data, options]); return (
    ); } // --- Statistics & Career Intelligence Analytics View --- function StatisticsView({ data }) { const [selectedDomain, setSelectedDomain] = useState('ITSM & Support'); const [searchQuery, setSearchQuery] = useState(''); if (!data) { return (

    Synthesizing 3,018 Conversation Diagnostics...

    ); } const { summary, domainDistribution = [], topTechnologies = [], topEntities = [], topProblemSolvingTags = [], timeline = [], complexityDistribution = [], sizeDistribution = [], domainShowcases = {} } = data; // Chart 1: Domain Distribution (Doughnut) const chart1Data = { labels: domainDistribution.map(d => d.category), datasets: [{ data: domainDistribution.map(d => d.total), backgroundColor: domainDistribution.map(d => d.color), borderColor: '#090d16', borderWidth: 2, hoverOffset: 6 }] }; const chart1Options = { cutout: '62%' }; // Chart 2: Top Production Technologies (Horizontal Bar) const topTechSlice = topTechnologies.filter(t => t.name !== 'LLMs & GenAI').slice(0, 10); const chart2Data = { labels: topTechSlice.map(t => t.name), datasets: [{ label: 'Production Invocations', data: topTechSlice.map(t => t.count), backgroundColor: 'rgba(16, 185, 129, 0.75)', borderColor: '#38bdf8', borderWidth: 1, borderRadius: 4 }] }; const chart2Options = { indexAxis: 'y', plugins: { legend: { display: false } } }; // Chart 3: Enterprise Systems & Platform Footprint (Bar) const topEntitiesSlice = topEntities.slice(0, 10); const chart3Data = { labels: topEntitiesSlice.map(e => e.name), datasets: [{ label: 'Ecosystem Engagements', data: topEntitiesSlice.map(e => e.count), backgroundColor: 'rgba(6, 182, 212, 0.75)', borderColor: '#06b6d4', borderWidth: 1, borderRadius: 4 }] }; const chart3Options = { plugins: { legend: { display: false } }, scales: { x: { ticks: { maxRotation: 40, minRotation: 40, font: { size: 9 }, color: '#94a3b8' } } } }; // Chart 4: 25-Month Investigation Velocity Timeline (Line/Area) const chart4Data = { labels: timeline.map(t => t.month), datasets: [{ label: 'Monthly Conversations', data: timeline.map(t => t.count), borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)', fill: true, tension: 0.35, pointRadius: 2.5, pointHoverRadius: 5, pointBackgroundColor: '#60a5fa' }] }; const chart4Options = { plugins: { legend: { display: false } } }; // Chart 5: Core Problem-Solving & Operational Disciplines (Polar Area) const problemTags = topProblemSolvingTags.filter(t => !['LLMs & GenAI', 'ITSM', 'Support'].includes(t.name)).slice(0, 7); const chart5Data = { labels: problemTags.map(p => p.name), datasets: [{ data: problemTags.map(p => p.count), backgroundColor: [ 'rgba(244, 63, 94, 0.75)', 'rgba(168, 85, 247, 0.75)', 'rgba(59, 130, 246, 0.75)', 'rgba(16, 185, 129, 0.75)', 'rgba(245, 158, 11, 0.75)', 'rgba(6, 182, 212, 0.75)', 'rgba(99, 102, 241, 0.75)' ], borderColor: '#090d16', borderWidth: 2 }] }; // Chart 6: Dialogue Turn Complexity & Depth Distribution (Bar) const chart6Data = { labels: complexityDistribution.map(c => c.label), datasets: [{ label: 'Conversations in Turn Bucket', data: complexityDistribution.map(c => c.count), backgroundColor: [ 'rgba(59, 130, 246, 0.75)', 'rgba(16, 185, 129, 0.75)', 'rgba(245, 158, 11, 0.75)', 'rgba(236, 72, 153, 0.75)' ], borderColor: ['#3b82f6', '#38bdf8', '#f59e0b', '#ec4899'], borderWidth: 1, borderRadius: 6 }] }; const chart6Options = { plugins: { legend: { display: false } } }; // Chart 7: Content Volume & Character Density by Domain (Horizontal Bar) const domainCharSorted = [...domainDistribution].sort((a, b) => b.totalChars - a.totalChars); const chart7Data = { labels: domainCharSorted.map(d => d.category), datasets: [{ label: 'Characters (Millions)', data: domainCharSorted.map(d => +(d.totalChars / 1000000).toFixed(2)), backgroundColor: 'rgba(236, 72, 153, 0.75)', borderColor: '#ec4899', borderWidth: 1, borderRadius: 4 }] }; const chart7Options = { indexAxis: 'y', plugins: { legend: { display: false }, tooltip: { callbacks: { label: (context) => ` ${context.raw}M characters` } } } }; // Chart 8: Cloud, Infrastructure & DevOps Stack (Bar) const cloudStack = [ { name: 'Bash / CLI', count: 358 }, { name: 'AWS Lambda', count: 306 }, { name: 'REST API', count: 283 }, { name: 'SSL / TLS', count: 188 }, { name: 'DNS Config', count: 94 }, { name: 'Amazon S3', count: 80 }, { name: 'Amazon EC2', count: 64 }, { name: 'DynamoDB', count: 60 } ]; const chart8Data = { labels: cloudStack.map(c => c.name), datasets: [{ label: 'Systems & Cloud Workflows', data: cloudStack.map(c => c.count), backgroundColor: 'rgba(245, 158, 11, 0.75)', borderColor: '#f59e0b', borderWidth: 1, borderRadius: 4 }] }; const chart8Options = { plugins: { legend: { display: false } }, scales: { x: { ticks: { maxRotation: 40, minRotation: 40, font: { size: 9 }, color: '#94a3b8' } } } }; // Chart 9: Investigation Payload Scope (Doughnut) const chart9Data = { labels: sizeDistribution.map(s => s.label), datasets: [{ data: sizeDistribution.map(s => s.count), backgroundColor: [ '#6366f1', '#3b82f6', '#38bdf8', '#f59e0b' ], borderColor: '#090d16', borderWidth: 2, hoverOffset: 6 }] }; const chart9Options = { cutout: '62%' }; // Chart 10: Technical Intensity (Average Turns per Domain) (Horizontal Bar) const domainTurnsSorted = [...domainDistribution].sort((a, b) => b.avgTurns - a.avgTurns); const chart10Data = { labels: domainTurnsSorted.map(d => d.category), datasets: [{ label: 'Avg Dialogue Turns', data: domainTurnsSorted.map(d => d.avgTurns), backgroundColor: 'rgba(139, 92, 246, 0.75)', borderColor: '#8b5cf6', borderWidth: 1, borderRadius: 4 }] }; const chart10Options = { indexAxis: 'y', plugins: { legend: { display: false }, tooltip: { callbacks: { label: (context) => ` ${context.raw} turns / conversation` } } } }; // Filter showcase conversations const showcaseList = domainShowcases[selectedDomain] || []; const filteredShowcase = showcaseList.filter(c => { if (!searchQuery) return true; const q = searchQuery.toLowerCase(); return ( (c.title && c.title.toLowerCase().includes(q)) || (c.summary && c.summary.toLowerCase().includes(q)) || (c.tags && c.tags.some(t => t.toLowerCase().includes(q))) || (c.technologies && c.technologies.some(t => t.toLowerCase().includes(q))) ); }); return (
    {/* Executive Header Banner */}
    GPT Professional Archives & Dialogue Intelligence

    Conversations & Career Intelligence Analytics

    Empirical diagnostic telemetry extracted from {summary.totalConversationsAnalyzed.toLocaleString()} professional engineering conversations spanning 25 continuous months across 8 specialized production domains.

    Data Ingestion: 100% Validated
    Timeframe: {summary.activeTimeframe}
    Index Version: 2026.09-PRO-INDEX
    {/* 4 Top Executive KPI Metric Cards */}
    Total Dialogues
    {summary.totalConversationsAnalyzed.toLocaleString()}
    8 Specialization Domains
    Dialogue Turns
    {summary.totalDialogueTurns.toLocaleString()}
    {summary.userTurns.toLocaleString()} Prompts / {summary.assistantTurns.toLocaleString()} Answers
    Telemetry Analyzed
    {(summary.totalCharactersAnalyzed / 1000000).toFixed(1)}M
    ~{(summary.estimatedWords / 1000000).toFixed(2)}M Words Processed
    Continuous Activity
    25 Mo
    Sep 2024 → Sep 2026
    {/* 10 Visual Charts Section */}

    10 Comprehensive Technical & Operational Visualizations

    Empirical breakdowns of architecture, runtime stacks, platform footprints, and operational complexity.

    {/* Responsive Grid of 10 Visual Charts */}
    {/* Chart 1: Domain Distribution */}

    1. Domain Distribution & Focus

    Doughnut

    Volume of investigations across the 8 professional engineering domain categories.

    {/* Chart 2: Top Production Technologies */}

    2. Top Production Technologies & Frameworks

    Horizontal Bar

    Core technologies, runtimes, and engineering frameworks most frequently mobilized.

    {/* Chart 3: Enterprise Platforms & Ecosystems */}

    3. Enterprise Systems & Platform Footprint

    Vertical Bar

    Frequency of mission-critical platforms, vendor ecosystems, and enterprise ITSMs.

    {/* Chart 4: 25-Month Velocity Timeline */}

    4. Investigation Velocity Timeline (25 Continuous Months)

    Area / Line

    Monthly trajectory of dialogue turns, troubleshooting bursts, and engineering iterations.

    {/* Chart 5: Core Problem-Solving Focus */}

    5. Operational Disciplines & Problem-Solving Focus

    Polar Area

    Distribution of engineering disciplines: troubleshooting, migrations, UI/UX, scripting, auth.

    {/* Chart 6: Dialogue Turn Complexity */}

    6. Technical Depth & Turn Complexity Distribution

    Histogram

    Categorization into Quick Triage (1-2), Standard (3-4), Deep Dive (5-8), and Architectural (9+).

    {/* Chart 7: Content Volume by Domain */}

    7. Content Volume & Character Density by Domain

    Horizontal Bar

    Total character volume generated and analyzed (Millions) demonstrating rigorous depth.

    {/* Chart 8: Cloud & DevOps Stack */}

    8. Cloud, Infrastructure & DevOps Stack

    Vertical Bar

    Engagement across serverless (Lambda), object storage (S3), compute (EC2), security & DNS.

    {/* Chart 9: Investigation Payload Scope */}

    9. Investigation Payload & Artifact Scope

    Doughnut

    Payload distribution from Flash questions (<2KB) to extensive architectural logs (25KB+).

    {/* Chart 10: Technical Intensity (Avg Turns per Domain) */}

    10. Technical Intensity (Average Turns per Dialogue)

    Horizontal Bar

    Average iterations per investigation across domains (Web Frameworks & DB lead at 4.6 & 4.4).

    {/* Interactive Domain Explorer & Conversation Highlights */}

    Domain Showcase & Conversation Explorer

    Inspect real sample conversations, dialogue depth, payload size, and direct ChatGPT links for each domain.

    {/* Search Filter */}
    setSearchQuery(e.target.value)} placeholder="Filter sample dialogues..." className="w-full bg-slate-950/80 border border-white/[0.1] rounded-xl px-3.5 py-2 pl-9 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 transition" />
    {/* Domain Selection Tabs */}
    {domainDistribution.map(dom => ( ))}
    {/* Conversation Cards Grid */}
    {filteredShowcase.length === 0 ? (
    No conversations matched the filter criteria in {selectedDomain}.
    ) : ( filteredShowcase.map(conv => (
    {conv.title || 'Untitled Diagnostic'}
    {conv.url && ( )}
    {conv.summary && (

    {conv.summary}

    )}
    {/* Badges: Turns & Size */}
    {conv.turns} {conv.turns === 1 ? 'Turn' : 'Turns'} {conv.sizeKB} KB Payload
    {/* Tags */} {conv.tags && conv.tags.length > 0 && (
    {conv.tags.slice(0, 3).map(tag => ( {tag} ))}
    )}
    )) )}
    ); } // Render the application into #root const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); // ========================================================================= // FLOATING 1-CLICK VERSION SWITCHER BAR (v1 to v5) // ========================================================================= function VersionSwitcherBar({ activeVersion, onSelectVersion }) { const versions = [ { id: 'v1', label: 'V1: Dock Console', subtitle: 'Matte Charcoal & Vertical Rail Dock' }, { id: 'v2', label: 'V2: Bento Grid', subtitle: 'Raycast & Linear Frosted Glass Widgets' }, { id: 'v4', label: 'V4: Swiss Editorial', subtitle: 'ReadCV Monochromatic & Sticky Index' }, ]; return ( ); } // ========================================================================= // VERSION 1: CURRENT DOCK CONSOLE (Figma 1287502706882772309 Recreation) // ========================================================================= function LayoutV1({ skillsData, jobsData, statsData, rawSkillsMd, rawPositionsMd, isAdmin, activeTab, setActiveTab, navItems, mobileNavItems, onExploreJobs, onSelectJob, onSelectMetric, handleDownloadDossier, loading }) { return (
    {/* MOBILE TOP BAR (< lg screens) */}
    XV
    Xavier Villarroel
    Distributed Systems Architect
    {/* Mobile Horizontal Sticky Tabs Bar */}
    {mobileNavItems.map((tab) => { const isActive = activeTab === tab.id; return ( ); })}
    {/* PANEL 1: SLIM ICON NAVIGATION DOCK */} {/* PANEL 2: PORTRAIT & IDENTITY CARD */}
    {/* PANEL 3: INTERACTIVE CONTENT CARD */}
    // {activeTab}

    {activeTab === 'profile' && 'Candidate Profile & Dossier Identity'} {activeTab === 'overview' && 'Executive Overview'} {activeTab === 'experience' && 'Work History & Education'} {activeTab === 'projects' && 'Flagship Production Systems'} {activeTab === 'skills' && 'Skills Matrix & Enterprise Systems'} {activeTab === 'jobs' && '184 ClickHouse Opportunities'} {activeTab === 'analytics' && 'Conversation Telemetry & Analytics'} {activeTab === 'docs' && 'Executive Markdown Dossier'}

    {navItems.map((tab) => { const isActive = activeTab === tab.id; return ( ); })}
    {loading ? (

    {isAdmin ? 'Loading Dossier Intelligence & Job Matches...' : 'Loading Executive Profile & Systems Portfolio...'}

    ) : ( <> {activeTab === 'profile' && (
    )} {activeTab === 'overview' && ( )} {activeTab === 'experience' && ( )} {activeTab === 'projects' && ( )} {activeTab === 'skills' && ( )} {isAdmin && activeTab === 'jobs' && ( )} {isAdmin && activeTab === 'analytics' && ( )} {activeTab === 'docs' && ( )} )}
    ); } // ========================================================================= // ========================================================================= // VERSION 2: INTERACTIVE BENTO GRID & GLASSMORPHIC WORKSPACE (Raycast / Linear Style) // ========================================================================= function LayoutV2({ skillsData, jobsData, statsData, rawSkillsMd, rawPositionsMd, isAdmin, activeTab, setActiveTab, navItems, onExploreJobs, onSelectJob, onSelectMetric, handleDownloadDossier, loading }) { const [bentoFilter, setBentoFilter] = useState('all'); const [selectedBentoProject, setSelectedBentoProject] = useState(null); const projects = skillsData?.flagshipProjects || []; const metrics = skillsData?.metricsAndImpact || []; const career = skillsData?.workExperience || []; const products = skillsData?.enterpriseProductsCatalog || []; return (
    {/* Top Glassmorphic Navigation Header */}
    XV
    Xavier Villarroel V2 BENTO WORKSPACE
    AI Automation Engineer • L3 Customer Support Architect • AWS Solutions Architect
    {/* Quick Action Buttons */}
    {isAdmin && ( )} Contact
    {/* Hero Bento Grid (12 Columns) */}
    {/* Card 1: Executive Pitch & Bio (Span 8) */}
    AVAILABLE FOR HIGH-IMPACT AMER / GLOBAL ROLES

    Architecting Agentic AI Workflows, Remote MCP Fleets & Forensic L3 Incident Diagnostics

    {skillsData?.executiveSummary?.pitch || 'Over 8 years of uninterrupted high-rigor remote execution in ESW Capital / Trilogy portfolios.'}

    {/* Core Feature Badges */}
    MCP Fleet
    10+ Remote SSE Servers
    Forensic RCAs
    390+ Documented
    Mission-Critical
    160+ Sev-1 Outages
    BrainLift DOK
    Context Engineering
    {/* Card 2: Interactive Hardware Lab & Profile Aura (Span 4) */}
    Xavier Villarroel
    Dedicated Bare-Metal Diagnostics
    RAM Pool: 192 GB+ Multi-Node
    NAS Storage: 64 TB Diagnostics
    Apple Silicon: Mac Studio M4 Pro
    Linux Rig: Ubuntu Kernel Host
    {/* Card 3: Metrics & Business Impact Carousel (Span 12) */}

    Quantified Impact & Verified Telemetry (Click to Inspect Breakdown)

    Interactive Cards
    {metrics.slice(0, 6).map((m) => (
    onSelectMetric(m)} className="p-4 rounded-2xl bento-grid-item cursor-pointer group hover:scale-[1.02] transition" >
    {m.value}
    {m.label}
    {m.detail}
    ))}
    {/* Card 4: Flagship Architectural Implementations (Span 7) */}

    Flagship Architectural Systems {projects.length} Systems

    {projects.map((proj) => { const isSelected = selectedBentoProject?.id === proj.id; return (
    setSelectedBentoProject(isSelected ? null : proj)} className="p-4 rounded-2xl bg-white/[0.03] border border-white/[0.08] hover:border-indigo-500/40 transition cursor-pointer" >
    {proj.name}
    {proj.category}
    {isSelected ? '▲ Collapse' : '▼ Details'}

    {proj.description}

    {isSelected && (
    Key Capabilities:
      {proj.keyCapabilities?.map((c, i) => (
    • {c}
      • ))}
    {proj.technologies?.map((tech, idx) => ( {tech} ))}
    )}
    ); })}
    {/* Card 5: Enterprise Battle-Tested Products Catalog (Span 5) */}

    Enterprise Products Ecosystem 1,900+ Interventions

    Documented production incidents across enterprise communications, database clusters, and ticketing workflows:

    {products.slice(0, 5).map((prod, idx) => (
    {prod.product}
    {prod.expertiseAreas?.join(' • ')}
    {prod.documentedCases}
    ))}
    {/* Card 6: Career Trajectory (Span 12) */}

    Tenure & Promotion Trajectory (ESW Capital / Trilogy) 8+ Years Uninterrupted Remote

    {career.map((role, idx) => (
    {role.period}
    {role.role}
    {role.company} • {role.duration}
      {role.highlights?.slice(0, 2).map((h, i) => (
    • {h}
      • ))}
    ))}
    ); } // ========================================================================= // VERSION 4: SWISS EDITORIAL & MONOCHROMATIC DOSSIER (ReadCV / Vercel Press) // ========================================================================= function LayoutV4({ skillsData, jobsData, statsData, rawSkillsMd, rawPositionsMd, isAdmin, onExploreJobs, onSelectJob, onSelectMetric, handleDownloadDossier }) { const [activeChapter, setActiveChapter] = useState('01'); const chapters = [ { id: '01', title: '01. Executive Overview', target: '#chapter-01' }, { id: '02', title: '02. Quantified Track Record', target: '#chapter-02' }, { id: '03', title: '03. Flagship Architectures', target: '#chapter-03' }, { id: '04', title: '04. High-Rigor Trajectory', target: '#chapter-04' }, { id: '05', title: '05. Enterprise Ecosystem', target: '#chapter-05' }, { id: '06', title: '06. Bare-Metal Infrastructure', target: '#chapter-06' }, ]; const projects = skillsData?.flagshipProjects || []; const metrics = skillsData?.metricsAndImpact || []; const career = skillsData?.workExperience || []; const products = skillsData?.enterpriseProductsCatalog || []; return (
    {/* Two-Column Swiss Grid Layout */}
    {/* Left Sticky Column (4 Cols): Executive ID & Chapter Index */} {/* Right Fluid Column (8 Cols): Narrative Technical Dossier */}
    {/* Chapter 01: Executive Overview */}
    Chapter 01 — Executive Overview
    "Over 8 years of uninterrupted high-rigor execution operating inside the top percentile of global remote software organizations."

    {skillsData?.executiveSummary?.pitch || 'Elite AI Automation Engineer, Level 3 Support Architect, and AWS Solutions Architect with over 8 continuous years operating in top-tier performance models.'}

    {/* Core Pillars */}
    {skillsData?.executiveSummary?.corePillars?.map((p, i) => (
    {p.title}
    {p.description}
    ))}
    {/* Chapter 02: Quantified Track Record */}
    Chapter 02 — Quantified Track Record
    {metrics.map((m) => (
    {m.value}
    {m.label}
    {m.detail}
    ))}
    {/* Chapter 03: Flagship Architectures */}
    Chapter 03 — Flagship Architectures
    {projects.map((proj) => (

    {proj.name}

    {proj.category}

    {proj.description}

      {proj.keyCapabilities?.map((c, i) => (
    • {c}
      • ))}
    {proj.technologies?.map((tech, i) => ( {tech} ))}
    ))}
    {/* Chapter 04: High-Rigor Trajectory */}
    Chapter 04 — Career Trajectory
    {career.map((c, i) => (
    {c.period} • {c.duration}

    {c.role}

    {c.company}
      {c.highlights?.map((h, idx) => (
    • {h}
      • ))}
    ))}
    {/* Chapter 05: Enterprise Products Ecosystem */}
    Chapter 05 — Enterprise Products Ecosystem
    {products.map((p, idx) => (
    {p.product} {p.documentedCases}
    {p.expertiseAreas?.join(' • ')}
    ))}
    {/* Chapter 06: Bare-Metal Diagnostic Lab */}
    Chapter 06 — Bare-Metal Hardware Fleet

    To eliminate environment discrepancies and diagnose multi-OS enterprise crashes, a dedicated 10+ node lab operates with 192GB+ RAM, 64TB Synology NAS, Ubuntu headless servers, Windows 11 high-throughput rigs, and Apple Silicon Mac Studio M4 Pro.

    ); } // ========================================================================= // MASTER ROOT APP COMPONENT (DUAL MODE + 10 UI PARADIGMS) // ========================================================================= function detectInitialVersion() { const allowed = ['v1', 'v2', 'v4']; const path = window.location.pathname.toLowerCase(); const match = path.match(/\/(v[1-9]|v10)/); if (match && allowed.includes(match[1])) return match[1]; const params = new URLSearchParams(window.location.search); const vParam = params.get('v'); if (vParam && allowed.includes('v' + vParam)) return 'v' + vParam; const hash = window.location.hash.toLowerCase(); const hashMatch = hash.match(/(v[1-9]|v10)/); if (hashMatch && allowed.includes(hashMatch[1])) return hashMatch[1]; return 'v1'; } function App() { const [activeVersion, setActiveVersion] = useState(detectInitialVersion); // Detect if user is accessing /admin const isAdmin = useMemo(() => { return ( window.location.pathname.includes('/admin') || window.location.search.includes('admin=true') || window.location.hash.includes('admin') ); }, []); const [activeTab, setActiveTab] = useState('overview'); // Data states const [skillsData, setSkillsData] = useState(null); const [jobsData, setJobsData] = useState([]); const [rawSkillsMd, setRawSkillsMd] = useState(''); const [rawPositionsMd, setRawPositionsMd] = useState(''); const [statsData, setStatsData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); // Selected modals const [selectedJob, setSelectedJob] = useState(null); const [selectedMetric, setSelectedMetric] = useState(null); useEffect(() => { async function loadAllData() { try { setLoading(true); const promises = [ fetch('/api/skills/json').then(r => r.ok ? r.json() : null).catch(e => { console.error(e); return null; }), fetch('/api/skills').then(r => r.ok ? r.text() : '').catch(e => { console.error(e); return ''; }), ]; if (isAdmin) { promises.push(fetch('/api/positions/json').then(r => r.ok ? r.json() : null).catch(e => { console.error(e); return null; })); promises.push(fetch('/api/positions').then(r => r.ok ? r.text() : '').catch(e => { console.error(e); return ''; })); promises.push(fetch('/api/statistics').then(r => r.ok ? r.json() : null).catch(e => { console.error(e); return null; })); } const results = await Promise.all(promises); setSkillsData(results[0]); setRawSkillsMd(results[1] || ''); if (isAdmin) { setJobsData(results[2]?.jobs || []); setRawPositionsMd(results[3] || ''); setStatsData(results[4] || null); } } catch (err) { console.error("Data load error:", err); setError("Failed to load intelligence backend data."); } finally { setLoading(false); } } loadAllData(); }, [isAdmin]); // Dynamic document title based on view mode and version useEffect(() => { const vUpper = activeVersion.toUpperCase(); if (isAdmin) { document.title = `Xavier Villarroel | Admin Suite (${vUpper}) - 184 ClickHouse Jobs`; } else { document.title = `Xavier Villarroel | Systems Architect & Distributed AI (${vUpper})`; } }, [isAdmin, activeVersion]); // Safety check: if non-admin tries to open jobs or analytics, redirect to overview useEffect(() => { if (!isAdmin && (activeTab === 'jobs' || activeTab === 'analytics')) { setActiveTab('overview'); } }, [isAdmin, activeTab]); // Handler for Version Switching with URL Sync const handleSelectVersion = (versionId) => { setActiveVersion(versionId); try { const adminPrefix = isAdmin ? '/admin' : ''; const newUrl = `/${versionId}${adminPrefix}`; window.history.pushState({ version: versionId }, '', newUrl); } catch (e) { // ignore } }; // Metric carousel handlers const metricsList = skillsData && skillsData.metricsAndImpact ? skillsData.metricsAndImpact : []; const currentMetricIndex = selectedMetric ? metricsList.findIndex(m => m.label === selectedMetric.label) : -1; const handlePrevMetric = currentMetricIndex > 0 ? () => setSelectedMetric(metricsList[currentMetricIndex - 1]) : null; const handleNextMetric = currentMetricIndex >= 0 && currentMetricIndex < metricsList.length - 1 ? () => setSelectedMetric(metricsList[currentMetricIndex + 1]) : null; const handleDownloadDossier = () => { const blob = new Blob([rawSkillsMd || '# Xavier Villarroel - Skills Dossier'], { type: 'text/markdown;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'xavier_villarroel_dossier.md'); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; // Build navigation items based on Admin Mode vs Public Mode const navItems = useMemo(() => { const base = [ { id: 'overview', label: 'Overview', icon: Icons.User }, { id: 'experience', label: 'Experience', icon: Icons.Briefcase }, { id: 'projects', label: 'Flagship Systems', icon: Icons.Rocket }, { id: 'skills', label: 'Skills & Systems', icon: Icons.Cpu }, ]; if (isAdmin) { base.push( { id: 'jobs', label: '184 Jobs (' + (jobsData.length || 184) + ')', icon: Icons.Search }, { id: 'analytics', label: 'Analytics', icon: Icons.Chart } ); } base.push({ id: 'docs', label: 'Dossier MD', icon: Icons.Document }); return base; }, [isAdmin, jobsData.length]); const mobileNavItems = useMemo(() => { return [ { id: 'profile', label: 'Profile' }, ...navItems ]; }, [navItems]); return (
    {/* 10 Distinct Layout Paradigms */} {activeVersion === 'v1' && ( setActiveTab('jobs')} onSelectJob={setSelectedJob} onSelectMetric={setSelectedMetric} handleDownloadDossier={handleDownloadDossier} loading={loading} /> )} {activeVersion === 'v2' && ( setActiveTab('jobs')} onSelectJob={setSelectedJob} onSelectMetric={setSelectedMetric} handleDownloadDossier={handleDownloadDossier} loading={loading} /> )} {activeVersion === 'v4' && ( setActiveTab('jobs')} onSelectJob={setSelectedJob} onSelectMetric={setSelectedMetric} handleDownloadDossier={handleDownloadDossier} /> )} {/* Persistent Floating 1-Click Version Switcher */} {/* Global Interactive Modals */} {selectedMetric && ( setSelectedMetric(null)} onSelectPrev={handlePrevMetric} onSelectNext={handleNextMetric} /> )} {selectedJob && ( setSelectedJob(null)} /> )}
    ); } // Render React App const rootElement = document.getElementById('root'); if (rootElement) { ReactDOM.render(, rootElement); }