Mustafa@terminal ~ Portfolio

The user is asking in Arabic to create a personal website with a professional terminal style using HTML, CSS, and JS, with the name "Mustafa" (مصطفى). They want: - A personal website - Terminal/console style aesthetic - Professional look - HTML, CSS, JS - Name: مصطفى (Mustafa) The system prompt says the response will be rendered in an iframe in a web browser, so I should provide a complete HTML file with all CSS and JS inline. Let me create an impressive terminal-style personal website with: 1. A boot/startup animation 2. Typing effects 3. Interactive terminal commands (help, about, skills, projects, contact, etc.) 4. Matrix-style background or subtle effects 5. Terminal window with header (minimize, maximize, close buttons) 6. Blinking cursor 7. Command history (arrow keys) 8. Professional ASCII art header 9. Color scheme like a real terminal (green on black, or a modern theme) Since the user wrote in Arabic, I should probably make the site bilingual or at least respond in Arabic. Let me make the terminal interface support both - maybe the commands output in English (typical for terminals) but I could add some Arabic flair. Actually, let me think - terminals typically use English, but since the user is Arabic-speaking, I could make a bilingual experience. Let me make commands like "help" show in both languages, or make it primarily English (terminal convention) with Arabic touches. Actually, let me make it primarily in English for the terminal authenticity but add an Arabic option or make it bilingual. Or I could make the whole thing RTL-aware. Hmm. Best approach: Make a stunning terminal portfolio with: - Boot sequence animation - ASCII art "MUSTAFA" - Interactive commands: help, about, skills, projects, experience, contact, social, clear, theme, lang (to switch language) - Typing animation for outputs - Command history with up/down arrows - Tab completion maybe - Matrix rain background (subtle) - Scanline/CRT effects - Multiple themes (green, amber, white) - Bilingual support (ar/en toggle) Let me write the code: ```html Mustafa@terminal ~ Portfolio

mustafa@portfolio: ~

mustafa@dev:~$

``` Let me build this out fully with: 1. **Boot sequence**: Lines appearing like a system boot 2. **ASCII art**: "MUSTAFA" in ASCII 3. **Commands**: - help - list commands - about - about me - skills - skills with progress bars - projects - project list - contact - contact info - social - social links - clear - clear terminal - theme - change theme (green/amber/blue/white) - lang - switch language (en/ar) - whoami - fun output - date - current date - echo - echo text - sudo - easter egg - matrix - toggle matrix rain - exit - fun output - banner - show banner again 4. **Features**: - Typing effect for outputs - Command history (up/down) - Tab completion - Blinking cursor - Matrix rain background - CRT/scanline effects - Theme switching - Bilingual (Arabic/English) Let me write the ASCII art for MUSTAFA: ``` ███╗ ███╗██╗ ██╗███████╗████████╗ █████╗ ███████╗ █████╗ ████╗ ████║██║ ██║██╔════╝╚══██╔══╝██╔══██╗██╔════╝██╔══██╗ ██╔████╔██║██║ ██║███████╗ ██║ ███████║█████╗ ███████║ ██║╚██╔╝██║██║ ██║╚════██║ ██║ ██╔══██║██╔══╝ ██╔══██║ ██║ ╚═╝ ██║╚██████╔╝███████║ ██║ ██║ ██║██║ ██║ ██║ ╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ``` That works. For the typing effect, I'll create a typewriter function that types out lines. For command handling: ```js const commands = { help: { desc: 'Show available commands', exec: showHelp }, about: { desc: 'About me', exec: showAbout }, ... }; ``` For bilingual support, I'll have a translations object: ```js let lang = 'en'; const i18n = { en: { ... }, ar: { ... } }; ``` Actually for simplicity and quality, let me structure it well. For skills with progress bars: ``` JavaScript [██████████░░░░] 70% Python [████████████░░] 85% ``` The input handling: I'll use a hidden input or a visible input styled to look like terminal text. Better approach: use a real input element that's transparent with a custom cursor, or track the text and render it with a block cursor. Let me use the approach: an input field with transparent background, and measure text to position a cursor. Or simpler: just style the input itself with the terminal font and let the native cursor show, styled with `caret-color`. That's simplest and works well on mobile too. Actually the classic approach: div with content text + cursor span. Let me do: ```html

