From 1335b7165c8e648eb91d4056818135cf8e837c74 Mon Sep 17 00:00:00 2001
From: Mark Holmes <contact@markholm.es>
Date: Tue, 3 Jun 2025 23:58:37 -0500
Subject: [PATCH] Make footer stick to bottom of page

---
 pages/index.js    | 22 +++++++++++++---------
 styles/styles.css | 11 +++++++++++
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 34b17cf..91d6052 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -51,16 +51,20 @@ export default function Home({
           <style>{`:root{${styleVars.join(";")};}`}</style>
         )}
       </Head>
-      <Header
-        title={data.title}
-        description={description}
-        pictureUrl={headerPictureUrl}
-        pictureText={data.headerPicture?.pictureText}
-      />
-      <div className="portfolio">
-        <PortfolioEntries entries={portfolioEntries} />
+      <div className="page-container">
+        <main className="content">
+          <Header
+            title={data.title}
+            description={description}
+            pictureUrl={headerPictureUrl}
+            pictureText={data.headerPicture?.pictureText}
+          />
+          <div className="portfolio">
+            <PortfolioEntries entries={portfolioEntries} />
+          </div>
+        </main>
+        {data.footer && <Footer content={data.footer} />}
       </div>
-      {data.footer && <Footer content={data.footer} />}
     </>
   );
 }
diff --git a/styles/styles.css b/styles/styles.css
index 8c64440..41351a3 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -4,6 +4,17 @@ body {
   background-color: var(--color-background, #111111);
 }
 
+/* Ensure footer sticks to bottom of viewport when content is short */
+.page-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;
+}
+
 h1, h2, h3, h4, h5 {
   font-family: var(--font-header, 'PT Sans', sans-serif);
   font-weight: 700;