Improve design and responsiveness

This commit is contained in:
2026-06-05 14:34:10 -04:00
parent 929fdf0db0
commit c16e77afb0

View File

@@ -2,40 +2,42 @@
<html lang="en">
<head>
<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>
<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)}
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,#667eea,#764ba2)}
</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 &amp; cybersecurity</p>
<body class="p-8 max-w-4xl mx-auto">
<header class="mb-12 text-center">
<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-700">Tech Specialist, M.C. Dean 25+ years in IT & cybersecurity</p>
</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="#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>
<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">
<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>
<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>
</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>
<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 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>
<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>
</section>