File size: 12,386 Bytes
1380c1d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insights | The Code Company</title>
<meta name="description" content="Thought leadership on AI, infrastructure, and governance.">
<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>
</head>
<body class="bg-navy-900 text-ivory-100 font-sans">
<custom-navbar></custom-navbar>
<main class="pt-20">
<!-- Hero Section -->
<section class="relative py-32 bg-gradient-to-b from-navy-800 to-navy-900">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-serif font-bold mb-6 text-gold-500">Insights</h1>
<p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed">
Perspectives on engineering intelligent systems — from technical architectures to governance frameworks.
</p>
</div>
</section>
<!-- Featured Post -->
<section class="py-16 bg-navy-900">
<div class="container mx-auto px-6">
<div class="bg-navy-800 rounded-sm overflow-hidden grid md:grid-cols-2">
<div class="p-12">
<div class="flex items-center mb-4">
<span class="bg-gold-500/10 text-gold-500 text-xs px-3 py-1 rounded-full">Featured</span>
<span class="text-platinum-400 text-sm ml-4">June 2023</span>
</div>
<h2 class="text-3xl md:text-4xl font-serif font-bold mb-4">Engineering AI Observability</h2>
<p class="text-platinum-400 mb-6">
Modern AI systems require new approaches to monitoring that go beyond traditional metrics. We examine the architectural patterns and tooling needed for production-grade observability.
</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="bg-navy-700 text-xs px-2 py-1 rounded">AI Engineering</span>
<span class="bg-navy-700 text-xs px-2 py-1 rounded">Observability</span>
<span class="bg-navy-700 text-xs px-2 py-1 rounded">Monitoring</span>
</div>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read Article <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
<div class="hidden md:block">
<img src="http://static.photos/technology/640x360/5" alt="AI Observability" class="w-full h-full object-cover">
</div>
</div>
</div>
</section>
<!-- Insights Grid -->
<section class="py-20 bg-navy-900">
<div class="container mx-auto px-6">
<div class="flex justify-between items-center mb-12">
<h2 class="text-2xl md:text-3xl font-serif font-bold text-gold-500">Latest Perspectives</h2>
<div class="flex items-center">
<span class="text-platinum-400 mr-3">Filter by topic:</span>
<select class="bg-navy-800 border border-navy-700 text-platinum-400 rounded-sm px-4 py-2">
<option>All Topics</option>
<option>AI Engineering</option>
<option>Cloud Infrastructure</option>
<option>Technical Strategy</option>
<option>Government Policy</option>
</select>
</div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/technology/640x360/6" alt="GPU Infrastructure" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="text-platinum-400 text-sm">May 2023</span>
</div>
<h3 class="text-xl font-bold mb-3">Optimizing GPU Cloud Costs</h3>
<p class="text-platinum-400 mb-4">Practical strategies for reducing cloud GPU spend while maintaining performance for AI workloads.</p>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/legal/640x360/2" alt="AI Governance" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="text-platinum-400 text-sm">April 2023</span>
</div>
<h3 class="text-xl font-bold mb-3">AI Procurement Best Practices</h3>
<p class="text-platinum-400 mb-4">How government agencies can structure AI acquisitions to ensure technical and ethical requirements are met.</p>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/technology/640x360/7" alt="AI Testing" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="text-platinum-400 text-sm">March 2023</span>
</div>
<h3 class="text-xl font-bold mb-3">Red Teaming AI Systems</h3>
<p class="text-platinum-400 mb-4">Our framework for adversarial testing of production AI systems to uncover vulnerabilities.</p>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/technology/640x360/8" alt="AI Strategy" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="text-platinum-400 text-sm">February 2023</span>
</div>
<h3 class="text-xl font-bold mb-3">Technical Debt in AI Systems</h3>
<p class="text-platinum-400 mb-4">Identifying and addressing technical debt patterns unique to machine learning systems.</p>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/technology/640x360/9" alt="Kubernetes" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="text-platinum-400 text-sm">January 2023</span>
</div>
<h3 class="text-xl font-bold mb-3">Kubernetes for AI Workloads</h3>
<p class="text-platinum-400 mb-4">Architecture patterns and operational considerations for running GPU workloads at scale.</p>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="bg-navy-800 rounded-sm overflow-hidden hover:shadow-lg hover:shadow-gold-500/10 transition-all duration-300">
<img src="http://static.photos/legal/640x360/3" alt="AI Policy" class="w-full h-48 object-cover">
<div class="p-8">
<div class="flex items-center mb-2">
<span class="text-platinum-400 text-sm">December 2022</span>
</div>
<h3 class="text-xl font-bold mb-3">AI Governance Frameworks</h3>
<p class="text-platinum-400 mb-4">Comparing technical implementations of emerging AI governance requirements.</p>
<a href="#" class="text-gold-500 font-medium inline-flex items-center group">
Read More <i data-feather="arrow-right" class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
</div>
<div class="flex justify-center mt-16">
<button class="border border-gold-500 text-gold-500 hover:bg-gold-500/10 font-bold py-3 px-8 rounded-sm transition-all duration-300">
Load More Articles
</button>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="py-20 bg-navy-800">
<div class="container mx-auto px-6 max-w-4xl text-center">
<h2 class="text-3xl md:text-4xl font-serif font-bold mb-6 text-gold-500">Stay Informed</h2>
<p class="text-platinum-400 mb-8 max-w-2xl mx-auto">
Subscribe to our newsletter for the latest insights on engineering intelligent systems.
</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
<input type="email" placeholder="Your email address" class="flex-grow bg-navy-700 border border-navy-600 text-platinum-400 px-4 py-3 rounded-sm focus:outline-none focus:ring-2 focus:ring-gold-500">
<button type="submit" class="bg-gold-500 hover:bg-gold-600 text-navy-900 font-bold py-3 px-8 rounded-sm transition-all duration-300 transform hover:scale-105">
Subscribe
</button>
</form>
</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>
</body>
</html> |