1 Commits

Author SHA1 Message Date
c16e77afb0 Improve design and responsiveness 2026-06-05 14:34:10 -04:00

View File

@@ -2,40 +2,42 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Nic O'Connor Playful Portfolio</title> <title>Nic O'Connor Portfolio & Projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<style> <style>
*{box-sizing:border-box;margin:0;padding:0} *{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} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f9fafb;color:#111;line-height:1.5}
.gradient{background:linear-gradient(135deg,#ff7e5f,#feb47b)} .gradient{background:linear-gradient(135deg,#667eea,#764ba2)}
</style> </style>
</head> </head>
<body class="p-8 max-w-3xl mx-auto"> <body class="p-8 max-w-4xl mx-auto">
<header class="mb-8 text-center"> <header class="mb-12 text-center">
<h1 class="text-5xl font-extrabold mb-2 gradient text-white py-4 px-6 rounded">Nic O'Connor</h1> <h1 class="text-5xl font-extrabold mb-4 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 &amp; cybersecurity</p> <p class="text-lg text-gray-700">Tech Specialist, M.C. Dean 25+ years in IT & cybersecurity</p>
</header> </header>
<nav class="mb-6 flex justify-center gap-6"> <nav class="mb-8 flex justify-center gap-6">
<a href="#projects" class="text-purple-600 hover:underline font-medium">Projects</a> <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> <a href="#contact" class="text-purple-600 hover:underline font-medium">Contact</a>
<a href="https://netbird.covert-cloud.com" class="text-purple-600 hover:underline font-medium">NetBird VPN</a>
</nav> </nav>
<section id="projects" class="mb-12"> <section id="projects" class="mb-12">
<h2 class="text-3xl font-semibold mb-6 text-center">Projects</h2> <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="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"> <div class="p-4 bg-white rounded-lg shadow hover:shadow-lg transition-shadow">
<h3 class="text-xl font-bold mb-2">NetBird VPN Mesh</h3> <h3 class="text-xl font-bold mb-2">NetBird VPN Mesh</h3>
<p class="text-gray-700 mb-2">Secure, meshbased VPN for remote teams.</p> <p class="text-gray-700 mb-2">Secure, meshbased 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> <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>
<div class="p-4 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow"> <div class="p-4 bg-white rounded-lg shadow hover:shadow-lg transition-shadow">
<h3 class="text-xl font-bold mb-2">Gitea CI Runner</h3> <h3 class="text-xl font-bold mb-2">Gitea CI Runner</h3>
<p class="text-gray-700 mb-2">Selfhosted CI runner integrated with Gitea.</p> <p class="text-gray-700 mb-2">Selfhosted 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> <a href="https://git.nic-oconnor.com" class="inline-block bg-gradient-to-r from-purple-400 to-pink-500 text-white px-3 py-1 rounded hover:opacity-90">Explore →</a>
</div> </div>
<div class="p-4 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow"> <div class="p-4 bg-white rounded-lg shadow hover:shadow-lg transition-shadow opacity-50 cursor-not-allowed">
<h3 class="text-xl font-bold mb-2">AIEnhanced DevOps</h3> <h3 class="text-xl font-bold mb-2">AIEnhanced DevOps</h3>
<p class="text-gray-700 mb-2">Chatops pipelines using Claude, Ollama and Hermes.</p> <p class="text-gray-700 mb-2">Chatops 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> <span class="inline-block bg-gradient-to-r from-purple-400 to-pink-500 text-white px-3 py-1 rounded opacity-50 cursor-not-allowed">Read more →</span>
</div> </div>
</div> </div>
</section> </section>