.

12 files changed, 210 insertions, 64 deletions

diff --git a/app.php b/app.php
index 16ce17c..f64c6aa 100644
--- a/app.php
+++ b/app.php
@@ -14,7 +14,8 @@ $function = new \Twig\TwigFunction('is_active', function($route) {
 $twig->addFunction($function);
 
 $function = new \Twig\TwigFunction('maincss', function() {
-	echo readfile(__DIR__ . '/public/css/bootstrap.min.css');
+	echo file_get_contents(__DIR__ . '/public/css/bootstrap.min.css');
+	echo file_get_contents(__DIR__ . '/public/css/app.css');
 });
 $twig->addFunction($function);
 
diff --git a/public/css/app.css b/public/css/app.css
new file mode 100644
index 0000000..a26e7d1
--- /dev/null
+++ b/public/css/app.css
@@ -0,0 +1,8 @@
+
+.mastodon {
+  display: inline-block;
+  font-size: inherit;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+}
diff --git a/public/index.php b/public/index.php
index 957bed4..0460889 100644
--- a/public/index.php
+++ b/public/index.php
@@ -10,11 +10,17 @@ case("/"):
 	echo $twig->render('index.html');
 	break;
 case("/about/"):
+	echo $twig->render('about2.html');
+	break;
+case("/about2/"):
 	echo $twig->render('about.html');
 	break;
-case("/projects/"):
+case("/projects2/"):
 	echo $twig->render('projects.html');
 	break;
+case("/projects/"):
+	echo $twig->render('projects_all.html');
+	break;
 case("/feeds/"):
 	echo $twig->render('feeds.html');
 	break;
diff --git a/views/about2.html b/views/about2.html
new file mode 100644
index 0000000..c16e76c
--- /dev/null
+++ b/views/about2.html
@@ -0,0 +1,102 @@
+{% extends "snippets/layout.html" %}
+
+{% block title "about me | Maximilian Möhring" %}
+
+{% block css %}
+.main {
+/*
+	font-size: 1.25rem;
+*/
+	margin-top: 4rem;
+}
+.img-show-desktop {
+	float: right !important;
+}
+.img-show-mobile {
+	display: none !important;
+}
+@media (max-width: 992px) {
+	.img-show-desktop {
+		display: none !important;
+	}
+	.img-show-mobile {
+		display: inherit !important;
+		margin-left:auto;
+		margin-right: auto;
+	}
+}
+.text-small {
+	font-size: 1rem;
+}
+{% endblock %}
+
+{% block main %}
+
+<div class="container">
+
+<div class="float-right img-show-desktop">
+	<img src="/img/me.png" class="float-right" width=200 height=200>
+	<!--br>
+	<div class="text-small text-center"><em>This is how I look these days.</em></divi-->
+</div>
+
+<div class="flavor-text">
+		<h1>About Me</h1>
+	<p>
+	Hi, to be short, I...
+	</p>
+</div>
+
+	<img src="/img/me.png" class="img-show-mobile" width=200 height=200>
+	<!--br>
+	<div class="text-small text-center"><em>This is how I look these days.</em></divi-->
+<div class="iimg-show-mobile">
+</div>
+
+<p>
+	<ul>
+		<li>
+			study computer science.
+		</li>
+		<li>
+			work as a database and sysadmin at my university.
+		</li>
+		<li>
+			have an education in wine (WSET Level 2 in Wine) and in spirits (WSET Level 2 in Spirits).
+		</li>
+		<li>
+			am also interested in culinary art, food science, specialty coffee or tea. <a href="https://www.fuselkoenig.de" title="Fuselkönig - Supermarkt-Spirituosen im Test">I blog about spirits in German.</a>
+		</i>
+		<li>
+			am a hobby musician. I play the piano, take singing lessons and publicly performed choral works, including Rossini ("Petite messe solennelle") and Gustav Mahler ("Symphony No. 8"), among others.
+		</li>
+		<li>
+			did competitive ballroom dancing (international standard) until my wife got pregnant.
+		</li>
+		<li>
+			have some <a href="/projects/">toy projects</a> and <a href="https://www.complicissimus.de/">started a blog in 2023</a>.
+		</li>
+	</ul>
+	<!--
+<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. I had the most joy when working with MySQL’s date functions. At work we use PHP (and Perl…), 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 in international standard. We also dabbled with some Latin dance and Swing on a much lower niveau.
+</p>
+
+<p>
+	If I have free time I try to explore the world of fine wine and other drinkable stuff. Currently I hold a WSET Level 2 Award in Wine and 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 booze. Why? Because I’m excited by taste and especially 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 food science and food culture in general, not alone wine and booze, but modernist and old school cooking, chinese or japanese tea (everything <a href="https://en.wikipedia.org/wiki/Camellia_sinensis" title="Also known as tea plant">Camellia sinensis</a>) and of course fresh grinded coffee to start my day, …and my afternoon.
+</p>
+
+-->
+</div>
+
+{% endblock %}
diff --git a/views/index.html b/views/index.html
index 2288172..cf103c6 100644
--- a/views/index.html
+++ b/views/index.html
@@ -57,7 +57,7 @@
 			</code>
 
 		</li>
-		<li>
+		<!--li>
 			<span class="text-muted"># <strike>Stupi</strike>.. serious things I needed to exist:</span>
 			<br>
 			<code>
@@ -67,7 +67,7 @@
 				<br>
 				<span class="keyword">endwhile</span>
 			</code>
-		</li>
+		</li-->
 		<li>
 			<span class="text-muted"># I have more hobbys besides sleep(10)</span>
 			<br>
diff --git a/views/projects.html b/views/projects.html
index f01a67b..ff64562 100644
--- a/views/projects.html
+++ b/views/projects.html
@@ -5,25 +5,7 @@
 
 <div class="container">
 
-	<div class="flavor-text">
-		<h1>My Projects</h1>
-		<em>Stuff I spent my free time on</em>
-	</div>
-
-	<ul>
-		<li>
-	<a href="https://www.fuselkoenig.de" title="Fuselkönig - Supermarkt-Spirituosen im Test">Fuselkönig.de</a> - Blog über Spirituosen, Wein, Cocktails, Bücher & Genuss
-		</li>
-		<li>
-	<a href="https://www.kategorischeraperitif.de" title="Der kategorische Aperitif - Essen macht satt, trinken macht glücklich">Der kategorische Aperitif</a> - Sonderangebote von Spirituosen und eine moderne Cocktaildatenbank
-		</li>
-		<li>
-	<a href="https://www.mostdiscussed.com" title="Most Discussed - Good Wikipedia articles and their discussions">MostDiscussed.com</a> - I index and curate good articles from Wikipedia and find where they are discussed on the internet (actually HN).
-		</li>
-		<li>
-	<a href="https://www.anistats.com" title="anistats - more data about anime than average" rel="nofollow">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>
+	{% include "snippets/projects.html" %}
 
 </div>
 
diff --git a/views/projects_all.html b/views/projects_all.html
new file mode 100644
index 0000000..15b6985
--- /dev/null
+++ b/views/projects_all.html
@@ -0,0 +1,22 @@
+{% extends "snippets/layout.html" %}
+
+{% block title "projects | Maximilian Möhring" %}
+{% block css %}
+.main {
+/*
+	font-size: 1.25rem;
+*/
+	margin-top: 4rem;
+}
+{% endblock %}
+{% block main %}
+
+<div class="container">
+
+	{% include "snippets/projects.html" %}
+
+	{% include "snippets/things.html" with {'included': true}%}
+
+</div>
+
+{% endblock %}
diff --git a/views/snippets/layout.html b/views/snippets/layout.html
index 17262b1..9a55ad4 100644
--- a/views/snippets/layout.html
+++ b/views/snippets/layout.html
@@ -101,6 +101,10 @@
 			color: #ddd277;
 		}
 
+		.included-space {
+			margin-top: 4rem;
+		}
+
 	</style>
 	<style>
 		{% block css %}
diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html
index 36524d7..3300ff0 100644
--- a/views/snippets/navbar.html
+++ b/views/snippets/navbar.html
@@ -15,9 +15,11 @@
 				<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('/things') }}" href="/things/">/things</a>
 				</li>
