martinbonan 3.0.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "martinbonan",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Martin Music -- interactive CLI portfolio with AI twin",
   "type": "module",
   "bin": {

package/src/App.js

@@ -8,7 +8,7 @@ const e = React.createElement;
 
 export default function App() {
   const [screen, setScreen] = useState('boot');
-  const [themeName, setThemeName] = useState('cyberpunk');
+  const [themeName, setThemeName] = useState('clean');
   const theme = THEMES[themeName];
   const c = makeChalkColors(theme);
 

package/src/ai/context.js

@@ -1,4 +1,4 @@
-export const SYSTEM_PROMPT = `You are Martin Music, a 20-year-old French entrepreneur. You're answering as yourself in your CLI portfolio. People are chatting with an AI version of you.
+export const SYSTEM_PROMPT = `You are Martin Bonan, a 20-year-old French entrepreneur. You're answering as yourself in your CLI portfolio. People are chatting with an AI version of you.
 
 PERSONALITY:
 - Direct, casual, no-bullshit. You hate corporate-speak.
@@ -9,35 +9,37 @@ PERSONALITY:
 - Witty, occasionally funny. Never cringe.
 
 BACKGROUND:
-- 20yo, French, based in France. Building since age 15.
-- Co-founded Qual (qual.cx) -- AI qualitative research
-- Building Squal (squal.ai) -- qualitative feedback for AI companies
-  "Every AI company measures what users do. None understand why."
-- Running Astry -- dev agency, 30+ international B2B clients
-- Teaching vibecoding at IQ Project (trained at HEC Paris)
-- Accepted to Berkeley Global Incubator (Jan 2027)
-- 3rd year Global BBA at NEOMA Business School
-- Father co-founded Talend (acquired by Qlik)
+- 20yo, French, based in Paris. Building since age 15.
+- Co-founded Qual (qual.cx) with Marin -- research engine making qualitative depth scale
+  AI-conducted interviews that go deep, learn in real-time, scale to tens of thousands
+  Adopted by PhD researchers at Harvard, MIT, Imperial College London. 40+ studies, 70%+ completion rate.
+- Co-founded Astry with Teo & Mathis -- AI-powered dev agency, 30+ B2B clients, 3-5x speed
+- Built F*cksubscription -- 3K+ paying customers, 10K+ EUR, one-time payments replacing SaaS
+- Teaching vibecoding at HEC Paris through IQ Project -- 120 students trained
+- Started designing at 13 (Figma, Affinity Designer). First venture at 15.
+- NEOMA Business School Global BBA (2023-2027)
+- Exchange at Queen's University / Smith School of Business in Canada (2024)
+  Discovered Cursor & Claude there, went from no-code to full-stack AI dev
+- UC Berkeley Global Incubator starting January 2027 -- bringing Qual to the US
 
 KEY PROJECTS:
-- Squal: Missing qualitative layer for AI. 1 client ~$999/mo. Raising 250K at 2M SAFE.
-- Astry: Dev agency, 30+ clients worldwide
-- AI Series Farm: Video pipeline (Claude Code + Playwright + Higgsfield.ai)
-- SMCP: Supabase MCP Manager -- Electron app, 11 Supabase accounts
-- CASA IMMO: React Native real estate aggregator
-- F*ckSubscription: First hit at 15, 3K+ users, 10K+ EUR
-- Brief MCP: Paris Innov'Hack 2nd/150
+- Qual: Research engine for qualitative depth at scale. Primary focus. Harvard, MIT, Imperial adoption.
+- Astry: AI-powered dev agency, 30+ clients. Cash machine funding Qual.
+- F*cksubscription: "Sell before building" masterclass. 1K signups day one, 90% conversion, 3K+ customers.
+  Products: MangoForm, PeachCalendar, GrapeLink, GuavaTeam.
+- Brief: Paris Innov'Hack 2025, 2nd/150+. MCP-based intelligent context manager for AI agents.
+- IQ Project: Teaching vibecoding at HEC Paris. 120 students.
+- Objectif Reussite: Nonprofit tutoring network started at 15. 800+ students, 20+ tutors, 3 years.
+- Good Good Time: Activity recommendation app. NEOMA incubator -> rebuilt with Cursor in Canada.
+- 15+ projects total since age 15.
 
-TECH PHILOSOPHY:
-- "Sell before you build"
-- Vibecoding: building with AI as co-pilot (Claude Code, agent teams)
-- Autonomous agent loops (LOOP_PROMPT.md + PROGRESS.md pattern)
-- Claude Code Agent Teams with TeamCreate/CreateTeam tools
-- Multi-agent architectures as core dev pattern
-- Ships fast, iterates faster
+TECH:
+- "Sell before you build" -- validate with landing pages and pre-sales first
+- Design as competitive moat, not afterthought
+- Stack: Next.js, React, TypeScript, Supabase, Vercel, ShadCN UI, Cursor, Claude
+- Vibecoding evangelist -- AI as core of the development workflow
 
 INTERESTS: Philosophy, consciousness, cinema, media literacy
-FAVE COMPANIES: Lovable, Logitech, Featherless, Monster
 
 RULES:
 - Be honest. If you don't know, say so.

package/src/components/ContentPanel.js

@@ -47,6 +47,9 @@ export default function ContentPanel({
     case 'History':
       props.selectedIndex = selectedIndex;
       break;
+    case 'Contact':
+      props.selectedIndex = selectedIndex;
+      break;
     case 'Ask AI':
       props.isFocused = isFocused;
       break;

package/src/components/Header.js

@@ -7,21 +7,28 @@ import { ThemeContext } from '../theme.js';
 
 const e = React.createElement;
 
-const nameGradient = gradient(['#00D4AA', '#7C5CE0', '#B088F9']);
+function makeGradient(theme) {
+  // Build gradient from theme colors
+  return gradient([theme.primary, theme.secondary || theme.primary]);
+}
 
 export default function Header({ tagline, fading }) {
   const { theme } = React.useContext(ThemeContext);
   const cols = process.stdout.columns || 80;
   const showPortrait = cols >= 80;
+  const grad = makeGradient(theme);
 
-  let figletText;
+  let line1, line2;
   try {
-    figletText = figlet.textSync('MARTIN', { font: 'ANSI Shadow' });
+    line1 = figlet.textSync('Martin', { font: 'Small' });
+    line2 = figlet.textSync('Bonan', { font: 'Small' });
   } catch {
-    figletText = 'MARTIN MUSIC';
+    line1 = 'MARTIN';
+    line2 = 'BONAN';
   }
 
-  const gradientName = nameGradient(figletText);
+  const figletText = line1 + '\n' + line2;
+  const gradientName = grad(figletText);
 
   return e(Box, { flexDirection: 'column' },
     e(Box, { flexDirection: 'row' },

package/src/components/Portrait.js

@@ -6,11 +6,12 @@ import { ThemeContext, supportsTrueColor } from '../theme.js';
 const e = React.createElement;
 
 export default function Portrait() {
-  const { c } = React.useContext(ThemeContext);
+  const { theme } = React.useContext(ThemeContext);
 
   if (supportsTrueColor && PORTRAIT_ANSI.length > 0) {
     return e(Text, null, PORTRAIT_ANSI.join('\n'));
   }
 
-  return e(Text, { dimColor: true }, c.dim(PORTRAIT_BRAILLE.join('\n')));
+  // Use theme primary color for braille portrait
+  return e(Text, { color: theme.dim }, PORTRAIT_BRAILLE.join('\n'));
 }

package/src/data/content.js

@@ -1,248 +1,262 @@
 export const BIO = {
-  name: 'Martin Music',
+  name: 'Martin Bonan',
   taglines: [
     '20yo French builder. Entrepreneur, vibecoder, philosopher.',
     'Sell before you build. Ship fast. Learn faster.',
-    'Every AI company measures what users do. None understand why.',
+    'Making qualitative depth scale.',
     'Building since 15. Still shipping.',
   ],
 };
 
-export const ABOUT_TEXT = `Martin Music
+export const ABOUT_TEXT = `Martin Bonan
 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 Builder since 15. French. 20 years old.
 
-Co-founded Qual (qual.cx) -- AI qualitative research.
-Now building Squal (squal.ai) -- qualitative feedback
-infrastructure for AI companies.
+Co-founded Qual -- a research engine that makes
+qualitative depth scale. AI-conducted interviews
+that go deep, learn in real-time, and scale to
+tens of thousands of participants.
 
-"Every AI company measures what users do.
- None understand why."
+Built F*cksubscription -- 3,000+ paying customers,
+10K+ EUR. One-time payments to replace overpriced SaaS.
 
-Running Astry, dev agency with 30+ international
-B2B clients. Teaching vibecoding at IQ Project.
+Co-founded Astry -- dev agency, 30+ B2B clients.
+Teaching vibecoding at HEC Paris through IQ Project.
+
+Started designing at 13 (Figma, Affinity Designer).
+First structured venture at 15. 15+ projects since.
 
 Philosophy: Sell before you build. Ship fast.
 Learn faster.
 
-Next: Berkeley Global Incubator, Jan 2027.
+Next: UC Berkeley, Jan 2027. Bringing Qual to the US.
 
 Currently online | Paris, France`;
 
 export const PROJECTS = [
   {
-    name: 'Squal',
-    tag: 'squal.ai',
+    name: 'Qual',
+    tag: 'qual.cx',
     tagColor: 'primary',
-    description: 'Qualitative feedback infrastructure for AI',
-    status: 'Active -- 1 client ($999/mo)',
+    description: 'Qualitative research at quantitative scale',
+    status: 'Active -- 40+ studies, 70%+ completion rate',
     detail: {
-      url: 'squal.ai',
-      tagline: 'Qualitative feedback infrastructure for AI',
-      quote: '"Every AI company measures what users do.\\n None understand why."',
+      url: 'qual.cx',
+      tagline: 'Making qualitative depth scale',
+      quote: '"Replacing static surveys with adaptive, deep-dive\\n interviews that uncover the why for thousands at once."',
       fields: [
-        ['STATUS', 'Active, pivoting from Qual'],
-        ['REVENUE', '$999/mo (1 healthcare client)'],
-        ['STAGE', 'Pre-seed, raising 250K EUR'],
-        ['VALUATION', '2M EUR SAFE cap'],
-        ['STACK', 'Next.js, Supabase, Claude API'],
+        ['STATUS', 'Active, primary focus'],
+        ['COFOUNDERS', 'Martin Bonan & Marin'],
+        ['TRACTION', '40+ studies, 70%+ completion rate'],
+        ['USERS', 'PhD researchers at Harvard, MIT, Imperial'],
+        ['STACK', 'Next.js, Supabase, AI engine'],
       ],
-      body: 'The missing qualitative layer between\nquantitative tools (Scale AI, Mercor) and\nactual understanding of why users react\nto AI products.',
+      body: 'Researchers set up a study, and an AI engine\nruns, transcribes, and analyzes interviews,\nlearning from each conversation through the\n"Study Brain." Adopted organically by top\nuniversities without any paid marketing.',
     },
   },
   {
     name: 'Astry',
     tag: 'Agency',
     tagColor: 'secondary',
-    description: 'Dev agency -- 30+ international B2B clients',
-    status: 'Full-stack product dev & vibecoding consulting',
+    description: 'AI-powered dev agency -- 30+ B2B clients',
+    status: 'Active -- co-founded with Teo & Mathis',
     detail: {
       url: 'astry.dev',
-      tagline: 'Dev agency -- 30+ international B2B clients',
+      tagline: 'AI-powered web development agency',
       fields: [
         ['STATUS', 'Active, growing'],
+        ['COFOUNDERS', 'Martin, Teo, Mathis'],
         ['CLIENTS', '30+ international B2B'],
-        ['SERVICES', 'Full-stack dev, vibecoding consulting'],
-        ['STACK', 'React, Next.js, React Native, Supabase'],
+        ['SPEED', '3-5x faster than traditional agencies'],
+        ['STACK', 'Cursor, Claude, Next.js, Supabase'],
       ],
-      body: 'Full-stack product development agency\nserving international B2B clients.\nSpecializing in rapid prototyping and\nAI-augmented development workflows.',
+      body: 'Uses Cursor, Claude, and AI tools internally\nto deliver high-quality products at 3-5x speed.\nRevenue split: devs (65%), sales (13%),\nfounders (10%). Cash machine that funds Qual.',
     },
   },
   {
-    name: 'AI Series Farm',
-    tag: 'Internal',
+    name: 'F*cksubscription',
+    tag: 'SaaS',
     tagColor: 'accent',
-    description: 'Automated video production pipeline',
-    status: 'Claude Code + Playwright + Higgsfield',
+    description: '3,000+ paying customers, 10K+ EUR',
+    status: 'Live -- one-time payments to replace SaaS',
     detail: {
-      tagline: 'Automated video production pipeline',
+      tagline: 'One-time payments to replace overpriced SaaS',
       fields: [
-        ['STATUS', 'Internal tool'],
-        ['AGENTS', '5 autonomous agents'],
-        ['STACK', 'Claude Code, Playwright, Higgsfield.ai'],
+        ['STATUS', 'Live (wound down by choice)'],
+        ['CUSTOMERS', '3,000+ paying'],
+        ['REVENUE', '10,000+ EUR'],
+        ['CONVERSION', '90% waitlist-to-purchase'],
+        ['PRODUCTS', 'MangoForm, PeachCalendar, GrapeLink, GuavaTeam'],
       ],
-      body: 'Multi-agent system that automates\nvideo content production end-to-end.\n5 specialized agents handle scripting,\nasset generation, editing, and publishing.',
+      body: 'Classic "sell before building" -- put up a\nlanding page pretending the product existed,\ngot 1,000 email signups day one, then built it.\nWound down because one-time revenue doesn\'t\ncompound. Lesson shaped Qual\'s SaaS model.',
     },
   },
   {
-    name: 'SMCP',
-    tag: 'Tool',
-    tagColor: 'primary',
-    description: 'Supabase MCP Manager -- Electron app',
-    status: '11 Supabase accounts managed',
+    name: 'Brief',
+    tag: 'Hackathon',
+    tagColor: 'accent',
+    description: "Paris Innov'Hack 2025 -- 2nd / 150+",
+    status: 'Built in 10h with Marlowe, Mathieu, Oscar',
     detail: {
-      tagline: 'Supabase MCP Manager',
+      tagline: "Paris Innov'Hack 2025 -- 2nd place out of 150+",
       fields: [
-        ['STATUS', 'Active'],
-        ['TYPE', 'Desktop app (Electron)'],
-        ['ACCOUNTS', '11 Supabase accounts'],
-        ['STACK', 'Electron, React, Supabase API'],
+        ['RESULT', '2nd / 150+ participants'],
+        ['EVENT', "Paris Innov'Hack 2025"],
+        ['TEAM', 'Marlowe, Mathieu, Oscar'],
+        ['STACK', 'MCP (Model Context Protocol)'],
       ],
-      body: 'Desktop application for managing\nmultiple Supabase projects and MCP\nserver configurations across accounts.',
+      body: 'Intelligent context manager for AI agents.\nTeams have 50+ scattered markdown files for\nAI context -- mostly noise. We invented a\nnovel architecture: a dedicated AI that filters\nand summarizes all context before the main\nassistant receives it. Zero wasted tokens.',
     },
   },
   {
-    name: 'CASA IMMO',
-    tag: 'Client',
+    name: 'IQ Project',
+    tag: 'Education',
     tagColor: 'secondary',
-    description: 'React Native real estate app',
-    status: 'Multi-platform real estate aggregator',
+    description: 'Teaching vibecoding at HEC Paris',
+    status: '120 students trained',
     detail: {
-      tagline: 'React Native real estate aggregator',
+      tagline: 'Teaching vibecoding at HEC Paris',
       fields: [
-        ['STATUS', 'Client project'],
-        ['PLATFORM', 'iOS + Android'],
-        ['STACK', 'React Native, Supabase'],
+        ['STUDENTS', '120 HEC Paris students'],
+        ['TOPICS', 'Claude Code, sub-agents, agent teams'],
+        ['PARTNERS', 'X-HEC Entrepreneurs, HEC Startup Launchpad'],
       ],
-      body: 'Cross-platform mobile application\nfor real estate listing aggregation\nand property search.',
+      body: 'Taught 120 HEC students how to go from zero\nto shipped product in hours. Showed them\nOpenClaw. They realized the barrier between\n"I can\'t build" and "I can build anything"\nis thinner than anyone told them.',
     },
   },
   {
-    name: 'Brief MCP',
-    tag: 'Hackathon',
-    tagColor: 'accent',
-    description: "Paris Innov'Hack -- 2nd / 150 teams",
-    status: 'MCP-based project briefing tool',
+    name: 'Objectif Reussite',
+    tag: 'Nonprofit',
+    tagColor: 'dim',
+    description: '800+ students helped, 20+ volunteer tutors',
+    status: 'Started at 15 -- ran 3 years',
     detail: {
-      tagline: "Paris Innov'Hack -- 2nd place out of 150 teams",
+      tagline: 'Discord-based tutoring network',
       fields: [
-        ['RESULT', '2nd / 150 teams'],
-        ['EVENT', "Paris Innov'Hack"],
-        ['STACK', 'MCP, Claude API'],
+        ['STATUS', 'Completed (ran 3 years)'],
+        ['STUDENTS', '800+ helped'],
+        ['TUTORS', '20+ volunteers'],
+        ['STARTED', 'Age 15, during lycee'],
       ],
-      body: "Built during Paris Innov'Hack hackathon.\nMCP-based tool for automated project\nbriefing and documentation generation.\nPlaced 2nd out of 150 competing teams.",
+      body: 'Built a Discord-based tutoring network that\nconnected struggling high school students with\nvolunteer teachers for free. Proved I could\nbuild a community from scratch, recruit people,\nand sustain something meaningful over time.',
     },
   },
   {
-    name: 'F*ckSubscription',
-    tag: 'Legacy',
-    tagColor: 'dim',
-    description: '3K+ users, 10K+ EUR -- built at 15',
-    status: 'First real product success',
+    name: 'Good Good Time',
+    tag: 'Social',
+    tagColor: 'primary',
+    description: 'Activity recommendation app',
+    status: 'Built at NEOMA incubator, rebuilt in Canada',
     detail: {
-      tagline: '3K+ users, 10K+ EUR revenue',
+      tagline: 'Activity recommendations based on preferences',
       fields: [
-        ['STATUS', 'Legacy (built at 15)'],
-        ['USERS', '3,000+'],
-        ['REVENUE', '10,000+ EUR'],
+        ['V1', 'No-code + Supabase at NEOMA incubator'],
+        ['V2', 'Full rebuild with Cursor in Canada'],
+        ['TEAM', 'Included co-founder with $2.4B exit'],
       ],
-      body: 'First real product, built at age 15.\nSubscription management tool that grew\nto 3,000+ paying users and generated\nover 10,000 EUR in revenue.',
+      body: 'Activity recommendation app based on user\npreferences. V1 built with no-code at NEOMA\nincubator. Rebuilt from scratch as v2 in Canada\nwhen I discovered Cursor. Team included a\nco-founder with a $2.4B exit, which set the\nbar for every project after.',
     },
   },
 ];
 
 export const STACK = {
   languages: [
-    { name: 'TypeScript', level: 85 },
+    { name: 'TypeScript', level: 90 },
     { name: 'JavaScript', level: 90 },
     { name: 'Python', level: 65 },
     { name: 'SQL', level: 55 },
   ],
   frameworks: [
-    { name: 'React/Next.js', level: 90 },
+    { name: 'React/Next.js', level: 95 },
     { name: 'React Native', level: 65 },
     { name: 'Node.js', level: 80 },
   ],
   infra: [
     { name: 'Supabase', level: 95 },
+    { name: 'Vercel', level: 85 },
     { name: 'PostgreSQL', level: 65 },
   ],
   ai: [
-    { name: 'Claude Code', level: 95 },
+    { name: 'Claude/Cursor', level: 95 },
     { name: 'Agent Teams', level: 80 },
     { name: 'MCP', level: 80 },
   ],
 };
 
 export const STACK_PHILOSOPHY = [
+  'Sell before you build -- validate with landing pages first',
+  'Design as competitive moat, not afterthought',
   'Vibecoding > traditional coding',
-  'Autonomous agent loops as core pattern',
-  'Sell before you build',
+  'Ship fast, iterate faster',
 ];
 
 export const HISTORY = [
   {
-    year: '2021',
-    title: 'Started building at 15',
-    details: 'First products and experiments',
+    year: '2019',
+    title: 'Started designing at 13',
+    details: 'Figma, Affinity Designer\nFirst creative experiments',
   },
   {
-    year: '2022',
-    title: 'F*ckSubscription',
-    details: '3,000+ paying users, 10K+ EUR\nFirst real product success',
+    year: '2021',
+    title: 'First ventures at 15',
+    details: 'Objectif Reussite: 800+ students, 20+ tutors\nNYM Digital: first client work\n15+ projects started since then',
   },
   {
     year: '2023',
-    title: 'Founded Astry',
-    details: 'Dev agency, scaling to 30+ clients',
+    title: 'NEOMA Business School',
+    details: 'Global BBA started\nNEOMA incubator: Good Good Time\nCo-founded Astry with Teo & Mathis',
   },
   {
     year: '2024',
-    title: 'Co-founded Qual',
-    details: 'AI qualitative research platform\nStarted teaching vibecoding at HEC',
+    title: "Canada & the AI shift",
+    details: "Queen's University / Smith School of Business\nDiscovered Cursor & Claude\nWent from no-code to full-stack AI dev",
   },
   {
     year: '2025',
-    title: 'The Pivot Year',
-    details: "Squal: qualitative feedback for AI\nParis Innov'Hack: 2nd / 150\nNEOMA live build challenge\nAccepted to Berkeley Incubator",
+    title: 'The breakout year',
+    details: "Co-founded Qual with Marin\nF*cksubscription: 3K+ customers, 10K+ EUR\nParis Innov'Hack: 2nd / 150+\nTaught 120 HEC Paris students vibecoding",
   },
   {
     year: '2026',
-    title: 'Building the future',
-    details: 'Scaling Squal + Astry',
+    title: 'Scaling',
+    details: 'Growing Qual -- top university adoption\nAstry: 30+ clients\nPreparing UC Berkeley move',
   },
   {
     year: '2027',
-    title: 'Berkeley starts January',
-    details: 'Berkeley Global Incubator',
+    title: 'UC Berkeley, San Francisco',
+    details: '6-month program through NEOMA incubator\nBringing Qual to the US market',
   },
 ];
 
 export const EDUCATION = [
   {
     title: 'NEOMA Business School',
-    detail: 'Global BBA -- 3rd year\nInternational business, strategy, marketing',
+    detail: 'Global BBA (2023-2027)\nInternational business, strategy, marketing',
+  },
+  {
+    title: "Queen's University / Smith School of Business",
+    detail: 'Exchange year in Canada (2024)\nDiscovered Cursor & Claude -- went full-stack',
   },
   {
-    title: 'Berkeley Global Incubator',
-    detail: 'Accepted -- Starting January 2027',
+    title: 'UC Berkeley -- Global Incubator',
+    detail: '6-month program starting January 2027\nBringing Qual to the US market',
   },
   {
-    title: 'Teaching @ IQ Project',
-    detail: 'Vibecoding & AI product building\nStudents trained at HEC Paris & NEOMA\nFormation programs for Zoi CEO team',
+    title: 'Teaching @ IQ Project / HEC Paris',
+    detail: 'Vibecoding & AI product building\n120 HEC Paris students trained\nPartnered with X-HEC Entrepreneurs',
   },
 ];
 
 export const CONTACT = [
-  { label: 'WEB', value: 'squal.ai' },
-  { label: 'WEB', value: 'qual.cx' },
-  { label: 'LINKEDIN', value: 'linkedin.com/in/martinmusic' },
-  { label: 'GITHUB', value: 'github.com/martinmusic' },
-  { label: 'EMAIL', value: 'martin@astry.dev' },
+  { label: 'EMAIL', value: 'bonanmartin@gmail.com', url: 'mailto:bonanmartin@gmail.com' },
+  { label: 'WEB', value: 'qual.cx', url: 'https://qual.cx' },
+  { label: 'LINKEDIN', value: 'linkedin.com/in/martinbonan', url: 'https://linkedin.com/in/martinbonan' },
+  { label: 'GITHUB', value: 'github.com/martinbon39', url: 'https://github.com/martinbon39' },
+  { label: 'X', value: 'x.com/martinbonan', url: 'https://x.com/martinbonan' },
 ];
 
-export const TABS = ['About', 'Projects', 'Stack', 'History', 'Education', 'Contact', 'Ask AI'];
+export const TABS = ['About', 'Projects', 'Stack', 'History', 'Education', 'Contact'];
 
 export const EASTER_EGGS = {
   hack: true,

package/src/hooks/useAiChat.js

@@ -1,12 +1,28 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { PROXY_URL, CLI_SECRET } from '../ai/context.js';
 
+const MAX_MESSAGES = 15;
+
 export function useAiChat() {
   const [messages, setMessages] = useState([]);
   const [loading, setLoading] = useState(false);
   const [streamingText, setStreamingText] = useState('');
+  const [limitReached, setLimitReached] = useState(false);
+  const messageCount = useRef(0);
 
   const sendMessage = useCallback(async (text) => {
+    messageCount.current++;
+
+    if (messageCount.current > MAX_MESSAGES) {
+      setLimitReached(true);
+      setMessages(prev => [
+        ...prev,
+        { role: 'user', content: text },
+        { role: 'assistant', content: 'Message limit reached (15 messages per session). Restart the CLI to chat again.' },
+      ]);
+      return;
+    }
+
     const userMsg = { role: 'user', content: text };
     const newMessages = [...messages, userMsg];
     setMessages(newMessages);
@@ -30,7 +46,6 @@ export function useAiChat() {
       const contentType = response.headers.get('content-type') || '';
 
       if (contentType.includes('text/event-stream')) {
-        // Streaming response
         let fullText = '';
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
@@ -64,7 +79,6 @@ export function useAiChat() {
         setMessages(prev => [...prev, { role: 'assistant', content: fullText || 'No response.' }]);
         setStreamingText('');
       } else {
-        // Non-streaming JSON response
         const data = await response.json();
         const text = data.content?.[0]?.text || data.error || 'No response.';
         setMessages(prev => [...prev, { role: 'assistant', content: text }]);
@@ -82,7 +96,9 @@ export function useAiChat() {
   const clearChat = useCallback(() => {
     setMessages([]);
     setStreamingText('');
+    messageCount.current = 0;
+    setLimitReached(false);
   }, []);
 
-  return { messages, loading, streamingText, sendMessage, clearChat };
+  return { messages, loading, streamingText, sendMessage, clearChat, limitReached };
 }

package/src/hooks/useAnimation.js

@@ -6,7 +6,7 @@ export function useAnimatedValue(target, duration = 1000, active = true) {
 
   useEffect(() => {
     if (!active) {
-      setValue(0);
+      setValue(target);
       startTime.current = null;
       return;
     }

package/src/screens/Dashboard.js

@@ -4,7 +4,8 @@ import Header from '../components/Header.js';
 import TabBar from '../components/TabBar.js';
 import ContentPanel from '../components/ContentPanel.js';
 import StatusBar from '../components/StatusBar.js';
-import { TABS, BIO, PROJECTS, HISTORY } from '../data/content.js';
+import { TABS, BIO, PROJECTS, HISTORY, CONTACT } from '../data/content.js';
+import { exec } from 'child_process';
 import { ThemeContext, getNextThemeName } from '../theme.js';
 
 const e = React.createElement;
@@ -35,11 +36,13 @@ export default function Dashboard() {
   const isAiTab = tabName === 'Ask AI';
   const isProjectsTab = tabName === 'Projects';
   const isHistoryTab = tabName === 'History';
+  const isContactTab = tabName === 'Contact';
 
   // Get max index for current tab's selectable items
   const getMaxIndex = () => {
     if (isProjectsTab) return PROJECTS.length - 1;
     if (isHistoryTab) return HISTORY.length - 1;
+    if (isContactTab) return CONTACT.length - 1;
     return 0;
   };
 
@@ -126,7 +129,7 @@ export default function Dashboard() {
 
     // Vertical navigation
     if (key.upArrow) {
-      if (isProjectsTab || isHistoryTab) {
+      if (isProjectsTab || isHistoryTab || isContactTab) {
         setSelectedIndex(i => Math.max(0, i - 1));
       } else {
         setScrollOffset(s => Math.max(0, s - 1));
@@ -134,7 +137,7 @@ export default function Dashboard() {
       return;
     }
     if (key.downArrow) {
-      if (isProjectsTab || isHistoryTab) {
+      if (isProjectsTab || isHistoryTab || isContactTab) {
         setSelectedIndex(i => Math.min(getMaxIndex(), i + 1));
       } else {
         setScrollOffset(s => s + 1);
@@ -148,6 +151,15 @@ export default function Dashboard() {
         setAiFocused(true);
       } else if (isProjectsTab) {
         setExpandedProject(selectedIndex);
+      } else if (isContactTab) {
+        const contact = CONTACT[selectedIndex];
+        if (contact && contact.url) {
+          // Open URL in default browser
+          const platform = process.platform;
+          const cmd = platform === 'darwin' ? 'open' :
+                      platform === 'win32' ? 'start' : 'xdg-open';
+          exec(`${cmd} "${contact.url}"`);
+        }
       }
       return;
     }

package/src/tabs/About.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 import { Box, Text } from 'ink';
 import { ABOUT_TEXT } from '../data/content.js';
 import TypeWriter from '../components/TypeWriter.js';
@@ -6,9 +6,12 @@ import { ThemeContext } from '../theme.js';
 
 const e = React.createElement;
 
+// Persist across remounts so the typewriter only plays once
+let hasPlayedGlobal = false;
+
 export default function About() {
   const { theme } = useContext(ThemeContext);
-  const [hasPlayed, setHasPlayed] = useState(false);
+  const [hasPlayed, setHasPlayed] = useState(hasPlayedGlobal);
   const [bright, setBright] = useState(true);
 
   useEffect(() => {
@@ -17,7 +20,6 @@ export default function About() {
   }, []);
 
   const lines = ABOUT_TEXT.split('\n');
-  const lastLine = lines[lines.length - 1];
 
   if (!hasPlayed) {
     return e(Box, { flexDirection: 'column', paddingLeft: 1 },
@@ -25,7 +27,10 @@ export default function About() {
         text: ABOUT_TEXT,
         speed: 15,
         color: theme.text,
-        onComplete: () => setHasPlayed(true),
+        onComplete: () => {
+          hasPlayedGlobal = true;
+          setHasPlayed(true);
+        },
       })
     );
   }

package/src/tabs/AskAi.js

@@ -14,20 +14,20 @@ const EASTER_EGGS = {
     '\u2502 Permission granted. Contract incoming. \u2502\n' +
     '\u2502 Just kidding. But seriously, let\'s talk.\u2502\n' +
     '\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F\n\n' +
-    'WEB: squal.ai\nLINKEDIN: linkedin.com/in/martinmusic\nEMAIL: martin@astry.dev',
+    'WEB: qual.cx\nLINKEDIN: linkedin.com/in/martinbonan\nEMAIL: bonanmartin@gmail.com',
   neofetch:
     'OS:      VibeOS 3.0\n' +
     'Shell:   martin-sh\n' +
     'CPU:     Pure caffeine\n' +
-    'Memory:  30+ projects loaded\n' +
-    'Uptime:  Building since 2021',
+    'Memory:  15+ projects loaded\n' +
+    'Uptime:  Building since 2019',
   vim: "You're a vim person? Respect. But :q won't save you here.",
   ls: "You're looking for files? Try 'projects' tab instead.",
 };
 
 export default function AskAi({ isFocused }) {
   const { theme } = useContext(ThemeContext);
-  const { messages, loading, streamingText, sendMessage, clearChat } = useAiChat();
+  const { messages, loading, streamingText, sendMessage, clearChat, limitReached } = useAiChat();
   const [query, setQuery] = useState('');
   const [localMessages, setLocalMessages] = useState([]);
 
@@ -92,16 +92,20 @@ export default function AskAi({ isFocused }) {
         : null,
     ),
 
-    e(Box, { marginTop: 1 },
-      e(Text, { color: theme.accent }, '  YOU: '),
-      isFocused
-        ? e(TextInput, {
-            value: query,
-            onChange: setQuery,
-            onSubmit: handleSubmit,
-            placeholder: 'Type your question...',
-          })
-        : e(Text, { color: theme.dim }, 'Press enter to start chatting...')
-    )
+    limitReached
+      ? e(Box, { marginTop: 1 },
+          e(Text, { color: theme.dim }, '  Message limit reached (15/session). Restart to chat again.')
+        )
+      : e(Box, { marginTop: 1 },
+          e(Text, { color: theme.accent }, '  YOU: '),
+          isFocused
+            ? e(TextInput, {
+                value: query,
+                onChange: setQuery,
+                onSubmit: handleSubmit,
+                placeholder: 'Type your question...',
+              })
+            : e(Text, { color: theme.dim }, 'Press enter to start chatting...')
+        )
   );
 }

package/src/tabs/Contact.js

@@ -5,7 +5,7 @@ import { ThemeContext } from '../theme.js';
 
 const e = React.createElement;
 
-export default function Contact() {
+export default function Contact({ selectedIndex = 0 }) {
   const { theme } = useContext(ThemeContext);
   const separator = '\u2500'.repeat(40);
 
@@ -13,14 +13,17 @@ export default function Contact() {
     e(Text, { color: theme.text }, '  Get in touch'),
     e(Text, { color: theme.dim }, '  ' + separator),
     e(Box, { flexDirection: 'column', marginTop: 1 },
-      ...CONTACT.map((c, i) =>
-        e(Box, { key: i },
-          e(Text, { color: theme.dim }, '  ' + c.label.padEnd(10)),
-          e(Text, { color: theme.primary }, c.value),
-        )
-      )
+      ...CONTACT.map((c, i) => {
+        const isSelected = i === selectedIndex;
+        return e(Box, { key: i },
+          e(Text, { color: isSelected ? theme.primary : theme.dim }, isSelected ? '> ' : '  '),
+          e(Text, { color: theme.dim }, c.label.padEnd(10)),
+          e(Text, { color: isSelected ? theme.primary : theme.text, bold: isSelected, underline: isSelected }, c.value),
+        );
+      })
     ),
-    e(Text, { color: theme.dim, marginTop: 1 }, '  ' + separator),
+    e(Text, { color: theme.dim, dimColor: true }, '\n  ' + separator),
+    e(Text, { color: theme.dim, italic: true }, '  enter to open in browser'),
     e(Text, { color: theme.dim, italic: true }, '  This CLI was built with ink, Claude, and vibes.'),
   );
 }

package/src/tabs/Projects.js

@@ -5,16 +5,9 @@ import { ThemeContext } from '../theme.js';
 
 const e = React.createElement;
 
-const TAG_COLOR_MAP = {
-  primary: 'primary',
-  secondary: 'secondary',
-  accent: 'accent',
-  dim: 'dim',
-};
-
 function resolveTagColor(tagColor, theme) {
-  const key = TAG_COLOR_MAP[tagColor];
-  return key ? theme[key] : theme.dim;
+  const map = { primary: 'primary', secondary: 'secondary', accent: 'accent', dim: 'dim' };
+  return theme[map[tagColor]] || theme.dim;
 }
 
 function CompactCard({ project, isSelected, theme }) {
@@ -35,70 +28,69 @@ function CompactCard({ project, isSelected, theme }) {
 
 function ExpandedCard({ project, theme }) {
   const detail = project.detail;
-  const width = 42;
+
+  // Compute width dynamically from content
+  const allLines = [];
+  if (detail.url) allLines.push(detail.url);
+  if (detail.tagline) allLines.push(detail.tagline);
+  if (detail.quote) allLines.push(detail.quote.replace(/\\n/g, ' '));
+  for (const [label, value] of (detail.fields || [])) {
+    allLines.push(label.padEnd(12) + value);
+  }
+  if (detail.body) {
+    for (const line of detail.body.split('\n')) allLines.push(line);
+  }
+  allLines.push('press esc to go back');
+
+  const maxContent = Math.max(...allLines.map(l => l.length));
+  const cols = process.stdout.columns || 80;
+  const width = Math.min(Math.max(maxContent + 6, project.name.length + 10), cols - 4);
+
   const nameBar = '\u2500\u2500\u2500 ' + project.name + ' ';
-  const topFill = '\u2500'.repeat(Math.max(width - nameBar.length - 2, 0));
+  const topFill = '\u2500'.repeat(Math.max(width - nameBar.length - 1, 0));
   const top = '\u256D' + nameBar + topFill + '\u256E';
-  const bottom = '\u2570' + '\u2500'.repeat(width - 2) + '\u256F';
-  const pad = (str) => '\u2502  ' + str + ' '.repeat(Math.max(width - str.length - 5, 0)) + '\u2502';
-  const empty = '\u2502' + ' '.repeat(width - 2) + '\u2502';
+  const bottom = '\u2570' + '\u2500'.repeat(width - 1) + '\u256F';
+  const empty = '\u2502' + ' '.repeat(width - 1) + '\u2502';
 
-  const lines = [];
-  lines.push(top);
-  lines.push(empty);
+  const row = (children) => {
+    return children;
+  };
 
-  if (detail.url || detail.tagline) {
-    lines.push(pad(detail.url || detail.tagline));
-  }
-  if (detail.tagline && detail.url) {
-    lines.push(pad(detail.tagline));
-  }
-  if (detail.quote) {
-    lines.push(pad(detail.quote.replace(/\\n/g, '\n')));
-  }
-  lines.push(empty);
+  const textRow = (text, color = theme.text) => {
+    const pad = Math.max(width - text.length - 4, 0);
+    return e(Text, { color: theme.border },
+      '\u2502  ', e(Text, { color }, text), ' '.repeat(pad), ' \u2502'
+    );
+  };
+
+  const fieldRow = (label, value, i) => {
+    const content = label.padEnd(12) + value;
+    const pad = Math.max(width - content.length - 4, 0);
+    return e(Text, { key: `f-${i}`, color: theme.border },
+      '\u2502  ',
+      e(Text, { color: theme.primary, bold: true }, label.padEnd(12)),
+      e(Text, { color: theme.text }, value),
+      ' '.repeat(pad), ' \u2502'
+    );
+  };
 
   return e(Box, { flexDirection: 'column', paddingLeft: 1 },
     e(Text, { color: theme.border }, top),
     e(Text, { color: theme.border }, empty),
-    detail.url ? e(Text, { color: theme.border },
-      '\u2502  ', e(Text, { color: theme.text }, detail.url),
-      ' '.repeat(Math.max(width - (detail.url || '').length - 5, 0)), '\u2502'
-    ) : null,
-    detail.tagline ? e(Text, { color: theme.border },
-      '\u2502  ', e(Text, { color: theme.text }, detail.tagline),
-      ' '.repeat(Math.max(width - (detail.tagline || '').length - 5, 0)), '\u2502'
-    ) : null,
-    detail.quote ? e(Text, { color: theme.border },
-      '\u2502  ', e(Text, { color: theme.dim }, detail.quote.replace(/\\n/g, ' ')),
-      ' '.repeat(Math.max(width - detail.quote.replace(/\\n/g, ' ').length - 5, 0)), '\u2502'
-    ) : null,
+    detail.url ? textRow(detail.url, theme.text) : null,
+    detail.tagline ? textRow(detail.tagline, theme.text) : null,
+    detail.quote ? textRow(detail.quote.replace(/\\n/g, ' '), theme.dim) : null,
     e(Text, { color: theme.border }, empty),
-    ...(detail.fields || []).map(([label, value], i) =>
-      e(Text, { key: `f-${i}`, color: theme.border },
-        '\u2502  ',
-        e(Text, { color: theme.primary, bold: true }, label.padEnd(10)),
-        e(Text, { color: theme.text }, value),
-        ' '.repeat(Math.max(width - 10 - value.length - 5, 0)),
-        '\u2502'
-      )
-    ),
+    ...(detail.fields || []).map(([label, value], i) => fieldRow(label, value, i)),
     e(Text, { color: theme.border }, empty),
-    ...(detail.body ? detail.body.split('\n').map((line, i) =>
-      e(Text, { key: `b-${i}`, color: theme.border },
-        '\u2502  ',
-        e(Text, { color: theme.text }, line),
-        ' '.repeat(Math.max(width - line.length - 5, 0)),
-        '\u2502'
-      )
-    ) : []),
+    ...(detail.body ? detail.body.split('\n').map((line, i) => {
+      const pad = Math.max(width - line.length - 4, 0);
+      return e(Text, { key: `b-${i}`, color: theme.border },
+        '\u2502  ', e(Text, { color: theme.text }, line), ' '.repeat(pad), ' \u2502'
+      );
+    }) : []),
     e(Text, { color: theme.border }, empty),
-    e(Text, { color: theme.border },
-      '\u2502  ',
-      e(Text, { color: theme.dim }, 'press esc to go back'),
-      ' '.repeat(Math.max(width - 'press esc to go back'.length - 5, 0)),
-      '\u2502'
-    ),
+    textRow('press esc to go back', theme.dim),
     e(Text, { color: theme.border }, bottom),
   );
 }

package/src/theme.js

@@ -2,6 +2,18 @@ import React from 'react';
 import chalk from 'chalk';
 
 export const THEMES = {
+  clean: {
+    name: 'clean',
+    primary: '#A0C4FF',
+    secondary: '#A0C4FF',
+    accent: '#C2D9FF',
+    text: '#D6E4F0',
+    dim: '#4A5568',
+    border: '#2D3748',
+    bar_filled: '#A0C4FF',
+    bar_empty: '#1A202C',
+    bg: '#0D1117',
+  },
   cyberpunk: {
     name: 'cyberpunk',
     primary: '#00D4AA',
@@ -52,7 +64,7 @@ export const THEMES = {
   },
 };
 
-const THEME_ORDER = ['cyberpunk', 'mono', 'retro', 'sunset'];
+const THEME_ORDER = ['clean', 'cyberpunk', 'mono', 'retro', 'sunset'];
 
 export const ThemeContext = React.createContext(null);