<?php
require_once("./lib/lib.php");
$page_contents = loadPage();
?>

<!--
*********************************************
* Not sure why you're snooping around here. *
* Honestly, there is nothing to see here.   *
* Come on, off you go.                      *
* Still here?                               *
* Fine.                                     *
*                                           *
* Here's a cat.                             *
*********************************************

      /\_/\
 /\  / o o \
//\\ \~(*)~/    <- Look, it's a cat.
`  \/   ^ /
   | \|| ||
   \ '|| ||
    \)()-())

Page built using custom PHP backend using bootstrap, 
fontawesome, animate.style and jQuery (ew!), 
frontend libraries.

-->

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="/img/favicon/site.webmanifest">
    <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/site.min.css?<?= filemtime("css/site.min.css") ?>">

    <title><?= $GLOBALS["page_title"] ?></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js" crossorigin="anonymous"></script>
    <script src="/js/typer.js?<?= filemtime("js/typer.min.js") ?>" crossorigin="anonymous"></script>
    <script src="/js/site.min.js?<?= filemtime("js/site.min.js") ?>" crossorigin="anonymous"></script>


</head>

<body>

    <div id="canvas">
        <div id="typewriter">
            <div>
                <span class="khairil">khairil hodgson &gt;</span> <span id="ticker" data-element="web developer,freelancer,consultant,web monkey"></span><span id="tilder" class="blink_me">&nbsp;</span>
            </div>
        </div>

        <div id="page-content" class="animate__animated animate__bounceIn">
            <?= $page_contents ?>
        </div>

        <div class="menu">
            <a href="/" id="home" class="typetext showpage" data-element="take me home"><i class="fa-solid fa-house"></i></a>

            <a href="/me/" id="me" class="typetext showpage" data-element="so, who is this web monkey?"><i class="typetext fa-solid fa-circle-question"></i></a>

            <a href="/baltic/" id="baltic" class="typetext showpage" data-element="the baltic sea circle challenge"><i class="typetext fa-solid fa-hand-holding-heart"></i></a>

            <a href="/games/" id="games" class="typetext showpage" data-element="let's play a game together"><i class="typetext fa-solid fa-dice"></i></a>

            <a href="/social/" id="social" class="typetext showpage" data-element="stalk me on social media"><i class="typetext fa-solid fa-hashtag"></i></a>

            <a href="/contact/" id="contact" class="typetext showpage" data-element="say nice things to me"><i class=" typetext fa-solid fa-envelope"></i></a>

        </div>


    </div>

</body>

</html>