|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Marc Cornelius | Links</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.profile-img { |
|
|
border: 4px solid white; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.profile-img:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.link-card { |
|
|
transition: all 0.3s ease; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.link-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
|
|
|
.ai-audit-card { |
|
|
background: linear-gradient(135deg, #4f5bd5 0%, #962fbf 30%, #d62976 60%, #fa7e1e 90%); |
|
|
color: white; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
border: 2px solid white; |
|
|
animation: pulse-glow 2s infinite alternate; |
|
|
} |
|
|
|
|
|
.ai-audit-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%); |
|
|
transform: rotate(30deg); |
|
|
animation: shine 3s infinite; |
|
|
} |
|
|
|
|
|
.ai-audit-card:hover { |
|
|
transform: scale(1.05) translateY(-5px); |
|
|
box-shadow: 0 20px 30px rgba(149, 75, 214, 0.7); |
|
|
animation: none; |
|
|
} |
|
|
|
|
|
.ai-audit-card .icon-bg { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
box-shadow: 0 0 15px rgba(255,255,255,0.5); |
|
|
} |
|
|
|
|
|
.ai-audit-card i, .ai-audit-card h3, .ai-audit-card p, .ai-audit-card .chevron { |
|
|
color: white !important; |
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.ai-audit-card h3 { |
|
|
font-weight: 700; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.ai-audit-card p { |
|
|
opacity: 0.9; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
@keyframes shine { |
|
|
0% { |
|
|
transform: rotate(30deg) translate(-30%, -30%); |
|
|
} |
|
|
100% { |
|
|
transform: rotate(30deg) translate(30%, 30%); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes pulse-glow { |
|
|
0% { |
|
|
box-shadow: 0 0 15px rgba(149, 75, 214, 0.5); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 30px rgba(149, 75, 214, 0.8); |
|
|
} |
|
|
} |
|
|
|
|
|
.accordion-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.accordion.active .accordion-content { |
|
|
max-height: 500px; |
|
|
transition: max-height 0.5s ease-in; |
|
|
} |
|
|
|
|
|
.accordion.active .accordion-icon { |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
.accordion-icon { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.ai-sparkles { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.ai-sparkle { |
|
|
position: absolute; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
opacity: 0; |
|
|
animation: sparkle-fall 2s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes sparkle-fall { |
|
|
0% { |
|
|
transform: translateY(-20px) rotate(0deg); |
|
|
opacity: 0; |
|
|
} |
|
|
20% { |
|
|
opacity: 0.7; |
|
|
} |
|
|
100% { |
|
|
transform: translateY(120px) rotate(360deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex flex-col items-center py-12 px-4"> |
|
|
<div class="w-full max-w-md mx-auto"> |
|
|
|
|
|
<div class="flex flex-col items-center mb-8"> |
|
|
<img src="https://marccornelius.com/wp-content/uploads/2024/02/image-12-1.png" |
|
|
alt="Marc Cornelius" |
|
|
class="profile-img w-32 h-32 rounded-full object-cover mb-4"> |
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-1">Marc Cornelius</h1> |
|
|
<p class="text-gray-600">Digital Strategist & AI Consultant</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4 mb-8"> |
|
|
|
|
|
<a href="https://marccornelius.com/ai-audit" target="_blank" class="block"> |
|
|
<div class="link-card ai-audit-card rounded-xl p-5 flex items-center shadow-lg relative overflow-hidden"> |
|
|
<div id="ai-sparkles-container" class="ai-sparkles"></div> |
|
|
<div class="icon-bg p-4 rounded-xl mr-4"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
</div> |
|
|
<div class="z-10"> |
|
|
<h3>🔍 Free AI Opportunity Audit</h3> |
|
|
<p class="text-sm">Get your personalized AI assessment report at no cost</p> |
|
|
</div> |
|
|
<div class="ml-auto z-10"> |
|
|
<div class="bg-white bg-opacity-30 rounded-full p-1"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://marccornelius.com/store/" target="_blank" class="block"> |
|
|
<div class="link-card rounded-xl p-5 flex items-center shadow-md hover:shadow-lg"> |
|
|
<div class="bg-indigo-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-shopping-bag text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800">Store</h3> |
|
|
<p class="text-sm text-gray-500">Digital products & resources</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://marccornelius.com/blog" target="_blank" class="block"> |
|
|
<div class="link-card rounded-xl p-5 flex items-center shadow-md hover:shadow-lg"> |
|
|
<div class="bg-orange-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-pen-fancy text-orange-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800">Blog</h3> |
|
|
<p class="text-sm text-gray-500">Read my latest articles</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://marccornelius.com/" target="_blank" class="block"> |
|
|
<div class="link-card rounded-xl p-5 flex items-center shadow-md hover:shadow-lg"> |
|
|
<div class="bg-purple-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-globe text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800">Website</h3> |
|
|
<p class="text-sm text-gray-500">Visit my personal website</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="https://www.linkedin.com/in/marc-cornelius/" target="_blank" class="block"> |
|
|
<div class="link-card rounded-xl p-5 flex items-center shadow-md hover:shadow-lg"> |
|
|
<div class="bg-blue-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fab fa-linkedin-in text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800">LinkedIn</h3> |
|
|
<p class="text-sm text-gray-500">Connect with me professionally</p> |
|
|
</div> |
|
|
<div class="ml-auto"> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="accordion bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="accordion-header p-5 flex justify-between items-center cursor-pointer"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-user text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-gray-800">About Me</h3> |
|
|
</div> |
|
|
<i class="accordion-icon fas fa-chevron-down text-gray-400"></i> |
|
|
</div> |
|
|
<div class="accordion-content"> |
|
|
<div class="px-5 pb-5 pt-2 border-t border-gray-100"> |
|
|
<div class="flex flex-col md:flex-row gap-4"> |
|
|
<div class="md:w-1/3"> |
|
|
<img src="https://marccornelius.com/wp-content/uploads/2024/02/image-12-1.png" |
|
|
alt="Marc Cornelius" |
|
|
class="rounded-lg w-full h-auto"> |
|
|
</div> |
|
|
<div class="md:w-2/3"> |
|
|
<p class="text-gray-700 mb-3"> |
|
|
Hi, I'm Marc Cornelius, a digital strategist and AI consultant helping businesses leverage cutting-edge technologies. |
|
|
</p> |
|
|
<p class="text-gray-700 mb-3"> |
|
|
With over 10 years of experience in digital transformation, I specialize in AI implementation strategies that drive real business results. |
|
|
</p> |
|
|
<p class="text-gray-700"> |
|
|
When I'm not consulting, you can find me speaking at tech conferences or writing about the intersection of business and emerging technologies. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 text-center text-gray-500 text-sm"> |
|
|
<p>© 2025 Marc Cornelius. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const accordion = document.querySelector('.accordion'); |
|
|
|
|
|
accordion.addEventListener('click', function() { |
|
|
this.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const container = document.getElementById('ai-sparkles-container'); |
|
|
const colors = ['#FFEB3B', '#4CAF50', '#2196F3', '#9C27B0', '#FF5722']; |
|
|
|
|
|
for (let i = 0; i < 15; i++) { |
|
|
setTimeout(() => { |
|
|
const sparkle = document.createElement('div'); |
|
|
sparkle.classList.add('ai-sparkle'); |
|
|
sparkle.style.width = Math.random() * 8 + 2 + 'px'; |
|
|
sparkle.style.height = sparkle.style.width; |
|
|
sparkle.style.left = Math.random() * 100 + '%'; |
|
|
sparkle.style.top = -10 + 'px'; |
|
|
sparkle.style.background = colors[Math.floor(MathRandom() * colors.length)]; |
|
|
sparkle.style.animationDuration = Math.random() * 3 + 1 + 's'; |
|
|
sparkle.style.animationDelay = Math.random() * 0.5 + 's'; |
|
|
container.appendChild(sparkle); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
sparkle.remove(); |
|
|
}, 3000); |
|
|
}, i * 200); |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const sparkle = document.createElement('div'); |
|
|
sparkle.classList.add('ai-sparkle'); |
|
|
sparkle.style.width = Math.random() * 8 + 2 + 'px'; |
|
|
sparkle.style |
|
|
</html> |
