Here is my React component code, deploy it as is import { useState, useEffect } from "react"; const SECTORS = ["Cybersecurity", "AI/ML Engineering", "Cloud/DevOps", "Software Dev (Generic)", "Data Engineering", "Quant Finance", "Product Management", "Embedded/Systems"]; const SKILL_OPTIONS = { "Cybersecurity": ["Penetration Testing", "Threat Intelligence", "Zero Trust Architecture", "AI Red Teaming", "Malware Analysis", "Cloud Security", "Cryptography", "Incident Response"], "AI/ML Engineering": ["LLM Fine-tuning", "MLOps", "AI Safety/Alignment", "Computer Vision", "Reinforcement Learning", "Data Pipelines", "Model Deployment", "AI Red Teaming"], "Cloud/DevOps": ["Kubernetes", "Terraform", "CI/CD", "Platform Engineering", "SRE", "FinOps", "Multi-cloud", "Security Automation"], "Software Dev (Generic)": ["Full Stack Web", "Mobile Dev", "API Design", "Testing/QA", "System Design", "Open Source Contributions", "AI-assisted Dev", "Legacy Modernization"], "Data Engineering": ["Data Pipelines", "Spark/Hadoop", "Real-time Streaming", "Data Modeling", "ML Feature Stores", "dbt", "Cloud Warehouses", "Data Governance"], "Quant Finance": ["Algorithmic Trading", "Risk Modeling", "Derivatives Pricing", "Portfolio Optimization", "High-Frequency Trading", "Crypto/DeFi", "Financial ML", "Regulatory Compliance"], "Product Management": ["Technical PM", "AI Product", "GTM Strategy", "User Research", "Data-driven Decisions", "B2B SaaS", "Developer Tools", "Platform Products"], "Embedded/Systems": ["RTOS", "FPGA", "IoT Security", "Firmware Dev", "Hardware/Software Co-design", "Automotive Systems", "Low-level Optimization", "Protocol Design"] }; const RELEVANCE_SCORES = { "Penetration Testing": 88, "Threat Intelligence": 82, "Zero Trust Architecture": 91, "AI Red Teaming": 97, "Malware Analysis": 79, "Cloud Security": 93, "Cryptography": 86, "Incident Response": 80, "LLM Fine-tuning": 90, "MLOps": 88, "AI Safety/Alignment": 95, "Computer Vision": 78, "Reinforcement Learning": 85, "Data Pipelines": 82, "Model Deployment": 87, "Kubernetes": 86, "Terraform": 84, "CI/CD": 80, "Platform Engineering": 89, "SRE": 85, "FinOps": 78, "Multi-cloud": 82, "Security Automation": 90, "Full Stack Web": 52, "Mobile Dev": 58, "API Design": 65, "Testing/QA": 60, "System Design": 74, "Open Source Contributions": 71, "AI-assisted Dev": 83, "Legacy Modernization": 69, "Spark/Hadoop": 70, "Real-time Streaming": 84, "Data Modeling": 79, "ML Feature Stores": 86, "dbt": 75, "Cloud Warehouses": 81, "Data Governance": 77, "Algorithmic Trading": 80, "Risk Modeling": 82, "Derivatives Pricing": 75, "Portfolio Optimization": 78, "High-Frequency Trading": 72, "Crypto/DeFi": 65, "Financial ML": 88, "Regulatory Compliance": 77, "Technical PM": 82, "AI Product": 90, "GTM Strategy": 76, "User Research": 73, "Data-driven Decisions": 79, "B2B SaaS": 72, "Developer Tools": 80, "Platform Products": 84, "RTOS": 81, "FPGA": 77, "IoT Security": 85, "Firmware Dev": 75, "Hardware/Software Co-design": 82, "Automotive Systems": 83, "Low-level Optimization": 80, "Protocol Design": 79 }; const SECTOR_BASE = { "Cybersecurity": 85, "AI/ML Engineering": 88, "Cloud/DevOps": 82, "Software Dev (Generic)": 48, "Data Engineering": 79, "Quant Finance": 78, "Product Management": 74, "Embedded/Systems": 80 }; const TREND = { "Cybersecurity": "+12% YoY", "AI/ML Engineering": "+34% YoY", "Cloud/DevOps": "+18% YoY", "Software Dev (Generic)": "-15% YoY", "Data Engineering": "+22% YoY", "Quant Finance": "+8% YoY", "Product Management": "+5% YoY", "Embedded/Systems": "+14% YoY" }; const CAREER_KILLERS = [ { icon: "🧱", label: "Stopped learning after getting hired", risk: 94, desc: "Most common reason. You get comfortable, stop upskilling, and 5 years later you're behind everyone entering the field." }, { icon: "🤖", label: "Refused to adopt AI tools", risk: 91, desc: "People aren't being replaced by AI. They're being replaced by people who use AI better. This is already happening." }, { icon: "🔁", label: "Did the exact same role for 10+ years", risk: 87, desc: "Specialization is good. Stagnation is death. If your work looks the same as it did in 2015, you're a liability." }, { icon: "🙈", label: "Avoided leadership or cross-team work", risk: 79, desc: "Pure individual contributor roles get automated first. People who lead, communicate, and drive decisions are harder to cut." }, { icon: "📜", label: "Treated certifications as the finish line", risk: 76, desc: "Certs open doors but don't keep you inside. No real projects or depth means you're disposable the moment budgets tighten." }, { icon: "🏢", label: "Stayed at one company their entire career", risk: 72, desc: "Loyalty sounds noble but your skills calcify. Companies get acquired, pivot their stack, or collapse — often with no warning." }, { icon: "🌐", label: "No online presence or professional network", risk: 68, desc: "When layoffs hit, who you know matters as much as what you know. People with no visibility get cut first and rehired last." }, { icon: "💸", label: "Never negotiated salary or switched jobs", risk: 65, desc: "Job hoppers earn 40–60% more over a career. Staying loyal without renegotiating is quietly one of the most expensive mistakes." }, ]; function getRating(score) { if (score >= 85) return { label: "Future-proof", color: "#00ff88" }; if (score >= 70) return { label: "Solid", color: "#88ddff" }; if (score >= 55) return { label: "Exposed", color: "#ffcc44" }; return { label: "High Risk", color: "#ff4466" }; } function AnimatedBar({ value, color, delay = 0 }) { const [width, setWidth] = useState(0); useEffect(() => { const t = setTimeout(() => setWidth(value), 300 + delay); return () => clearTimeout(t); }, [value, delay]); return ( ); } function ScoreRing({ score, color }) { const r = 42, circ = 2 * Math.PI * r; const [dash, setDash] = useState(circ); useEffect(() => { const t = setTimeout(() => setDash(circ - (score / 100) * circ), 400); return () => clearTimeout(t); }, [score]); return ( {score} /100 ); } function KillerCard({ killer, index }) { const [visible, setVisible] = useState(false); const [barW, setBarW] = useState(0); useEffect(() => { const t1 = setTimeout(() => setVisible(true), index * 90); const t2 = setTimeout(() => setBarW(killer.risk), index * 90 + 500); return () => { clearTimeout(t1); clearTimeout(t2); }; }, [index]); const color = killer.risk >= 90 ? "#ff4466" : killer.risk >= 80 ? "#ff8844" : killer.risk >= 70 ? "#ffcc44" : "#88ddff"; return ( {killer.icon} {killer.label} {killer.risk}% {killer.desc} ); } export default function App() { const [step, setStep] = useState(0); const [sector, setSector] = useState(""); const [selectedSkills, setSelectedSkills] = useState([]); const [years, setYears] = useState(20); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [aiInsight, setAiInsight] = useState(""); const [email, setEmail] = useState(""); const [emailSubmitted, setEmailSubmitted] = useState(false); const [activeTab, setActiveTab] = useState("results"); function toggleSkill(s) { setSelectedSkills(prev => prev.includes(s) ? prev.filter(x => x !== s) : prev.length RELEVANCE_SCORES[s] || 70); const avgSkill = skillScores.length ? skillScores.reduce((a, b) => a + b, 0) / skillScores.length : 70; const finalScore = Math.round(baseScore * 0.4 + avgSkill * 0.6); const timeDecay = years >= 15 ? 0.92 : years >= 10 ? 0.96 : 1; const adjustedScore = Math.min(99, Math.round(finalScore * timeDecay)); setResult({ score: adjustedScore, skillScores, rating: getRating(adjustedScore) }); try { const res = await fetch("https://api.anthropic.com/v1/messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "claude-sonnet-4-20250514", max_tokens: 1000, system: "You are a brutally honest career advisor. Give concise, direct advice in 3 short bullet points (max 20 words each). No fluff. Plain text only, no markdown or bullet symbols.", messages: [{ role: "user", content: `Sector: ${sector}. Skills: ${selectedSkills.join(", ")}. Career horizon: ${years} years. Relevance score: ${adjustedScore}/100. Give 3 brutally honest bullet points on staying relevant.` }] }) }); const data = await res.json(); setAiInsight(data.content?.find(b => b.type === "text")?.text || ""); } catch { setAiInsight("Build depth in one niche before branching out.\nEvery 3 years, assess if your skills are still in demand.\nPeople who adapt to AI tools will always outlast those who resist."); } setLoading(false); } const cardStyle = { background: "#10101e", border: "1px solid #2a2a4a", borderRadius: 16, padding: "32px", maxWidth: 640, width: "100%", boxShadow: "0 24px 80px #00000088" }; const btnBase = { fontFamily: "'Space Mono', monospace", cursor: "pointer", borderRadius: 10, fontSize: 11, padding: "12px" }; return ( {` @keyframes bounceIn { 0%{transform:translateY(-60px);opacity:0} 40%{transform:translateY(12px);opacity:1} 60%{transform:translateY(-8px)} 75%{transform:translateY(5px)} 88%{transform:translateY(-3px)} 100%{transform:translateY(0)} } @keyframes fadeUp { 0%{opacity:0;transform:translateY(16px)} 100%{opacity:1;transform:translateY(0)} } .bt{display:inline-block;animation:bounceIn 0.9s cubic-bezier(0.4,0,0.2,1) both} .bs{display:inline-block;animation:bounceIn 0.9s 0.15s cubic-bezier(0.4,0,0.2,1) both} .ft{animation:fadeUp 0.6s 0.05s ease both} .fd{animation:fadeUp 0.6s 0.5s ease both} ::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:#0a0a14} ::-webkit-scrollbar-thumb{background:#2a2a4a;border-radius:4px} `} {/* Header */} Career Intelligence Stay Relevant in 20 Years AI-powered career resilience analysis {/* Step 0 */} {step === 0 && ( Step 01 — Your Sector {SECTORS.map(s => ( { setSector(s); setStep(1); }} style={{ ...btnBase, background: "#0d0d1e", border: "1px solid #2a2a4a", color: "#888", textAlign: "left", transition: "all 0.2s" }} onMouseEnter={e => { e.currentTarget.style.borderColor = "#8844ff"; e.currentTarget.style.color = "#cc88ff"; e.currentTarget.style.background = "#1a0a3a"; }} onMouseLeave={e => { e.currentTarget.style.borderColor = "#2a2a4a"; e.currentTarget.style.color = "#888"; e.currentTarget.style.background = "#0d0d1e"; }} >{s} ))} )} {/* Step 1 */} {step === 1 && ( Step 02 — Pick up to 4 Skills Sector: {sector} · {selectedSkills.length}/4 selected {SKILL_OPTIONS[sector]?.map(s => { const on = selectedSkills.includes(s); return toggleSkill(s)} style={{ ...btnBase, background: on ? "#003322" : "#0d0d1e", border: `1px solid ${on ? "#00ff88" : "#2a2a4a"}`, borderRadius: 20, padding: "8px 16px", color: on ? "#00ff88" : "#666", transition: "all 0.2s", boxShadow: on ? "0 0 12px #00ff8833" : "none" }}>{s}; })} setStep(0)} style={{ ...btnBase, flex: 1, background: "transparent", border: "1px solid #2a2a4a", color: "#555" }}>← Back setStep(2)} disabled={!selectedSkills.length} style={{ ...btnBase, flex: 2, background: selectedSkills.length ? "#00ff8822" : "#111", border: `1px solid ${selectedSkills.length ? "#00ff88" : "#222"}`, color: selectedSkills.length ? "#00ff88" : "#333", cursor: selectedSkills.length ? "pointer" : "default" }}>Continue → )} {/* Step 2 */} {step === 2 && ( Step 03 — Career Horizon {years} YEARS FROM NOW setYears(+e.target.value)} style={{ width: "100%", accentColor: "#00ff88", marginBottom: 24 }} /> {["5 yrs","10 yrs","15 yrs","20 yrs","25 yrs"].map(l => {l})} setStep(1)} style={{ ...btnBase, flex: 1, background: "transparent", border: "1px solid #2a2a4a", color: "#555" }}>← Back Analyze → )} {/* Step 3 */} {step === 3 && ( {loading && !result && ( ANALYZING... )} {result && ( {/* Score */} Relevance Score {result.rating.label} {sector} · {years} years · {selectedSkills.length} skills Market: {TREND[sector]} {/* Tabs */} {["results","killers"].map(id => ( setActiveTab(id)} style={{ flex: 1, padding: "10px", fontSize: 10, letterSpacing: 3, background: activeTab === id ? "#1a1a3a" : "transparent", border: `1px solid ${activeTab === id ? "#4a4a8a" : "#1e1e3a"}`, borderRadius: 8, color: activeTab === id ? "#fff" : "#444", cursor: "pointer", fontFamily: "'Space Mono', monospace", textTransform: "uppercase", transition: "all 0.2s" }}>{id === "results" ? "My Results" : "Career Killers"} ))} {activeTab === "results" && ( Skill Resilience {selectedSkills.map((s, i) => { const sc = result.skillScores[i]; const r = getRating(sc); return ( {s} {sc}/100 · {r.label} ); })} AI Verdict {loading ? Generating... : ( {aiInsight.split("\n").filter(Boolean).map((line, i) => ( {line.replace(/^[•·\-]\s*/, "")} ))} )} {/* Email Capture */} Want your full 5-year roadmap? Personalized skill plan, salary benchmarks, and monthly checkpoints — free. {emailSubmitted ? ( ✓ You're in. Roadmap incoming. ) : ( setEmail(e.target.value)} style={{ flex: 1, background: "#0a0a1a", border: "1px solid #2a2a5a", borderRadius: 8, padding: "10px 14px", color: "#ccc", fontSize: 11, fontFamily: "'Space Mono', monospace", outline: "none" }} /> email.includes("@") && setEmailSubmitted(true)} style={{ background: "#8866ff22", border: "1px solid #8866ff", borderRadius: 8, padding: "10px 16px", color: "#8866ff", fontSize: 11, cursor: "pointer", fontFamily: "'Space Mono', monospace", whiteSpace: "nowrap" }}> Get it → )} )} {activeTab === "killers" && ( Real reasons people lose their jobs — by how often it actually happens {CAREER_KILLERS.map((k, i) => )} )} { setStep(2); setResult(null); setAiInsight(""); }} style={{ ...btnBase, flex: 1, background: "transparent", border: "1px solid #2a2a4a", color: "#555" }}>← Adjust { setStep(0); setSector(""); setSelectedSkills([]); setYears(20); setResult(null); setAiInsight(""); setEmail(""); setEmailSubmitted(false); }} style={{ ...btnBase, flex: 1, background: "transparent", border: "1px solid #2a2a4a", color: "#555" }}>↺ Start Over )} )} ); }