More styling, more content.

assets/js/main.js

@@ -1 +1 @@
-console.log("Hello from Shifu!");
+console.log("Hi!");

assets/scss/main.scss

@@ -2,8 +2,9 @@
 
 $borderRadius: 8px;
 $textColor: #0f0f0f;
+$linkColor: #717171;
 $lightGray: #e6e6e6;
-$highlight: #82b3db;
+$highlight: #c0d9f0;
 
 * {
 	box-sizing: border-box;
@@ -14,9 +15,8 @@ $highlight: #82b3db;
 }
 
 body {
-	padding: 80px 40px;
+	margin: 0;
-	max-width: 1000px;
+	padding: 0;
-	margin: 0 auto;
 }
 
 h1, h2 {
@@ -36,18 +36,27 @@ h2 {
 a {
 	text-decoration: none;
 	transition: all 0.3s;
-	color: $highlight;
+	color: $linkColor;
 
 	&:hover {
 		color: $textColor;
 	}
 }
 
+p {
+	margin: 20px 0;
+}
+
 nav {
+	padding: 80px 40px;
+	background: $highlight;
+
+	.content {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-	margin: 0 0 80px 0;
+		max-width: 1000px;
+		margin: 0 auto;
 
 		ul {
 			display: flex;
@@ -63,8 +72,17 @@ nav {
 				a {
 					color: $textColor;
 
+					svg {
+						fill: $textColor;
+						transition: all 0.3s;
+					}
+
 					&:hover {
-					color: $highlight;
+						color: $linkColor;
+
+						svg {
+							fill: $linkColor;
+						}
 					}
 				}
 			}
@@ -74,32 +92,48 @@ nav {
 			display: inline-block;
 			padding: 8px 16px;
 			border-radius: $borderRadius;
-		border: 2px solid $highlight;
+			border: 2px solid $textColor;
 			color: $textColor;
 			transition: all 0.3s;
-		color: $highlight;
 
 			&:hover {
-			background: $highlight;
+				background: $textColor;
 				color: #fff;
 			}
 		}
 	}
+}
 
 section {
-	margin: 0 0 80px 0;
+	max-width: 1080px;
+	margin: 80px auto 0 auto;
+	padding: 0 40px;
 }
 
 footer {
-	margin: 0 0 80px 0;
+	max-width: 1080px;
-	padding: 40px 0;
+	margin: 80px auto 0 auto;
+	padding: 0 40px;
+
+	.content {
+		max-width: 1000px;
+		margin: 0 auto;
 		border-style: solid;
 		border-width: 2px 0 0 0;
 		border-color: $lightGray;
+		padding: 40px 0;
+	}
 }
 
 .intro {
+	background: $highlight;
+	max-width: 100%;
+	padding: 0 40px 80px 40px;
+	margin: 0;
+
 	article {
+		max-width: 1000px;
+		margin: 0 auto;
 		display: flex;
 		gap: 40px;
 		justify-content: flex-start;
@@ -110,8 +144,8 @@ footer {
 		}
 
 		img {
-			max-width: 256px;
+			max-width: 196px;
-			max-height: 256px;
+			max-height: 196px;
 			aspect-ratio: 1;
 			border-radius: $borderRadius;
 		}

content/404.json

@@ -0,0 +1,28 @@
+{
+    "path": {
+        "en": "/404"
+    },
+    "sitemap": {
+        "priority": "0.1"
+    },
+    "content": {
+        "content": [
+            {"ref": "head"},
+            {"ref": "nav"},
+            {
+                "tpl": "text",
+                "data": {
+                    "size": "h1"
+                },
+                "copy": {
+                    "en": {
+                        "headline": "404",
+                        "text": "<p>Whoops — this page does not exist.</p>"
+                    }
+                }
+            },
+            {"ref": "footer"},
+            {"ref": "end"}
+        ]
+    }
+}

content/blog.json

@@ -0,0 +1,16 @@
+{
+    "path": {
+        "en": "/blog"
+    },
+    "sitemap": {
+        "priority": "0.9"
+    },
+    "content": {
+        "content": [
+            {"ref": "head"},
+            {"ref": "nav"},
+            {"ref": "footer"},
+            {"ref": "end"}
+        ]
+    }
+}

content/home.json

@@ -8,9 +8,20 @@
     "content": {
         "content": [
             {"ref": "head"},
+            {"ref": "nav"},
             {
                 "tpl": "intro"
             },
+            {
+                "tpl": "text",
+                "copy": {
+                    "en": {
+                        "headline": "TODO",
+                        "text": "<ul><li>About</li><li>Skills</li><li>Projects</li><li>Work Experience</li><li>Hire me!</li></ul>"
+                    }
+                }
+            },
+            {"ref": "footer"},
             {"ref": "end"}
         ]
     }

content/legal.json

@@ -0,0 +1,16 @@
+{
+    "path": {
+        "en": "/legal"
+    },
+    "sitemap": {
+        "priority": "0.1"
+    },
+    "content": {
+        "content": [
+            {"ref": "head"},
+            {"ref": "nav"},
+            {"ref": "footer"},
+            {"ref": "end"}
+        ]
+    }
+}

content/refs/footer.json

@@ -0,0 +1,3 @@
+{
+    "tpl": "footer"
+}

content/refs/nav.json

@@ -0,0 +1,3 @@
+{
+    "tpl": "nav"
+}

static/web/main.css

@@ -1 +1 @@
-@font-face{font-family:"Open Sans";font-style:italic;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Italic.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Bold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-BoldItalic.ttf") format("truetype")}*{box-sizing:border-box;font-family:"Open Sans",sans-serif;font-size:18px;line-height:1.5;color:#0f0f0f}body{padding:80px 40px;max-width:1000px;margin:0 auto}h1,h2{font-size:32px;margin:0 0 40px 0;font-weight:normal}h1 a,h2 a{font-size:32px}h2{font-size:26px}a{text-decoration:none;transition:all .3s;color:#82b3db}a:hover{color:#0f0f0f}nav{display:flex;justify-content:space-between;align-items:center;margin:0 0 80px 0}nav ul{display:flex;gap:20px;margin:0;padding:0}nav ul li{list-style:none;margin:0;padding:0}nav ul li a{color:#0f0f0f}nav ul li a:hover{color:#82b3db}nav .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:2px solid #82b3db;color:#0f0f0f;transition:all .3s;color:#82b3db}nav .contact:hover{background:#82b3db;color:#fff}section{margin:0 0 80px 0}footer{margin:0 0 80px 0;padding:40px 0;border-style:solid;border-width:2px 0 0 0;border-color:#e6e6e6}.intro article{display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:256px;max-height:256px;aspect-ratio:1;border-radius:8px}/*# sourceMappingURL=main.css.map */
+@font-face{font-family:"Open Sans";font-style:italic;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Italic.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Bold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-BoldItalic.ttf") format("truetype")}*{box-sizing:border-box;font-family:"Open Sans",sans-serif;font-size:18px;line-height:1.5;color:#0f0f0f}body{margin:0;padding:0}h1,h2{font-size:32px;margin:0 0 40px 0;font-weight:normal}h1 a,h2 a{font-size:32px}h2{font-size:26px}a{text-decoration:none;transition:all .3s;color:#717171}a:hover{color:#0f0f0f}p{margin:20px 0}nav{padding:80px 40px;background:#c0d9f0}nav .content{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto}nav .content ul{display:flex;gap:20px;margin:0;padding:0}nav .content ul li{list-style:none;margin:0;padding:0}nav .content ul li a{color:#0f0f0f}nav .content ul li a svg{fill:#0f0f0f;transition:all .3s}nav .content ul li a:hover{color:#717171}nav .content ul li a:hover svg{fill:#717171}nav .content .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:2px solid #0f0f0f;color:#0f0f0f;transition:all .3s}nav .content .contact:hover{background:#0f0f0f;color:#fff}section{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer .content{max-width:1000px;margin:0 auto;border-style:solid;border-width:2px 0 0 0;border-color:#e6e6e6;padding:40px 0}.intro{background:#c0d9f0;max-width:100%;padding:0 40px 80px 40px;margin:0}.intro article{max-width:1000px;margin:0 auto;display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:196px;max-height:196px;aspect-ratio:1;border-radius:8px}/*# sourceMappingURL=main.css.map */

static/web/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../assets/scss/_font.scss","../../assets/scss/main.scss"],"names":[],"mappings":"AAAA,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,0DAGJ,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,2DAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,wDAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,8DC1BJ,EACC,sBACA,mCACA,eACA,gBACA,MATW,QAYZ,KACC,kBACA,iBACA,cAGD,MACC,eACA,kBACA,mBAEA,UACC,eAIF,GACC,eAGD,EACC,qBACA,mBACA,MAjCW,QAmCX,QACC,MAtCU,QA0CZ,IACC,aACA,8BACA,mBACA,kBAEA,OACC,aACA,SACA,SACA,UAEA,UACC,gBACA,SACA,UAEA,YACC,MA5DQ,QA8DR,kBACC,MA7DO,QAmEX,aACC,qBACA,iBACA,cAzEa,IA0Eb,yBACA,MA1EU,QA2EV,mBACA,MA1EU,QA4EV,mBACC,WA7ES,QA8ET,WAKH,QACC,kBAGD,OACC,kBACA,eACA,mBACA,uBACA,aA7FW,QAiGX,eACC,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAjHY","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../assets/scss/_font.scss","../../assets/scss/main.scss"],"names":[],"mappings":"AAAA,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,0DAGJ,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,2DAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,wDAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,8DCzBJ,EACC,sBACA,mCACA,eACA,gBACA,MAVW,QAaZ,KACC,SACA,UAGD,MACC,eACA,kBACA,mBAEA,UACC,eAIF,GACC,eAGD,EACC,qBACA,mBACA,MAlCW,QAoCX,QACC,MAtCU,QA0CZ,EACC,cAGD,IACC,kBACA,WA7CW,QA+CX,aACC,aACA,8BACA,mBACA,iBACA,cAEA,gBACC,aACA,SACA,SACA,UAEA,mBACC,gBACA,SACA,UAEA,qBACC,MArEO,QAuEP,yBACC,KAxEM,QAyEN,mBAGD,2BACC,MA5EM,QA8EN,+BACC,KA/EK,QAsFV,sBACC,qBACA,iBACA,cA3FY,IA4FZ,yBACA,MA5FS,QA6FT,mBAEA,4BACC,WAhGQ,QAiGR,WAMJ,QACC,iBACA,wBACA,eAGD,OACC,iBACA,wBACA,eAEA,gBACC,iBACA,cACA,mBACA,uBACA,aArHU,QAsHV,eAIF,OACC,WA1HW,QA2HX,eACA,yBACA,SAEA,eACC,iBACA,cACA,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAnJY","file":"main.css"}

static/web/main.min.js

@@ -1 +1 @@
-(()=>{console.log("Hello from Shifu!");})();
+(()=>{console.log("Hi!");})();

tpl/footer.html

@@ -0,0 +1,7 @@
+<footer>
+    <div class="content">
+        <p>Looking for more? Read my blog articles on <a href="https://pirsch.io/blog" target="_blank">Pirsch Analytics</a> and <a href="https://emvi.com/blog" target="_blank">Emvi</a>!</p>
+        <p>If you have a business proposal for me, please use the <strong>Contact me</strong> button at the top.</p>
+        <p>This page does not use cookies. <a href="/legal">Legal</a></p>
+    </div>
+</footer>

tpl/intro.html

@@ -1,46 +1,6 @@
-<nav>
-    <div>
-        <ul>
-            <li>
-                <a href="/">Home</a>
-            </li>
-            <li>
-                <a href="/blog">Blog</a>
-            </li>
-            <li>
-                <a href="https://github.com/Kugelschieber" target="_blank">GitHub</a>
-            </li>
-            <li>
-                <a href="https://x.com/m5blum" target="_blank">Twitter/X</a>
-            </li>
-            <li>
-                <a href="https://social.anoxinon.de/@m5blum" target="_blank">Mastodon</a>
-            </li>
-        </ul>
-    </div>
-    <div>
-        <a href="mailto:marvin.blum@emvi.com" class="contact">Contact me</a>
-    </div>
-</nav>
-
 <section class="intro">
     <article>
         <h1>Hi, I'm Marvin, co-founder of <a href="https://pirsch.io" target="_blank">Pirsch Analytics</a> and <a href="https://emvi.com" target="_blank">Emvi</a>, software engineer, and open-source enthusiast.</h1>
         <img src="/static/img/me.jpg" alt="Picture" />
     </article>
 </section>
-
-<section>
-    <h2>TODO</h2>
-    <ul>
-        <li>About</li>
-        <li>Skills</li>
-        <li>Projects</li>
-        <li>Work Experience</li>
-        <li>Hire me!</li>
-    </ul>
-</section>
-
-<footer>
-    <p>TODO Footer</p>
-</footer>

tpl/nav.html

@@ -0,0 +1,39 @@
+<nav>
+    <div class="content">
+        <ul>
+            <li>
+                <a href="/">Home</a>
+            </li>
+            <li>
+                <a href="/blog">Blog</a>
+            </li>
+            <li>
+                <a href="https://github.com/Kugelschieber" target="_blank">
+                    GitHub
+                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48">
+                        <path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path>
+                    </svg>
+                </a>
+            </li>
+            <li>
+                <a href="https://x.com/m5blum" target="_blank">
+                    Twitter/X
+                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48">
+                        <path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path>
+                    </svg>
+                </a>
+            </li>
+            <li>
+                <a href="https://social.anoxinon.de/@m5blum" target="_blank">
+                    Mastodon
+                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48">
+                        <path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path>
+                    </svg>
+                </a>
+            </li>
+        </ul>
+        <div>
+            <a href="mailto:marvin.blum@emvi.com" class="contact">Contact me</a>
+        </div>
+    </div>
+</nav>

tpl/text.html

@@ -0,0 +1,13 @@
+{{$size := get .Content "size"}}
+
+<section>
+    {{if $size}}
+        {{html (fmt "<%s>" $size)}}
+            {{copy .Page .Content "headline"}}
+        {{html (fmt "</%s>" $size)}}
+    {{else}}
+        <h2>{{copy .Page .Content "headline"}}</h2>
+    {{end}}
+
+    {{html (copy .Page .Content "text")}}
+</section>