+				-->
 				<li class="nav-item">
 					<a class="nav-link {{ is_active('/about') }}" href="/about/">/about me</a>
 				</li>
diff --git a/views/snippets/projects.html b/views/snippets/projects.html
new file mode 100644
index 0000000..c389881
--- /dev/null
+++ b/views/snippets/projects.html
@@ -0,0 +1,19 @@
+	<div class="flavor-text">
+		<h1>My Projects</h1>
+		<em>Stuff I spent my free time on</em>
+	</div>
+
+	<ul>
+		<li>
+	<a href="https://www.fuselkoenig.de" title="Fuselkönig - Supermarkt-Spirituosen im Test">Fuselkönig.de</a> - Blog über Spirituosen, Wein, Cocktails, Bücher und mehr
+		</li>
+		<li>
+	<a href="https://www.kategorischeraperitif.de" title="Der kategorische Aperitif - Essen macht satt, trinken macht glücklich">Der kategorische Aperitif</a> - Sonderangebote von Spirituosen und eine moderne Cocktaildatenbank
+		</li>
+		<li>
+			<a href="https://www.mostdiscussed.com" title="Most Discussed - Good Wikipedia articles and their discussions">MostDiscussed.com</a> - I index and curate good articles from Wikipedia and find where they are discussed on the internet (actually HN). You can actually follow on <a href="https://mastodon.social/@MostDiscussed" title="Follow on Mastodon @MostDiscussed@mastodon.social" target=_blank>{{ source('img/mastodon.svg') }} Mastodon</a> to stay up to date.
+		</li>
+		<li>
+	<a href="https://www.anistats.com" title="anistats - more data about anime than average" rel="nofollow">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>
diff --git a/views/snippets/things.html b/views/snippets/things.html
new file mode 100644
index 0000000..88c2ce6
--- /dev/null
+++ b/views/snippets/things.html
@@ -0,0 +1,39 @@
+<div class="flavor-text {% if included == true %} included-space {% endif %}">
+		<!--h1>Some funny, simple tools</h1-->
+		<h1>Things</h1>
+		<em>Stupi.. serious things I needed to exist</em>
+	</div>
+
+	<ul>
+		<li>
+			<a href="/things/faces/" title="Best faces on the net">Best faces on the net</a>
+		</li>
+		<li>
+			<a href="/things/untrack/" title="Entfernt Tracking Parameter aus der URL">untrack</a> - Entfernt Tracking Parameter aus der URL
+		</li>
+		<li>
+			<a href="/things/pizza/" title="Pizzarechner">Pizzarechner</a>
+		</li>
+		<li>
+			<a href="/things/tanz/" title="BPM / Tanz">Click to count BPMs</a> - Tanzbar?
+		</li>
+	</ul>
+
+	<div class="flavor-text included-space">
+		<h1>iCal- / RSS-Feeds</h1>
+		<!--
+		<em>Fun fact: I structure my whole life around feeds!</em>
+		-->
+	</div>
+
+	<ul>
+		<li>
+			<a href="/things/zeitumstellung/" title="Zeitumstellung">Zeitumstellung</a> - Als iCal-Feed für deinen Kalender
+		</li>
+		<li>
+			<a href="/feed/dilbert/" title="Dilbert RSS Feed">Dilbert RSS Feed</a> (RIP 💀) - With Images!
+		</li>
+		<li>
+			<a href="/things/ghrss" title="GHRSS">Github Trending Repositories</a> - RSS-Feed
+		</li>
+	</ul>
diff --git a/views/things.html b/views/things.html
index 1c34d40..bc42ce1 100644
--- a/views/things.html
+++ b/views/things.html
@@ -3,52 +3,13 @@
 {% block title "things | Maximilian Möhring" %}
 
 {% block css %}
