Initial commit: playful Tailwind portfolio

This commit is contained in:
Hermes Agent
2026-05-29 16:20:19 -04:00
commit 929fdf0db0
2 changed files with 65 additions and 0 deletions

48
index.html Normal file
View File

@@ -0,0 +1,48 @@
<!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 &amp; 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, 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">
<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>
</div>
<div class="p-4 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow">
<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>
</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>