<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo e($metaTitle ?? "Tanvir Ahmod"); ?></title>
    <meta name="author" content="Tanvir Ahmod">
    <meta name="description" content="<?php echo e($metaDescription ?? " "); ?>">

    <!-- Preload Images for Faster Load Time -->
    <link rel="preload" href="/storage/images/close.svg" as="image">
    <link rel="preload" href="/storage/images/humberger.svg" as="image">

    <!-- Tailwind CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">

    <style>
        /* Import Google Font */
        @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');

        /* Set Default Font */
        .font-family-karla {
            font-family: Karla, sans-serif;
        }

        /* Blockquote Styling */
        blockquote {
            font-size: 1.125rem;
            font-style: italic;
            color: #374151;
            background-color: #E5E7EB;
            padding: 1rem 1.5rem;
            margin: 1.5rem 0;
            border-left: 5px solid #6B7280;
            border-radius: 4px;
            line-height: 1.6;
        }

        /* Hide Elements with x-cloak Until AlpineJS Loads */
        [x-cloak] {
            display: none !important;
        }

        /* Smooth Transition for Navigation Menu */
        .topnav__menu {
            transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
        }

        @media (min-width: 768px) {
            .topnav__menu {
                transition: none !important;
            }
        }
        pre {
           background-color: black;
           color: white;
           padding: 1rem;
           margin: 1rem;
           border-radius: 0.5rem;
        }
        a {
            -webkit-tap-highlight-color: transparent;
        }
       .overflow-hidden {
           overflow: hidden;
       }
    </style>

    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">


    <!-- AlpineJS (for Interactivity) -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js" defer></script>

    <!-- Inert (Accessibility) -->
    <script src="https://cdn.jsdelivr.net/npm/wicg-inert@3/dist/inert.min.js"></script>

    <!-- Body Scroll Lock (Prevent Scrolling on Menu Open) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/body-scroll-lock/3.0.0-beta.0/bodyScrollLock.min.js"></script>

    <!-- Font Awesome (Icons) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" 
        integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" 
        crossorigin="anonymous">
    </script>

    <!-- Highlight.js (Syntax Highlighting) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>

</head><?php /**PATH /home/laravel/portfoliio/resources/views/components/head.blade.php ENDPATH**/ ?>