mirror of
https://github.com/ghndrx/webos.git
synced 2026-02-10 06:45:00 +00:00
Initial WebOS portfolio site
This commit is contained in:
Greg Hendrickson
36
.github/workflows/deploy.yml
vendored
Normal file
36
.github/workflows/deploy.yml
vendored
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
name: Deploy
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [main]
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Deploy to server
|
||||||
|
uses: appleboy/scp-action@v0.1.7
|
||||||
|
with:
|
||||||
|
host: ${{ secrets.SERVER_HOST }}
|
||||||
|
username: ${{ secrets.SERVER_USER }}
|
||||||
|
key: ${{ secrets.SERVER_SSH_KEY }}
|
||||||
|
port: ${{ secrets.SERVER_PORT }}
|
||||||
|
source: "index.html,css/,js/,assets/"
|
||||||
|
target: "/var/www/webos"
|
||||||
|
strip_components: 0
|
||||||
|
|
||||||
|
- name: Set permissions
|
||||||
|
uses: appleboy/ssh-action@v1.0.3
|
||||||
|
with:
|
||||||
|
host: ${{ secrets.SERVER_HOST }}
|
||||||
|
username: ${{ secrets.SERVER_USER }}
|
||||||
|
key: ${{ secrets.SERVER_SSH_KEY }}
|
||||||
|
port: ${{ secrets.SERVER_PORT }}
|
||||||
|
script: |
|
||||||
|
sudo chown -R www-data:www-data /var/www/webos
|
||||||
|
sudo chmod -R 755 /var/www/webos
|
||||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
node_modules/
|
||||||
|
.env
|
||||||
30
README.md
Normal file
30
README.md
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# WebOS - Greg's Portfolio
|
||||||
|
|
||||||
|
A WebOS-style personal resume and portfolio site.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- 🖥️ Desktop-like interface with draggable, resizable windows
|
||||||
|
- 📁 Multiple "apps": About, Projects, Resume, Contact, Terminal
|
||||||
|
- 🎮 Interactive terminal with commands
|
||||||
|
- 📱 Mobile responsive
|
||||||
|
|
||||||
|
## Local Development
|
||||||
|
|
||||||
|
Just open `index.html` in a browser, or serve with:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python3 -m http.server 8000
|
||||||
|
# or
|
||||||
|
npx serve .
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
Automatically deploys to production on push to `main` via GitHub Actions.
|
||||||
|
|
||||||
|
**Live site**: https://ghndrx.dev (or your domain)
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
382
css/style.css
Normal file
382
css/style.css
Normal file
@@ -0,0 +1,382 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg-primary: #1a1a2e;
|
||||||
|
--bg-secondary: #16213e;
|
||||||
|
--bg-window: #0f0f23;
|
||||||
|
--accent: #e94560;
|
||||||
|
--accent-secondary: #0f3460;
|
||||||
|
--text-primary: #eee;
|
||||||
|
--text-secondary: #aaa;
|
||||||
|
--border: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||||
|
color: var(--text-primary);
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 20% 80%, rgba(233, 69, 96, 0.1) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 20%, rgba(15, 52, 96, 0.2) 0%, transparent 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop Icons */
|
||||||
|
.desktop-icons {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
align-content: flex-start;
|
||||||
|
max-height: calc(100vh - 50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 80px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon i {
|
||||||
|
font-size: 32px;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon span {
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Windows */
|
||||||
|
.windows-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 50px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 400px;
|
||||||
|
min-height: 300px;
|
||||||
|
background: var(--bg-window);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window.minimized {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-header {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
padding: 10px 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
cursor: move;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-controls button {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-controls button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-controls .close:hover {
|
||||||
|
background: var(--accent);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content h1 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content h2 {
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content h3 {
|
||||||
|
margin: 15px 0 8px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content ul {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content li {
|
||||||
|
margin: 5px 0;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Project Cards */
|
||||||
|
.project-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card h3 {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skills */
|
||||||
|
.skills {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-tag {
|
||||||
|
background: var(--accent-secondary);
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact */
|
||||||
|
.contact-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list li {
|
||||||
|
margin: 10px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list i {
|
||||||
|
width: 20px;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Terminal */
|
||||||
|
.terminal-content {
|
||||||
|
background: #000;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-output {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-output p {
|
||||||
|
color: #0f0;
|
||||||
|
margin: 2px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-input-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt {
|
||||||
|
color: #0f0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#terminal-input {
|
||||||
|
flex: 1;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #0f0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Taskbar */
|
||||||
|
.taskbar {
|
||||||
|
height: 50px;
|
||||||
|
background: rgba(15, 15, 35, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button i {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.taskbar-items {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.taskbar-item {
|
||||||
|
padding: 8px 15px;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
border-left: 2px solid var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.taskbar-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.taskbar-item.active {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-tray {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content templates (hidden) */
|
||||||
|
.content-template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Resize handle */
|
||||||
|
.window::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
cursor: nwse-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.desktop-icons {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window {
|
||||||
|
min-width: 90vw;
|
||||||
|
min-height: 60vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
136
index.html
Normal file
136
index.html
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Greg Hendrickson | Developer</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="desktop">
|
||||||
|
<!-- Desktop Icons -->
|
||||||
|
<div class="desktop-icons">
|
||||||
|
<div class="icon" data-window="about">
|
||||||
|
<i class="fas fa-user"></i>
|
||||||
|
<span>About Me</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon" data-window="projects">
|
||||||
|
<i class="fas fa-folder"></i>
|
||||||
|
<span>Projects</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon" data-window="resume">
|
||||||
|
<i class="fas fa-file-alt"></i>
|
||||||
|
<span>Resume</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon" data-window="contact">
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
<span>Contact</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon" data-window="terminal">
|
||||||
|
<i class="fas fa-terminal"></i>
|
||||||
|
<span>Terminal</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Windows Container -->
|
||||||
|
<div class="windows-container"></div>
|
||||||
|
|
||||||
|
<!-- Taskbar -->
|
||||||
|
<div class="taskbar">
|
||||||
|
<div class="start-button">
|
||||||
|
<i class="fas fa-circle"></i>
|
||||||
|
<span>Start</span>
|
||||||
|
</div>
|
||||||
|
<div class="taskbar-items"></div>
|
||||||
|
<div class="system-tray">
|
||||||
|
<span class="clock"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Window Templates -->
|
||||||
|
<template id="window-template">
|
||||||
|
<div class="window">
|
||||||
|
<div class="window-header">
|
||||||
|
<span class="window-title"></span>
|
||||||
|
<div class="window-controls">
|
||||||
|
<button class="minimize"><i class="fas fa-minus"></i></button>
|
||||||
|
<button class="maximize"><i class="fas fa-square"></i></button>
|
||||||
|
<button class="close"><i class="fas fa-times"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="window-content"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Content Templates -->
|
||||||
|
<div id="content-about" class="content-template">
|
||||||
|
<h1>👋 Hey, I'm Greg</h1>
|
||||||
|
<p>Developer, tinkerer, and builder of things that probably shouldn't exist but do anyway.</p>
|
||||||
|
<p>I enjoy making AI slop into cool websites and building tools that make life easier (or at least more interesting).</p>
|
||||||
|
<h3>Current Focus</h3>
|
||||||
|
<ul>
|
||||||
|
<li>🤖 AI-powered automation</li>
|
||||||
|
<li>🐚 ShellMate - SSH-based games</li>
|
||||||
|
<li>🔧 Developer tooling</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="content-projects" class="content-template">
|
||||||
|
<h1>📁 Projects</h1>
|
||||||
|
<div class="project-grid">
|
||||||
|
<div class="project-card">
|
||||||
|
<h3>🐚 ShellMate</h3>
|
||||||
|
<p>SSH-based gaming platform. Play chess, puzzles, and more right in your terminal.</p>
|
||||||
|
<a href="https://shellmate.sh" target="_blank">shellmate.sh</a>
|
||||||
|
</div>
|
||||||
|
<div class="project-card">
|
||||||
|
<h3>🤖 Clawdbot</h3>
|
||||||
|
<p>AI assistant framework for automating everything.</p>
|
||||||
|
<a href="https://github.com/clawdbot/clawdbot" target="_blank">GitHub</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="content-resume" class="content-template">
|
||||||
|
<h1>📄 Resume</h1>
|
||||||
|
<h2>Experience</h2>
|
||||||
|
<div class="resume-item">
|
||||||
|
<h3>Developer & Tinkerer</h3>
|
||||||
|
<p>Building cool shit since forever</p>
|
||||||
|
</div>
|
||||||
|
<h2>Skills</h2>
|
||||||
|
<div class="skills">
|
||||||
|
<span class="skill-tag">Python</span>
|
||||||
|
<span class="skill-tag">TypeScript</span>
|
||||||
|
<span class="skill-tag">Go</span>
|
||||||
|
<span class="skill-tag">Linux</span>
|
||||||
|
<span class="skill-tag">Docker</span>
|
||||||
|
<span class="skill-tag">AI/ML</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="content-contact" class="content-template">
|
||||||
|
<h1>📬 Contact</h1>
|
||||||
|
<p>Want to chat? Here's how to reach me:</p>
|
||||||
|
<ul class="contact-list">
|
||||||
|
<li><i class="fab fa-github"></i> <a href="https://github.com/ghndrx" target="_blank">GitHub</a></li>
|
||||||
|
<li><i class="fas fa-envelope"></i> <a href="mailto:greg@example.com">Email</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="content-terminal" class="content-template terminal-content">
|
||||||
|
<div class="terminal-output" id="terminal-output">
|
||||||
|
<p>Welcome to GregOS v1.0</p>
|
||||||
|
<p>Type 'help' for available commands.</p>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-input-line">
|
||||||
|
<span class="prompt">guest@gregos:~$</span>
|
||||||
|
<input type="text" id="terminal-input" autofocus>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
299
js/app.js
Normal file
299
js/app.js
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
// GregOS - WebOS Resume Site
|
||||||
|
|
||||||
|
class GregOS {
|
||||||
|
constructor() {
|
||||||
|
this.windows = new Map();
|
||||||
|
this.zIndex = 100;
|
||||||
|
this.windowOffset = { x: 50, y: 50 };
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.bindIconClicks();
|
||||||
|
this.startClock();
|
||||||
|
this.setupTerminal();
|
||||||
|
}
|
||||||
|
|
||||||
|
bindIconClicks() {
|
||||||
|
document.querySelectorAll('.icon').forEach(icon => {
|
||||||
|
icon.addEventListener('dblclick', () => {
|
||||||
|
const windowId = icon.dataset.window;
|
||||||
|
this.openWindow(windowId);
|
||||||
|
});
|
||||||
|
// Mobile: single tap
|
||||||
|
icon.addEventListener('click', (e) => {
|
||||||
|
if (window.innerWidth <= 768) {
|
||||||
|
const windowId = icon.dataset.window;
|
||||||
|
this.openWindow(windowId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
openWindow(id) {
|
||||||
|
if (this.windows.has(id)) {
|
||||||
|
const win = this.windows.get(id);
|
||||||
|
win.element.classList.remove('minimized');
|
||||||
|
this.focusWindow(win.element);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const template = document.getElementById('window-template');
|
||||||
|
const content = document.getElementById(`content-${id}`);
|
||||||
|
|
||||||
|
if (!template || !content) return;
|
||||||
|
|
||||||
|
const windowEl = template.content.cloneNode(true).querySelector('.window');
|
||||||
|
const title = document.querySelector(`[data-window="${id}"] span`).textContent;
|
||||||
|
|
||||||
|
windowEl.querySelector('.window-title').textContent = title;
|
||||||
|
windowEl.querySelector('.window-content').innerHTML = content.innerHTML;
|
||||||
|
|
||||||
|
// If terminal, add terminal class
|
||||||
|
if (id === 'terminal') {
|
||||||
|
windowEl.querySelector('.window-content').classList.add('terminal-content');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Position window
|
||||||
|
windowEl.style.left = this.windowOffset.x + 'px';
|
||||||
|
windowEl.style.top = this.windowOffset.y + 'px';
|
||||||
|
windowEl.style.width = '500px';
|
||||||
|
windowEl.style.height = '400px';
|
||||||
|
|
||||||
|
this.windowOffset.x += 30;
|
||||||
|
this.windowOffset.y += 30;
|
||||||
|
if (this.windowOffset.x > 300) this.windowOffset = { x: 50, y: 50 };
|
||||||
|
|
||||||
|
document.querySelector('.windows-container').appendChild(windowEl);
|
||||||
|
|
||||||
|
this.windows.set(id, { element: windowEl, title });
|
||||||
|
this.focusWindow(windowEl);
|
||||||
|
this.addTaskbarItem(id, title);
|
||||||
|
this.setupWindowControls(windowEl, id);
|
||||||
|
this.setupDrag(windowEl);
|
||||||
|
this.setupResize(windowEl);
|
||||||
|
|
||||||
|
// Focus terminal input
|
||||||
|
if (id === 'terminal') {
|
||||||
|
setTimeout(() => {
|
||||||
|
const input = windowEl.querySelector('#terminal-input');
|
||||||
|
if (input) input.focus();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setupWindowControls(windowEl, id) {
|
||||||
|
windowEl.querySelector('.close').addEventListener('click', () => {
|
||||||
|
windowEl.remove();
|
||||||
|
this.windows.delete(id);
|
||||||
|
this.removeTaskbarItem(id);
|
||||||
|
});
|
||||||
|
|
||||||
|
windowEl.querySelector('.minimize').addEventListener('click', () => {
|
||||||
|
windowEl.classList.add('minimized');
|
||||||
|
});
|
||||||
|
|
||||||
|
windowEl.querySelector('.maximize').addEventListener('click', () => {
|
||||||
|
if (windowEl.dataset.maximized === 'true') {
|
||||||
|
windowEl.style.left = windowEl.dataset.prevLeft;
|
||||||
|
windowEl.style.top = windowEl.dataset.prevTop;
|
||||||
|
windowEl.style.width = windowEl.dataset.prevWidth;
|
||||||
|
windowEl.style.height = windowEl.dataset.prevHeight;
|
||||||
|
windowEl.dataset.maximized = 'false';
|
||||||
|
} else {
|
||||||
|
windowEl.dataset.prevLeft = windowEl.style.left;
|
||||||
|
windowEl.dataset.prevTop = windowEl.style.top;
|
||||||
|
windowEl.dataset.prevWidth = windowEl.style.width;
|
||||||
|
windowEl.dataset.prevHeight = windowEl.style.height;
|
||||||
|
windowEl.style.left = '0';
|
||||||
|
windowEl.style.top = '0';
|
||||||
|
windowEl.style.width = '100%';
|
||||||
|
windowEl.style.height = 'calc(100vh - 50px)';
|
||||||
|
windowEl.dataset.maximized = 'true';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
windowEl.addEventListener('mousedown', () => this.focusWindow(windowEl));
|
||||||
|
}
|
||||||
|
|
||||||
|
focusWindow(windowEl) {
|
||||||
|
this.zIndex++;
|
||||||
|
windowEl.style.zIndex = this.zIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
setupDrag(windowEl) {
|
||||||
|
const header = windowEl.querySelector('.window-header');
|
||||||
|
let isDragging = false;
|
||||||
|
let startX, startY, startLeft, startTop;
|
||||||
|
|
||||||
|
header.addEventListener('mousedown', (e) => {
|
||||||
|
if (e.target.closest('.window-controls')) return;
|
||||||
|
isDragging = true;
|
||||||
|
startX = e.clientX;
|
||||||
|
startY = e.clientY;
|
||||||
|
startLeft = parseInt(windowEl.style.left) || 0;
|
||||||
|
startTop = parseInt(windowEl.style.top) || 0;
|
||||||
|
windowEl.style.transition = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (e) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
const dx = e.clientX - startX;
|
||||||
|
const dy = e.clientY - startY;
|
||||||
|
windowEl.style.left = startLeft + dx + 'px';
|
||||||
|
windowEl.style.top = startTop + dy + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
isDragging = false;
|
||||||
|
windowEl.style.transition = '';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setupResize(windowEl) {
|
||||||
|
let isResizing = false;
|
||||||
|
let startX, startY, startWidth, startHeight;
|
||||||
|
|
||||||
|
windowEl.addEventListener('mousedown', (e) => {
|
||||||
|
const rect = windowEl.getBoundingClientRect();
|
||||||
|
if (e.clientX > rect.right - 15 && e.clientY > rect.bottom - 15) {
|
||||||
|
isResizing = true;
|
||||||
|
startX = e.clientX;
|
||||||
|
startY = e.clientY;
|
||||||
|
startWidth = rect.width;
|
||||||
|
startHeight = rect.height;
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (e) => {
|
||||||
|
if (!isResizing) return;
|
||||||
|
const dx = e.clientX - startX;
|
||||||
|
const dy = e.clientY - startY;
|
||||||
|
windowEl.style.width = Math.max(400, startWidth + dx) + 'px';
|
||||||
|
windowEl.style.height = Math.max(300, startHeight + dy) + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
isResizing = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addTaskbarItem(id, title) {
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'taskbar-item';
|
||||||
|
item.dataset.window = id;
|
||||||
|
item.textContent = title;
|
||||||
|
item.addEventListener('click', () => {
|
||||||
|
const win = this.windows.get(id);
|
||||||
|
if (win) {
|
||||||
|
win.element.classList.toggle('minimized');
|
||||||
|
if (!win.element.classList.contains('minimized')) {
|
||||||
|
this.focusWindow(win.element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelector('.taskbar-items').appendChild(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeTaskbarItem(id) {
|
||||||
|
const item = document.querySelector(`.taskbar-item[data-window="${id}"]`);
|
||||||
|
if (item) item.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
startClock() {
|
||||||
|
const updateClock = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||||
|
document.querySelector('.clock').textContent = time;
|
||||||
|
};
|
||||||
|
updateClock();
|
||||||
|
setInterval(updateClock, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
setupTerminal() {
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
const input = document.getElementById('terminal-input');
|
||||||
|
if (!input || document.activeElement !== input) return;
|
||||||
|
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
this.executeCommand(input.value);
|
||||||
|
input.value = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
executeCommand(cmd) {
|
||||||
|
const output = document.getElementById('terminal-output');
|
||||||
|
if (!output) return;
|
||||||
|
|
||||||
|
const addLine = (text, color = '#0f0') => {
|
||||||
|
const p = document.createElement('p');
|
||||||
|
p.textContent = text;
|
||||||
|
p.style.color = color;
|
||||||
|
output.appendChild(p);
|
||||||
|
output.scrollTop = output.scrollHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
addLine(`guest@gregos:~$ ${cmd}`);
|
||||||
|
|
||||||
|
const commands = {
|
||||||
|
help: () => {
|
||||||
|
addLine('Available commands:');
|
||||||
|
addLine(' help - Show this help');
|
||||||
|
addLine(' about - About me');
|
||||||
|
addLine(' projects - List projects');
|
||||||
|
addLine(' skills - Show skills');
|
||||||
|
addLine(' contact - Contact info');
|
||||||
|
addLine(' clear - Clear terminal');
|
||||||
|
addLine(' neofetch - System info');
|
||||||
|
},
|
||||||
|
about: () => {
|
||||||
|
addLine('Greg Hendrickson');
|
||||||
|
addLine('Developer, tinkerer, builder of things.');
|
||||||
|
},
|
||||||
|
projects: () => {
|
||||||
|
addLine('Projects:');
|
||||||
|
addLine(' - ShellMate (shellmate.sh)');
|
||||||
|
addLine(' - Clawdbot');
|
||||||
|
},
|
||||||
|
skills: () => {
|
||||||
|
addLine('Skills: Python, TypeScript, Go, Linux, Docker, AI/ML');
|
||||||
|
},
|
||||||
|
contact: () => {
|
||||||
|
addLine('GitHub: github.com/ghndrx');
|
||||||
|
},
|
||||||
|
clear: () => {
|
||||||
|
output.innerHTML = '';
|
||||||
|
},
|
||||||
|
neofetch: () => {
|
||||||
|
addLine(' ____ ___ ____ ', '#e94560');
|
||||||
|
addLine(' / ___|_ __ ___ __ _ / _ \\/ ___| ', '#e94560');
|
||||||
|
addLine(' | | _| \'__/ _ \\/ _` | | | \\___ \\ ', '#e94560');
|
||||||
|
addLine(' | |_| | | | __/ (_| | |_| |___) |', '#e94560');
|
||||||
|
addLine(' \\____|_| \\___|\\__, |\\___/|____/ ', '#e94560');
|
||||||
|
addLine(' |___/ ', '#e94560');
|
||||||
|
addLine('');
|
||||||
|
addLine('OS: GregOS v1.0');
|
||||||
|
addLine('Host: The Internet');
|
||||||
|
addLine('Uptime: Since the early days');
|
||||||
|
addLine('Shell: bash');
|
||||||
|
addLine('Terminal: WebTerminal');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const trimmedCmd = cmd.trim().toLowerCase();
|
||||||
|
if (trimmedCmd === '') return;
|
||||||
|
|
||||||
|
if (commands[trimmedCmd]) {
|
||||||
|
commands[trimmedCmd]();
|
||||||
|
} else {
|
||||||
|
addLine(`Command not found: ${cmd}. Type 'help' for available commands.`, '#ff6b6b');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
window.gregos = new GregOS();
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user