פרויקט · 2025

avi-os-portfolio — מערכת הפעלה אישית בדפדפן

תיק עבודות בסגנון macOS שרץ בדפדפן — Dock עם glass-morphism, מנהל חלונות, אפליקציית יוטיוב TV, נגן פודקאסטים, וניווט שמרגיש כמו OS אמיתי. הכל React + TypeScript.

booya1986.github.io/avi-os-portfolio פתח בכרטיסייה חדשה ↗

טכנולוגיות

TypeScript React 18 Window manager Glassmorphism GitHub Pages

תיק עבודות שלא מרגיש כמו תיק עבודות. avi-os-portfolio הוא דסקטופ macOS-מטרה שרץ בתוך הדפדפן — Dock בתחתית, חלונות שאפשר לגרור ולשנות גודל, ואפליקציות פנימיות (יוטיוב TV, נגן פודקאסטים, אודות, פרויקטים) שכל אחת היא חלון בפני עצמו עם history stack משלה.

האתגר העיקרי היה מנהל החלונות — לא להשתמש בספרייה אלא לבנות אחד שיודע לתפעל focus, z-index stack, מינימיזציה ל-Dock עם אנימציה, ושומר state ב-localStorage כדי שכשמרעננים, החלונות חוזרים לאיפה שהיו.

ה-glass-morphism של ה-Dock הוא תוצר של backdrop-filter עם שכבת blur כפולה ו-noise overlay דקיק כדי שזה יראה כמו זכוכית אמיתית, לא כמו cliché של AI. בנוי כולו React 18 + TypeScript, מותקן ב-GitHub Pages — בלי backend, בלי build step מורכב.

תוצאות

  • חוויית UI שמרגישה כמו macOS אמיתי בתוך דפדפן
  • מנהל חלונות מותאם אישית עם drag, resize, minimize, focus stack
  • דמו חי ב-GitHub Pages בלי backend