mustafa@dev:~$ █

``` Clicking anywhere focuses the hidden input. On input event, update #input-text. On Enter, process command. This gives full control over the cursor blink. Good for desktop; for mobile it works too if we focus the input on tap. Let me also add: - Arrow up/down for history - Tab for autocomplete - Ctrl+L or Ctrl+C handling (prevent default and clear/cancel) Themes: - green (default): #00ff41 - amber: #ffb000 - cyan: #00d9ff - white: #e0e0e0 - purple: #bd93f9 CSS variables for theming: ```css :root { --fg: #00ff41; --bg: #0a0e0a; ... } [data-theme="amber"] { --fg: #ffb000; ... } ``` Matrix rain: canvas with falling characters. Toggle command. CRT effects: scanlines via repeating-linear-gradient, plus a subtle flicker animation, plus vignette. Sound? Maybe skip audio to keep it clean, or add subtle typing beeps with WebAudio... Could be nice but might annoy. I'll skip or make it optional. Actually, let me skip audio for reliability. Boot sequence: array of lines typed quickly, then banner, then welcome message. Let me also add a nice touch: "neofetch" command that shows system info style output with ASCII logo. That's a cool terminal portfolio staple! neofetch output: ``` ▄▄▄ mustafa@dev ▄█████▄ ----------- ███████ OS: Human OS v24 ███████ Uptime: ... ``` Let me draft the full code now. Key structure: ```html Mustafa | Terminal Portfolio

mustafa@dev: ~/portfolio — bash

┌──(mustafa㉿dev)-[~] └──$ ...

` to preserve spacing! Important: spaces in ASCII art need pre or white-space:pre. I'll make all line divs `white-space:pre-wrap` — that preserves multiple spaces and wraps. With pre-wrap, long lines wrap instead of overflow — good for mobile, but banner should not wrap (would break art) — give banner `pre` with smaller font and `white-space:pre; overflow-x:auto`. 

So: `.line{white-space:pre-wrap; word-break:break-word}` and banner lines get class 'banner' with `white-space:pre`.

Since padEnd-based alignment (help, skills, neofetch) relies on monospace + preserved spaces, pre-wrap handles it.

Typing performance: char-by-char with sleep 6-12ms per char is OK; for banner 6 lines × ~80 chars → type fast with 2ms or print instantly per line with small stagger (looks like a fast print). I'll print banner lines instantly with 60ms stagger.

Also add a tiny beep? skip.

Ensure `escapeHtml` for echo command and user input.

Now the final code. Let me write it fully, carefully, ensuring no syntax errors.

```html





mustafa@dev ~ Terminal Portfolio










  
    
      
      
      
    
    mustafa@dev: ~/portfolio — msh
    00:00:00
  
  
    
    
      
    
  





```

The clock width may push title; ok flex.

JS — write it all:

```js
(()=>{ // IIFE
const $=s=>document.querySelector(s);
const out=$('#out'),screenEl=$('#screen'),typed=$('#typed'),hidden=$('#hidden'),promptEl=$('#prompt'),win=$('#win');
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
const esc=s=>s.replace(/&/g,'&').replace(//g,'>');
const scroll=()=>{screenEl.scrollTop=screenEl.scrollHeight;};

promptEl.innerHTML='[mustafa@dev ~]$ ';
const PROMPT=promptEl.innerHTML;

// THEMES
const THEMES={green:{m:'#00ff41',g:'rgba(0,255,65,.45)',d:'rgba(0,255,65,.55)'},amber:{m:'#ffb000',g:'rgba(255,176,0,.45)',d:'rgba(255,176,0,.55)'},cyan:{m:'#00e5ff',g:'rgba(0,229,255,.45)',d:'rgba(0,229,255,.55)'},magenta:{m:'#ff2ea6',g:'rgba(255,46,166,.45)',d:'rgba(255,46,166,.55)'},ghost:{m:'#e6edf3',g:'rgba(230,237,243,.4)',d:'rgba(230,237,243,.55)'}};
let theme='green',lang='en',mColor='#00ff41';
function setTheme(n){const t=THEMES[n];if(!t)return false;theme=n;const r=document.documentElement.style;r.setProperty('--main',t.m);r.setProperty('--glow',t.g);r.setProperty('--dim',t.d);mColor=t.m;persist();return true;}

function persist(){try{localStorage.setItem('mustafa.term',JSON.stringify({theme,lang}));}catch(e){}}
try{const s=JSON.parse(localStorage.getItem('mustafa.term')||'{}');if(s.lang==='ar'||s.lang==='en')lang=s.lang;if(s.theme)setTheme(s.theme);}catch(e){}
```

Wait — setTheme defined before persist; order fine if persist hoisted (function decl). Yes.

Continue: typing engine, content, commands, boot, matrix, events.

Content strings object S:

```js
const S={
en:{
  boot:[...], welcome:[...],
  notFound:n=>`bash: ${n}: command not found — try 'help'`,
  whoami:'visitor — friend of Mustafa 🤝',
  ls:'about.txt   skills.json   projects/   contact.md   .secrets/',
  sudo:'mustafa is not in the sudoers file. This incident will be reported. 😏',
  exit:'There is no exit… this terminal IS the website 😄',
  themeOk:n=>`theme set to '${n}'`,
  themeBad:n=>`unknown theme '${n}' — available: ${Object.keys(THEMES).join(', ')}`,
  themeUsage:'usage: theme ',
  langOk:"language set to English. Type 'help' to continue.",
  matrixOn:'matrix rain: ON',matrixOff:'matrix rain: OFF',
  skillsHead:'── TECHNICAL SKILLS ──────────────────────',
  skillsFoot:'…and learning something new every day 🚀',
  projHead:'── SELECTED PROJECTS ─────────────────────',
  expHead:'── EXPERIENCE ────────────────────────────',
  contactHead:'── CONTACT ───────────────────────────────',
  socialHead:'── SOCIAL ────────────────────────────────',
  helpHead:'── AVAILABLE COMMANDS ────────────────────',
  helpTip:'tip: Tab = autocomplete · ↑/↓ = history · Ctrl+L = clear',
  close:'error: cannot close — too much awesomeness inside 😄',
},
ar:{...}
};
```

OK let me write full content now, both languages, and all command functions. I'll be thorough but efficient. Then final answer: short Arabic intro + feature list + code block. The instructions say to not mention iframe — fine.

Let me write out everything carefully for syntax correctness. Especially template literals with backticks inside — avoid nested backticks issues. Use single quotes in strings.

Full JS:

```js
/* ---------- helpers ---------- */
...
/* ---------- data ---------- */
const BANNER=[...];
const SKILLS=[['HTML / CSS',95],['JavaScript',90],['TypeScript',84],['React / Next.js',88],['Vue / Nuxt',80],['Node.js / Express',85],['Python / Django',78],['SQL / MongoDB',82],['Docker / Linux',75],['Git / CI-CD',90]];

const PROJECTS=[
 {n:'NovaDash',e:'Real-time analytics dashboard with live charts & alerts',a:'لوحة تحليلات لحظية مع رسوم بيانية حيّة وتنبيهات',t:'React · D3.js · WebSocket',l:'https://github.com/mustafa/novadash'},
 {n:'TaskFlow',e:'Kanban task manager with realtime drag & drop sync',a:'مدير مهام بنظام كانبان مع مزامنة لحظية وسحب وإفلات',t:'Vue 3 · Firebase',l:'https://github.com/mustafa/taskflow'},
 {n:'CryptoLens',e:'Crypto market tracker with price alerts',a:'متتبع أسعار العملات الرقمية مع تنبيهات فورية',t:'Next.js · REST APIs',l:'https://github.com/mustafa/cryptolens'},
 {n:'TermiSite',e:'This terminal portfolio you are using right now',a:'موقع الطرفية الذي تستخدمه الآن',t:'HTML · CSS · Vanilla JS',l:'https://github.com/mustafa/termisite'},
];

const EXP=[
 ['2023 — الآن / Now', ...]
```

For EXP lang-dependent strings:

```js
const EXP={
 en:[['2023 → Now','Senior Full-Stack Developer','TechNova — leading the web platform team'],
     ['2021 → 2023','Front-End Developer','PixelStudio — built 20+ client interfaces'],
     ['2020 → 2021','Freelance Developer','remote — dashboards, landing pages, APIs']],
 ar:[['2023 → الآن','مطوّر أول Full-Stack','TechNova — قيادة فريق منصة الويب'],
     ['2021 → 2023','مطوّر واجهات أمامية','PixelStudio — بناء أكثر من 20 واجهة'],
     ['2020 → 2021','مطوّر مستقل','عن بُعد — لوحات تحكم ومواقع وواجهات API']],
};
```

Commands implementation detail — print() and tline() as designed.

Spacer between commands: after each run, append `` (.gap{height:.55em}).

Also before banner in boot, no gaps.

Input focus: 
```js
const focus=()=>{hidden.focus({preventScroll:true});};
addEventListener('load',focus);
win.addEventListener('pointerdown',()=>setTimeout(focus,0));
```
Use pointerdown with timeout to not block link clicks? Clicking a link opens new tab anyway; focusing hidden after is fine. But on mobile tapping a link — fine.

Hmm: focusing on pointerdown may prevent text selection. Terminal purists like selection. I'll focus on click of screen only if not selecting: 

```js
screenEl.addEventListener('click',e=>{ if(getSelection().toString()) return; focus(); });
```

Good.

Keyboard events as designed.

Autocomplete listing when multiple matches: echo current input line then print matches then restore typed. Implementation:

```js
function autocomplete(){
  const v=hidden.value;
  const base=v.trim().toLowerCase();
  if(!base)return;
  const ms=Object.keys(COMMANDS).filter(c=>c.startsWith(base));
  if(ms.length===1){hidden.value=ms[0]+' ';typed.textContent=hidden.value;}
  else if(ms.length>1){
    echoCmd(v);
    print([[ms.join('   '),'dim']],0).then(()=>{});
    gap();
  }
}
```

After echo, the live input line remains below with v still typed — visually fine.

Ctrl+C: echo current typed + '^C':

```js
echoCmd(typed.textContent+' ^C'); hidden.value='';typed.textContent='';
```

Ctrl+L / clear command: out.innerHTML=''.

Matrix toggle command prints state.

Neofetch:

```js
async function cmdNeofetch(){
  const up=Math.floor((Date.now()-T0)/1000);
  const upStr= up<60? up+'s' : Math.floor(up/60)+'m '+(up%60)+'s';
  const logo=['███╗   ███╗','████╗ ████║','██╔████╔██║','██║╚██╔╝██║','██║ ╚═╝ ██║','╚═╝     ╚═╝'];
  const info=[
    ['mustafa@dev','acc'],
    ['───────────────','dim'],
    [(lang==='ar'?'النظام':'OS')+': MustafaOS 2.4 LTS',''],
    [(lang==='ar'?'المضيف':'Host')+': Web Browser',''],
    ['Kernel: ES2024',''],
    [(lang==='ar'?'المدة':'Uptime')+': '+upStr,''],
    ['Shell: msh 5.2',''],
    [(lang==='ar'?'السمة':'Theme')+': '+theme,''],
  ];
  for(let i=0;i<8;i++){
    const seg=[{t:(logo[i]||'').padEnd(15)+'  ',c:'c'}];
    if(info[i]) seg.push({t:info[i][0],c:info[i][1]});
    await tline(seg,{speed:1});
  }
}
```

logo has 6 lines, info 8 — pad logo[i]||'' for i>=6. Good.

Contact with mailto link:

```js
async function cmdContact(){
  await print([[S[lang].contactHead,'acc']],2);
  await tline([{t:'  Email     ▸ ',c:'dim'},{t:'mustafa.dev@gmail.com',c:'c',href:'mailto:mustafa.dev@gmail.com'}],{speed:6});
  await tline([{t:'  Location  ▸ ',c:'dim'},{t:lang==='ar'?'عن بُعد — متاح عالمياً 🌍':'Remote — available worldwide 🌍',c:''}],{speed:6});
  await tline([{t:'  Response  ▸ ',c:'dim'},{t:lang==='ar'?'عادةً خلال 24 ساعة':'usually within 24 hours',c:''}],{speed:6});
}
```

Social similar with three links.

Projects render:

```js
async function cmdProjects(){
  await print([[S[lang].projHead,'acc']],2);
  for(const p of PROJECTS){
    await tline([{t:'  ▸ ',c:'y'},{t:p.n,c:'acc'},{t:'',c:''}],{speed:6});
    await tline([{t:'    '+(lang==='ar'?p.a:p.e),c:''}],{speed:3});
    await tline([{t:'    '+(lang==='ar'?'التقنيات: ':'tech: '),c:'dim'},{t:p.t,c:'p'}],{speed:3});
    await tline([{t:'    → ',c:'dim'},{t:p.l.replace('https://',''),c:'c',href:p.l}],{speed:3});
    await tline([{t:''}],{speed:0});
  }
}
```

Experience:

```js
async function cmdExp(){
  await print([[S[lang].expHead,'acc']],2);
  for(const [when,role,place] of EXP[lang]){
    await tline([{t:'  '+when.padEnd(16),c:'y'},{t:role,c:'acc'}],{speed:3});
    await tline([{t:'  '+''.padEnd(16)+place,c:'dim'}],{speed:3});
  }
}
```

padEnd on Arabic 'when' — mixing; for ar use plain concatenation '  '+when+'  ' without pad. I'll do: ar lines: `  ${when}   ${role}` no pad. Simplify: if lang==='ar' skip padding.

About:

```js
const ABOUT={
 en:['Hi, I\'m Mustafa 👋','', 'A full-stack developer turning caffeine & ideas','into fast, elegant and reliable web products.','', '▸ 5+ years of building for the web','▸ Front-end : React · Vue · TypeScript','▸ Back-end  : Node.js · Python · SQL','▸ Motto     : simple code, great UX'],
 ar:['مرحباً، أنا مصطفى 👋','','مطوّر ويب متكامل يحوّل القهوة والأفكار','إلى منتجات رقمية سريعة وأنيقة وموثوقة.','','▸ أكثر من 5 سنوات في تطوير الويب','▸ الواجهات : React · Vue · TypeScript','▸ الخوادم  : Node.js · Python · SQL','▸ شعاري   : كود بسيط، تجربة رائعة']
};
```

Render: first line acc, others plain, speed 6.

Coffee:

```js
const COFFEE=['      (  (','       )  )','    ┌───────┐','    │       │]','    │       │','    └───────┘'];
```

Print in c, then message: en '☕ brewing… done. enjoy!' ar '☕ القهوة جاهزة… بالهناء!'.

Now the run/spacer/gap and boot.

Boot with saved lang: welcome + boot localized. Let me define S.en.boot etc.

Final: after boot, focus hidden.

Edge: print() with speed 0 — instant set. In tline, if speed<=0 → node.textContent=t.

For tline with empty segs [{t:''}] creates empty line height via min-height.

Guard output length:

```js
function trimOut(){while(out.children.length>700)out.removeChild(out.firstChild);}
```
call in tline.

Now write DESC/help and the COMMANDS map. Also aliases: 'cls'→clear, 'exp'→experience, 'links'→social? add a couple.

Also handle args for theme/lang.

cmdTheme:

```js
async function cmdTheme(args){
  if(!args[0]){
    await print([[lang==='ar'?'السمات المتاحة:':'available themes:','acc']],2);
    for(const k of Object.keys(THEMES)){
      await tline([{t:'  ▸ '+k+(k===theme?(lang==='ar'?'  (الحالية)':'  (current)'):''),c:k===theme?'y':''}],{speed:1});
    }
    await print([[lang==='ar'?'الاستخدام: theme ':'usage: theme ','dim']],1);
    return;
  }
  if(setTheme(args[0].toLowerCase())) await print([[(lang==='ar'?'تم تغيير السمة إلى ':'theme set to ')+'\''+args[0]+'\'','ok']],3);
  else await print([[lang==='ar'?'سمة غير معروفة — المتاح: '+Object.keys(THEMES).join(', '):'unknown theme — available: '+Object.keys(THEMES).join(', '),'err']],3);
}
```

cmdLang:

```js
async function cmdLang(args){
  const a=(args[0]||'').toLowerCase();
  if(a!=='en'&&a!=='ar'){
    await print([[lang==='ar'?'الاستخدام: lang ':'usage: lang ','dim']],2);return;
  }
  lang=a; document.documentElement.lang=a; persist();
  await print([[a==='ar'?'تم التبديل إلى العربية. اكتب \'help\' للمتابعة.':'Switched to English. Type \'help\' to continue.','ok']],4);
}
```

Matrix cmd:

```js
async function cmdMatrix(){mOn=!mOn; if(!mOn){ctx.clearRect(0,0,canvas.width,canvas.height);canvas.style.opacity='0';}else{canvas.style.opacity='';} await print([[mOn?S[lang].matrixOn:S[lang].matrixOff,'dim']],3);}
```

Hmm canvas opacity via CSS var — just set style.

Red button:

```js
$('#btnR').addEventListener('click',()=>{print([[S[lang].close,'err']],4);});
$('#btnG').addEventListener('click',()=>win.classList.toggle('maximized'));
$('#btnY').addEventListener('click',()=>win.classList.toggle('minimized'));
```

Minimized hides screen — click yellow again restores. Since titlebar remains, OK. But when minimized, input hidden... fine.

Wait: minimized class sets .screen{display:none} and height auto. Good.

Clock with seconds, en-GB format always (HH:MM:SS).

Now write the complete code. Also the intro response text in Arabic, brief. Include feature list: الأوامر المتاحة، الثيمات، اللغتين، الخ.

Let me also double check CSS for `.line.banner`: white-space:pre; and parent .screen has padding; banner font-size clamp(4px, 1.4vw, 14px); line-height:1.2.

Careful: `.line` uses pre-wrap and word-break — for banner override.

One more consideration: text-shadow on every char (screen-wide) is heavy but okay.

Also add subtle glow pulse on window? skip.

Font sizes: screen font-size:14px; @media(max-width:640px){12.5px; padding 12px}.

Let me write the final file. I'll aim for clean, complete, working code. Also make sure there are no stray unescaped `` sequences inside strings — none.

Also: `hidden` input — name conflicts? `hidden` is a global-ish attribute name but as a JS const it's fine (window.hidden? There's no window.hidden standard... actually `window.hidden` isn't standard; fine). I'll rename to `cmdInput` to be safe.

Also `screen` is window.screen — I used screenEl. Good. `out` fine.

Ensure IIFE to avoid globals.

Let me now write final content strings for boot:

en boot:
```
['[  OK  ] MustafaOS v2.4.1 — kernel loaded','dim']
['[  OK  ] Mounting /dev/creativity','dim']
['[  OK  ] Starting coffee-daemon.service ☕','dim']
['[  OK  ] Loading modules: html.ko css.ko js.ko','dim']
['[  OK  ] Starting portfolio.service','dim']
```

ar boot:
```
['[  OK  ] MustafaOS v2.4.1 — تم تحميل النواة','dim']
['[  OK  ] تركيب /dev/creativity','dim']
['[  OK  ] تشغيل خدمة القهوة ☕','dim']
['[  OK  ] تحميل الوحدات: html.ko css.ko js.ko','dim']
['[  OK  ] تشغيل خدمة الموقع الشخصي','dim']
```

Now, write `print` to handle tuples [text, cls] and objects {segs}.

```js
async function print(items,speed=5){
  for(const it of items){
    if(typeof it==='string'){await tline([{t:it}],{speed});}
    else if(Array.isArray(it)){await tline([{t:it[0]??'',c:it[1]||''}],{speed});}
    else{await tline(it.segs,{speed:it.speed??speed,cls:it.cls||''});}
  }
}
```

tline:

```js
async function tline(segs,{speed=6,cls=''}={}){
  const el=document.createElement('div');
  el.className=('line '+cls).trim();
  out.appendChild(el);trimOut();
  for(const s of segs){
    let node;
    if(s.href){node=document.createElement('a');node.href=s.href;node.target='_blank';node.rel='noopener noreferrer';}
    else{node=document.createElement('span');}
    if(s.c)node.className=s.c;
    el.appendChild(node);
    const txt=s.t||'';
    if(speed<=0||!txt){node.textContent=txt;}
    else{for(const ch of txt){node.textContent+=ch;scroll();await sleep(speed);}}
  }
  scroll();
  return el;
}
```

echoCmd uses PROMPT + esc.

gap(): `const g=document.createElement('div');g.className='gap';out.appendChild(g);`

run():

```js
async function run(raw){
  echoCmd(raw);
  const tr=raw.trim();
  if(tr){
    const parts=tr.split(/\s+/);
    const name=parts[0].toLowerCase();
    const args=parts.slice(1);
    const cmd=COMMANDS[name];
    if(cmd){try{await cmd.fn(args);}catch(e){await print([['error: '+e.message,'err']],2);}}
    else{await print([[S[lang].notFound(parts[0]),'err']],3);}
  }
  gap();scroll();
}
```

submit queue pump.

History nav etc.

Boot:

```js
const T0=Date.now();
async function boot(){
  await sleep(500);
  for(const l of S[lang].boot){await tline([{t:l[0],c:l[1]}],{speed:2});await sleep(60);}
  await sleep(200);
  for(const b of BANNER){const d=document.createElement('div');d.className='line banner';d.textContent=b;out.appendChild(d);scroll();await sleep(45);}
  await tline([{t:''}],{speed:0});
  await print(S[lang].welcome,7);
  gap();
  hidden...
}
```

call boot(); then focus.

I think we're ready to write the final answer. Let me also compute: does `print(S[lang].welcome,7)` handle the segs objects — yes via third branch.

Let me write welcome arrays:

```js
welcome:[
  {segs:[{t:'Welcome to ',c:''},{t:'Mustafa',c:'acc'},{t:"'s interactive terminal portfolio.",c:''}]},
  {segs:[{t:'Type ',c:'dim'},{t:"'help'",c:'y'},{t:' to see what I can do.',c:'dim'}]},
  {segs:[{t:'للعربية اكتب ',c:'dim'},{t:"'lang ar'",c:'y'},{t:' — للإنجليزية ',c:'dim'},{t:"'lang en'",c:'y'}]},
],
```

ar welcome:

```js
welcome:[
  {segs:[{t:'مرحباً بك في طرفية ',c:''},{t:'مصطفى',c:'acc'},{t:' التفاعلية.',c:''}]},
  {segs:[{t:'اكتب ',c:'dim'},{t:"'help'",c:'y'},{t:' لعرض جميع الأوامر.',c:'dim'}]},
],
```

Alright — writing final answer now. Structure:

1. Brief Arabic greeting + what I built + features + how to use (commands list briefly).
2. Single complete HTML code block.

Keep intro concise but informative. Mention: commands (help/about/skills/projects/contact/social/neofetch/theme/lang/matrix), theme switching, Arabic support, history/Tab autocomplete, matrix rain, CRT effects, mobile responsive, localStorage saving.

Let me finalize the code fully now — writing it in one go, being careful.

One more check — the `.banner` font-size clamp: `clamp(4px, 1.35vw, 13px)`. At 1000px window (viewport maybe 1200): 1.35vw=16→cap 13px. Width ≈ 61 chars×0.6×13 = 476px fine.

Mobile 380px: 1.35vw≈5.1px → width ≈ 190px fine.

Also add `-webkit-tap-highlight-color: transparent`.

Add `input#cmdInput{position:fixed;top:0;left:0;width:4px;height:4px;opacity:.02;border:0;outline:0;background:transparent;color:transparent;caret-color:transparent;z-index:-1}` — z-index -1 might prevent focus on some browsers? Programmatic focus still works. Actually put z-index auto but it's tiny & transparent. Keep opacity .02 no z-index.

Also on Enter while typing busy — queue works.

Potential bug: `hidden.value` named `cmdInput`. Also `typed` span id 'typed'.

Double-check the clock element updates and doesn't overflow titlebar on small screens: `.clock{white-space:nowrap}` and title `.tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`.

OK writing final now. Also include noscript? Not needed.

Also add ``.

Final code assembly... (writing carefully, ~600 lines). Also verify no unclosed braces. Let me mentally compile the script section order:

1. IIFE open
2. $ helper, elements
3. sleep, esc, scroll, trimOut
4. prompt HTML
5. THEMES, setTheme, persist, restore saved
6. BANNER, SKILLS, PROJECTS, EXP, ABOUT, COFFEE
7. S (i18n strings incl. boot, welcome, misc) — note S references Object.keys(THEMES) only in functions, fine.
8. DESC for help
9. tline, print, gap, echoCmd
10. command functions: cmdHelp, cmdAbout, cmdSkills, cmdProjects, cmdExp, cmdContact, cmdSocial, cmdNeofetch, cmdTheme, cmdLang, cmdMatrix, cmdBanner, cmdCoffee
11. COMMANDS map (incl aliases & simple ones)
12. queue/pump/run/submit
13. history, autocomplete
14. input event listeners
15. matrix rain
16. clock
17. window buttons, focus handlers, resize
18. boot() + call
19. IIFE close

Careful: COMMANDS referenced in autocomplete defined before listeners — order ok.

S[lang].notFound is function — in run: S[lang].notFound(parts[0]) — but lang may change; always use current S[lang]. Fine.

Also `S[lang].close` used in red button.

cmdSkills uses tline then mutates el.textContent with bar animation — el has class 'line'; also add mono alignment — fine.

Bar: `const filled=Math.round(p/100*20); '█'.repeat(filled)+'░'.repeat(20-filled)`.

Name padEnd(18) — 'Node.js / Express' is 17 chars; use padEnd(19). Percent padStart(3).

Format: `  HTML / CSS         [██████████████████░░]  95%`

Also color the bar? textContent single node — could set class 'y'? Whole line theme color; make bar line class '' (main color) — ok, add class per skill line 'ok'? main already. Add pct in accent? Can't split in textContent — keep simple; or build with spans: name span dim, bar span main, pct span acc. During animation update three spans. Let me do three child spans for nicer colors:

```js
const el=await tline([{t:'',c:''}],{speed:0});
const s1=document.createElement('span');s1.className='dim';
const s2=document.createElement('span');
const s3=document.createElement('span');s3.className='acc';
el.append(s1,s2,s3);
for(let i=0;i<=steps;i++){
  const p=Math.round(pct*i/steps), f=Math.round(p/100*20);
  s1.textContent='  '+name.padEnd(19);
  s2.textContent='['+'█'.repeat(f)+'░'.repeat(20-f)+']';
  s3.textContent=' '+String(p).padStart(3)+'%';
  scroll(); await sleep(16);
}
```

Nice.

cmdBanner: reprint banner + nothing else.

Everything set. Write it!

Length note: It's long but necessary. Also the user asked in Arabic so wrap response in Arabic. Code comments — I'll write in English mostly (code convention), fine.

Also make sure to include `dir="ltr"` default and meta viewport.

Potential subtle bug: In `tline`, when href node typed char-by-char, the href present from start — clicking mid-type unlikely. fine.

`print` default speed 5ms — long paragraphs type in ~1s. About has ~15 lines × 40 chars × 5ms = ~3s total. Acceptable; set about speed 3.

Boot total ~1.5s. Good.

Write final response: short Arabic intro (greeting back, list features briefly, usage hints), then the code block. No mention of iframe.


مرحباً بك! 👋 قمت بإنشاء موقع شخصي احترافي بأسلوب الطرفية (Terminal) لمصطفى — بتصميم تفاعلي كامل يعمل مثل الطرفية الحقيقية.

**المميزات:**
- 🖥️ طرفية تفاعلية حقيقية مع أوامر: `help` `about` `skills` `projects` `experience` `contact` `social` `neofetch`
- 🎨 5 سمات ألوان قابلة للتبديل: `theme amber` / `cyan` / `magenta` / `ghost`
- 🌍 دعم لغتين — اكتب `lang ar` للعربية
- ⌨️ سجل الأوامر بالأسهم ↑↓ + إكمال تلقائي بزر Tab
- 🌧️ خلفية Matrix قابلة للتبديل + تأثيرات شاشة CRT وشريط تشغيل (Boot)
- 💾 حفظ اللغة والسمة تلقائياً + تجاوب كامل مع الجوال

```html






Mustafa — Terminal Portfolio












  
    
      
      
      
    
    mustafa@dev: ~/portfolio — msh
    00:00:00
  
  
    
    
      
    
  







```

**طريقة الاستخدام:** احفظ الكود في ملف `index.html` وافتحه في المتصفح مباشرة. جرّب كتابة `help` لعرض كل الأوامر، وجرّب الأزرار الحمراء والصفراء والخضراء في شريط العنوان — لها مفاجآت صغيرة 😄

هل تريد تعديل المهارات أو المشاريع أو معلومات التواصل لتطابق بياناتك الحقيقية؟

موقعي الخاص