Create a Portfolio for a Creative technologist that look like a Web OS

README.md

@@ -1,10 +1,13 @@
 ---
-title: Pixelos Portfolio Playground
-emoji: 🌍
-colorFrom: purple
-colorTo: purple
+title: PixelOS Portfolio Playground  🖥️
+colorFrom: red
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/desktop-shell.js

@@ -0,0 +1,37 @@
+class DesktopShell extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    overflow: hidden;
+                    background-image: url('http://static.photos/technology/1200x630/42');
+                    background-size: cover;
+                    background-position: center;
+                    z-index: 1;
+                }
+            </style>
+            <div id="desktop" class="w-full h-full relative">
+                <!-- Windows will be added here -->
+            </div>
+            <custom-taskbar></custom-taskbar>
+        `;
+    }
+
+    createWindow(options) {
+        windowManager.createWindow(options);
+    }
+
+    connectedCallback() {
+        this.desktop = this.shadowRoot.getElementById('desktop');
+    }
+}
+
+customElements.define('desktop-shell', DesktopShell);

components/taskbar.js

@@ -0,0 +1,152 @@
+class CustomTaskbar extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    height: 48px;
+                    background-color: rgba(31, 41, 55, 0.9);
+                    backdrop-filter: blur(10px);
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    z-index: 1000;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 16px;
+                }
+
+                .start-button {
+                    display: flex;
+                    align-items: center;
+                    padding: 0 12px;
+                    height: 36px;
+                    background-color: rgba(99, 102, 241, 0.7);
+                    color: white;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                }
+
+                .start-button:hover {
+                    background-color: rgba(99, 102, 241, 0.9);
+                }
+
+                .taskbar-icons {
+                    display: flex;
+                    margin-left: 16px;
+                    gap: 8px;
+                }
+
+                .taskbar-icon {
+                    width: 36px;
+                    height: 36px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                }
+
+                .taskbar-icon:hover {
+                    background-color: rgba(255, 255, 255, 0.1);
+                }
+
+                .system-tray {
+                    margin-left: auto;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                }
+
+                .tray-icon {
+                    width: 24px;
+                    height: 24px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    opacity: 0.8;
+                }
+
+                .tray-icon:hover {
+                    opacity: 1;
+                }
+
+                .time {
+                    font-size: 12px;
+                    padding: 0 8px;
+                }
+            </style>
+            <div class="start-button" id="start-button">
+                <i data-feather="grid"></i>
+                <span class="ml-2">Start</span>
+            </div>
+            <div class="taskbar-icons" id="taskbar-icons">
+                <!-- App icons will be added here -->
+            </div>
+            <div class="system-tray">
+                <div class="tray-icon" id="theme-toggle">
+                    <i data-feather="moon"></i>
+                </div>
+                <div class="tray-icon">
+                    <i data-feather="wifi"></i>
+                </div>
+                <div class="tray-icon">
+                    <i data-feather="volume-2"></i>
+                </div>
+                <div class="time" id="clock">00:00</div>
+            </div>
+        `;
+    }
+
+    connectedCallback() {
+        this.updateClock();
+        setInterval(() => this.updateClock(), 60000);
+
+        this.shadowRoot.getElementById('start-button').addEventListener('click', () => {
+            windowManager.createWindow({
+                id: 'start-menu',
+                title: 'Start Menu',
+                content: `
+                    <div class="p-4 grid grid-cols-3 gap-4">
+                        <div class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                            <i data-feather="user" class="w-8 h-8 mb-2"></i>
+                            <span>About</span>
+                        </div>
+                        <div class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                            <i data-feather="folder" class="w-8 h-8 mb-2"></i>
+                            <span>Projects</span>
+                        </div>
+                        <div class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                            <i data-feather="mail" class="w-8 h-8 mb-2"></i>
+                            <span>Contact</span>
+                        </div>
+                        <div class="p-4 flex flex-col items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
+                            <i data-feather="settings" class="w-8 h-8 mb-2"></i>
+                            <span>Settings</span>
+                        </div>
+                    </div>
+                `,
+                icon: 'grid',
+                initialPosition: { x: 50, y: window.innerHeight - 200 }
+            });
+        });
+
+        feather.replace();
+    }
+
+    updateClock() {
+        const now = new Date();
+        const hours = now.getHours().toString().padStart(2, '0');
+        const minutes = now.getMinutes().toString().padStart(2, '0');
+        this.shadowRoot.getElementById('clock').textContent = `${hours}:${minutes}`;
+    }
+}
+
+customElements.define('custom-taskbar', CustomTaskbar);

