diff --git a/app.js b/app.js new file mode 100644 index 0000000..d59cbcc --- /dev/null +++ b/app.js @@ -0,0 +1,110 @@ +/** + * DCOS.NET Framework Logic + * Handles UI Injections, System Stats, and Terminal Simulation + */ + +async function injectSharedUI() { + try { + // 1. Load Header Fragment + const hRes = await fetch('header.html'); + document.getElementById('header-shared').innerHTML = await hRes.text(); + + // 2. Load Footer Fragment + const fRes = await fetch('footer.html'); + document.getElementById('footer-shared').innerHTML = await fRes.text(); + + // 3. Trigger Post-Load Functions + fetchStats(); + fetchTerm(); + } catch (e) { + console.error("UI Fragment Load Failed:", e); + } +} + +// Global System Stats (Geo & Git Metadata) + +async function fetchStats() { + // 1. Give the DOM a split second to breathe after fragment injection + setTimeout(async () => { + try { + // Fetch Version Metadata (Git Push Info) + const vRes = await fetch('version.json?t=' + Date.now()); + if (vRes.ok) { + const vData = await vRes.json(); + const pushElem = document.getElementById('last-push'); + if (pushElem) pushElem.innerText = vData.last_deploy; + } + + // Fetch Geo-Location (HTTPS IS REQUIRED) + const gRes = await fetch('https://ipapi.co/json/'); + if (gRes.ok) { + const gData = await gRes.json(); + const tickerElem = document.getElementById('visitor-ticker'); + if (tickerElem) { + // Using a formatted string: "City, Country Code" + tickerElem.innerText = `${gData.city}, ${gData.country_code}`; + } + } + } catch (e) { + console.warn("DCOS_MONITOR: Stats satellite uplink failed.", e); + const tickerElem = document.getElementById('visitor-ticker'); + if (tickerElem) tickerElem.innerText = "VPN_ENCRYPTED / ANONYMOUS"; + } + }, 100); // 100ms delay ensures footer.html is rendered +} + +// Terminal Simulation +function fetchTerm() { + const logs = [ + "> dcosnet --init --ai", + "> [OK] Kernel 7.0rc4 optimized", + "> [OK] libvirtd/LXC Containers active", + "> [OK] Caddy Reverse Proxy active", + "> [OK] Current project: Compiling...", + "> [READY] Systems stable since 1999" + ]; + + const container = document.getElementById('term-content'); + if (!container) return; + + container.innerHTML = ''; // Clear any existing content + let i = 0; + + function typeLog() { + if (i < logs.length) { + const line = document.createElement('div'); + line.className = 'term-line'; + + // Re-applying the primary brand color to the success message + if (i === logs.length - 1) { + line.style.color = 'var(--primary)'; + line.style.fontWeight = 'bold'; + } else { + line.style.color = '#888'; + } + + container.appendChild(line); + + let charIdx = 0; + const text = logs[i]; + + function char() { + if (charIdx < text.length) { + line.textContent += text.charAt(charIdx); + charIdx++; + // SPEED TWEAK: 20ms is "high-speed" terminal style + setTimeout(char, 20); + } else { + i++; + // DELAY BETWEEN LINES: 300ms feels snappier than 600ms + setTimeout(typeLog, 300); + } + } + char(); + } + } + typeLog(); +} + +// Initialize on page load +window.onload = injectSharedUI; diff --git a/footer.html b/footer.html new file mode 100644 index 0000000..112bdf5 --- /dev/null +++ b/footer.html @@ -0,0 +1,23 @@ +
+
+ + + +
dcos_monitor.sys
+
+
+
+ diff --git a/header.html b/header.html new file mode 100644 index 0000000..386b353 --- /dev/null +++ b/header.html @@ -0,0 +1,6 @@ + diff --git a/index.html b/index.html index 142ab90..895cdd5 100644 --- a/index.html +++ b/index.html @@ -3,180 +3,50 @@ - DCOS.NET | Deep-Rooted Systems & Full Stack + DCOS.NET | Systems & Full Stack - + - - - -
+
+

Deep-Rooted Systems Expertise
for the Modern Web.

Solving complex Cloud Infrastructure, Full-Stack, and AI Integration challenges with 25+ years of experience.

- -
- -
-
+ REQUEST_QOUTE + +
+
-

Kernel & Systems Optimization

-

Low-level GNU/Linux development including custom kernel configurations, hardened initscripts, and specialized device firmwares. Built for maximum hardware performance.

+

Systems Engineering

+

Low-level GNU/Linux development including custom kernel configurations, hardened initscripts, and specialized device firmwares. Built for maximum performance and function.

+

Gentoo, Sourcemage, Lunar, LEDE, ALFS/CLFS, Custom ToolChains.

AI & Automation

-

Integrating LLM pipelines and intelligent automation into existing business stacks to streamline operations.

+

Integrating LLM pipelines (Ollama/PyTorch) and intelligent automation into existing business stacks.

Virtualization

-

Expert administration and deployment of KVM/Qemu environments. Scaling infrastructure from bare metal to the cloud.

+

Expert administration of libvirt/KVM, Proxmox, Incus environments. Scaling from bare metal to distributed cloud.

+
+
+ +

DevOPS/SRE

+

Observability, Systems Monitoring, Quantitive analysis and Data Visualization. for Full Stack Visibility.

+

Prometheus, Grafana(stack).

Hardened Cloud Infrastructure

-

Domain registration, VPS orchestration, and high-performance stacks (LAMP/LEMP/Caddy). Comprehensive security hardening for production environments.

+

Caddy/Nginx orchestration, and high-performance stacks such as LAMP or LEMP. Comprehensive security hardening for production environments.

+

EB/IP/Arp/NF-tables, eBPF, ACLs, grsec/pax

+
-
- -
-
- -
dcos_monitor.sys
-
-
-
-
- - - + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..c528601 --- /dev/null +++ b/style.css @@ -0,0 +1,200 @@ +/* --- Global Variables & Reset --- */ +:root { + --primary: #FF5200; + --bg: #0f0f0f; + --card-bg: #1a1a1a; + --text: #e0e0e0; + --text-dim: #999; + --font-main: 'Inter', system-ui, sans-serif; + --font-mono: 'JetBrains Mono', monospace; + --nav-height: 80px; +} + +* { margin: 0; padding: 0; box-sizing: border-box; } + +body { + background: var(--bg); + color: var(--text); + font-family: var(--font-main); + line-height: 1.6; + overflow-x: hidden; +} + +/* --- Shared Navigation --- */ +nav { + position: fixed; + top: 0; + width: 100%; + height: var(--nav-height); + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(15, 15, 15, 0.8); + backdrop-filter: blur(12px); + z-index: 1000; + border-bottom: 1px solid #333; +} + +.logo { + font-weight: 800; + font-size: 1.4rem; + color: var(--primary); + font-family: var(--font-mono); + text-decoration: none; +} + +.nav-links a { + color: var(--text-dim); + text-decoration: none; + font-family: var(--font-mono); + font-size: 0.8rem; + margin-left: 20px; + transition: 0.3s; +} + +.nav-links a:hover { color: var(--primary); } + +strong { + color: var(--primary); + font-family: var(--font-mono); /* Optional: gives it that technical 'code' feel */ + font-weight: 600; + letter-spacing: -0.5px; +} + +/* --- Hero Section --- */ +.hero { + height: 80vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: var(--nav-height) 1rem 0 1rem; + background: radial-gradient(circle at center, #221100 0%, #0f0f0f 80%); +} + +.hero h1 { + font-size: clamp(2.2rem, 8vw, 4.5rem); + line-height: 1.1; + margin-bottom: 1.5rem; + font-weight: 800; +} + +.hero p { + color: var(--text-dim); + font-size: 1.2rem; + max-width: 750px; + margin-bottom: 2.5rem; +} + +.btn { + text-decoration: none; + border: 1px solid var(--primary); + color: var(--primary); + padding: 14px 28px; + border-radius: 4px; + font-family: var(--font-mono); + font-size: 0.9rem; + transition: 0.3s; +} + +.btn:hover { background: var(--primary); color: #000; } + +/* --- Bento Grid --- */ +.container { + max-width: 1100px; + margin: 0 auto; + padding: 4rem 2rem; +} + +.bento-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +.bento-item { + background: var(--card-bg); + border: 1px solid #333; + border-radius: 12px; + padding: 2.5rem; + transition: 0.3s ease; +} + +.bento-item:hover { border-color: var(--primary); transform: translateY(-5px); } + +.bento-item i { + color: var(--primary); + font-size: 2rem; + margin-bottom: 1.5rem; + display: block; +} + +.large { grid-column: span 2; } + +/* --- Status Terminal --- */ +.status-terminal { + position: fixed; + bottom: 90px; + right: 20px; + width: 300px; + background: #000; + border: 1px solid #444; + border-radius: 8px; + font-family: var(--font-mono); + font-size: 0.7rem; + box-shadow: 0 10px 40px rgba(0,0,0,0.9); + z-index: 500; + overflow: hidden; +} + +.term-header { background: #222; padding: 8px 12px; display: flex; gap: 6px; align-items: center; } +.term-header span { height: 8px; width: 8px; border-radius: 50%; background: #444; } +.term-body { padding: 12px; min-height: 100px; color: #777; line-height: 1.4; } + +/* --- Shared Footer --- */ +.site-footer { + background: #0a0a0a; + border-top: 1px solid #222; + padding: 1.5rem 2rem; + font-family: var(--font-mono); + font-size: 0.7rem; + color: #444; +} + +.footer-grid { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1100px; + margin: 0 auto; +} + +.stat-label { color: var(--primary); font-weight: bold; margin-right: 4px; } +.status-pulse { color: #27c93f; animation: pulse 2s infinite; } + +@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } + +/* --- Mobile Fixes --- */ +@media (max-width: 768px) { + nav { padding: 0 1rem; } + .nav-links { display: none; } /* Simplified for mobile */ + + .hero { + height: auto; + padding: 120px 1.5rem 60px 1.5rem; + } + + .bento-grid { grid-template-columns: 1fr; } + .large { grid-column: span 1; } + + .status-terminal { display: none; } /* Keep mobile clean */ + + .footer-grid { + flex-direction: column; + gap: 10px; + text-align: left; + align-items: flex-start; + } +}