|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="scroll-smooth"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mac Pro Trinity Cluster - Enterprise Computing Reimagined</title> |
|
|
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔮</text></svg>"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
</head> |
|
|
<body class="bg-black text-gray-200 antialiased overflow-x-hidden"> |
|
|
|
|
|
|
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-purple-500/5"></div> |
|
|
<div class="absolute top-20 left-10 w-64 h-64 bg-cyan-400/10 rounded-full filter blur-3xl animate-pulse"></div> |
|
|
<div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-400/10 rounded-full filter blur-3xl animate-pulse animation-delay-2000"></div> |
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10 text-center"> |
|
|
<div class="max-w-5xl mx-auto"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> |
|
|
<span class="bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent animate-gradient"> |
|
|
Mac Pro Trinity |
|
|
</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-400 mb-8 font-light tracking-wide"> |
|
|
Transforming three "obsolete" workstations into an enterprise-grade computing powerhouse |
|
|
</p> |
|
|
<div class="flex items-center justify-center gap-4 text-sm text-gray-500"> |
|
|
<span class="flex items-center gap-2"><i data-feather="cpu" class="w-4 h-4"></i>30 Cores</span> |
|
|
<span class="flex items-center gap-2"><i data-feather="database" class="w-4 h-4"></i>320GB RAM</span> |
|
|
<span class="flex items-center gap-2"><i data-feather="grid" class="w-4 h-4"></i>6 GPUs</span> |
|
|
<span class="flex items-center gap-2"><i data-feather="zap" class="w-4 h-4"></i>11.8 TFLOPS</span> |
|
|
</div> |
|
|
<div class="mt-12"> |
|
|
<a href="#introduction" class="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-cyan-500/20"> |
|
|
Explore the Architecture |
|
|
<i data-feather="arrow-down" class="w-5 h-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="relative"> |
|
|
|
|
|
|
|
|
<section id="introduction" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="flex items-center gap-4 mb-8"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-cyan-400 to-blue-500 flex items-center justify-center text-white font-bold">01</div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold section-title">Introduction: From Dormant Workstations to Enterprise Powerhouse</h2> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 md:p-12 mb-8"> |
|
|
<p class="text-lg text-gray-300 leading-relaxed mb-6"> |
|
|
Imagine transforming three aging desktop computers sitting in your office into a <strong class="text-cyan-400">unified, enterprise-grade computing infrastructure</strong> capable of simultaneously hosting dozens of virtual servers and processing billions of cryptographic operations every second. This isn't science fiction—it's an achievable reality using three 2013 Mac Pro systems combined with open-source virtualization technology. |
|
|
</p> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 my-8"> |
|
|
<div class="spec-block p-6 rounded-xl"> |
|
|
<h4 class="text-cyan-400 font-semibold mb-3 flex items-center gap-2"> |
|
|
<i data-feather="package"></i> The "Trash Can" Treasure |
|
|
</h4> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
The 2013 Mac Pro's cylindrical design conceals professional-grade processors, substantial memory, multiple high-performance GPUs, and optimized thermal architecture. |
|
|
</p> |
|
|
</div> |
|
|
<div class="spec-block p-6 rounded-xl"> |
|
|
<h4 class="text-purple-400 font-semibold mb-3 flex items-center gap-2"> |
|
|
<i data-feather="layers"></i> Synergistic Clustering |
|
|
</h4> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
When networked together, three systems transform into infrastructure far more powerful than the sum of their parts—30 cores, 320GB RAM, and 6 AMD FirePro GPUs. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<blockquote class="border-l-4 border-cyan-500 pl-6 py-4 my-8 bg-gray-900/50 rounded-r-xl"> |
|
|
<p class="text-gray-300 italic"> |
|
|
"Your specific hardware—30 CPU cores, 320 GB of unified system memory, and six AMD FirePro GPUs—can be harnessed to create a high-availability virtualization infrastructure and distributed password-cracking environment that rivals enterprise systems costing tens of thousands of dollars." |
|
|
</p> |
|
|
</blockquote> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="hardware-strengths" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="flex items-center gap-4 mb-8"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center text-white font-bold">02</div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold section-title">Understanding Your Hardware's Unique Strengths</h2> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 md:p-12 mb-8"> |
|
|
<h3 class="text-2xl font-bold text-cyan-400 mb-6">The Remarkable Architecture of the 2013 Mac Pro</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
The 2013 Mac Pro introduced revolutionary engineering principles that few people fully appreciated at the time. Apple's design team created an <strong>integrated thermal ecosystem</strong> where a single centrally-mounted fan orchestrates cooling for the entire system through a triangular thermal core. |
|
|
</p> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 my-8"> |
|
|
<div class="node-card p-6 rounded-xl"> |
|
|
<h4 class="text-cyan-400 font-bold mb-3">Node 1 (Primary)</h4> |
|
|
<ul class="text-sm text-gray-400 space-y-2"> |
|
|
<li>• 12-core Xeon E5-2697 v2 @ 2.7GHz</li> |
|
|
<li>• 128GB DDR3 ECC RAM</li> |
|
|
<li>• Dual AMD FirePro D700</li> |
|
|
<li>• 2,048 stream processors per GPU</li> |
|
|
<li>• 6GB GDDR5 VRAM per card</li> |
|
|
<li>• 3.5 teraflops per card</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="node-card p-6 rounded-xl"> |
|
|
<h4 class="text-purple-400 font-bold mb-3">Node 2</h4> |
|
|
<ul class="text-sm text-gray-400 space-y-2"> |
|
|
<li>• Same CPU & memory as Node 1</li> |
|
|
<li>• 12-core Xeon E5-2697 v2</li> |
|
|
<li>• 128GB DDR3 ECC RAM</li> |
|
|
<li>• Dual AMD FirePro D300s</li> |
|
|
<li>• Optimized for compute workloads</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="node-card p-6 rounded-xl"> |
|
|
<h4 class="text-pink-400 font-bold mb-3">Node 3</h4> |
|
|
<ul class="text-sm text-gray-400 space-y-2"> |
|
|
<li>• 6-core Xeon @ 3.5GHz</li> |
|
|
<li>• 64GB DDR3 ECC RAM</li> |
|
|
<li>• Dual AMD FirePro D300s</li> |
|
|
<li>• Higher clock speed advantage</li> |
|
|
<li>• Specialized task optimization</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-purple-400 mb-6 mt-12">GPU Architecture & Parallel Processing</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Your AMD FirePro GPUs use <strong>Graphics Core Next (GCN) architecture</strong>—the first generation to introduce computational capabilities for non-graphics workloads. GPU acceleration transforms password cracking from sequential to massively parallel. |
|
|
</p> |
|
|
|
|
|
<div class="bg-gray-900/60 p-6 rounded-xl border border-cyan-500/20 my-8"> |
|
|
<h4 class="text-cyan-400 font-semibold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="zap"></i> SIMD Architecture Advantage |
|
|
</h4> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
GPUs contain <strong>thousands of smaller cores</strong> executing identical operations on different data simultaneously (Single Instruction, Multiple Data). This perfectly aligns with password cracking where each candidate password operates independently. |
|
|
</p> |
|
|
<div class="grid md:grid-cols-2 gap-4 text-sm"> |
|
|
<div> |
|
|
<span class="text-gray-500">CPU Performance:</span> |
|
|
<div class="text-2xl font-bold text-red-400">~5M hashes/sec</div> |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-gray-500">GPU Cluster Performance:</span> |
|
|
<div class="text-2xl font-bold text-green-400">~50B hashes/sec</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center mt-4 text-xs text-gray-500">100-200x speedup for MD5/NTLM algorithms</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-pink-400 mb-6 mt-12">OpenCL: The Open Standard</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Your AMD FirePro GPUs support <strong>OpenCL (Open Computing Language)</strong>, an open, vendor-neutral parallel computing standard. Unlike NVIDIA's proprietary CUDA, OpenCL enables cross-platform deployment and community-driven tools like Hashcat. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="virtualization-cluster" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="flex items-center gap-4 mb-8"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-pink-400 to-rose-500 flex items-center justify-center text-white font-bold">03</div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold section-title">The Virtualization Cluster Revolution</h2> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 md:p-12 mb-8"> |
|
|
<h3 class="text-2xl font-bold text-cyan-400 mb-6">What Virtualization Means in Practice</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Virtualization is fundamentally about <strong>abstraction</strong>—converting physical hardware resources into software-defined virtual machines that operate as independent computer systems. A <strong>Type 1 hypervisor</strong> installs directly onto hardware, eliminating performance overhead. |
|
|
</p> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 my-8"> |
|
|
<div class="benefit-card p-6 rounded-xl border-l-4 border-cyan-500"> |
|
|
<h4 class="text-cyan-400 font-bold mb-3">Superior Performance</h4> |
|
|
<p class="text-sm text-gray-400">Direct hardware interaction with no host OS overhead allocates resources far more efficiently to guest VMs.</p> |
|
|
</div> |
|
|
<div class="benefit-card p-6 rounded-xl border-l-4 border-purple-500"> |
|
|
<h4 class="text-purple-400 font-bold mb-3">Enhanced Security</h4> |
|
|
<p class="text-sm text-gray-400">Complete VM isolation prevents failures or compromises in one VM from affecting others.</p> |
|
|
</div> |
|
|
<div class="benefit-card p-6 rounded-xl border-l-4 border-pink-500"> |
|
|
<h4 class="text-pink-400 font-bold mb-3">Scalability</h4> |
|
|
<p class="text-sm text-gray-400">Manage hundreds of VMs across multiple physical servers using identical architectural principles.</p> |
|
|
</div> |
|
|
<div class="benefit-card p-6 rounded-xl border-l-4 border-rose-500"> |
|
|
<h4 class="text-rose-400 font-bold mb-3">Advanced Resource Management</h4> |
|
|
<p class="text-sm text-gray-400">CPU scheduling, memory overcommitment, and dynamic allocation optimize utilization across the cluster.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-r from-cyan-500/10 to-purple-500/10 p-8 rounded-xl my-8 border border-cyan-500/20"> |
|
|
<h4 class="text-cyan-400 font-bold text-xl mb-4">Cluster Capacity Analysis</h4> |
|
|
<div class="grid md:grid-cols-3 gap-6 text-center"> |
|
|
<div> |
|
|
<div class="text-4xl font-bold text-cyan-400 mb-2">40-80</div> |
|
|
<div class="text-sm text-gray-400">Concurrent VMs</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-4xl font-bold text-purple-400 mb-2">2-8GB</div> |
|
|
<div class="text-sm text-gray-400">RAM per VM</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-4xl font-bold text-pink-400 mb-2">99.9%</div> |
|
|
<div class="text-sm text-gray-400">Uptime Potential</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-purple-400 mb-6 mt-12">Real-World Use Cases</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="use-case-card p-6 rounded-xl"> |
|
|
<h4 class="text-cyan-400 font-bold mb-3 flex items-center gap-2"> |
|
|
<i data-feather="code"></i> Development & Testing Environments |
|
|
</h4> |
|
|
<p class="text-gray-400 mb-3">Eliminate "it works on my machine" syndrome through instant, identical environment provisioning. Snapshot functionality enables risk-free experimentation with instant rollback.</p> |
|
|
<div class="text-xs text-gray-500 flex gap-4"> |
|
|
<span>Perfect for: CI/CD pipelines</span> |
|
|
<span>• Container orchestration</span> |
|
|
<span>• Microservices testing</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="use-case-card p-6 rounded-xl"> |
|
|
<h4 class="text-purple-400 font-bold mb-3 flex items-center gap-2"> |
|
|
<i data-feather="briefcase"></i> Small Business Server Consolidation |
|
|
</h4> |
|
|
<p class="text-gray-400 mb-3">Collapse file servers, domain controllers, email, databases, and web servers onto shared hardware with automatic failover—reducing costs while improving reliability.</p> |
|
|
<div class="text-xs text-gray-500">ROI: 60-80% reduction in hardware & power costs</div> |
|
|
</div> |
|
|
|
|
|
<div class="use-case-card p-6 rounded-xl"> |
|
|
<h4 class="text-pink-400 font-bold mb-3 flex items-center gap-2"> |
|
|
<i data-feather="shield"></i> Security Research & Isolated Testing |
|
|
</h4> |
|
|
<p class="text-gray-400 mb-3">Perfect sandboxes for malware analysis, exploit development, and network simulation. Network restrictions prevent escape; snapshots enable rapid iteration.</p> |
|
|
<div class="text-xs text-gray-500">Critical for: Penetration testing • Forensics • Threat analysis</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-rose-400 mb-6 mt-12">High-Availability Advantage</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
With HA enabled, node failures trigger automatic VM restart on surviving nodes within <strong>2-3 minutes</strong> instead of 4-8 hours of manual recovery. This is powered by <strong>Corosync</strong> (cluster communication) and <strong>Pacemaker</strong> (resource management). |
|
|
</p> |
|
|
|
|
|
<div class="bg-gray-900/60 p-6 rounded-xl border border-rose-500/20"> |
|
|
<div class="grid md:grid-cols-2 gap-6 items-center"> |
|
|
<div> |
|
|
<h5 class="text-rose-400 font-semibold mb-3">Traditional Recovery</h5> |
|
|
<div class="space-y-2 text-sm"> |
|
|
<div class="flex justify-between"><span>Detection:</span><span class="text-red-400">15-30 min</span></div> |
|
|
<div class="flex justify-between"><span>Hardware Procurement:</span><span class="text-red-400">2-6 hours</span></div> |
|
|
<div class="flex justify-between"><span>Reinstallation:</span><span class="text-red-400">1-2 hours</span></div> |
|
|
<div class="flex justify-between font-bold border-t border-gray-700 pt-2"><span>Total Downtime:</span><span class="text-red-400">4-8 hours</span></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h5 class="text-cyan-400 font-semibold mb-3">HA Cluster Recovery</h5> |
|
|
<div class="space-y-2 text-sm"> |
|
|
<div class="flex justify-between"><span>Detection:</span><span class="text-green-400">10-30 sec</span></div> |
|
|
<div class="flex justify-between"><span>Automatic Failover:</span><span class="text-green-400">1-2 min</span></div> |
|
|
<div class="flex justify-between"><span>VM Restart:</span><span class="text-green-400">30-60 sec</span></div> |
|
|
<div class="flex justify-between font-bold border-t border-gray-700 pt-2"><span>Total Downtime:</span><span class="text-green-400">2-3 minutes</span></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gpu-cracking" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="flex items-center gap-4 mb-8"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-rose-400 to-orange-500 flex items-center justify-center text-white font-bold">04</div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold section-title">Harnessing GPU Power for Distributed Hash Cracking</h2> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 md:p-12 mb-8"> |
|
|
<h3 class="text-2xl font-bold text-cyan-400 mb-6">The Cryptographic Foundation</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Modern systems store passwords as <strong>cryptographic hashes</strong>—one-way mathematical operations that are deterministic, fast to compute forward, and computationally infeasible to reverse. Recovery requires systematic brute-force testing of candidate passwords. |
|
|
</p> |
|
|
|
|
|
<div class="bg-gray-900/60 p-6 rounded-xl border border-orange-500/20 my-8"> |
|
|
<h4 class="text-orange-400 font-semibold mb-4 flex items-center gap-2"> |
|
|
<i data-feather="key"></i> Pleasantly Parallel Problem |
|
|
</h4> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Password cracking is "pleasantly parallel"—each attempt is independent with zero communication between candidates. This maps perfectly to GPU architecture. |
|
|
</p> |
|
|
<div class="grid md:grid-cols-2 gap-4"> |
|
|
<div class="text-center p-4 bg-black/40 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-cyan-400">7,168</div> |
|
|
<div class="text-xs text-gray-500">Total GPU Cores</div> |
|
|
</div> |
|
|
<div class="text-center p-4 bg-black/40 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-purple-400">100-300x</div> |
|
|
<div class="text-xs text-gray-500">Speedup vs CPU</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-purple-400 mb-6 mt-12">Performance Characteristics</h3> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="performance-card p-6 rounded-xl border border-green-500/20"> |
|
|
<h4 class="text-green-400 font-bold mb-4">Fast Algorithms (MD5, NTLM)</h4> |
|
|
<div class="text-3xl font-mono text-green-400 mb-2">30-60B</div> |
|
|
<div class="text-sm text-gray-400 mb-4">hashes/second</div> |
|
|
<div class="text-xs text-gray-500">8-char password space: ~48 hours</div> |
|
|
</div> |
|
|
<div class="performance-card p-6 rounded-xl border border-yellow-500/20"> |
|
|
<h4 class="text-yellow-400 font-bold mb-4">Moderate (SHA-256)</h4> |
|
|
<div class="text-3xl font-mono text-yellow-400 mb-2">5-8B</div> |
|
|
<div class="text-sm text-gray-400 mb-4">hashes/second</div> |
|
|
<div class="text-xs text-gray-500">Still formidable for auditing</div> |
|
|
</div> |
|
|
<div class="performance-card p-6 rounded-xl border border-red-500/20"> |
|
|
<h4 class="text-red-400 font-bold mb-4">Resistant (bcrypt, Argon2)</h4> |
|
|
<div class="text-3xl font-mono text-red-400 mb-2">50-100K</div> |
|
|
<div class="text-sm text-gray-400 mb-4">hashes/second</div> |
|
|
<div class="text-xs text-gray-500">Sufficient for policy auditing</div> |
|
|
</div> |
|
|
<div class="performance-card p-6 rounded-xl border border-blue-500/20"> |
|
|
<h4 class="text-blue-400 font-bold mb-4">WPA/WPA2 (PBKDF2)</h4> |
|
|
<div class="text-3xl font-mono text-blue-400 mb-2">200-400K</div> |
|
|
<div class="text-sm text-gray-400 mb-4">hashes/second</div> |
|
|
<div class="text-xs text-gray-500">Practical for wireless assessment</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-orange-400 mb-6 mt-12">Hashtopolis: Distributed Orchestration</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Hashtopolis provides client-server architecture for coordinating password cracking across heterogeneous systems through a web-based interface. |
|
|
</p> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 my-8"> |
|
|
<div class="component-card p-6 rounded-xl"> |
|
|
<h4 class="text-cyan-400 font-bold mb-3 flex items-center gap-2"> |
|
|
<i data-feather="server"></i> Server Component |
|
|
</h4> |
|
|
<p class="text-sm text-gray-400">Central task coordinator hosting web interface and database. Calculates optimal work distribution based on agent capabilities and load.</p> |
|
|
</div> |
|
|
<div class="component-card p-6 rounded-xl"> |
|
|
<h4 class="text-purple-400 font-bold mb-3 flex items-center gap-2"> |
|
|
<i data-feather="cpu"></i> Agent Nodes |
|
|
</h4> |
|
|
<p class="text-sm text-gray-400">Lightweight Python clients on each Mac Pro execute cracking operations using Hashcat and report progress to the server.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/60 p-6 rounded-xl border border-cyan-500/20 my-8"> |
|
|
<h4 class="text-cyan-400 font-semibold mb-4">Hashtopolis Architecture Benefits</h4> |
|
|
<ul class="grid md:grid-cols-2 gap-3 text-sm text-gray-400"> |
|
|
<li class="flex items-center gap-2"><i data-feather="trending-up" class="w-4 h-4 text-green-400"></i> Linear scalability</li> |
|
|
<li class="flex items-center gap-2"><i data-feather="settings" class="w-4 h-4 text-blue-400"></i> Heterogeneous support</li> |
|
|
<li class="flex items-center gap-2"><i data-feather="refresh-cw" class="w-4 h-4 text-purple-400"></i> Automatic failure recovery</li> |
|
|
<li class="flex items-center gap-2"><i data-feather="users" class="w-4 h-4 text-pink-400"></i> Multi-user support</li> |
|
|
<li class="flex items-center gap-2"><i data-feather="shield" class="w-4 h-4 text-orange-400"></i> Trusted agent designation</li> |
|
|
<li class="flex items-center gap-2"><i data-feather="bar-chart-2" class="w-4 h-4 text-cyan-400"></i> Comprehensive reporting</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-rose-400 mb-6 mt-12">Legitimate Applications</h3> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div class="use-case-card p-6 rounded-xl"> |
|
|
<h4 class="text-green-400 font-bold mb-3">Penetration Testing</h4> |
|
|
<p class="text-sm text-gray-400">Demonstrate password strength weaknesses to clients, driving policy improvements for stronger requirements.</p> |
|
|
</div> |
|
|
<div class="use-case-card p-6 rounded-xl"> |
|
|
<h4 class="text-blue-400 font-bold mb-3">Corporate Auditing</h4> |
|
|
<p class="text-sm text-gray-400">Proactively identify weak credentials in your own databases before attackers exploit them.</p> |
|
|
</div> |
|
|
<div class="use-case-card p-6 rounded-xl"> |
|
|
<h4 class="text-purple-400 font-bold mb-3">Digital Forensics</h4> |
|
|
<p class="text-sm text-gray-400">Crack passwords on encrypted evidence during security incidents or criminal investigations.</p> |
|
|
</div> |
|
|
<div class="use-case-card p-6 rounded-xl"> |
|
|
<h4 class="text-pink-400 font-bold mb-3">Security Research</h4> |
|
|
<p class="text-sm text-gray-400">Develop and test new cracking techniques, optimization algorithms, and password analysis methodologies.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="clustering-synergy" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="flex items-center gap-4 mb-8"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-orange-400 to-red-500 flex items-center justify-center text-white font-bold">05</div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold section-title">The Synergy of Clustering</h2> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 md:p-12 mb-8"> |
|
|
<h3 class="text-2xl font-bold text-cyan-400 mb-6">Why Three Nodes Changes Everything</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Two nodes double throughput but offer limited redundancy. <strong>Three nodes create architectural resilience</strong>—surviving failures while maintaining service through automatic failover and live migration. |
|
|
</p> |
|
|
|
|
|
<div class="bg-gradient-to-r from-cyan-500/10 to-purple-500/10 p-8 rounded-xl my-8 border border-cyan-500/20"> |
|
|
<h4 class="text-cyan-400 font-bold mb-6">Cluster Resilience Comparison</h4> |
|
|
<div class="grid md:grid-cols-3 gap-6 text-center"> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-red-400 mb-2">Single Node</div> |
|
|
<div class="text-sm text-gray-400 mb-3">No redundancy</div> |
|
|
<div class="text-xs text-gray-500">Failure = 100% downtime</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-yellow-400 mb-2">Dual Node</div> |
|
|
<div class="text-sm text-gray-400 mb-3">50% capacity loss</div> |
|
|
<div class="text-xs text-gray-500">Potential downtime during recovery</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-2xl font-bold text-green-400 mb-2">Three Node</div> |
|
|
<div class="text-sm text-gray-400 mb-3">33% capacity loss</div> |
|
|
<div class="text-xs text-gray-500">Zero downtime with HA</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-purple-400 mb-6 mt-12">Network Architecture Advantage</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Your Mac Pros feature dual Gigabit Ethernet plus six Thunderbolt 2 ports (20 Gbps bidirectional), enabling sophisticated traffic separation. |
|
|
</p> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 my-8"> |
|
|
<div class="network-card p-6 rounded-xl"> |
|
|
<div class="flex items-center gap-3 mb-3"> |
|
|
<div class="w-3 h-3 rounded-full bg-cyan-400"></div> |
|
|
<h4 class="text-cyan-400 font-bold">Management Network</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-400">Cluster communication & web interface. Low-bandwidth, latency-sensitive coordination.</p> |
|
|
</div> |
|
|
<div class="network-card p-6 rounded-xl"> |
|
|
<div class="flex items-center gap-3 mb-3"> |
|
|
<div class="w-3 h-3 rounded-full bg-purple-400"></div> |
|
|
<h4 class="text-purple-400 font-bold">Storage Network</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-400">VM disk I/O traffic. High-bandwidth, throughput-sensitive operations.</p> |
|
|
</div> |
|
|
<div class="network-card p-6 rounded-xl"> |
|
|
<div class="flex items-center gap-3 mb-3"> |
|
|
<div class="w-3 h-3 rounded-full bg-pink-400"></div> |
|
|
<h4 class="text-pink-400 font-bold">Live Migration</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-400">VM movement between nodes. Dedicated high-bandwidth traffic prevents interference.</p> |
|
|
</div> |
|
|
<div class="network-card p-6 rounded-xl"> |
|
|
<div class="flex items-center gap-3 mb-3"> |
|
|
<div class="w-3 h-3 rounded-full bg-orange-400"></div> |
|
|
<h4 class="text-orange-400 font-bold">Application Network</h4> |
|
|
</div> |
|
|
<p class="text-sm text-gray-400">VM-to-external-world traffic. User-facing service communication.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/60 p-8 rounded-xl border border-cyan-500/20 my-8"> |
|
|
<h4 class="text-cyan-400 font-bold text-xl mb-6">Total Cluster Resources</h4> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 text-center"> |
|
|
<div class="resource-stat"> |
|
|
<div class="text-4xl font-bold text-cyan-400 mb-2" data-stat="30">0</div> |
|
|
<div class="text-sm text-gray-400">CPU Cores</div> |
|
|
</div> |
|
|
<div class="resource-stat"> |
|
|
<div class="text-4xl font-bold text-purple-400 mb-2">320GB</div> |
|
|
<div class="text-sm text-gray-400">Unified RAM</div> |
|
|
</div> |
|
|
<div class="resource-stat"> |
|
|
<div class="text-4xl font-bold text-pink-400 mb-2" data-stat="6">0</div> |
|
|
<div class="text-sm text-gray-400">AMD FirePro GPUs</div> |
|
|
</div> |
|
|
<div class="resource-stat"> |
|
|
<div class="text-4xl font-bold text-orange-400 mb-2" data-stat="7168">0</div> |
|
|
<div class="text-sm text-gray-400">Total GPU Cores</div> |
|
|
</div> |
|
|
<div class="resource-stat"> |
|
|
<div class="text-4xl font-bold text-green-400 mb-2">11.8</div> |
|
|
<div class="text-sm text-gray-400">Theoretical TFLOPS</div> |
|
|
</div> |
|
|
<div class="resource-stat"> |
|
|
<div class="text-4xl font-bold text-rose-400 mb-2">99.9%</div> |
|
|
<div class="text-sm text-gray-400">Uptime with HA</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="educational-value" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="flex items-center gap-4 mb-8"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-red-400 to-pink-500 flex items-center justify-center text-white font-bold">06</div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold section-title">Educational & Career Development Value</h2> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 md:p-12 mb-8"> |
|
|
<blockquote class="border-l-4 border-cyan-500 pl-6 py-4 my-6 bg-gray-900/50 rounded-r-xl"> |
|
|
<p class="text-gray-300 italic text-lg"> |
|
|
"Hands-on infrastructure experience cannot be simulated. The freedom to break systems deliberately and learn from failure accelerates skill development far beyond passive observation." |
|
|
</p> |
|
|
</blockquote> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 my-8"> |
|
|
<div class="learning-card p-6 rounded-xl"> |
|
|
<h4 class="text-cyan-400 font-bold mb-4 flex items-center gap-3"> |
|
|
<i data-feather="alert-triangle" class="w-5 h-5"></i> Failure Modes & Recovery |
|
|
</h4> |
|
|
<p class="text-sm text-gray-400">Witnessing automatic VM migration during node failures creates deep understanding that no lecture can convey.</p> |
|
|
</div> |
|
|
<div class="learning-card p-6 rounded-xl"> |
|
|
<h4 class="text-purple-400 font-bold mb-4 flex items-center gap-3"> |
|
|
<i data-feather="sliders" class="w-5 h-5"></i> Optimization & Tuning |
|
|
</h4> |
|
|
<p class="text-sm text-gray-400">Real performance problems teach systems thinking and troubleshooting methodology applicable across IT domains.</p> |
|
|
</div> |
|
|
<div class="learning-card p-6 rounded-xl"> |
|
|
<h4 class="text-pink-400 font-bold mb-4 flex items-center gap-3"> |
|
|
<i data-feather="git-branch" class="w-5 h-5"></i> Unexpected Interactions |
|
|
</h4> |
|
|
<p class="text-sm text-gray-400">Multi-node operation reveals network dependencies and storage challenges that single-system operation obscures.</p> |
|
|
</div> |
|
|
<div class="learning-card p-6 rounded-xl"> |
|
|
<h4 class="text-orange-400 font-bold mb-4 flex items-center gap-3"> |
|
|
<i data-feather="tool" class="w-5 h-5"></i> Enterprise Tool Mastery |
|
|
</h4> |
|
|
<p class="text-sm text-gray-400">Operating Proxmox VE, configuring storage backends, implementing backup policies—these become muscle memory.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-cyan-400 mb-6 mt-12">Career Development Impact</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Your cluster provides undeniable interview ammunition. Discussing VM placement strategies, backup policies, or network latency debugging in your personal cluster proves hands-on competence that transcends credentials. |
|
|
</p> |
|
|
|
|
|
<div class="bg-gradient-to-r from-cyan-500/10 to-purple-500/10 p-8 rounded-xl my-8 border border-cyan-500/20"> |
|
|
<h4 class="text-cyan-400 font-bold mb-4">Learning Freedom of Home Labs</h4> |
|
|
<p class="text-gray-400 mb-6">Unlike production infrastructure where mistakes cause business disruption, your home lab tolerates experimentation and failure. Break systems deliberately, restore snapshots, iterate rapidly without consequences beyond personal time investment.</p> |
|
|
<div class="grid md:grid-cols-3 gap-4 text-sm"> |
|
|
<div class="text-center p-4 bg-black/40 rounded-lg"> |
|
|
<i data-feather="zap" class="w-8 h-8 text-cyan-400 mx-auto mb-2"></i> |
|
|
<div class="font-bold text-cyan-400">Stress Testing</div> |
|
|
<div class="text-gray-500">Understand performance boundaries</div> |
|
|
</div> |
|
|
<div class="text-center p-4 bg-black/40 rounded-lg"> |
|
|
<i data-feather="refresh-cw" class="w-8 h-8 text-purple-400 mx-auto mb-2"></i> |
|
|
<div class="font-bold text-purple-400">Recovery Drills</div> |
|
|
<div class="text-gray-500">Test backup & restore procedures</div> |
|
|
</div> |
|
|
<div class="text-center p-4 bg-black/40 rounded-lg"> |
|
|
<i data-feather="target" class="w-8 h-8 text-pink-400 mx-auto mb-2"></i> |
|
|
<div class="font-bold text-pink-400">Optimization</div> |
|
|
<div class="text-gray-500">Experiment without data loss risk</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="career-paths grid md:grid-cols-3 gap-6 my-8"> |
|
|
<div class="path-card p-6 rounded-xl text-center"> |
|
|
<i data-feather="trending-up" class="w-12 h-12 text-cyan-400 mx-auto mb-4"></i> |
|
|
<h4 class="text-cyan-400 font-bold mb-2">IT Professionals</h4> |
|
|
<p class="text-xs text-gray-400">Low-risk experimentation platform for exploring technologies before production deployment</p> |
|
|
</div> |
|
|
<div class="path-card p-6 rounded-xl text-center"> |
|
|
<i data-feather="user-plus" class="w-12 h-12 text-purple-400 mx-auto mb-4"></i> |
|
|
<h4 class="text-purple-400 font-bold mb-2">Career Changers</h4> |
|
|
<p class="text-xs text-gray-400">Demonstrable hands-on experience that bridges theoretical knowledge to practical competence</p> |
|
|
</div> |
|
|
<div class="path-card p-6 rounded-xl text-center"> |
|
|
<i data-feather="graduation-cap" class="w-12 h-12 text-pink-400 mx-auto mb-4"></i> |
|
|
<h4 class="text-pink-400 font-bold mb-2">Students</h4> |
|
|
<p class="text-xs text-gray-400">Foundation for cloud infrastructure, Kubernetes, and modern DevOps practices</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="practical-advantages" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="flex items-center gap-4 mb-8"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center text-white font-bold">07</div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold section-title">Practical Advantages & Synergies</h2> |
|
|
</div> |
|
|
|
|
|
<div class="glass-card p-8 md:p-12 mb-8"> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold text-cyan-400 mb-6">Resource Consolidation</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Traditional server utilization: <strong>15-20%</strong>. Your cluster achieves 60-80% utilization through dynamic workload scheduling, reducing power, cooling, and space requirements. |
|
|
</p> |
|
|
<div class="space-y-3 text-sm"> |
|
|
<div class="flex justify-between"><span>Power Savings:</span><span class="text-green-400">60-70%</span></div> |
|
|
<div class="flex justify-between"><span>Space Reduction:</span><span class="text-green-400">75%</span></div> |
|
|
<div class="flex justify-between"><span>Cooling Load:</span><span class="text-green-400">65% less</span></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold text-purple-400 mb-6">Financial Economics</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Enterprise-equivalent infrastructure would cost tens of thousands. Your approach leverages existing hardware and open-source software (Proxmox VE, Hashtopolis, Hashcat are free). |
|
|
</p> |
|
|
<div class="space-y-3 text-sm"> |
|
|
<div class="flex justify-between"><span>Hardware Cost:</span><span class="text-green-400">$0 (repurposed)</span></div> |
|
|
<div class="flex justify-between"><span>Software Licensing:</span><span class="text-green-400">$0 (open-source)</span></div> |
|
|
<div class="flex justify-between"><span>Total Investment:</span><span class="text-green-400">Time & learning</span></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="my-12 p-8 rounded-xl bg-gradient-to-r from-cyan-500/10 to-purple-500/10 border border-cyan-500/20"> |
|
|
<h3 class="text-2xl font-bold text-cyan-400 mb-6 text-center">Sustainability & Independence</h3> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div class="text-center p-6 bg-black/40 rounded-xl"> |
|
|
<i data-feather="refresh-ccw" class="w-10 h-10 text-green-400 mx-auto mb-4"></i> |
|
|
<h4 class="text-green-400 font-bold mb-2">Hardware Lifecyle Extension</h4> |
|
|
<p class="text-sm text-gray-400">Extract 5-7 additional years from systems destined for recycling</p> |
|
|
</div> |
|
|
<div class="text-center p-6 bg-black/40 rounded-xl"> |
|
|
<i data-feather="unlock" class="w-10 h-10 text-purple-400 mx-auto mb-4"></i> |
|
|
<h4 class="text-purple-400 font-bold mb-2">Vendor Independence</h4> |
|
|
<p class="text-sm text-gray-400">Avoid lock-in from proprietary solutions and ecosystem decisions</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="warning-card p-6 rounded-xl border border-yellow-500/20"> |
|
|
<h4 class="text-yellow-400 font-bold mb-3 flex items-center gap-2"> |
|
|
<i data-feather="alert-triangle"></i> Important Considerations |
|
|
</h4> |
|
|
<ul class="text-sm text-gray-400 space-y-2"> |
|
|
<li>• Thermal management requires attention during sustained high-load operations</li> |
|
|
<li>• GPU compatibility may constrain certain specialized applications</li> |
|
|
<li>• Lack of upgradeability ensures eventual obsolescence</li> |
|
|
<li>• Realistic expectations: ~1/4 performance of modern RTX 4090 for fast hashes</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="conclusion" class="py-20 relative"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<div class="glass-card p-12 md:p-16 mb-8"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-8"> |
|
|
<span class="bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent"> |
|
|
Transforming Potential Into Reality |
|
|
</span> |
|
|
</h2> |
|
|
|
|
|
<div class="text-left max-w-3xl mx-auto mb-10"> |
|
|
<p class="text-lg text-gray-300 mb-6 leading-relaxed"> |
|
|
Your three Mac Pro 2013 systems represent a remarkable opportunity. What many dismiss as outdated consumer hardware actually embodies professional-grade capabilities: substantial processing power, generous memory, dedicated GPU acceleration, and carefully engineered thermal architecture. |
|
|
</p> |
|
|
|
|
|
<p class="text-lg text-gray-300 mb-6 leading-relaxed"> |
|
|
Combined through clustering and orchestrated by enterprise-class virtualization software, they transform into infrastructure rivaling systems costing tens of thousands of dollars. |
|
|
</p> |
|
|
|
|
|
<p class="text-lg text-gray-300 mb-8 leading-relaxed"> |
|
|
The virtualization use case enables hosting dozens of concurrent virtual machines. The distributed cracking use case leverages GPU acceleration to achieve billions of cryptographic operations per second. Beyond capabilities, your cluster provides exceptional educational value and experimental freedom. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 mb-10 text-left"> |
|
|
<div class="final-card p-6 rounded-xl"> |
|
|
<h4 class="text-cyan-400 font-bold mb-3">Virtualization Excellence</h4> |
|
|
<p class="text-sm text-gray-400">40-80 concurrent VMs with automatic failover reducing downtime from hours to minutes.</p> |
|
|
</div> |
|
|
<div class="final-card p-6 rounded-xl"> |
|
|
<h4 class="text-purple-400 font-bold mb-3">GPU Compute Power</h4> |
|
|
<p class="text-sm text-gray-400">30-60 billion hash attempts per second for legitimate security applications.</p> |
|
|
</div> |
|
|
<div class="final-card p-6 rounded-xl"> |
|
|
<h4 class="text-pink-400 font-bold mb-3">Educational Platform</h4> |
|
|
<p class="text-sm text-gray-400">Hands-on experience with enterprise technologies in a risk-free environment.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900/60 p-8 rounded-xl border border-cyan-500/20 mb-8"> |
|
|
<p class="text-gray-300 italic text-lg"> |
|
|
"Your three Mac Pros are ready to become something far greater than the sum of their components. The opportunity awaits." |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-4 justify-center items-center mt-8"> |
|
|
<a href="#introduction" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-semibold hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 transform hover:scale-105"> |
|
|
<i data-feather="rotate-ccw" class="w-5 h-5"></i> |
|
|
Start Over |
|
|
</a> |
|
|
<a href="https://github.com/public-apis/public-apis" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 border border-cyan-500/40 rounded-full font-semibold hover:bg-cyan-500/10 transition-all duration-300"> |
|
|
<i data-feather="external-link" class="w-5 h-5"></i> |
|
|
Explore APIs |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
</main> |
|
|
|
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
