49 lines
2.8 KiB
HTML
49 lines
2.8 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Nic O'Connor – Playful Portfolio</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f0f8ff;color:#1a1a1a;line-height:1.5}
|
||
.gradient{background:linear-gradient(135deg,#ff7e5f,#feb47b)}
|
||
</style>
|
||
</head>
|
||
<body class="p-8 max-w-3xl mx-auto">
|
||
<header class="mb-8 text-center">
|
||
<h1 class="text-5xl font-extrabold mb-2 gradient text-white py-4 px-6 rounded">Nic O'Connor</h1>
|
||
<p class="text-lg text-gray-800">Tech Specialist, M.C. Dean – 25+ years in IT & cybersecurity</p>
|
||
</header>
|
||
<nav class="mb-6 flex justify-center gap-6">
|
||
<a href="#projects" class="text-purple-600 hover:underline font-medium">Projects</a>
|
||
<a href="#contact" class="text-purple-600 hover:underline font-medium">Contact</a>
|
||
</nav>
|
||
<section id="projects" class="mb-12">
|
||
<h2 class="text-3xl font-semibold mb-6 text-center">Projects</h2>
|
||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||
<div class="p-4 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow">
|
||
<h3 class="text-xl font-bold mb-2">NetBird VPN Mesh</h3>
|
||
<p class="text-gray-700 mb-2">Secure, mesh‑based VPN for remote teams.</p>
|
||
<a href="https://netbird.covert-cloud.com" class="inline-block bg-gradient-to-r from-purple-400 to-pink-500 text-white px-3 py-1 rounded hover:opacity-90">Live demo →</a>
|
||
</div>
|
||
<div class="p-4 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow">
|
||
<h3 class="text-xl font-bold mb-2">Gitea CI Runner</h3>
|
||
<p class="text-gray-700 mb-2">Self‑hosted CI runner integrated with Gitea.</p>
|
||
<a href="https://git.nic-oconnor.com" class="inline-block bg-gradient-to-r from-purple-400 to-pink-5 text-white px-3 py-1 rounded hover:opacity-90">Explore →</a>
|
||
</div>
|
||
<div class="p-4 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow">
|
||
<h3 class="text-xl font-bold mb-2">AI‑Enhanced DevOps</h3>
|
||
<p class="text-gray-700 mb-2">Chat‑ops pipelines using Claude, Ollama and Hermes.</p>
|
||
<a href="#" class="inline-block bg-gradient-to-r from-purple-400 to-pink-5 text-white px-3 py-1 rounded opacity-50 cursor-not-allowed">Read more →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="contact" class="text-center">
|
||
<h2 class="text-3xl font-semibold mb-4">Get in Touch</h2>
|
||
<p>Email: <a href="mailto:nic@oconnor.com" class="text-purple-600 hover:underline">nic@oconnor.com</a></p>
|
||
<p>LinkedIn: <a href="https://linkedin.com/in/nic-oconnor" class="text-purple-600 hover:underline">linkedin.com/in/nic-oconnor</a></p>
|
||
</section>
|
||
</body>
|
||
</html>
|