-.feed-flavor {
-	margin-top: 4rem;
-}
 {% endblock %}
+
 {% block main %}
 
 <div class="container">
 
-	<div class="flavor-text">
-		<h1>Some funny, simple tools</h1>
-		<em>Stupi.. serious things I needed to exist</em>
-	</div>
-
-	<ul>
-		<li>
-			<a href="/things/faces/" title="Best faces on the net">Best faces on the net</a>
-		</li>
-		<li>
-			<a href="/things/untrack/" title="Entfernt Tracking Parameter aus der URL">untrack - Entfernt Tracking Parameter aus der URL</a>
-		</li>
-		<li>
-			<a href="/things/pizza/" title="Pizzarechner">Pizzarechner</a>
-		</li>
-		<li>
-			<a href="/things/tanz/" title="BPM / Tanz">Click to count BPMs - Tanzbar?</a>
-		</li>
-	</ul>
-
-	<div class="flavor-text feed-flavor">
-		<h1>iCal- / RSS-Feeds</h1>
-		<!--
-		<em>Fun fact: I structure my whole life around feeds!</em>
-		-->
-	</div>
-
-	<ul>
-		<li>
-			<a href="/things/zeitumstellung/" title="Zeitumstellung">Zeitumstellung - Als iCal-Feed für deinen Kalender</a>
-		</li>
-		<li>
-			<a href="/feed/dilbert/" title="Dilbert RSS Feed">Dilbert RSS Feed. With Images!</a>
-		</li>
-		<li>
-			<a href="/things/ghrss" title="GHRSS">Github Trending Repositories as RSS-Feed</a>
-		</li>
-	</ul>
+	{% include "snippets/things.html" %}
 
 </div>