LIVE SYSTEM  ·  Case Study 05  ·  Full-Stack / Cross-Platform

DEPLOY PIYU OS

A personal OS-themed portfolio deployed simultaneously as a web app (Vercel), Windows/macOS desktop app (Tauri), and Android APK (Capacitor) — from a single Vite codebase, fully automated via GitHub Actions CI/CD.

● LIVE V.4.0.0 Built 2024–2025 Vite Tauri Capacitor
4
Platforms
CI/CD
Automated
99%
Uptime

Why a Portfolio Needs to Be a Project

Most developer portfolios are just a webpage. The challenge here was deliberately more ambitious: build something that IS a project — a cross-platform system that demonstrates real deployment skills across Web, Desktop, and Mobile, all from a single codebase. A developer who only ships web pages is a web developer. A developer who ships a .exe, a .apk, and a live URL from one Git push is an engineer.

The secondary challenge was making it visually unforgettable. Recruiters and collaborators see hundreds of React portfolios. The goal was to build something with a cinematic planet loader, an OS-desktop metaphor, and WebGL animations — while keeping Lighthouse scores above 90 and load time under 2 seconds.

One Codebase, Four Targets

The entire system lives in a single Vite monorepo. A unified build script produces platform-specific artifacts: Vercel deployment for web, Tauri wrapping for desktop binaries, and Capacitor for the Android APK. GitHub Actions orchestrates all four builds on every tagged release.

Vite Codebase
npm run build
dist/
Vercel (Web)
|
Tauri (Win .exe / Mac .dmg)
|
Capacitor (Android .apk)
GitHub Actions CI/CD
GitHub Releases
Auto-distributed to users

Tauri compiles a Rust shell around the Vite output, producing native .exe and .dmg binaries with a sub-10MB footprint — far smaller than Electron alternatives. Capacitor syncs the same web bundle into an Android Studio project, generating a signed APK via GitHub's Ubuntu runner.

Built With

⚡ Vite 8 🌐 HTML / CSS / JavaScript ✨ GSAP (Animations) 🪐 Three.js (WebGL Universe) 🎨 Tailwind CSS v4 🦀 Tauri (Rust) 📱 Capacitor (Android SDK) 🔁 GitHub Actions (CI/CD) ▲ Vercel 📊 Google Analytics (GA4) 🔍 Microsoft Clarity ✉️ Telegram Contact Relay

What Shipped

What I'd Do Differently

Lesson 01

Abstract shared config early

Tauri and Capacitor have completely different build environments — Rust toolchains vs. Android SDK. I learned to centralise environment variables and build flags in a single config file before adding a second platform.

Lesson 02

Lazy-load animations on mobile

GSAP + Three.js together tank mobile frame rates without care. The fix: detect prefers-reduced-motion, lazy-load the WebGL canvas, and disable particle effects below a GPU threshold via the WebGL renderer info API.

Lesson 03

Plan CSP before writing JS

Content Security Policy is painful to retrofit. Inline scripts, Google Fonts, GA4, and Telegram's API all need specific CSP directives. Defining the policy on day one and writing JS that conforms to it saves hours of debugging nonce errors.

Lesson 04

Treat a portfolio like production

A portfolio IS a project. Versioned releases, a changelog, CI/CD gates, Lighthouse budgets, and analytics — all the same rigour applied to a SaaS product should apply here. Recruiters who look at the repo can see the engineering culture directly.

Want to see the OS in action?

Explore the live site or download the desktop / Android build from the GitHub releases page.