New home page

assets/sass/_content.scss

@@ -1,8 +1,16 @@
+@import "home";
+
+html {
+    min-height: 100vh;
+    margin: 0;
+}
+
 body {
     max-width: 980px;
     margin: auto;
-    min-height: 100%;
+    width: 100%;
-    padding-bottom: 20px;
+    height: 1px;
+    min-height: 100vh;
     font-family: $sansfont;
     font-weight: normal;
 
@@ -104,10 +112,12 @@ blockquote {
 code {
     // font-size: 1.2em;
     font-family: $monofont;
+    font-size: 0.9em;
+    box-sizing: border-box;
     padding: 3px;
-    background-color: #2b303b;
+    background-color: $faded-background-color;
     border-radius: 5px;
-    color: #cccccc;
+    color: $code-color;
 }
 
 a code {

assets/sass/_home.scss

@@ -0,0 +1,108 @@
+#homepageContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px;
+  box-sizing: border-box;
+
+  #homepage {
+    width: 100%;
+
+    h1#title {
+      font-weight: normal;
+      font-size: 4em;
+      margin: 0;
+    }
+
+    div#about {
+      line-height: 1.5em;
+
+      p {
+        min-width: 520px;
+        width: 60%;
+      }
+
+      a code {
+        color: $code-color;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+
+      ul {
+        list-style-type: "\22A2 ";
+        padding-left: 1.5em;
+
+        li {
+          padding-left: .5em;
+        }
+      }
+    }
+
+    h2 {
+      font-weight: normal;
+      margin-bottom: 6px;
+      color: $text-color;
+    }
+
+    h2#blog-posts-title {
+      a {
+        text-decoration: none;
+        color: $text-color;
+      }
+    }
+
+    #blog-posts {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-content: stretch;
+
+      @media screen and (max-width: 520px) {
+        flex-wrap: wrap;
+      }
+      @media screen and (min-width: 520px) {
+        flex-wrap: no-wrap;
+      }
+
+      gap: 20px;
+
+      .blog-post-link {
+        flex-grow: 1;
+        flex-basis: 100%;
+        padding: 8px;
+        background-color: $faded-background-color;
+        text-decoration: none;
+
+        .blog-post {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          flex-direction: column;
+          align-content: stretch;
+          justify-content: space-between;
+
+          color: $text-color;
+          text-decoration: none;
+
+          .title {
+            display: flex;
+          }
+
+          .details {
+            text-align: right;
+            color: $smaller-text-color;
+          }
+        }
+
+        &:hover .title {
+          text-decoration: underline;
+          text-decoration-style: dotted;
+        }
+      }
+    }
+  }
+}

assets/sass/main.scss

@@ -1,5 +1,6 @@
-@import "syntax";
 @import "agda";
