<!doctype html><!-- HTML5 -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
        <title>{{ title }}</title>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
        <meta name="description" content="{{ description }}">
        <!-- Open Graph Meta Tags -->
        <meta property="og:title" content="{{ title }}">
        <meta property="og:description" content="{{ description }}">
        <meta property="og:type" content="article">
        <meta property="og:url" content="{{ site.url }}{{ page.url }}">
        <meta property="og:image" content="{{ site.url }}{{ image }}">
        <!-- Twitter Card Meta Tags -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="{{ title }}">
        <meta name="twitter:description" content="{{ description }}">
        <meta name="twitter:image" content="{{ site.url }}{{ image }}">
        <!-- Structured Data (JSON-LD) -->
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "BlogPosting",
                "headline": "{{ title }}",
                "description": "{{ description }}",
                "image": "{{ site.url }}{{ image }}",
                "author": {
                    "@type": "Person",
                    "name": "{{ site.author.name }}"
                },
                "datePublished": "{{ date }}",
                "mainEntityOfPage": {
                    "@type": "WebPage",
                    "@id": "{{ site.url }}{{ page.url }}"
                    }
            }
        </script>
        <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">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="/css/style.css">
        <link rel="canonical" href="{{ site.url }}{{ page.url }}">
        <link rel="stylesheet" href="/css/prism-tomorrow.css">
    </head>
    <body class="antialiased">
        <!-- Header & Nav -->
        <header class="sticky top-0 z-50 glass-card shadow-md">
            <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
                <a href="/" class="text-3xl font-bold text-white">{{ site.author.shortname }}<span class="text-blue-500">.</span></a>
                <div class="hidden md:flex space-x-6 items-center">
                    <a href="/#about" class="text-gray-300 hover:text-blue-400">About</a>
                    <a href="/blog" class="text-gray-300 hover:text-blue-400">Blog</a>
                    <!-- <a href="/#services" class="text-gray-300 hover:text-blue-400">Services</a> -->
                    <a href="/#skills" class="text-gray-300 hover:text-blue-400">Skills</a>
                    <a href="/#experience" class="text-gray-300 hover:text-blue-400">Experience</a>
                    <a href="/#contact" class="text-gray-300 hover:text-blue-400">Contact</a>
                    <a href="/resume" class="btn">View Resume</a>
                </div>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-white focus:outline-none">
                    <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </nav>
            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden md:hidden px-6 pt-3 pb-4 space-y-3">
                <a href="/#about" class="block text-gray-300 hover:text-blue-400">About</a>
                <a href="/blog" class="block text-gray-300 hover:text-blue-400">Blog</a>
                <!-- <a href="/#services" class="block text-gray-300 hover:text-blue-400">Services</a> -->
                <a href="/#skills" class="block text-gray-300 hover:text-blue-400">Skills</a>
                <a href="/#experience" class="block text-gray-300 hover:text-blue-400">Experience</a>
                <a href="/#contact" class="block text-gray-300 hover:text-blue-400">Contact</a>
                <a href="/resume" style="margin-left: 4rem; margin-right: 4rem;" target="_blank" class="block btn mt-2 mb-2 m">View Resume</a>
            </div>
        </header>
        <main class="main-content container mx-auto px-6 md:px-10 lg:px-20 py-12">
            {{ content | safe }}
        </main>
        <!-- Footer -->
        <footer class="bg-gray-900 text-gray-400 py-6">
            <div class="container mx-auto px-6 text-center">
                <div class="flex justify-center space-x-6 mb-4">
                    <a href="{{ site.author.linkedinUrl }}" target="_blank" class="hover:text-blue-400"><i class="fab fa-linkedin fa-2x"></i></a>
                    <a href="mailto:{{ site.author.email }}" class="hover:text-blue-400"><i class="fas fa-envelope fa-2x"></i></a>
                </div>
                <p>&copy; {% year %} {{ site.author.name }}. All Rights Reserved.</p>
            </div>
        </footer>
        <script src="/js/main.js"></script>
        {% if page.url == "/" %}
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                // Define a unique slug for the home page
                const slug = 'homepage';
                
                // Use a flag in localStorage to prevent incrementing on every refresh
                const viewed = localStorage.getItem(`viewed-${slug}`);

                if (!viewed) {
                    // We only need to send the update, not get the result
                    fetch(`/api/views/${slug}`, { method: 'POST' })
                        .then(response => {
                            if (response.ok) {
                                // Mark as viewed in this session if the update was successful
                                localStorage.setItem(`viewed-${slug}`, 'true');
                            }
                        })
                        .catch(error => {
                            console.error('Error updating home page view count:', error);
                        });
                }
            });
        </script>
        {% endif %}
    </body>
</html>
