183 lines
7.5 KiB
HTML
183 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-gb">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>DCOS.NET | Deep-Rooted Systems & Full Stack</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--primary: #FF5200;
|
|
--bg: #0f0f0f;
|
|
--card-bg: #1a1a1a;
|
|
--text: #e0e0e0;
|
|
--text-dim: #999;
|
|
--font-main: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: var(--bg); color: var(--text); font-family: var(--font-main); line-height: 1.6; }
|
|
|
|
/* --- Navigation --- */
|
|
nav {
|
|
position: fixed; top: 0; width: 100%; padding: 1.5rem 2rem;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
background: rgba(15, 15, 15, 0.8); backdrop-filter: blur(10px);
|
|
z-index: 100; border-bottom: 1px solid #333;
|
|
}
|
|
.logo { font-weight: 800; font-size: 1.4rem; color: var(--primary); font-family: var(--font-mono); }
|
|
|
|
/* --- Hero --- */
|
|
.hero {
|
|
height: 85vh; display: flex; flex-direction: column;
|
|
justify-content: center; align-items: center; text-align: center;
|
|
padding: 0 1rem; background: radial-gradient(circle at center, #221100 0%, #0f0f0f 70%);
|
|
}
|
|
.hero h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.1; margin-bottom: 1rem; font-weight: 800; }
|
|
.hero p { color: var(--text-dim); font-size: 1.2rem; max-width: 700px; margin-bottom: 2.5rem; }
|
|
.hero strong { color: var(--primary); font-family: var(--font-mono); font-weight: normal; }
|
|
|
|
/* --- Bento Grid --- */
|
|
.container { max-width: 1100px; margin: 0 auto; padding: 6rem 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: 1.8rem; margin-bottom: 1.5rem; display: block; }
|
|
.bento-item h3 { margin-bottom: 0.75rem; font-size: 1.2rem; }
|
|
.bento-item p { color: var(--text-dim); font-size: 0.95rem; }
|
|
.large { grid-column: span 2; }
|
|
|
|
/* --- Anchor Terminal (Bottom Right) --- */
|
|
.status-terminal {
|
|
position: fixed; bottom: 20px; right: 20px;
|
|
width: 320px; background: #000; border: 1px solid #444;
|
|
border-radius: 8px; font-family: var(--font-mono); font-size: 0.75rem;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.8); z-index: 200; overflow: hidden;
|
|
}
|
|
.term-header { background: #222; padding: 6px 10px; display: flex; gap: 5px; align-items: center; }
|
|
.term-header span { height: 8px; width: 8px; border-radius: 50%; background: #444; }
|
|
.term-body { padding: 12px; min-height: 100px; color: #aaa; }
|
|
.term-line { margin-bottom: 4px; border-right: 2px solid var(--primary); white-space: nowrap; overflow: hidden; }
|
|
|
|
@media (max-width: 768px) {
|
|
.bento-grid { grid-template-columns: 1fr; }
|
|
.large { grid-column: span 1; }
|
|
.status-terminal { display: none; } /* Hide on mobile for space */
|
|
|
|
|
|
/* Mobile Fix: Targets screens smaller than 768px */
|
|
@media (max-width: 768px) {
|
|
header {
|
|
position: relative; /* Prevents it from floating over content */
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 4.5rem; /* Pushes the text down away from the header */
|
|
line-height: 1.2; /* Prevents overlapping if the text wraps */
|
|
padding: 0 15px; /* Keeps text from hitting the screen edges */
|
|
}
|
|
|
|
/* If your header IS fixed, use this on your main container instead: */
|
|
main, .content {
|
|
padding-top: 80px; /* Match this to your header's actual height */
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<div class="logo">DCOS.NET</div>
|
|
<div style="font-family: var(--font-mono); font-size: 0.8rem; color: #666;">EST. 1999</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<h1>Deep-Rooted Systems Expertise <br>for the Modern Web.</h1>
|
|
<p>Solving complex <strong>Cloud Infrastructure</strong>, <strong>Full-Stack</strong>, and <strong>AI Integration</strong> challenges with 25+ years of experience.</p>
|
|
<a href="mailto:info@dcos.net" class="logo" style="text-decoration: none; border: 1px solid #333; padding: 10px 20px; border-radius: 5px;">GET A QUOTE</a>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<div class="bento-grid">
|
|
<div class="bento-item large">
|
|
<i class="fa-solid fa-microchip"></i>
|
|
<h3>Kernel & Systems Optimization</h3>
|
|
<p>Low-level GNU/Linux development including custom kernel configurations, hardened initscripts, and specialized device firmwares. Built for maximum hardware performance.</p>
|
|
</div>
|
|
<div class="bento-item">
|
|
<i class="fa-solid fa-brain"></i>
|
|
<h3>AI & Automation</h3>
|
|
<p>Integrating LLM pipelines and intelligent automation into existing business stacks to streamline operations.</p>
|
|
</div>
|
|
<div class="bento-item">
|
|
<i class="fa-solid fa-server"></i>
|
|
<h3>Virtualization</h3>
|
|
<p>Expert administration and deployment of KVM/Qemu environments. Scaling infrastructure from bare metal to the cloud.</p>
|
|
</div>
|
|
<div class="bento-item large">
|
|
<i class="fa-solid fa-layer-group"></i>
|
|
<h3>Hardened Cloud Infrastructure</h3>
|
|
<p>Domain registration, VPS orchestration, and high-performance stacks (LAMP/LEMP/Caddy). Comprehensive security hardening for production environments.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-terminal">
|
|
<div class="term-header">
|
|
<span style="background:#ff5f56"></span><span style="background:#ffbd2e"></span><span style="background:#27c93f"></span>
|
|
<div style="margin-left: 5px; font-size: 0.6rem; color: #666;">dcos_monitor.sys</div>
|
|
</div>
|
|
<div class="term-body" id="term-content">
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const logs = [
|
|
"> dcosnet --init --containers --ai",
|
|
"> [OK] GNU/Linux Kernel 7.0rc4 optimized",
|
|
"> [OK] LibVirtd Virtualization online",
|
|
"> [OK] LXC Containers online",
|
|
"> [OK] AI/Ollama Workflows active",
|
|
"> [READY] Systems stable since 1999"
|
|
];
|
|
|
|
const container = document.getElementById('term-content');
|
|
let i = 0;
|
|
|
|
function typeLog() {
|
|
if (i < logs.length) {
|
|
const line = document.createElement('div');
|
|
line.className = 'term-line';
|
|
line.style.color = (i === logs.length - 1) ? '#FF5200' : '#888';
|
|
container.appendChild(line);
|
|
|
|
let charIdx = 0;
|
|
const text = logs[i];
|
|
|
|
function char() {
|
|
if (charIdx < text.length) {
|
|
line.textContent += text.charAt(charIdx);
|
|
charIdx++;
|
|
setTimeout(char, 40);
|
|
} else {
|
|
line.style.borderRight = "none";
|
|
i++;
|
|
setTimeout(typeLog, 600);
|
|
}
|
|
}
|
|
char();
|
|
}
|
|
}
|
|
window.onload = typeLog;
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|