62 lines
3.3 KiB
TypeScript
62 lines
3.3 KiB
TypeScript
export const Skills = () => (
|
|
<section id="skills" class="scroll-mt-24">
|
|
<h2 class="text-3xl font-bold mb-4 text-dracula-purple">Skills</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-dracula-selection p-6 rounded-lg">
|
|
<h3 class="text-xl font-bold text-dracula-green mb-3">Operating Systems</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Arch Linux</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Debian</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Windows Server</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Windows Client</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-dracula-selection p-6 rounded-lg">
|
|
<h3 class="text-xl font-bold text-dracula-green mb-3">Languages</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">JavaScript</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Python</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Go</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Bash</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-dracula-selection p-6 rounded-lg">
|
|
<h3 class="text-xl font-bold text-dracula-green mb-3">Testing & QA</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Postman</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">k6</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">API Testing</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Performance Testing</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-dracula-selection p-6 rounded-lg">
|
|
<h3 class="text-xl font-bold text-dracula-green mb-3">DevOps & Cloud</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Azure Pipelines</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Docker</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Podman</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Cloudflare Workers</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-dracula-selection p-6 rounded-lg">
|
|
<h3 class="text-xl font-bold text-dracula-green mb-3">Infrastructure</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">KVM</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">WireGuard</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">RAID</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">OpenWrt</span>
|
|
</div>
|
|
</div>
|
|
<div class="bg-dracula-selection p-6 rounded-lg">
|
|
<h3 class="text-xl font-bold text-dracula-green mb-3">Web Stack</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">Hono.js</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">HTMX</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">TailwindCSS</span>
|
|
<span class="bg-dracula-bg px-3 py-1 rounded text-sm">PocketBase</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|