asterix.dev — Developer OS Portfolio

A fully immersive, desktop OS–themed developer portfolio built with Next.js 16 (App Router). Rather than a conventional scrolling site, it renders an interactive desktop environment complete with draggable windows, a taskbar, native-feeling apps, and a BIOS boot sequence.

---

Features

🖥️ OS Shell

• Boot Sequence — Fake BIOS/kernel log stream on first visit, with a progress bar and CRT scanline overlay. Skipped on repeat visits (sessionStorage).
• MenuBar — Fixed top bar with live clock (weekday + time), WiFi bars, real Battery API indicator, ThemeToggle, and a Power button for reboot.
• Taskbar / Dock — Bottom dock with quick-launch icons and running app indicators. Click a running app to restore/focus it.
• Desktop Drag-Select — Click-drag on empty desktop to draw a translucent selection box.
• Shutdown Animation — Classic CRT power-off effect (vertical collapse → scan line → black) before reboot.
• Context Menu — Right-click desktop for quick app launchers (Terminal, My Computer, Notepad, Settings, Properties).

🪟 Window System

• Draggable & resizable windows via Framer Motion.
• Z-index focus snapping on click.
• Minimize, Maximize, and Close controls.
• Windows restore from taskbar on click.

📦 Built-in Apps

App	Description
Terminal	Full command-line interface. Commands: help, ls, whoami, open <repo>, sysinfo, theme, clear. Auto-runs whoami after boot.
My Computer	Live GitHub file explorer — browse repos, drill into folders, view files.
Document Viewer	Renders Markdown, code files, images, and text fetched from GitHub.
Project Viewer	Shows README, commit timeline, and language bar for a repo.
Browser Previewer	iframe-based live demo viewer for project homepages.
Notepad	Multi-note editor with localStorage persistence. Ctrl/⌘+S to save.
Image Viewer	Zoom (scroll), pan (drag), rotate, gallery mode, download.
Settings	Personalization / theme switcher.
Properties	System info panel.

🎨 Design

• Carbon-dark theme with cyan-glowing and emerald-burnt accent palette.
• Glassmorphism window chrome.
• Framer Motion animations throughout.
• CRT scanlines, vignette, custom cursor.
• Google Fonts: Geist Sans + Geist Mono.

⌨️ Command Palette

Press Ctrl+K / ⌘K to open the global command palette. Search repos, open apps, switch themes.

---

Tech Stack

• Framework: Next.js 16 (App Router, RSC)
• Styling: Tailwind CSS v4
• Animation: Framer Motion
• State: Zustand (with localStorage persistence)
• Icons: Lucide React
• API: Next.js Route Handlers proxying GitHub REST API

---

Getting Started

npm install
npm run dev

Open http://localhost:3000.

Environment Variables

GITHUB_TOKEN=your_github_pat   # Required for GitHub API requests

Create a .env.local file in the project root with the above variable.

---

Project Structure

src/
├── app/
│   ├── page.tsx                  # Root page (server component, fetches repos)
│   └── api/github/               # GitHub API proxy routes
├── components/
│   ├── apps/                     # OS applications
│   │   ├── TerminalApp.tsx
│   │   ├── FileExplorer.tsx
│   │   ├── DocumentViewer.tsx
│   │   ├── ProjectViewer.tsx
│   │   ├── BrowserPreviewer.tsx
│   │   ├── NotepadApp.tsx
│   │   ├── ImageViewer.tsx
│   │   ├── SettingsApp.tsx
│   │   └── PropertiesApp.tsx
│   └── ui/                       # OS shell components
│       ├── DesktopManager.tsx
│       ├── Window.tsx
│       ├── MenuBar.tsx
│       ├── Taskbar.tsx
│       ├── CommandPalette.tsx
│       ├── BootSequence.tsx
│       ├── BootWrapper.tsx
│       ├── ShutdownOverlay.tsx
│       └── DesktopDragSelect.tsx
├── store/
│   └── useOSStore.ts             # Zustand OS state (windows, repos, settings)
└── lib/
    ├── github.ts                 # GitHub API helpers
    └── sysinfo.ts                # System info helpers

---

Deployment

Deploy on Vercel — add GITHUB_TOKEN as an environment variable in the project settings.