Piotrunius Portfolio

A beautiful, modern portfolio website showcasing real-time presence across multiple platforms. Features live status panels from Spotify, Steam, GitHub, Discord, and Roblox, combined with a glassmorphism design and interactive audio player.

Authorship Note: This project was created by a human with approximately 15-20% AI assistance for ideation, wording, and refinements.

---

✨ Key Features

• 🎨 Modern UI - Modern frosted-glass aesthetic with smooth animations
• 👻 Synchronized Ghost Loaders - Elegant skeleton loading screens that reveal all statuses simultaneously
• 🎵 Local Audio Player - Built-in music player with visualizer
• 📊 Live Status Panels - Real-time data from:
  • 🎵 Spotify (currently playing song)
  • 🐙 GitHub (profile stats & repositories)
  • 🎮 Steam (player status & game)
  • 💬 Discord (status & activities via Lanyard)
  • 🎮 Roblox (presence status)
• 📱 PWA Support - Install as app + offline caching
• 📊 Responsive Design - Works on desktop, tablet, mobile
• 🔐 Privacy Mode - Global kill-switch for all data with a native browser prompt authentication
• 🛡️ Robust Fallbacks - Graceful error handling UI with default Offline states when APIs are unreachable

---

🛠 Tech Stack

Technology	Purpose
HTML5	Semantic markup
CSS3	Modern styling & animations
JavaScript (ES6+)	Interactivity & API calls
Cloudflare Workers	Serverless API layer
KV Storage	Token caching & settings
Font Awesome 6.5.1	Icon library

---

📂 Project Structure

.
├── 📄 index.html           # Main HTML
├── 📄 404.html             # Custom error page
├── 🎨 styles.css           # Global styles
├── ⚙️ app.js              # Main JavaScript
├── 🔧 sw.js                # Service Worker
├── 📋 manifest.json        # PWA manifest
├── 📚 projects.json        # Project data
├── 🤖 robots.txt           # Search engine rules
├── 🗺️ sitemap.xml         # XML sitemap
├── 🌐 CNAME                # Custom domain configuration
├── 🎼 assets/              # Static assets
│   ├── pfp.*              # Profile pictures
│   ├── audio.mp3          # Background music
│   ├── nobara-icon.*      # OS icons
│   └── *.svg              # Social icons
├── 🔌 api/                 # Cloudflare Workers
│   ├── spotify.js         # Spotify integration
│   ├── github.js          # GitHub integration
│   ├── steam.js           # Steam integration
│   ├── discord.js         # Discord integration
│   ├── roblox.js          # Roblox integration
│   ├── admin.js           # Admin endpoint
│   └── wrangler.*.toml    # Worker configurations
└── 🚀 .github/workflows/   # CI/CD pipelines
    └── deploy.yml         # GitHub Actions deployment

---

🚀 Getting Started

Local Development

Option 1: Direct File

Simply open index.html in your browser.

Option 2: Local Server

# Python 3
python -m http.server 8000

# Or Node.js
npx http-server

Then visit: http://localhost:8000

API Configuration

The live status panels require Cloudflare Workers to fetch real-time data.

Quick Setup

1. Create Cloudflare Workers Project

   • Visit dash.cloudflare.com
   • Create a new Workers project

2. Create KV Namespace

   wrangler kv:namespace create "STATE"

3. Deploy Workers

   • Copy each .js file from api/ folder
   • Deploy to Cloudflare (or use Wrangler CLI)

4. Add Secrets to Dashboard

   SPOTIFY_CLIENT_ID = "..."
   SPOTIFY_CLIENT_SECRET = "..."
   SPOTIFY_REFRESH_TOKEN = "..."
   GITHUB_TOKEN = "..."
   STEAM_API_KEY = "..."
   STEAM_ID = "..."
   DISCORD_ID = "..."
   ROBLOX_USER_ID = "..."
   ADMIN_PASSWORD = "..."
   

Admin password (SHA-256): The ADMIN_PASSWORD secret must store a SHA-256 hash of the admin password, not the plaintext. Generate the hash locally with echo -n "your-password" | sha256sum (take the hex output, drop the trailing -), or compute it in a Worker with crypto.subtle.digest('SHA-256', ...). Use a strong, high-entropy password. Note: this is a source/config change only - no deploy is part of this cleanup.

5. Update API URLs
   • Edit app.js to point to your deployed workers
   • Example: https://workers.example.com/spotify

---

🔌 API Workers

Each worker requires specific environment variables and API credentials.

Available Workers

Worker	Data	Secrets
spotify.js	🎵 Playing song	SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, SPOTIFY_REFRESH_TOKEN
github.js	🐙 Profile & repos	GITHUB_TOKEN, GITHUB_USERNAME
steam.js	🎮 Player status	STEAM_API_KEY, STEAM_ID
discord.js	💬 Status & activities	DISCORD_ID
roblox.js	🎮 Presence status	ROBLOX_USER_ID
admin.js	🔐 Privacy Mode toggle	ADMIN_PASSWORD

Privacy Mode

All workers respect a global Privacy Mode flag:

KV Namespace: STATE
Key: PRIVACY_MODE
Value: "true" | "false"

When enabled, all APIs return:

{
  "privacyMode": true,
  "message": "Privacy Mode Active"
}

---

🎨 Customization

Change Colors & Theme

Edit styles.css to customize:

• Primary color: --primary
• Background: --bg
• Other variables: --text, --border, --card-bg, --glass-bg (see styles.css :root)

Update Profile Info

Edit index.html:

• Name, bio, links in the hero section
• Social media URLs
• Contact information

Modify Project Data

Edit projects.json to add/remove projects:

{
  "projects": [
    { "repo": "NexVid", "type": "archive", "order": 1 },
    { "repo": "Biography", "type": "current", "order": 2 },
    { "repo": "Exam-Scraper", "type": "active", "order": 3 },
    { "repo": "Broadcast-generator", "type": "collab", "order": 4 }
  ]
}

• repo must match the GitHub repository name exactly (app.js matches configMap against repo.name).
• type is one of archive, current, active, or collab (used as displayType; falls back to active).
• order is an integer sort order (lower values appear first).

---

📱 Features in Detail

🎵 Audio Player

• Local music playback with visualizer
• Play/pause controls

📊 Status Panels

Real-time data updates (configurable interval):

• Spotify: Album art, song title, artist, progress
• GitHub: Profile picture, repos, followers, stats, and animated skeletons for recent activity
• Steam: Avatar, username, current game, status
• Discord: Status indicator, current activity, avatar
• Roblox: Presence status, avatar, game location

Note: Status panels use a coordinated loading mechanism, ensuring Discord, Steam, and Roblox data fetches are fully settled before gracefully revealing the content together from a skeleton state.

---

🌐 Live Site

https://piotrunius.dev/

---

📖 Documentation

• Cloudflare Workers Docs
• Service Worker API

---

🔗 Contact & Links

Platform	Link
Discord	@alciaforlife
GitHub	@Piotrunius
Email	contact@piotrunius.dev

---

📄 License

This project is licensed under the MIT License.

Feel free to use, modify, and distribute this code as long as you include the original license.

---

🙏 Acknowledgments

• Font Awesome - Icon library
• Cloudflare - Workers & KV storage
• Lanyard - Discord status API
• The open-source community

---

Made with ❤️ by Piotrunius