<!DOCTYPE html>

<html>
	<head>
		<title>Vultrix</title>
		<meta name="Content-Script-Type" content="text/javascript" />
        <meta name="Content-Style-Type" content="text/css" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-mobile-web-app-title" content="Vultrix" />
        <meta name="apple-mobile-web-app-status-bar" content="#000000" />
        <meta name="theme-color" content="#000000"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, shrink-to-fit=no" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet"/>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
        <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
        <link rel="manifest" href="site.webmanifest">
		<style>
			*{
				-webkit-touch-callout:none;
				-webkit-tap-highlight-color:rgba(0,0,0,0);
				-webkit-text-size-adjust:none
			}

			body,html
			{
				padding:0;
				margin:0px;
				width:100%;
				height:100%;
				display:block;
				border:0;

				background-color:#222;
				font-family:'Dosis', sans-serif;
				color: #888;
				font-size:18px
			}

			a
			{
				color: #ddd;
				text-decoration: none;
			}

      .itemTitle
      {
        color:azure;
      }

      .logo
      {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      [v-cloak]
      {
        display: none;
      }
		</style>
	</head>
	<body>
        <div class="container-fluid" id="app" v-cloak>
            <nav class="navbar navbar-expand-lg bg-dark bg-gradient">
                <div class="container-fluid">
                  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-inverse navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item">
                        <a class="nav-link text-white-50" href="https://www.youtube.com/c/AndyLunn/"><i class="fab fa-youtube"></i> YouTube</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link text-white-50" href="https://www.linkedin.com/in/andylunn/"><i class="fab fa-linkedin"></i> LinkedIn</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link text-white-50" href="https://csveasy.com"><i class="fab fa-windows"></i> CSV Easy</a>
                      </li>
                    </ul>
                  </div>
                </div>
            </nav>

            <div class="pb-md-4 mx-auto animate__animated animate__fadeIn">
                <!-- <h1 class="display-1 fw-normal  text-center">Vultrix</h1> -->
                <img src="logo.png" class="logo">
                <p class="fs-5">Welcome to the little slice of the internet for Andy Lunn. IT Professional, Senior Software Developer, Retro-Gamer, Maker and Father of four.</p>
                <p class="fs-5">Enjoy this curated history of my {{creationCount}} favourite creations over the last {{currentYear - earliestCreation.Year}} years:-</p>
            </div>

            <div class="row row-cols-1 row-cols-md-4 mb-3">
                <div v-for="(item, index) in portfolioOrdered"
                  class="col mb-4 animate__animated" :class="randomAnim()">
                    <div class="card rounded-3 shadow-sm h-100 bg-dark bg-gradient">
                        <img v-if="item.Images" :src="item.Images[0].URL" class="card-img-top rounded-4 p-2"/>
                        <div class="card-body">
                            <h5 class="card-title itemTitle">{{item.Title}} - {{item.Year}}</h5>
                            <p class="card-text">{{item.Description}}</p>
                        </div>
                        <div v-if="item.Buttons" class="card-footer">
                            <span v-for="(but, index) in item.Buttons">
                                <a :href="but.URL" class="btn btn-primary" target="_blank"><i v-if="but.Icon" :class="but.Icon"></i>{{but.Title}}</a>
                                <span v-if="but.Suffix" class="m-2">{{but.Suffix}}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pb-md-4 mx-auto text-center">
                <p class="fs-5"><i class="fas fa-copyright"></i> 1994 - {{currentYear}} Andrew Lunn</p>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
        <script src="https://kit.fontawesome.com/163bf520b6.js" crossorigin="anonymous"></script>
        <script src="app.js"></script>
	</body>
</html>