initial commit

7 files changed, 306 insertions, 0 deletions

diff --git a/views/404.html b/views/404.html
new file mode 100644
index 0000000..fc75002
--- /dev/null
+++ b/views/404.html
@@ -0,0 +1,14 @@
+{% extends "snippets/layout.html" %}
+
+{% block title "404 | iamfabulous.de" %}
+
+{% block main %}
+
+<div class="container">
+
+	<h1>404 - Page not Found</h1>
+	<p>Oh no! This page does not exist. Start over. Do not pass Go! Do not collect 200 dollars!</p>
+
+</div>
+
+{% endblock %}
diff --git a/views/about.html b/views/about.html
new file mode 100644
index 0000000..968a84b
--- /dev/null
+++ b/views/about.html
@@ -0,0 +1,62 @@
+{% extends "snippets/layout.html" %}
+
+{% block title "about me | iamfabulous.de" %}
+
+{% block css %}
+.main {
+	margin-top: 1.5rem;
+	font-size: 1.25rem;
+}
+.float-right-mb {
+	float: right !important;
+}
+@media (max-width: 992px) {
+	.float-right-mb {
+		float: none !important;
+	}
+}
+.text-small {
+	font-size: 1rem;
+}
+{% endblock %}
+
+{% block main %}
+
+<div class="container">
+
+	<h1>About Me</h1>
+<p>
+Hi!
+</p>
+
+<div class="float-right">
+<img src="/img/me.png" class="float-right" width=200 height=200>
+<br>
+<div class="ttext-muted text-small text-center"><em>That's how I look today.</em></div>
+</div>
+
+<p>
+I study computer science in Berlin and work at my university’s data center. There I’m currently focusing on traditional database technology, including modern SQL, database applications and porting software from MySQL or Sybase to PostgreSQL. My favourite part is complaining over MySQL’s date functions. At work we use PHP, but on my own I rather write stuff in Golang.
+</p>
+
+<p>
+	I play the piano since I’m 7 years old. Not so long ago I began taking lessons in classical singing and participated since in different choirs. Some of our performances included the "Elias" by Mendelssohn, "Petite messe solennelle" by Rossini, "Ein deutsches Requiem" by Brahms and the Symphony No. 8 by Mahler.
+	<br>
+	My girlfriend and I started to do competitive ballroom dancing. We also dabbled with some Latin dance and Swing on a much lower niveau.
+</p>
+
+<p>
+	Another hobby I’m celebrating is good liquor. I’m the author of <a href="https://www.fuselkoenig.de" title="Fuselkönig - Supermarkt-Spirituosen im Test">Fuselkönig.de</a>, a blog about spirits. Yeah, you read that right, I blog about alcohol. Why? Because I’m excited by fragrances since I’m young and, honestly, perfume does not taste as good. If you visit Germany, maybe you should check out the blog to know which bottle you should grab and which you better leave on the shelf. It’s in German, but Google Translator should do.
+</p>
+
+<p>
+	Last but not least I'm interested in molecular gastronomy (reading books like <a href="https://en.wikipedia.org/wiki/On_Food_and_Cooking" title="On Food and Cooking">this famous one</a> by Harold McGee), chinese or japanese tea (everything <a href="https://en.wikipedia.org/wiki/Camellia_sinensis" title="Also known as tea plant">Camellia sinensis</a>) and fresh grinded coffee, currently using a Baratza Encore and the AeroPress.
+</p>
+
+<!-- p>
+If you like, you can follow me on Twitter or Pinterest. Some of my projects are listed here as well.
+</p-->
+
+</div>
+
+{% endblock %}
diff --git a/views/index.html b/views/index.html
new file mode 100644
index 0000000..055a391
--- /dev/null
+++ b/views/index.html
@@ -0,0 +1,42 @@
+{% extends "snippets/layout.html" %}
+
+{% block css %}
+	.main {
+		margin-top: 8rem;
+	}
+	@media (max-width: 992px) {
+		.main {
+			margin-top: 4rem;
+		}
+	}
+	li {
+		margin-bottom: 1rem;
+	}
+{% endblock %}
+
+{% block main %}
+
+<div class="container">
+
+	<ul class="list-unstyled text-left">
+		<li>
+			I did some stuff online:
+			<br>
+			<a href="/projects" title="projects">Side Projects</a>
+		</li>
+		<li>
+			<strike>Stupi</strike>.. serious things I needed to exist: 
+			<br>
+			<a href="/tools" title="tools">Some funny, simple tools</a>
+		</li>
+		<li>
+			<a href="/about" title="about me">About Me</a> / <a href="https://www.fuselkoenig.de/kontakt/" title="contact me">Contact</a>
+		</li>
+		<li>
+			
+		</li>
+	</ul>
+
+</div>
+
+{% endblock %}
diff --git a/views/projects.html b/views/projects.html
new file mode 100644
index 0000000..59ccf7b
--- /dev/null
+++ b/views/projects.html
@@ -0,0 +1,26 @@
+{% extends "snippets/layout.html" %}
+
+{% block title "projects | iamfabulous.de" %}
+{% block main %}
+
+<div class="container">
+
+	<h1>My Projects</h1>
+	<ul>
+		<li>
+	<a href="https://www.fuselkoenig.de" title="Fuselkönig - Supermarkt-Spirituosen im Test">Fuselkönig.de</a> - Blog über Alkohol
+		</li>
+		<li>
+	<a href="https://angebote.fuselkoenig.de" title="Fuselkönig Angebote - Finde den besten Deal in Sachen Spirituosen">Schnaps Angebote</a> - Ich sammle Sonderangebote in Sachen Spirituosen, und liste sie hier auf. Jeden Tag neue Schnäppchen!
+		</li>
+		<li>
+	<a href="https://www.mostdiscussed.com" title="Most Discussed - Good Wikipedia articles and their discussions">MostDiscussed.com</a> - I collect (good) Wikipedia articles and their respective discussions posted on HN.
+		</li>
+		<li>
+	<a href="https://www.anistats.com" title="anistats - more data about anime than average">Anistats.com</a> - I try to build something with historical anime data. Anistats keeps track about how current anime get scored on MyAnimeList.net, and displays the progression over time.
+		</li>
+	</ul>
+
+</div>
+
+{% endblock %}
diff --git a/views/snippets/layout.html b/views/snippets/layout.html
new file mode 100644
index 0000000..ff468a0
--- /dev/null
+++ b/views/snippets/layout.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	{% block description %}
+	<meta name="description" content="">
+	{% endblock %}
+	<link rel='icon' href="data:image/x-icon;base64,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">
+	{% block maincss %}
+	<!--link rel="stylesheet" href="/css/bootstrap.css"-->
+	<style>{{ maincss() }}</style>
+	{% endblock %}
+	<title>
+		{% block title %}
+		iamfabulous.de
+		{% endblock %}
+	</title>
+	<style>
+		html {
+			width: 100%;
+		}
+		.main {
+			margin-top: 1rem;
+			font-size: 1.5rem;
+		}
+		@media (min-width: 992px) {
+			.main {
+				margin-top: 8rem;
+				font-size: 2rem;
+			}
+		}
+		h1 {
+			margin-bottom: 2rem;
+		}
+		.hidden {
+			visibility: hidden;
+		}
+		#footer {
+			width: 100%;
+			height: 60px; /* Set the fixed height of the footer here */
+			line-height: 60px; /* Vertically center the text there */
+			background-color: #f5f5f5;
+		}
+		.navbar {
+			background-color: #f5f5f5;
+		}
+
+		/**
+		 * ## Bottom Border Color in Navbar
+		 */
+		.navbar-nav .active {
+			  border-bottom: 5px solid #f07206;
+			  bottom: -10px;
+		}
+		@media (max-width: 992px) {
+			.navbar-nav .active {
+			  	width: 30%;
+			}
+		}
+	</style>
+	<style>
+		{% block css %}
+		{% endblock %}
+	</style>
+</head>
+<body class="d-flex flex-column min-vh-100">
+	{% include("snippets/navbar.html") %}
+
+<main class="main">
+	{% block main %}
+	{% endblock %}
+</main>
+
+<footer id="footer" class="mt-auto">
+	<div class="container text-right">
+		{% block footer %}
+		{% endblock %}
+	</div>
+</footer>
+
+<script defer src="/js/jquery-3.5.1.min.js"></script>
+<script defer src="/js/bootstrap.js"></script>
+
+
+<script type="text/javascript">
+  var _paq = _paq || [];
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  _paq.push(['trackPageView']);
+  _paq.push(['enableHeartBeatTimer', 5]);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="//www.maximilianmoehring.com/";
+    _paq.push(['setTrackerUrl', u+'jsx/']);
+    _paq.push(['setSiteId', '35']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'jsx/'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+
+</body>
diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html
new file mode 100644
index 0000000..d8819dc
--- /dev/null
+++ b/views/snippets/navbar.html
@@ -0,0 +1,27 @@
+<nav class="navbar navbar-expand-md navbar-light shadow-sm">
+	<div class="container">
+		<a class="navbar-brand" href="/">Maximilian Möhring</a>
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+
+		<div class="collapse navbar-collapse" id="navbarSupportedContent">
+			<!-- Left Side Of Navbar -->
+			<ul class="navbar-nav mr-auto">
+			</ul>
+
+			<!-- Right Side Of Navbar -->
+			<ul class="navbar-nav ml-auto">
+				<li class="nav-item">
+					<a class="nav-link {{ is_active('/projects') }}" href="/projects">/projects</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link {{ is_active('/tools') }}" href="/tools">/tools</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link {{ is_active('/about') }}" href="/about">/about me</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</nav>
diff --git a/views/tools.html b/views/tools.html
new file mode 100644
index 0000000..887d683
--- /dev/null
+++ b/views/tools.html
@@ -0,0 +1,35 @@
+{% extends "snippets/layout.html" %}
+
+{% block title "tools | iamfabulous.de" %}
+{% block main %}
+
+<div class="container">
+
+	<h1>Some funny, simple tools</h1>
+	<ul>
+		<li>
+			<a href="https://faces.iamfabulous.de" title="Best faces on the net">Best faces on the net</a>
+		</li>
+		<li>
+			<a href="https://untrack.iamfabulous.de" title="Entfernt Tracking Parameter aus der URL">untrack - Entfernt Tracking Parameter aus der URL</a>
+		</li>
+		<li>
+			<a href="https://pizza.iamfabulous.de" title="Pizzarechner">Pizzarechner</a>
+		</li>
+		<li>
+			<a href="https://zeitumstellung.iamfabulous.de" title="Zeitumstellung">Zeitumstellung - Als iCal-Feed für deinen Kalender</a>
+		</li>
+		<li>
+			<a href="https://bpm.iamfabulous.de" title="BPM / Tanz">BPM / Tanz</a>
+		</li>
+		<li>
+			<a href="https://feeds.iamfabulous.de/Dilbert.xml" title="Dilbert RSS Feed">Dilbert RSS Feed. With Images!</a>
+		</li>
+		<li>
+			<a href="https://ghrss.iamfabulous.de" title="Trending Repositories as RSS Feed">Github - Some Trending Repositories as RSS Feed</a>
+		</li>
+	</ul>
+
+</div>
+
+{% endblock %}