an OS-inspired interactive portfolio showcasing my profile and my DevOps and Infrastructure projects. Works on all devices: desktop, tablet, and mobile.
live demo: pietrouni.com
this project is meant to be more than a simple static resume and be a functional "webtop". featuring a window management system, a functional terminal, and an interactive "vault" for exploring files and resources, all within an archlinux based desktop environment
this project started as a single HTML file with vanilla JavaScript, CSS, and Tailwind v3 via CDN. it has since evolved to use Vite, TypeScript, and Tailwind v4. I'm pretty happy with the results after this big upgrade
- core: HTML5, TypeScript
- build: Vite
- styling: Tailwind CSS v4, custom CSS
- 3d / wallpapers: Vanta.js, Three.js
- features:
- window management: draggable, resizable window system
- terminal emulator: custom shell with command history, filesystem simulation, tab completion, and fun commands. switchable themes: pietrOS, Cyberpunk, and Fallout
- animated wallpapers: Vanta.js effects (Halo, Birds, Waves, Clouds, Rings, Dots) plus original raw-WebGL shaders (Fable, Nebula), all with light/dark theme-aware palettes and switchable from the settings panel
- spotlight search: global search (Ctrl+K) for apps and vault items
- vault: markdown-based content files
- games arcade: Snake, 2048, Tetris, Threes, Tic-Tac-Toe, and a Doom launcher
- experiments lab: interactive DevOps demos (IaC Visualizer, Network Topology)
- dock: macOS-style fish-eye magnification with Gaussian falloff and bounce animations
- audio system: synthesized UI sound effects (boot chime, clicks, window open/close) via Web Audio API; no external files needed
- dynamic theme: system-aware dark mode with smooth transitions
├── index.html # main entry point, desktop environment and window templates
├── styles.css # custom animations, wallpapers
├── src/
│ ├── main.ts # core app logic, window definitions, terminal commands
│ ├── config.ts # static data (vault items, filesystem, commands)
│ ├── state.ts # shared app state (windows, terminal, wallpapers)
│ ├── vanta.ts # lazy-loaded Vanta + original shader wallpaper manager
│ ├── dock.ts # macOS-style fish-eye dock magnification
│ ├── audio.ts # synthesized UI sound effects (Web Audio API)
│ ├── terminal/ # terminal commands and theme modules (pietrOS, Cyberpunk, Fallout)
│ ├── games/ # built-in games (Snake, 2048, Tetris, Threes, Tic-Tac-Toe, Doom)
│ ├── apps/ # standalone app modules (IaC Visualizer, Network Topology)
│ └── windows/ # window management (drag, resize, minimize)
├── assets/
│ ├── icons/ # dock and UI icons
│ └── favicon/ # favicon stuff
└── vault/ # markdown content files for the vault app
this project uses self-hosted editorial and terminal fonts, with Google Fonts fallbacks:
- Copernicus (self-hosted WOFF2) – README and markdown display headings
- Tiempos Text (self-hosted WOFF2) – README and long-form serif text
- Fraunces / Newsreader (Google Fonts) – editorial fallbacks
- DM Sans (Google Fonts) – UI / sans body
- Outfit (Google Fonts) – alt headline weight
- JetBrains Mono (Google Fonts) – code/monospace
- Fixedsys (self-hosted) – terminal emulator font
Tailwind v4 is configured via the @theme block in styles.css (no tailwind.config.js).
dock icons are from the Neuwaita icon theme by RusticBard, a beautiful take on the Adwaita theme for GNOME
Halo, Birds, Waves, Clouds, Rings, and Dots are powered by Vanta.js by Teng Bao, using Three.js for WebGL rendering. Fable and Nebula are original, self-contained raw-WebGL shaders made for this site.
- Shubham Agrawal for the inspiration
- Tailwind CSS by Tailwind Labs