Current version of homepage

.gitignore

@@ -1 +1 @@
-/.idea/
+/.idea/

public/.htaccess

@@ -0,0 +1 @@
+RewriteRule ^(\w+(/?\w*)*(\?.*)?)$ index.php/$1

public/default.css

@@ -0,0 +1,171 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700'););
+
+html, body{
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body  {
+  background-color: black;
+  color: #00c800;
+  font-family: "Roboto", sans-serif;
+  padding: 15px 15px 0 15px;
+}
+a img {
+  border-width: 0;
+}
+a {
+  color: #8CD28C;
+  text-decoration: none;
+}
+a:hover  {
+  text-decoration: underline;
+}
+h1, h2 , h3, h4, h5, h6 {
+  text-align: center;
+  margin: 5px 0 10px 0;
+}
+h3, h4, h5, h6 {
+	font-weight: normal;
+}
+section:not(.clear),
+.section {
+  text-align: left;
+  margin-bottom: 15px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
+  padding: 15px;
+  position: relative;
+  min-width: 315px;
+}
+main {
+  display: block;
+}
+footer {
+  text-align: right !important; /* because section class will go later */
+}
+@keyframes spin { 100% { transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+#background {
+  position: fixed;
+  z-index: -1;
+
+  top: 50%;
+  left: 50%;
+  width: 2000px;
+  height: 2000px;
+  margin-top: -1000px;
+  margin-left: -1000px;
+
+  background: url("img/background.png") no-repeat center center;
+  background-size: 100% 100%;
+
+  animation: spin 100s linear infinite;
+  -webkit-animation: spin 100s linear infinite;
+  -moz-animation: spin 100s linear infinite;
+}
+.center {
+  text-align: center !important;
+}
+.clear {
+  clear: both;
+}
+
+#profile {
+}
+.avatar {
+  float: left;
+  margin: 0 10px 10px 0;
+  /*border-radius: 10px;*/
+  width: 80px;
+  height: 80px;
+}
+#contact {
+  vertical-align: middle;
+}
+.contactlinks {
+  margin-top: 0.5em;
+  text-align: center;
+}
+.contactlink {
+  display: inline-block;
+  vertical-align: middle;
+  width: 3em;
+  height: 3em;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.contactlink.steam {
+  background-image: url('img/steam.png');
+}
+.contactlink.gmail {
+  background-image: url('img/gmail.png');
+}
+.contactlink.youtube {
+  background-image: url('img/youtube.png');
+}
+.contactlink.github {
+  background-image: url('img/github.png');
+}
+.contactlink.home {
+  background-image: url('img/home.png');
+}
+.contactlink.linkedin {
+  background-image: url('img/linkedin.png');
+}
+.project-buttons {
+  margin: 0 auto;
+}
+.project-button {
+  display: block;
+  float: left;
+  margin: 0 10px 10px 0;
+  transition-duration: 200ms;
+  width: 145px;
+  height: 95px;
+}
+.project-button.horizontal {
+  width: 300px;
+  height: 95px;
+}
+.project-button.vertical {
+  width: 145px;
+  height: 200px;
+}
+.project-button.large {
+  width: 300px;
+  height: 200px;
+}
+.project-image {
+  border-radius: 2px;
+  width: 100%;
+  height: 100%;
+}
+.project-button:hover  {
+  filter: brightness(1.3);
+  -webkit-filter: brightness(1.3);
+}
+.clock__digit {
+  font-size: 3rem;
+  display: inline-block;
+  width: 70px;
+}
+.clock__date {
+    margin-bottom: 1rem;
+}
+.clock__timestamp {
+  color: #007900;
+}
+.clock__timestamp:before {
+  content: "(";
+}
+.clock__timestamp:after {
+  content: ")";
+}
+.info-section {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}

public/index.js

@@ -0,0 +1,53 @@
+$(document).ready(function() {
+    $(".project-buttons").masonry({
+        itemSelector: ".project-button",
+        columnWidth: 155,
+        fitWidth: true,
+        transitionDuration: 0
+    });
+});
+
+// Clock
+var weekdays = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
+var months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
+
+// Get it, date? Tough crowd today...
+function upDate() {
+    var date = new Date();
+    var hours = ("0" + date.getHours()).slice(-2);
+    var minutes = ("0" + date.getMinutes()).slice(-2);
+    var seconds = ("0" + date.getSeconds()).slice(-2);
+    var dateString = weekdays[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate();
+    var timestamp = Math.floor(date.getTime() / 1000);
+
+    if ($(".clock__digit--hours").text() != hours) {
+        $(".clock__digit--hours").text(hours);
+    }
+    if ($(".clock__digit--minutes").text() != minutes) {
+        $(".clock__digit--minutes").text(minutes);
+    }
+    if ($(".clock__digit--seconds").text() != seconds) {
+        $(".clock__digit--seconds").text(seconds);
+    }
+    if ($(".clock__date").text() != dateString) {
+        $(".clock__date").text(dateString);
+    }
+    if ($(".clock__timestamp").text() != timestamp) {
+        $(".clock__timestamp").text(timestamp);
+    }
+
+    // Teehee
+    if (hours == 13 && minutes == 33 && seconds == 37) {
+        var audio = new Audio("/soundboard-api/samples/sfx/airhorn2.ogg");
+        audio.volume = 0.5;
+        audio.play();
+    }
+
+    //schedule next update at its change point
+    setTimeout(upDate, 1000 - date.getMilliseconds());
+}
+
+if ($(".clock").html("<div class='clock__digit clock__digit--hours'></div><div class='clock__digit clock__digit--minutes'></div><div class='clock__digit clock__digit--seconds'></div><div class='clock__date'></div><div class='clock__timestamp'></div>").length > 0) {
+    // Prime upDate()
+    upDate();
+}

public/index.php

@@ -1,69 +1,31 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-    <head>
-        <title>Homepage</title>
-        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
-        <meta name="description" content="villermen's homepage" />
-        <meta name="keywords" content="villermen homepage villermen.com filebrowser vapor minecraft server" />
-        <meta name="author" content="Villermen" />
-        <link rel="shortcut icon" href="favicon.ico" />
-        <style type="text/css">
-            body {
-                background-color: black;
-                color: #430700;
-                text-align: center;
-                margin-top: 50px;
-                font: 14pt impact;
-                white-space: nowrap;
-            }
-            .bigbutton {
-                width: 349px;
-                height: 349px;
-                display: inline-block;
-                background-image: url(buttonsprites.png);
-            }
-            #button_projects {
-                background-position: 0 0;
-            }
-            #button_projects:hover {
-                background-position: 0 349px;
-            }
-            #button_minecraft {
-                background-position: 1050px 0;
-            }
-            #button_minecraft:hover {
-                background-position: 1050px 349px;
-            }
-            #button_tools {
-                background-position: 700px 0;
-            }
-            #button_tools:hover {
-                background-position: 700px 349px;
-            }
-            #button_filebrowser {
-                background-position: 350px 0;
-            }
-            #button_filebrowser:hover {
-                background-position: 350px 349px;
-            }
-            #button_noie {
-                display: block;
-                width: 50px;
-                height: 50px;
-                background: url(noiebuttonsprites.png) 0 0;
-                margin: auto;
-            }
-            #button_noie:hover {
-                background-position: 50px 0;
-            }
-        </style>
-    </head>
-    <body>
-        <a class='bigbutton' id='button_projects' href='/'></a><a class='bigbutton' id='button_minecraft' href='/minecraft'></a><br />
-        <?php
-        if (preg_match("~MSIE|Internet Explorer~i",$_SERVER["HTTP_USER_AGENT"]))
-            echo "<a id='button_noie' href='noie' /><br />";
-        ?>
-        <a class='bigbutton' id='button_tools' href='/browser'></a><a class='bigbutton' id='button_filebrowser' href='/browser'></a>
-    </body>
-</html>
+<?php
+
+require_once("../src/Viller.php");
+
+$viller = new Viller();
+
+$viller->title = "Villermen's homepage";
+$viller->afterContent = "";
+
+//process page argument and set content
+$viller->content = "";
+
+$viller->page = isset($viller->pathArgs[0]) ? $viller->pathArgs[0] : "index";
+
+if (!preg_match("/^\w+$/", $viller->page))
+    $viller->page = "404";
+
+$pageFile = stream_resolve_include_path("../src/pages/{$viller->page}.php");
+if (!$pageFile)
+{
+    $viller->page = "404";
+    $pageFile = "../src/pages/404.php";
+}
+
+ob_start();
+
+require($pageFile);
+
+$viller->content .= ob_get_clean();
+
+require_once("../src/layout.php");