<html lang="en" data-theme="dark" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($pageTitle); ?></title>
<meta name="description" content="<?php echo htmlspecialchars($pageDesc); ?>">
<meta name="author" content="Emil Niemi">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://niemil.com<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="https://niemil.com<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">
<meta property="og:title" content="<?php echo htmlspecialchars($pageTitle); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($pageDesc); ?>">
<meta property="og:image" content="<?php echo htmlspecialchars($pageImage); ?>">
<meta name="twitter:card" content="summary_large_image">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
grotesk: ['Space Grotesk', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
colors: {
bg: {'50': '#f0f9ff','500': '#0ea5e9','900': '#0c4a6e'},
'bg-dark': '#09090b',
'bg-2': '#111116',
'bg-3': '#18181f',
blue: '#818CF8',
'blue-dim': '#6366F1',
glow: 'rgba(129, 140, 248, 0.3)',
text: '#F1F5F9',
'text-2': 'rgba(241, 245, 249, 0.58)',
'text-3': 'rgba(241, 245, 249, 0.26)',
border: 'rgba(129, 140, 248, 0.16)',
},
backdropBlur: {
xs: '2px',
},
animation: {
'glow': 'glow 2s ease-in-out infinite alternate',
'emi-glow': 'emiGlow 4s ease-in-out infinite',
'blink': 'blink 0.65s step-end infinite',
'dot-pulse': 'dotPulse 2.5s ease-in-out infinite',
'scroll-drop': 'scrollDrop 2s ease-in-out infinite',
},
keyframes: {
glow: {
'0%, 100%': { textShadow: '0 0 40px rgba(129,140,248,0.35), 0 0 90px rgba(129,140,248,0.12)' },
'50%': { textShadow: '0 0 65px rgba(129,140,248,0.65), 0 0 160px rgba(129,140,248,0.22)' },
},
emiGlow: {
'0%, 100%': { textShadow: '0 0 40px rgba(129,140,248,0.35), 0 0 90px rgba(129,140,248,0.12)' },
'50%': { textShadow: '0 0 65px rgba(129,140,248,0.65), 0 0 160px rgba(129,140,248,0.22)' },
},
blink: {
'0%, 50%': { opacity: '1' },
'51%, 100%': { opacity: '0' },
},
// add more
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/three@0.167.0/build/three.min.js" defer></script>
<script src="https://unpkg.com/gsap@3.12.5/dist/gsap.min.js" defer></script>
<script src="https://unpkg.com/gsap@3.12.5/dist/ScrollTrigger.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/+esm" type="module" defer></script>
<link rel="stylesheet" href="/css/style.css">
<script>document.documentElement.setAttribute('data-theme',localStorage.getItem('theme')||'dark');</script>
</head>
<body class="bg-bg-dark text-text font-grotesk">
<div id="smooth-wrapper" class="min-h-screen">
<div id="smooth-content">
<canvas id="hero-canvas" class="fixed inset-0 w-full h-full pointer-events-none -z-20 opacity-70"></canvas>
<?php include __DIR__ . '/nav.php'; ?>
</div>
</div>
<footer class="relative z-20 py-16 bg-gradient-to-b from-slate-900/80 to-black/60 backdrop-blur-xl border-t border-indigo-900/50 text-center text-slate-400 text-sm font-medium tracking-wide">
<div class="max-w-6xl mx-auto px-8">
<p>© <?php echo date('Y'); ?> Emil Niemi <span class="font-black text-indigo-400">niemil.com</span></p>
<div class="flex flex-col sm:flex-row gap-6 justify-center mt-8 text-xs uppercase">
<a href="/privacy.php" class="hover:text-indigo-400 transition-all duration-300">Privacy</a>
<a href="/sitemap.php" class="hover:text-indigo-400 transition-all duration-300">Sitemap</a>
</div>
</div>
</footer>
<script src="/js/main.js" defer></script>
</body>
</html>