-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
372 lines (344 loc) · 28.8 KB
/
index.html
File metadata and controls
372 lines (344 loc) · 28.8 KB
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KernelGuard - Engineering Tomorrow's Software</title>
<meta name="description" content="Secure systems, intelligent infrastructure, and scalable web platforms.">
<link rel="stylesheet" href="css/style.css">
<script src="js/error-boundary.js"></script>
<script src="js/theme.js"></script>
<script src="js/main.js" defer></script>
<script src="js/i18n.js" defer></script>
<script src="js/ui.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script src="js/contact.js" defer></script>
</head>
<body>
<!-- Global Navigation -->
<header class="navbar">
<div class="container">
<div class="nav-brand">
<a href="index.html" style="display:flex; align-items:center; text-decoration:none; color:inherit; font-family: var(--font-sans);">
<svg viewBox="0 0 32 32" width="24" height="24" style="margin-right: 12px; flex-shrink: 0;">
<circle cx="4" cy="4" r="3" fill="#0043CE" opacity="0.2"/>
<circle cx="28" cy="4" r="3" fill="#0043CE" opacity="0.2"/>
<circle cx="4" cy="28" r="3" fill="#0043CE" opacity="0.2"/>
<circle cx="28" cy="28" r="3" fill="#0043CE" opacity="0.2"/>
<circle cx="16" cy="4" r="3" fill="#0043CE" opacity="0.6"/>
<circle cx="4" cy="16" r="3" fill="#0043CE" opacity="0.6"/>
<circle cx="28" cy="16" r="3" fill="#0043CE" opacity="0.6"/>
<circle cx="16" cy="28" r="3" fill="#0043CE" opacity="0.6"/>
<circle cx="16" cy="16" r="4.5" fill="#0043CE"/>
</svg>
<div><span style="font-weight: 300; letter-spacing: 0.5px;">Kernel</span><span style="font-weight: 700;">Guard</span></div>
</a>
</div>
<nav class="nav-links">
<a href="#services" data-i18n="nav.whatWeBuild">What We Build</a>
<a href="#work" data-i18n="nav.projects">Projects</a>
<a href="#about" data-i18n="nav.about">About</a>
<a href="#contact" data-i18n="nav.contact">Contact</a>
</nav>
<div class="nav-actions">
<button class="nav-action-btn theme-toggle" id="btn-theme" aria-label="Toggle Theme" title="Toggle Theme">
<svg class="icon-sun" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
<svg class="icon-moon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
</button>
<button class="nav-action-btn" id="btn-search" aria-label="Search" title="Search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</button>
<button class="nav-action-btn indicator-dot" id="btn-lang" aria-label="Language" title="Language">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
</button>
<!-- Language Dropdown -->
<div class="nav-dropdown nav-dropdown-lang" id="dropdown-lang">
<div class="dropdown-header" data-i18n="nav.lang.header">Select Language</div>
<div class="lang-row active" data-lang="en">🇬🇧 English</div>
<div class="lang-row" data-lang="tr">🇹🇷 Türkçe</div>
<div class="lang-row" data-lang="de">🇩🇪 Deutsch</div>
<div class="lang-row" data-lang="fr">🇫🇷 Français</div>
</div>
<button class="nav-action-btn" id="btn-help" aria-label="Help" title="Help">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
</button>
<a href="pages/settings.html" class="nav-action-btn" aria-label="Settings" title="Settings">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
</a>
<button class="nav-action-btn" id="btn-user" aria-label="User" title="User Profile">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</button>
<!-- User Dropdown -->
<div class="nav-dropdown nav-dropdown-user" id="dropdown-user">
<div class="dropdown-user-header">
<div class="avatar-circle">KG</div>
<div class="user-name" data-i18n="nav.user.teamName">KernelGuard Team</div>
<div class="user-email" style="white-space: normal; line-height: 1.5; margin-top: 8px;" data-i18n="nav.user.teamDesc">A specialized 3-person development collective focused on systems engineering, rigorous cybersecurity, and scalable full-stack infrastructure.</div>
</div>
<!--
Suggested React/Tailwind Loading Skeleton for data fetch:
<div className="animate-pulse flex space-x-4 p-4">
<div className="rounded-full bg-gray-200 h-10 w-10"></div>
<div className="flex-1 space-y-3 py-1">
<div className="h-2 bg-gray-200 rounded w-3/4"></div>
<div className="h-2 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
-->
<a href="pages/profile.html" class="dropdown-item" data-i18n="nav.user.myProfile">My Profile</a>
<a href="profile.html#projects" class="dropdown-item" data-i18n="nav.user.myProjects">My Projects</a>
</div>
</div>
</div>
</header>
<!-- Search Overlay -->
<div class="nav-search-overlay" id="search-overlay">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" style="width: 24px; height: 24px; color: var(--color-gray-60); margin-right: 8px;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" class="nav-search-input" placeholder="Search all of KernelGuard" data-i18n-placeholder="nav.search.placeholder" id="search-input">
<button class="nav-search-close" id="btn-search-close">✕</button>
</div>
<!-- Overlay & Side Panel -->
<div class="overlay-backdrop" id="overlay"></div>
<aside class="side-panel" id="panel-help">
<div class="panel-header">
<h2 data-i18n="nav.help.title">Help & Information</h2>
<button class="close-btn" id="btn-close-help">✕</button>
</div>
<div class="panel-content">
<a href="#" class="quick-link"><span data-i18n="nav.help.gettingStarted">Getting Started</span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
<a href="#" class="quick-link"><span data-i18n="nav.help.documentation">Documentation</span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
<a href="#" class="quick-link"><span data-i18n="nav.help.apiReference">API Reference</span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
<a href="#" class="quick-link"><span data-i18n="nav.help.securityPolicy">Security Policy</span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
<div class="about-company-block">
<span data-i18n="nav.help.companyBlock"><span data-i18n="nav.help.companyBlock">KernelGuard Inc.<br>Secure Systems Infrastructure<br>v2.1.0-beta</span></span>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-secondary btn-block" data-i18n="nav.help.contactSupport">Contact Support →</button>
</div>
</aside>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container hero-grid fade-up">
<div class="hero-content">
<h1 class="text-hero fade-up">KernelGuard</h1>
<p class="hero-tagline fade-up" data-i18n="hero.tagline">Kernel Guard builds secure systems, intelligent infrastructure, and scalable web platforms.<br><br>We focus on cybersecurity, systems engineering, and production-grade software designed for reliability, performance, and long-term maintainability.</p>
<div class="fade-up">
<a href="#work" class="btn btn-primary" data-i18n="hero.cta">See Our Work</a>
</div>
</div>
<div class="hero-visual fade-up">
<!-- Architectural Node Diagram -->
<svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="400" fill="none"/>
<path class="animated-path" d="M80 80 L200 140 L320 80 M200 140 L200 320 M80 260 L200 320 L320 260 M80 80 L80 260 M320 80 L320 260 M140 110 L260 170" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>
<rect x="74" y="74" width="12" height="12" fill="currentColor" stroke="none"/>
<rect x="314" y="74" width="12" height="12" fill="currentColor" stroke="none"/>
<rect x="194" y="134" width="12" height="12" fill="currentColor" stroke="none"/>
<rect x="74" y="254" width="12" height="12" fill="currentColor" stroke="none"/>
<rect x="314" y="254" width="12" height="12" fill="currentColor" stroke="none"/>
<rect x="194" y="314" width="12" height="12" fill="currentColor" stroke="none"/>
</svg>
</div>
</div>
</section>
<!-- Services Section (What We Build) -->
<section class="services" id="services">
<div class="container container-services">
<h2 class="text-section-title fade-up" style="margin-bottom: 32px;"><span data-i18n="services.title">What We Build</span></h2>
<div class="services-grid">
<!-- Secure Systems -->
<div class="service-card fade-up">
<div class="service-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<p class="service-desc" data-i18n="services.secure">Secure systems and security-focused infrastructure.</p>
</div>
<!-- Intelligent platforms -->
<div class="service-card fade-up">
<div class="service-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 16h20M2 8h20"/><circle cx="12" cy="12" r="3"/><path d="M12 15v7M12 2v7"/></svg>
</div>
<p class="service-desc" data-i18n="services.intelligent">Intelligent platforms powered by AI and data-driven engineering.</p>
</div>
<!-- Scalable backend -->
<div class="service-card fade-up">
<div class="service-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
</div>
<p class="service-desc" data-i18n="services.scalable">Scalable backend and web applications.</p>
</div>
<!-- High-performance software -->
<div class="service-card fade-up">
<div class="service-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<p class="service-desc" data-i18n="services.highPerf">High-performance software with strong operational discipline.</p>
</div>
</div>
</div>
</section>
<!-- Core Areas Strip -->
<section class="tech-stack">
<div class="container">
<h2 class="tech-stack-label fade-up" data-i18n="core.title">Core Areas</h2>
<div class="tech-logos" style="gap: 32px;">
<div class="tech-logo fade-up"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> <span data-i18n="core.cybersecurity">Cybersecurity Engineering</span></div>
<div class="tech-logo fade-up"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> <span data-i18n="core.ebpf">eBPF and Runtime Security</span></div>
<div class="tech-logo fade-up"><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> <span data-i18n="core.systems">Systems Programming</span></div>
<div class="tech-logo fade-up"><svg viewBox="0 0 24 24"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg> <span data-i18n="core.cloud">Cloud and Infrastructure Engineering</span></div>
<div class="tech-logo fade-up"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg> <span data-i18n="core.ai">AI-Driven Systems</span></div>
<div class="tech-logo fade-up"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg> <span data-i18n="core.web">Scalable Web Platforms</span></div>
</div>
</div>
</section>
<!-- Featured Project -->
<section class="featured" id="work">
<div class="container fade-up">
<h2 class="text-section-title" style="margin-bottom: 48px;" data-i18n="projects.title">Flagship Projects</h2>
<div style="margin-bottom: 24px; font-weight: 600; color: var(--color-gray-100);" data-i18n="projects.openSource">Open Source Projects</div>
<div class="projects-grid" style="margin-bottom: 64px;">
<a href="projects/project-aegis.html" class="project-card fade-up" style="text-decoration: none; color: inherit; display: block;">
<h3 data-i18n="projects.aegis.title">Aegis-BPF</h3>
<p data-i18n="projects.aegis.desc">A runtime security engine built with eBPF CO-RE and LSM-based enforcement, designed for synchronous kernel-level protection.</p>
</a>
<a href="projects/project-cathodex.html" class="project-card fade-up" style="text-decoration: none; color: inherit; display: block;">
<h3 data-i18n="projects.cathodex.title">CathodeX</h3>
<p data-i18n="projects.cathodex.desc">High-performance userspace networking stack engineered in C, optimized for massive concurrency and determinism.</p>
</a>
</div>
<div style="margin-bottom: 24px; font-weight: 600; color: var(--color-gray-100); border-top: 1px solid var(--color-gray-20); padding-top: 32px;" data-i18n="projects.closedSource">Closed Source Projects (Demos)</div>
<div class="projects-grid">
<a href="projects/project-eduhub.html" class="project-card fade-up" style="text-decoration: none; color: inherit; display: block;">
<h3 data-i18n="projects.eduhub.title">EduHub Campus</h3>
<p data-i18n="projects.eduhub.desc">A B2B enterprise room and resource reservation system with secure tenant-based isolation and audit trails.</p>
</a>
<a href="projects/project-refatelier.html" class="project-card fade-up" style="text-decoration: none; color: inherit; display: block;">
<h3 data-i18n="projects.refatelier.title">Ref Atelier</h3>
<p data-i18n="projects.refatelier.desc">A high-performance luxury e-commerce frontend architecture ensuring fast load times and seamless localization.</p>
</a>
</div>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="container fade-up">
<div class="about-grid" style="grid-template-columns: 1fr 1fr;">
<div class="about-principles fade-up">
<h2 class="text-section-title" style="margin-bottom: 32px;" data-i18n="about.principles.title">Engineering Principles</h2>
<p style="margin-bottom: 24px; font-weight: 600;" data-i18n="about.principles.weValue">We value:</p>
<ul class="carbon-list">
<li data-i18n="about.principles.security">Security by design</li>
<li data-i18n="about.principles.performance">Measured performance</li>
<li data-i18n="about.principles.contracts">Clear operational contracts</li>
<li data-i18n="about.principles.production">Production readiness</li>
<li data-i18n="about.principles.evidence">Evidence over claims</li>
</ul>
</div>
<div class="about-mission fade-up">
<h2 class="text-section-title" style="margin-bottom: 32px;" data-i18n="about.mission.title">Mission</h2>
<p class="mission" style="font-size: 20px; line-height: 1.6; color: var(--color-gray-100);"><span data-i18n="about.mission.text">Kernel Guard exists to build software that is not only functional, but secure, resilient, and engineered to hold up under real-world conditions.</span></p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section" id="contact">
<div class="container">
<div class="contact-grid">
<!-- Left: Form -->
<div>
<div class="contact-header">
<h2 data-i18n="contact.title">Ready to build something serious?</h2>
<p data-i18n="contact.desc">For collaborations, partnerships, or technical discussions — reach out directly. We respond within 24 hours.</p>
</div>
<form id="contact-form" action="https://formspree.io/f/xyzgobrl" method="POST">
<div class="contact-form-group">
<label data-i18n="contact.name">Name</label>
<input type="text" name="name" class="contact-input" placeholder="Your full name" required data-i18n-placeholder="contact.name.placeholder">
</div>
<div class="contact-form-group">
<label data-i18n="contact.org">Organization</label>
<input type="text" name="organization" class="contact-input" placeholder="Company or institution" data-i18n-placeholder="contact.org.placeholder">
</div>
<div class="contact-form-group">
<label data-i18n="contact.email">Work Email</label>
<input type="email" name="email" id="contact-email" class="contact-input" placeholder="you@company.com" required data-i18n-placeholder="contact.email.placeholder">
<div class="contact-error-msg" id="email-error" data-i18n="contact.email.error">Please enter a valid email address.</div>
</div>
<div class="contact-form-group">
<label data-i18n="contact.message">Message</label>
<textarea name="message" class="contact-input contact-textarea" placeholder="Tell us about your project or inquiry..." required data-i18n-placeholder="contact.message.placeholder"></textarea>
</div>
<button type="submit" class="contact-submit" id="contact-submit">
<span class="btn-text" data-i18n="contact.send">Send Message</span>
<div class="spinner"></div>
</button>
</form>
</div>
<!-- Right: Team Cards -->
<div>
<div class="contact-header">
<h2 data-i18n="contact.team.title">Connect with the Team</h2>
<p data-i18n="contact.team.desc">Our founding engineers are available on LinkedIn for professional inquiries and collaboration.</p>
</div>
<div class="team-cards">
<a href="https://www.linkedin.com/in/eren-ari/" target="_blank" class="team-card">
<div class="team-avatar">EA</div>
<div class="team-info">
<div class="name">Eren Arı</div>
<div class="role" data-i18n="contact.team.role1">Full-Stack Developer</div>
</div>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://www.linkedin.com/in/mahmut-%C3%BCn%C3%BCvar-1281a527a/" target="_blank" class="team-card">
<div class="team-avatar">MÜ</div>
<div class="team-info">
<div class="name">Mahmut Ünüvar</div>
<div class="role" data-i18n="contact.team.role2">Software Developer</div>
</div>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://www.linkedin.com/in/yusuf-demirel-46800b376/" target="_blank" class="team-card">
<div class="team-avatar">YD</div>
<div class="team-info">
<div class="name">Yusuf Demirel</div>
<div class="role" data-i18n="contact.team.role3">Design Engineer</div>
</div>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Bottom Bar -->
<footer>
<div class="footer-bottom">
<div class="container">
<div class="footer-bottom-text">
KernelGuard Inc. © 2026
</div>
<div class="footer-nav">
<a href="#services" data-i18n="nav.whatWeBuild">What We Build</a>
<a href="#work" data-i18n="nav.projects">Projects</a>
<a href="#about" data-i18n="nav.about">About</a>
</div>
<div class="footer-social">
<a href="https://github.com/Kernel-Guard" aria-label="GitHub">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.379.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z"/></svg>
</a>
<a href="https://www.linkedin.com/company/kernel-guard/" aria-label="LinkedIn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
</div>
</div>
</footer>
<!-- Success Toast -->
<div class="contact-toast" id="contact-toast">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#24A148" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
<span data-i18n="contact.toast">Message sent successfully. We'll be in touch soon.</span>
</div>
</body>
</html>