+@import "mixins";
+@import "syntax";
 
 @font-face {
   font-family: 'PragmataPro Mono Liga';
@@ -13,22 +14,26 @@ $monofont: "PragmataPro Mono Liga", "Roboto Mono", "Roboto Mono for Powerline",
 
 @media (prefers-color-scheme: light) {
     $background-color: white;
+    $faded-background-color: darken($background-color, 10%);
     $heading-color: #15202B;
     $text-color: #15202B;
     $small-text-color: lighten($text-color, 10%);
-    $smaller-text-color: lighten($text-color, 18%);
+    $smaller-text-color: lighten($text-color, 20%);
     $faded: lightgray;
     $link-color: royalblue;
+    $code-color: firebrick;
     @import "content";
 }
 
 @media (prefers-color-scheme: dark) {
     $background-color: #15202B;
+    $faded-background-color: lighten($background-color, 10%);
     $heading-color: #E4E4E4;
     $text-color: #BCBCBC;
     $small-text-color: darken($text-color, 8%);
     $smaller-text-color: darken($text-color, 12%);
     $faded: #666;
     $link-color: lightskyblue;
+    $code-color: lighten(firebrick, 25%);
     @import "content";
 }

content/_index.md

@@ -2,4 +2,18 @@
 layout = "home"
 +++
 
-hello
+Hi there! I'm a recent graduate from the University of Minnesota, currently
+working as an associate researcher at [SIFT]. My computing-related interests lie
+in programming language design and analysis, systems security, cryptography, and
+distributed systems.
+
+[SIFT]: https://www.sift.net/
+
+## contact
+
+- Email: `b64d(bWFpbEBtemhhbmcuaW8=)`
+- PGP Key: [`925ECC02890D5CDAE26180D4BDA47A31A3C8EE6B`][PGP]
+- IRC: `mzh` on [libera.chat]
+
+[PGP]: https://keybase.io/michaelz/pgp_keys.asc?fingerprint=925ecc02890d5cdae26180d4bda47a31a3c8ee6b
+[libera.chat]: https://libera.chat

content/about/_index.md

@@ -7,16 +7,25 @@ type = "generic"
 layout = "single"
 +++
 
-Hi there! I'm a recently-graduated CS bachelor from the University of Minnesota, currently working as an associate researcher at [SIFT][11]. My computing-related interests lie in programming language design and analysis, systems security, cryptography, and distributed systems. <!-- more --> Some of the projects I've been working on in my free time include:
+Hi there! I'm a recent graduate from the University of Minnesota, currently
+working as an associate researcher at [SIFT][11]. My computing-related interests
+lie in programming language design and analysis, systems security, cryptography,
+and distributed systems. <!-- more --> Some of the projects I've been working on
+in my free time include:
 
 - [**Leanshot**][6], a Linux screen capture tool.
 - [**Garbage**][7], a CLI interface to the trash can API.
 
 More can be found on [this page][12] or my public [Gitea][2].
 
-I've also started making an increased effort at using and supporting [FOSS][8], and other software that're not predatory towards users. As a part of this effort, I'm also self-hosting and rewriting some of the services and software that I use regularly. Find out what I'm using [here][9].
+I've also started making an increased effort at using and supporting [FOSS][8],
+and other software that're not predatory towards users. As a part of this
+effort, I'm also self-hosting and rewriting some of the services and software
+that I use regularly. Find out what I'm using [here][9].
 
-I'm also an avid rhythm game player and beatmap creator, mostly involved with the free-to-play game [osu!][3]. Check out some of my beatmaps on my [osu! userpage][4].
+I'm also an avid rhythm game player and beatmap creator, mostly involved with
+the free-to-play game [osu!][3]. Check out some of my beatmaps on my [osu!
+userpage][4].
 
 ## contact
 

layouts/_default/baseof.html

@@ -12,6 +12,7 @@
     </head>
 
     <body>
+        {{ block "body" . }}
         <header>
             <div id="header" class="container">
                 <a href="/" id="title" class="title nocolorlink">{{ .Site.Title }}</a>
@@ -42,5 +43,6 @@
                 <a rel="me" href="https://social.mzhang.io/@michael">[mastodon]</a>.
             </p>
         </footer>
+        {{ end }}
     </body>
 </html>

layouts/home.html

@@ -1,17 +1,26 @@
-{{- define "content" -}}
+{{- define "body" -}}
 
+<div id="homepageContainer">
+    <div id="homepage">
+        <h1 id="title">michael zhang</h1>
+
+        <div id="about">{{ .Content }}</div>
+
+        <h2 id="blog-posts-title"><a href="/posts">recent blog posts &raquo;</a></h2>
+        <div id="blog-posts">
             {{ $posts := .GetPage "/posts" }}
-
+            {{- range first 3 $posts.Pages -}}
-{{ partial "post-list" $posts }}
+            <a href="{{ .RelPermalink }}" class="blog-post-link">
-
+                <span class="blog-post">
-<hr />
+                    <span class="title">{{ .Title }}</span>
-
+                    <small class="details">
-<small>
+                        {{ .Date.Format "Mon Jan 02, 2006" }}
-    List of posts by:
-    <a href="/languages">[languages]</a> &middot;
-    <a href="/tags">[tags]</a> &middot;
-    as:
-    <a href="/index.xml">[rss]</a>
                     </small>
+                </span>
+            </a>
+            {{- end -}}
+        </div>
+    </div>
+</div>
 
 {{- end -}}