macOS Portfolio
Интерактивное портфолио в виде рабочего стола macOS: окна с перетаскиванием и изменением размера, Dock с запуском приложений, контекстное меню и терминал на xterm.js. Данные профиля и репозиториев подтягиваются через GitHub API, анимации — на Framer Motion.
Обзор
macOS Portfolio — интерактивное веб-портфолио, оформленное как рабочий стол macOS. Навигация построена вокруг окон и небольших приложений, а данные профиля и репозиториев загружаются из GitHub API.
Роль и scope
Solo Developer. Реализовал App Router-страницу, оконный интерфейс, Dock, контекстное меню, терминал и интеграцию с GitHub API на Next.js и TypeScript.
Ключевые функции
- Окна с перетаскиванием и изменением размера
- Dock для запуска приложений
- Контекстное меню рабочего стола
- Терминал на xterm.js
- Загрузка данных профиля и репозиториев через GitHub API
- Приложения Cuaderno, Real-Time Chat App и StarStream
Архитектура
Основной экран находится в src/app, интерактивные части рабочего стола — в src/app/components, UI-примитивы — в src/components/ui, а общие функции — в src/lib. Такой расклад разделяет shell рабочего стола, приложения и переиспользуемые UI-компоненты.
Технические решения
- AbortController используется для отмены fetch-запросов к GitHub API и защиты от устаревших ответов.
- xterm.js выбран для терминального интерфейса внутри портфолио.
- Framer Motion используется для анимаций окон и переходов интерфейса.