components/window.js

@@ -0,0 +1,73 @@
+class CustomWindow extends HTMLElement {
+    constructor() {
+        super();
+        this.isDragging = false;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.attachShadow({ mode: 'open' });
+    }
+
+    static get observedAttributes() {
+        return ['title', 'icon', 'initial-x', 'initial-y'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'title' || name === 'icon') {
+            this.render();
+        } else if ((name === 'initial-x' || name === 'initial-y') && newValue !== oldValue) {
+            this.style.left = `${this.getAttribute('initial-x')}px`;
+            this.style.top = `${this.getAttribute('initial-y')}px`;
+        }
+    }
+
+    connectedCallback() {
+        this.render();
+        this.setupEventListeners();
+        this.style.left = `${this.getAttribute('initial-x')}px`;
+        this.style.top = `${this.getAttribute('initial-y')}px`;
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    position: absolute;
+                    width: 500px;
+                    max-width: 90vw;
+                    min-height: 300px;
+                    background-color: rgba(255, 255, 255, 0.9);
+                    border-radius: 8px;
+                    overflow: hidden;
+                    display: flex;
+                    flex-direction: column;
+                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+                    backdrop-filter: blur(10px);
+                    border: 1px solid rgba(0, 0, 0, 0.1);
+                    transition: transform 0.2s, opacity 0.2s;
+                }
+
+                .dark :host {
+                    background-color: rgba(31, 41, 55, 0.9);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                }
+
+                .window-header {
+                    height: 36px;
+                    background-color: rgba(99, 102, 241, 0.7);
+                    color: white;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 12px;
+                    cursor: move;
+                    user-select: none;
+                }
+
+                .dark .window-header {
+                    background-color: rgba(79, 70, 229, 0.8);
+                }
+
+                .window-title {
+                    display: flex;
+                    align-items: center;
+                    flex-grow: 1;
+                    font-weight:

index.html

@@ -1,19 +1,39 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PixelOS | Creative Technologist</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                        },
+                        secondary: {
+                            500: '#f43f5e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen">
+    <desktop-shell></desktop-shell>
+    
+    <script src="components/desktop-shell.js"></script>
+    <script src="components/taskbar.js"></script>
+    <script src="components/window.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,142 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize desktop apps
+    const desktop = document.querySelector('desktop-shell');
+    
+    // Create default windows
+    desktop.createWindow({
+        id: 'about',
+        title: 'About Me.txt',
+        content: `
+            <div class="p-4">
+                <h2 class="text-xl font-bold mb-4 text-primary-500">Creative Technologist</h2>
+                <p class="mb-4">Hello! I'm a creative technologist blending art, design, and technology to create immersive experiences.</p>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <h3 class="font-bold mb-2">Skills</h3>
+                        <ul class="list-disc pl-5">
+                            <li>Interactive Installations</li>
+                            <li>Creative Coding</li>
+                            <li>WebGL & Three.js</li>
+                            <li>Physical Computing</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="font-bold mb-2">Tools</h3>
+                        <ul class="list-disc pl-5">
+                            <li>TouchDesigner</li>
+                            <li>Processing</li>
+                            <li>Arduino</li>
+                            <li>p5.js</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        `,
+        icon: 'user',
+        initialPosition: { x: 100, y: 100 }
+    });
+
+    desktop.createWindow({
+        id: 'projects',
+        title: 'Projects Explorer',
+        content: `
+            <div class="p-4">
+                <h2 class="text-xl font-bold mb-4 text-primary-500">Featured Projects</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
+                        <h3 class="font-bold">Interactive Light Sculpture</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Kinetic installation responding to sound</p>
+                    </div>
+                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
+                        <h3 class="font-bold">Generative Art Platform</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Web-based tool for creating algorithmic art</p>
+                    </div>
+                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
+                        <h3 class="font-bold">AR Museum Experience</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Augmented reality for cultural heritage</p>
+                    </div>
+                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer">
+                        <h3 class="font-bold">Data Visualization Suite</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Interactive tools for complex datasets</p>
+                    </div>
+                </div>
+            </div>
+        `,
+        icon: 'folder',
+        initialPosition: { x: 300, y: 150 }
+    });
+
+    // Theme toggle
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+        themeToggle.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+        });
+    }
+});
+
+class WindowManager {
+    constructor() {
+        this.windows = [];
+        this.zIndexCounter = 10;
+    }
+
+    createWindow(options) {
+        const windowElement = document.createElement('custom-window');
+        windowElement.setAttribute('id', options.id);
+        windowElement.setAttribute('title', options.title);
+        windowElement.setAttribute('icon', options.icon);
+        windowElement.setAttribute('initial-x', options.initialPosition.x);
+        windowElement.setAttribute('initial-y', options.initialPosition.y);
+        windowElement.innerHTML = options.content;
+        
+        document.querySelector('desktop-shell').appendChild(windowElement);
+        this.windows.push({
+            id: options.id,
+            element: windowElement,
+            minimized: false
+        });
+        
+        this.bringToFront(windowElement);
+    }
+
+    bringToFront(windowElement) {
+        this.zIndexCounter += 1;
+        windowElement.style.zIndex = this.zIndexCounter;
+    }
+
+    minimizeWindow(windowId) {
+        const window = this.windows.find(w => w.id === windowId);
+        if (window) {
+            window.minimized = true;
+            window.element.classList.add('window-minimize');
+            setTimeout(() => {
+                window.element.style.display = 'none';
+            }, 300);
+        }
+    }
+
+    restoreWindow(windowId) {
+        const window = this.windows.find(w => w.id === windowId);
+        if (window) {
+            window.minimized = false;
+            window.element.style.display = 'block';
+            window.element.classList.add('window-restore');
+            setTimeout(() => {
+                window.element.classList.remove('window-restore');
+            }, 300);
+            this.bringToFront(window.element);
+        }
+    }
+
+    closeWindow(windowId) {
+        const windowIndex = this.windows.findIndex(w => w.id === windowId);
+        if (windowIndex !== -1) {
+            this.windows[windowIndex].element.remove();
+            this.windows.splice(windowIndex, 1);
+        }
+    }
+}
+
+window.windowManager = new WindowManager();

style.css

@@ -1,28 +1,63 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
+
+* {
+    font-family: 'JetBrains Mono', monospace;
+    box-sizing: border-box;
+}
+
+.draggable {
+    -webkit-app-region: drag;
+}
+
+.window-shadow {
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.window-content {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.window-content::-webkit-scrollbar {
+    width: 6px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.window-content::-webkit-scrollbar-track {
+    background: transparent;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.window-content::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.5);
+    border-radius: 3px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.icon-hover:hover {
+    transform: scale(1.1);
+    transition: transform 0.2s ease;
 }
+
+.window-minimize {
+    animation: minimize 0.3s forwards;
+}
+
+@keyframes minimize {
+    to {
+        transform: translateY(100vh);
+        opacity: 0;
+    }
+}
+
+.window-restore {
+    animation: restore 0.3s forwards;
+}
+
+@keyframes restore {
+    from {
+        transform: translateY(100vh);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}