From f68fc049ea7480bccc853732d7bed382fb5fae8f Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Mon, 6 May 2024 22:36:07 +0300
Subject: [PATCH] feat: add sample content and styling

---
 .gitignore                                    |   1 +
 src/components/Header.astro                   |   2 +-
 .../ataturk-ve-demokratik-turkiye.md          |   4 +-
 .../babur-5-bolum-kaptan-ile-mucadele.md      |   2 +
 .../bir-componentin-seruveni.md               |   2 +
 src/content/config.ts                         |  11 +-
 src/layouts/Layout.astro                      |   5 +
 src/pages/index.astro                         |  28 +-
 src/scripts/conway-simulator.js               | 695 +++++++++---------
 src/styles/{gol.css => header.css}            |  10 +
 src/styles/home.css                           |  35 +
 11 files changed, 450 insertions(+), 345 deletions(-)
 rename src/content/{teknik => blog}/ataturk-ve-demokratik-turkiye.md (96%)
 rename src/content/{teknik => blog}/babur-5-bolum-kaptan-ile-mucadele.md (98%)
 rename src/content/{teknik => blog}/bir-componentin-seruveni.md (98%)
 rename src/styles/{gol.css => header.css} (87%)
 create mode 100644 src/styles/home.css

diff --git a/.gitignore b/.gitignore
index 016b59e..b88b8ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+TODO
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 1bfa1d8..d730f03 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -18,7 +18,7 @@
     <div>
       <ul class="nav-links undecorated-anchor">
         <li><a href="#">Teknik</a></li>
-        <li><a href="#">Felsefi</a></li>
+        <li><a href="#">Fikir</a></li>
         <li><a href="#">Babür'ün Serüvenleri</a></li>
         <li><a href="#">Ansiklopedi</a></li>
       </ul>
diff --git a/src/content/teknik/ataturk-ve-demokratik-turkiye.md b/src/content/blog/ataturk-ve-demokratik-turkiye.md
similarity index 96%
rename from src/content/teknik/ataturk-ve-demokratik-turkiye.md
rename to src/content/blog/ataturk-ve-demokratik-turkiye.md
index 0d4f61f..fd5c66c 100644
--- a/src/content/teknik/ataturk-ve-demokratik-turkiye.md
+++ b/src/content/blog/ataturk-ve-demokratik-turkiye.md
@@ -1,6 +1,8 @@
 ---
 title: "Atatürk ve Demokratik Türkiye"
-summary: Halil İnalcık'ın kaleminden Türkiye Cumhuriyet'nin kuruluş hikayesi ve inkılapların toplumdaki akisleri.
+summary: Halil İnalcık'ın kaleminden Türkiye Cumhuriyet'nin kuruluş hikayesi ve Atatürk inkılaplarının toplumdaki akisleri.
+category: Kitap İncelemesi
+date: 2024-03-15
 tags:
   - kitap
   - atatürk
diff --git a/src/content/teknik/babur-5-bolum-kaptan-ile-mucadele.md b/src/content/blog/babur-5-bolum-kaptan-ile-mucadele.md
similarity index 98%
rename from src/content/teknik/babur-5-bolum-kaptan-ile-mucadele.md
rename to src/content/blog/babur-5-bolum-kaptan-ile-mucadele.md
index c5a27e9..66aeb46 100644
--- a/src/content/teknik/babur-5-bolum-kaptan-ile-mucadele.md
+++ b/src/content/blog/babur-5-bolum-kaptan-ile-mucadele.md
@@ -1,6 +1,8 @@
 ---
 title: "5. Bölüm: Kaptan ile Mücadele"
 summary: "Babür'ün önünde yalnızca tek bir engel kalmıştır: Komutan."
+category: Öykü
+date: 2024-03-03
 tags:
   - babür
 ---
diff --git a/src/content/teknik/bir-componentin-seruveni.md b/src/content/blog/bir-componentin-seruveni.md
similarity index 98%
rename from src/content/teknik/bir-componentin-seruveni.md
rename to src/content/blog/bir-componentin-seruveni.md
index f3fd6db..5d9322b 100644
--- a/src/content/teknik/bir-componentin-seruveni.md
+++ b/src/content/blog/bir-componentin-seruveni.md
@@ -1,6 +1,8 @@
 ---
 title: "Bir Komponentin Serüveni: Astro"
 summary: Yazdığınız komponentlere ne olur? Bu yazıda Astro komponentlerinin serüvenlerin bir göz atıyoruz!
+category: Teknik Yazı
+date: 2024-04-01
 tags:
   - astro
   - javascript
diff --git a/src/content/config.ts b/src/content/config.ts
index 17e68d2..b0b65f6 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -1,15 +1,16 @@
-// 1. Import utilities from `astro:content`
 import { z, defineCollection } from "astro:content";
-// 2. Define your collection(s)
-const teknikCollection = defineCollection({
+
+const blogCollection = defineCollection({
   type: "content",
   schema: z.object({
     title: z.string(),
-    summary: z.string(),
     tags: z.array(z.string()),
+    summary: z.string(),
+    date: z.date(),
+    category: z.enum(["Kitap İncelemesi", "Teknik Yazı", "Öykü"]),
   }),
 });
 
 export const collections = {
-  teknik: teknikCollection,
+  blog: blogCollection,
 };
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4bb0f4e..75fd653 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -23,11 +23,16 @@ const { title } = Astro.props;
 <style is:global>
   :root {
     --h1-desktop: 3.815rem;
+    --h2-desktop: 3.052rem;
+    --h3-desktop: 2.441rem;
+    --h4-desktop: 1.953rem;
+    --h5-desktop: 1.563rem;
     --h6-desktop: 1.25rem;
     --small-desktop: 0.8rem;
     font-size: 18px;
     font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
       sans-serif;
+    background-color: #f5fffa;
   }
   body {
     display: flex;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5702f72..ac03fdd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,17 +2,37 @@
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import Layout from "../layouts/Layout.astro";
-import "../styles/gol.css";
+import "../styles/header.css";
+import "../styles/home.css";
 
-import { getCollection, getEntry } from 'astro:content';
+import { getCollection, getEntry } from "astro:content";
 
-const allTeknikPosts = await getCollection('teknik')
+const allTeknikPosts = await getCollection("blog");
 ---
 
 <Layout title="log101">
   <div class="container">
     <Header />
-	{allTeknikPosts.map(p => <p>{p.data.summary}</p>)}
+    <div class="posts">
+      {
+        allTeknikPosts
+          .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
+          .map((p) => (
+            <div class="post">
+              <p class="post-category">{p.data.category}</p>
+              <h4 class="post-title">{p.data.title}</h4>
+              <p class="post-date">
+                {p.data.date.toLocaleDateString("tr-TR", {
+                  day: "numeric",
+                  month: "long",
+                  year: "numeric",
+                })}
+              </p>
+              <p class="post-summary">{p.data.summary}</p>
+            </div>
+          ))
+      }
+    </div>
     <Footer />
   </div>
 </Layout>
diff --git a/src/scripts/conway-simulator.js b/src/scripts/conway-simulator.js
index 2aebaad..9281586 100644
--- a/src/scripts/conway-simulator.js
+++ b/src/scripts/conway-simulator.js
@@ -1,392 +1,418 @@
-import { heavyWeightSpaceshipCell } from './utils'
+import { heavyWeightSpaceshipCell } from "./utils";
 
 /*
   A wrapper for an HTML <canvas> based visualizatiuon of Conway's Game of Life.
 */
 export default class ConwaySimulator {
-
-    /*
+  /*
       Create a new simulation. A simulation is comprised of a
       2D data grid (rows-by-cols) of ConwayPixels, a canvas element,
       and a canvas context.
     */
-    constructor(rows, cols, pixelSize, interRoundDelay) {
-        this.rows = rows;
-        this.cols = cols;
-        this.pixelSize = pixelSize;
-        this.interRoundDelay = interRoundDelay;
-        this.mouseIsDown = false;
-        this.paused = false;
-        this.intervalId = null;
+  constructor(rows, cols, pixelSize, interRoundDelay) {
+    this.rows = rows;
+    this.cols = cols;
+    this.pixelSize = pixelSize;
+    this.interRoundDelay = interRoundDelay;
+    this.mouseIsDown = false;
+    this.paused = false;
+    this.intervalId = null;
 
-        // Make the grid
-        this.grid = [];
-        for (let i = 0; i < rows; i++) {
-            this.grid.push([]);
-            for (let j = 0; j < cols; j++) {
-                let alive = heavyWeightSpaceshipCell(j, i)
-                this.grid[i].push(new ConwayPixel(alive));
-            }
-        }
-
-        // Inform each pixel who it's neighbors are (performance optimization)
-        for (let i = 0; i < this.rows; i++) {
-            for (let j = 0; j < this.cols; j++) {
-                this.grid[i][j].neighbors = this.getNeighbors(i, j);
-            }
-        }
-
-        // Setup the canvas
-        let width = this.pixelSize * this.cols
-        let height = this.pixelSize * this.rows
-        this.canvas = document.createElement('canvas');
-        this.canvas.width = width;
-        this.canvas.height = height;
-        this.canvasCtx = this.canvas.getContext('2d', { alpha: true });
+    // Make the grid
+    this.grid = [];
+    for (let i = 0; i < rows; i++) {
+      this.grid.push([]);
+      for (let j = 0; j < cols; j++) {
+        let alive = heavyWeightSpaceshipCell(j, i);
+        this.grid[i].push(new ConwayPixel(alive));
+      }
     }
 
-    /*
+    // Inform each pixel who it's neighbors are (performance optimization)
+    for (let i = 0; i < this.rows; i++) {
+      for (let j = 0; j < this.cols; j++) {
+        this.grid[i][j].neighbors = this.getNeighbors(i, j);
+      }
+    }
+
+    // Setup the canvas
+    let width = this.pixelSize * this.cols;
+    let height = this.pixelSize * this.rows;
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = width;
+    this.canvas.height = height;
+    this.canvasCtx = this.canvas.getContext("2d", { alpha: true });
+  }
+
+  /*
       Starts the simulation via setInterval if it's not running
     */
-    start() {
-        if (this.intervalId) {
-            return;
-        }
-
-        this.intervalId = setInterval(() => {
-            this.advanceRound();
-            this.repaint();
-        }, this.interRoundDelay);
+  start() {
+    if (this.intervalId) {
+      return;
     }
 
-    /*
+    this.intervalId = setInterval(() => {
+      this.advanceRound();
+      this.repaint();
+    }, this.interRoundDelay);
+  }
+
+  /*
       If the simulation is running, stop it using clearInterval
     */
-    stop() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
-            this.intervalId = null;
-        }
+  stop() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
     }
+  }
 
-    /*
+  /*
       Return the neighbors of a particular grid location
     */
-    getNeighbors(row, col) {
-        let neighbors = [];
-        for (let i = row - 1; i <= row + 1; i++) {
-            for (let j = col - 1; j <= col + 1; j++) {
-                if (i === row && j === col) continue;
-                if (this.grid[i] && this.grid[i][j]) {
-                    neighbors.push(this.grid[i][j]);
-                }
-            }
+  getNeighbors(row, col) {
+    let neighbors = [];
+    for (let i = row - 1; i <= row + 1; i++) {
+      for (let j = col - 1; j <= col + 1; j++) {
+        if (i === row && j === col) continue;
+        if (this.grid[i] && this.grid[i][j]) {
+          neighbors.push(this.grid[i][j]);
         }
-
-        return neighbors;
+      }
     }
 
-    /*
+    return neighbors;
+  }
+
+  /*
       Update the grid according to the rules for each SimEntity
     */
-    advanceRound() {
-        if (this.mouseIsDown) return;
+  advanceRound() {
+    if (this.mouseIsDown) return;
 
-        // First prepare each pixel (give it a next state)
-        for (let i = 0; i < this.rows; i++) {
-            for (let j = 0; j < this.cols; j++) {
-                this.grid[i][j].prepareUpdate();
-            }
-        }
-
-        // Then actually advance them, once all the new states are computed
-        for (let i = 0; i < this.rows; i++) {
-            for (let j = 0; j < this.cols; j++) {
-                this.grid[i][j].update();
-            }
-        }
+    // First prepare each pixel (give it a next state)
+    for (let i = 0; i < this.rows; i++) {
+      for (let j = 0; j < this.cols; j++) {
+        this.grid[i][j].prepareUpdate();
+      }
     }
 
-    /*
+    // Then actually advance them, once all the new states are computed
+    for (let i = 0; i < this.rows; i++) {
+      for (let j = 0; j < this.cols; j++) {
+        this.grid[i][j].update();
+      }
+    }
+  }
+
+  /*
       Optimized repaint that only updates pixels that have changed, and paints
       in batches by color. Using force will repaint all pixels regardless of their
       state/previousState/nextState, which is slower.
     */
-    repaint(force = false) {
-        if (this.mouseIsDown && !force) return;
+  repaint(force = false) {
+    if (this.mouseIsDown && !force) return;
 
-        // Canvas optimization -- it's faster to paint by color than placement.
-        let byColor = {};
-        for (let i = 0; i < this.rows; i++) {
-            for (let j = 0; j < this.cols; j++) {
-                let pixel = this.grid[i][j];
+    // Canvas optimization -- it's faster to paint by color than placement.
+    let byColor = {};
+    for (let i = 0; i < this.rows; i++) {
+      for (let j = 0; j < this.cols; j++) {
+        let pixel = this.grid[i][j];
 
-                if (!force && !pixel.forceRepaint && pixel.alive === pixel.previousState) {
-                    continue; // No need to repaint if the pixel didn't change
-                }
-
-                let color = pixel.alive ? pixel.lifeStyle : pixel.deathStyle;
-                if (byColor[color] === undefined) {
-                    byColor[color] = []
-                }
-
-                byColor[color].push([i, j]);
-                pixel.forceRepaint = false; // Once a pixel is painted, reset it's forced state
-            }
+        if (
+          !force &&
+          !pixel.forceRepaint &&
+          pixel.alive === pixel.previousState
+        ) {
+          continue; // No need to repaint if the pixel didn't change
         }
 
-        for (let color in byColor) {
-            this.canvasCtx.fillStyle = color;
-            for (let [row, col] of byColor[color]) {
-                this.canvasCtx.fillRect(
-                    col * this.pixelSize,
-                    row * this.pixelSize,
-                    this.pixelSize,
-                    this.pixelSize
-                );
-            }
+        let color = pixel.alive ? pixel.lifeStyle : pixel.deathStyle;
+        if (byColor[color] === undefined) {
+          byColor[color] = [];
         }
+
+        byColor[color].push([i, j]);
+        pixel.forceRepaint = false; // Once a pixel is painted, reset it's forced state
+      }
     }
 
-    /*
+    for (let color in byColor) {
+      this.canvasCtx.fillStyle = color;
+      for (let [row, col] of byColor[color]) {
+        this.canvasCtx.fillRect(
+          col * this.pixelSize,
+          row * this.pixelSize,
+          this.pixelSize,
+          this.pixelSize,
+        );
+      }
+    }
+  }
+
+  /*
       Paint an individual pixel. This is not used by repaint because of a batch
       optimziation. painting an individual pixel does take place when click events
       happen.
     */
-    paintPixel(row, col) {
-        this.grid[row][col].setPaintStyles(this.canvasCtx);
-        this.canvasCtx.fillRect(
-            col * this.pixelSize,
-            row * this.pixelSize,
-            this.pixelSize,
-            this.pixelSize
-        );
-    }
+  paintPixel(row, col) {
+    this.grid[row][col].setPaintStyles(this.canvasCtx);
+    this.canvasCtx.fillRect(
+      col * this.pixelSize,
+      row * this.pixelSize,
+      this.pixelSize,
+      this.pixelSize,
+    );
+  }
 
-    /* =============
+  /* =============
     Visualizatiuon Modifiers
     ================ */
 
-    /*
+  /*
       Give each entity in the grid an alive style such that when all pixels are alive
       the grid would be a rainbow gradient.
     */
-    setRainbowScheme() {
-        let rows = this.grid.length;
-        let cols = this.grid[0].length;
-        let diagonalLength = Math.sqrt((this.rows * this.rows) + (this.cols * this.cols));
-        let hueIncrement = 360 / diagonalLength;
+  setRainbowScheme() {
+    let rows = this.grid.length;
+    let cols = this.grid[0].length;
+    let diagonalLength = Math.sqrt(
+      this.rows * this.rows + this.cols * this.cols,
+    );
+    let hueIncrement = 360 / diagonalLength;
 
-        for (let i = 0; i < this.rows; i++) {
-            for (let j = 0; j < this.cols; j++) {
-                let h = Math.floor(Math.sqrt((i * i) + (j * j)) * hueIncrement);
-                let px = this.grid[i][j];
-                px.lifeStyle = `hsl(${h}, 100%, 60%)`;
-                px.deathStyle = `#000000`;
-                px.forceRepaint = true;
-            }
-        }
+    for (let i = 0; i < this.rows; i++) {
+      for (let j = 0; j < this.cols; j++) {
+        let h = Math.floor(Math.sqrt(i * i + j * j) * hueIncrement);
+        let px = this.grid[i][j];
+        px.lifeStyle = `hsl(${h}, 100%, 60%)`;
+        px.deathStyle = `#000000`;
+        px.forceRepaint = true;
+      }
     }
+  }
 
-    /*
+  /*
       Give each entity in the specified area of the grid an alive style
       such that when all pixels are alive the area would be a rainbow gradient.
     */
-    setRainbowSchemeWithin(startRow, stopRow, startCol, stopCol) {
-        let rows = stopRow - startRow;
-        let cols = stopCol - startCol;
-        let diagonalLength = Math.sqrt((rows * rows) + (cols * cols));
-        let hueIncrement = 360 / diagonalLength;
+  setRainbowSchemeWithin(startRow, stopRow, startCol, stopCol) {
+    let rows = stopRow - startRow;
+    let cols = stopCol - startCol;
+    let diagonalLength = Math.sqrt(rows * rows + cols * cols);
+    let hueIncrement = 360 / diagonalLength;
 
-        for (let i = startRow; i < stopRow; i++) {
-            for (let j = startCol; j < stopCol; j++) {
-                let h = Math.floor(Math.sqrt((i * i) + (j * j)) * hueIncrement);
-                let px = this.grid[i][j];
-                px.lifeStyle = `hsl(${h}, 100%, 60%)`;
-                px.deathStyle = `#000000`;
-                px.forceRepaint = true;
-            }
-        }
+    for (let i = startRow; i < stopRow; i++) {
+      for (let j = startCol; j < stopCol; j++) {
+        let h = Math.floor(Math.sqrt(i * i + j * j) * hueIncrement);
+        let px = this.grid[i][j];
+        px.lifeStyle = `hsl(${h}, 100%, 60%)`;
+        px.deathStyle = `#000000`;
+        px.forceRepaint = true;
+      }
     }
+  }
 
-    /*
+  /*
       set colors to the provided parameters
     */
-    setPixelColors(lifeStyle, deathStyle) {
-        this.grid.forEach((row) => {
-            row.forEach((entity) => {
-                entity.lifeStyle = lifeStyle;
-                entity.deathStyle = deathStyle;
-                entity.forceRepaint = true;
-            });
-        });
-    }
+  setPixelColors(lifeStyle, deathStyle) {
+    this.grid.forEach((row) => {
+      row.forEach((entity) => {
+        entity.lifeStyle = lifeStyle;
+        entity.deathStyle = deathStyle;
+        entity.forceRepaint = true;
+      });
+    });
+  }
 
-    /*
+  /*
       Give the board random semi-complementary colors.
     */
-    setRandomPixelColors() {
-        let baseHue = randomInteger(1, 360);
-        let complementaryHue = (baseHue + randomInteger(90, 270) % 360);
-        this.setPixelColors(`hsl(${baseHue}, 100%, 60%)`, `hsl(${complementaryHue}, 100%, 60%)`)
-    }
+  setRandomPixelColors() {
+    let baseHue = randomInteger(1, 360);
+    let complementaryHue = baseHue + (randomInteger(90, 270) % 360);
+    this.setPixelColors(
+      `hsl(${baseHue}, 100%, 60%)`,
+      `hsl(${complementaryHue}, 100%, 60%)`,
+    );
+  }
 
-    /*
+  /*
       Given a bounding box, apply the currently selected rules to ONLY the
       pixels within the provided box.
     */
-    applyColorsWithin(rowStart, rowStop, colStart, colStop, lifeStyle, deathStyle) {
-        for (let i = rowStart; i < rowStop; i++) {
-            for (let j = colStart; j < colStop; j++) {
-                let pixel = this.grid[i][j];
-                pixel.lifeStyle = lifeStyle;
-                pixel.deathStyle = deathStyle;
-                pixel.forceRepaint = true;
-            }
-        }
+  applyColorsWithin(
+    rowStart,
+    rowStop,
+    colStart,
+    colStop,
+    lifeStyle,
+    deathStyle,
+  ) {
+    for (let i = rowStart; i < rowStop; i++) {
+      for (let j = colStart; j < colStop; j++) {
+        let pixel = this.grid[i][j];
+        pixel.lifeStyle = lifeStyle;
+        pixel.deathStyle = deathStyle;
+        pixel.forceRepaint = true;
+      }
     }
+  }
 
-    /*
+  /*
       Give a sopecific area of the board random semi-complementary colors.
     */
-    applyRandomColorsWithin(rowStart, rowStop, colStart, colStop) {
-        let baseHue = randomInteger(1, 360);
-        let complementaryHue = (baseHue + randomInteger(90, 270) % 360);
-        this.applyColorsWithin(rowStart, rowStop, colStart, `hsl(${baseHue}, 100%, 60%)`, `hsl(${complementaryHue}, 100%, 60%)`)
-    }
+  applyRandomColorsWithin(rowStart, rowStop, colStart, colStop) {
+    let baseHue = randomInteger(1, 360);
+    let complementaryHue = baseHue + (randomInteger(90, 270) % 360);
+    this.applyColorsWithin(
+      rowStart,
+      rowStop,
+      colStart,
+      `hsl(${baseHue}, 100%, 60%)`,
+      `hsl(${complementaryHue}, 100%, 60%)`,
+    );
+  }
 
-    /*
+  /*
       Set all the pixels to alive=false
     */
-    resetLife(chanceOfLife) {
-        this.grid.forEach((row) => {
-            row.forEach((pixel) => {
-                pixel.previousState = pixel.alive;
-                pixel.alive = Math.random() < chanceOfLife;
-            });
-        });
+  resetLife(chanceOfLife) {
+    this.grid.forEach((row) => {
+      row.forEach((pixel) => {
+        pixel.previousState = pixel.alive;
+        pixel.alive = Math.random() < chanceOfLife;
+      });
+    });
 
-        this.repaint();
-    }
+    this.repaint();
+  }
 
-
-    /*
+  /*
       Given a bounding box, apply the currently selected rules to ONLY the
       pixels within the provided box.
     */
-    resetLifeWithin(rowStart, rowStop, colStart, colStop, chanceOfLife = .1) {
-        for (let i = rowStart; i < rowStop; i++) {
-            for (let j = colStart; j < colStop; j++) {
-                let pixel = this.grid[i][j];
-                if (pixel) {
-                    pixel.previousState = pixel.alive;
-                    pixel.alive = Math.random() < chanceOfLife;
-                }
-            }
+  resetLifeWithin(rowStart, rowStop, colStart, colStop, chanceOfLife = 0.1) {
+    for (let i = rowStart; i < rowStop; i++) {
+      for (let j = colStart; j < colStop; j++) {
+        let pixel = this.grid[i][j];
+        if (pixel) {
+          pixel.previousState = pixel.alive;
+          pixel.alive = Math.random() < chanceOfLife;
         }
-
-        this.repaint();
+      }
     }
 
-    /*
+    this.repaint();
+  }
+
+  /*
       Update the rules for all the pixels
     */
-    setRules(underpopulation, overpopulation, reproductionMin, reproductionMax) {
-        this.grid.forEach((row) => {
-            row.forEach((pixel) => {
-                pixel.underpopulation = underpopulation;
-                pixel.overpopulation = overpopulation;
-                pixel.reproductionMin = reproductionMin;
-                pixel.reproductionMax = reproductionMax;
-            });
-        });
-    }
+  setRules(underpopulation, overpopulation, reproductionMin, reproductionMax) {
+    this.grid.forEach((row) => {
+      row.forEach((pixel) => {
+        pixel.underpopulation = underpopulation;
+        pixel.overpopulation = overpopulation;
+        pixel.reproductionMin = reproductionMin;
+        pixel.reproductionMax = reproductionMax;
+      });
+    });
+  }
 
-    /*
+  /*
       Swap life and death styles across the center of the grid.
     */
-    setYinYangMode() {
-        for (let i = 0; i < this.rows; i++) {
-            for (let j = 0; j < this.cols / 2; j++) {
-                let t = this.grid[i][j].lifeStyle;
-                this.grid[i][j].lifeStyle = this.grid[i][j].deathStyle;
-                this.grid[i][j].deathStyle = t;
-            }
-        }
-
-        this.repaint(true);
+  setYinYangMode() {
+    for (let i = 0; i < this.rows; i++) {
+      for (let j = 0; j < this.cols / 2; j++) {
+        let t = this.grid[i][j].lifeStyle;
+        this.grid[i][j].lifeStyle = this.grid[i][j].deathStyle;
+        this.grid[i][j].deathStyle = t;
+      }
     }
 
-    /*
+    this.repaint(true);
+  }
+
+  /*
       Given a bounding box, apply the currently selected rules to ONLY the
       pixels within the provided box.
     */
-    setRulesWithin(rowStart, rowStop, colStart, colStop, underpopulation, overpopulation, reproductionMin, reproductionMax) {
-        for (let i = rowStart; i < rowStop; i++) {
-            for (let j = colStart; j < colStop; j++) {
-                let pixel = this.grid[i][j];
-                pixel.underpopulation = underpopulation;
-                pixel.overpopulation = overpopulation;
-                pixel.reproductionMin = reproductionMin;
-                pixel.reproductionMax = reproductionMax;
-                pixel.forceRepaint = true;
-            }
-        }
+  setRulesWithin(
+    rowStart,
+    rowStop,
+    colStart,
+    colStop,
+    underpopulation,
+    overpopulation,
+    reproductionMin,
+    reproductionMax,
+  ) {
+    for (let i = rowStart; i < rowStop; i++) {
+      for (let j = colStart; j < colStop; j++) {
+        let pixel = this.grid[i][j];
+        pixel.underpopulation = underpopulation;
+        pixel.overpopulation = overpopulation;
+        pixel.reproductionMin = reproductionMin;
+        pixel.reproductionMax = reproductionMax;
+        pixel.forceRepaint = true;
+      }
     }
+  }
 
-    /*
+  /*
       The grid has click, and click-and-drag functionality. Entities define their
       own behavior when clicked, and this function ensures the proper entity is
       updated when it is clicked (or dragged-over)
     */
-    registerMouseListeners() {
-        bindMultipleEventListener(this.canvas, ['mousemove', 'touchmove'], (e) => {
-            e.preventDefault();
-            if (this.mouseIsDown) {
-                let x, y;
-                if (e.touches) {
-                    let rect = e.target.getBoundingClientRect();
-                    x = Math.floor((e.touches[0].pageX - rect.left) / this.pixelSize);
-                    y = Math.floor((e.touches[0].pageY - rect.top) / this.pixelSize);
-                }
-                else {
-                    x = Math.floor(e.offsetX / this.pixelSize);
-                    y = Math.floor(e.offsetY / this.pixelSize);
-                }
+  registerMouseListeners() {
+    bindMultipleEventListener(this.canvas, ["mousemove", "touchmove"], (e) => {
+      e.preventDefault();
+      if (this.mouseIsDown) {
+        let x, y;
+        if (e.touches) {
+          let rect = e.target.getBoundingClientRect();
+          x = Math.floor((e.touches[0].pageX - rect.left) / this.pixelSize);
+          y = Math.floor((e.touches[0].pageY - rect.top) / this.pixelSize);
+        } else {
+          x = Math.floor(e.offsetX / this.pixelSize);
+          y = Math.floor(e.offsetY / this.pixelSize);
+        }
 
-                this.grid[y][x].handleClick();
-                this.paintPixel(y, x);
-            }
-        });
+        this.grid[y][x].handleClick();
+        this.paintPixel(y, x);
+      }
+    });
 
-        // Capture mouse state for click and drag features
-        bindMultipleEventListener(this.canvas, ['mousedown', 'touchstart'], (e) => {
-            e.preventDefault();
-            let rect = e.target.getBoundingClientRect();
-            let x, y;
-            if (e.touches) {
-                let rect = e.target.getBoundingClientRect();
-                x = Math.floor((e.touches[0].pageX - rect.left) / this.pixelSize);
-                y = Math.floor((e.touches[0].pageY - rect.top) / this.pixelSize);
-            }
-            else {
-                x = Math.floor(e.offsetX / this.pixelSize);
-                y = Math.floor(e.offsetY / this.pixelSize);
-            }
+    // Capture mouse state for click and drag features
+    bindMultipleEventListener(this.canvas, ["mousedown", "touchstart"], (e) => {
+      e.preventDefault();
+      let rect = e.target.getBoundingClientRect();
+      let x, y;
+      if (e.touches) {
+        let rect = e.target.getBoundingClientRect();
+        x = Math.floor((e.touches[0].pageX - rect.left) / this.pixelSize);
+        y = Math.floor((e.touches[0].pageY - rect.top) / this.pixelSize);
+      } else {
+        x = Math.floor(e.offsetX / this.pixelSize);
+        y = Math.floor(e.offsetY / this.pixelSize);
+      }
 
-            this.grid[y][x].handleClick();
-            this.paintPixel(y, x);
-            this.mouseIsDown = true;
-        });
+      this.grid[y][x].handleClick();
+      this.paintPixel(y, x);
+      this.mouseIsDown = true;
+    });
 
-        bindMultipleEventListener(this.canvas, ['mouseup', 'touchend'], (e) => {
-            e.preventDefault();
-            this.mouseIsDown = false;
-        });
-    }
+    bindMultipleEventListener(this.canvas, ["mouseup", "touchend"], (e) => {
+      e.preventDefault();
+      this.mouseIsDown = false;
+    });
+  }
 }
 
-
 /*
   A single pixel within a greater ConwaySimulator. Each ConwayPixel has it's own rules for evolution,
   and for performance reason's maintains a list of it's neighbors inside of it's simulator.
@@ -395,32 +421,31 @@ export default class ConwaySimulator {
   ConwayPixels outside of the ConwaySimulator class is not advised.
 */
 class ConwayPixel {
-
-    /*
+  /*
       Constuct a default ConwayPixel, which follows the original Game of Life rules.
     */
-    constructor(alive) {
-        this.alive = alive;
-        this.lifeStyle = '#000000';
-        this.deathStyle = '#FFFFFF';
-        this.underpopulation = 2;
-        this.overpopulation = 3;
-        this.reproductionMin = 3;
-        this.reproductionMax = 3;
+  constructor(alive) {
+    this.alive = alive;
+    this.lifeStyle = "#000000";
+    this.deathStyle = "#F5FFFA";
+    this.underpopulation = 2;
+    this.overpopulation = 3;
+    this.reproductionMin = 3;
+    this.reproductionMax = 3;
 
-        // Experimental improvement...
-        this.neighbors = [];
-        this.nextState = null;
-        this.previousState = null;
-        this.forceRepaint = true;
+    // Experimental improvement...
+    this.neighbors = [];
+    this.nextState = null;
+    this.previousState = null;
+    this.forceRepaint = true;
 
-        // Reproduction min cannot be more than reproduction max
-        if (this.reproductionMax < this.reproductionMin) {
-            this.reproductionMin = this.reproductionMax
-        }
+    // Reproduction min cannot be more than reproduction max
+    if (this.reproductionMax < this.reproductionMin) {
+      this.reproductionMin = this.reproductionMax;
     }
+  }
 
-    /*
+  /*
       In order to process whole rounds at a time, update returns
       a replacement entity, it does not edit the entity in place.
 
@@ -438,48 +463,50 @@ class ConwayPixel {
         a live cell, as if by reproduction.
 
     */
-    prepareUpdate() {
-        let sum = 0;
-        let nextState = this.alive;
+  prepareUpdate() {
+    let sum = 0;
+    let nextState = this.alive;
 
-        for (let n of this.neighbors) {
-            if (n.alive && n !== this) sum++;
-        }
-
-        if (nextState && sum < this.underpopulation) {
-            nextState = false;
-        }
-        else if (nextState && sum > this.overpopulation) {
-            nextState = false;
-        }
-        else if (!nextState && sum >= this.reproductionMin && sum <= this.reproductionMax) {
-            nextState = true;
-        }
-
-        this.nextState = nextState;
+    for (let n of this.neighbors) {
+      if (n.alive && n !== this) sum++;
     }
 
-    /*
+    if (nextState && sum < this.underpopulation) {
+      nextState = false;
+    } else if (nextState && sum > this.overpopulation) {
+      nextState = false;
+    } else if (
+      !nextState &&
+      sum >= this.reproductionMin &&
+      sum <= this.reproductionMax
+    ) {
+      nextState = true;
+    }
+
+    this.nextState = nextState;
+  }
+
+  /*
       Advance this pixel to it's nextState.
     */
-    update() {
-        this.previousState = this.alive;
-        this.alive = this.nextState;
-        this.nextState = null;
-    }
+  update() {
+    this.previousState = this.alive;
+    this.alive = this.nextState;
+    this.nextState = null;
+  }
 
-    /*
+  /*
       The calling context infers that a click HAS occured, this is not a mouse;
       this is not an event listener.
     */
-    handleClick() {
-        this.alive = true;
-    }
+  handleClick() {
+    this.alive = true;
+  }
 
-    /*
+  /*
       Provided with a canvas context, paint ourselves!
     */
-    setPaintStyles(canvasCtx) {
-        canvasCtx.fillStyle = this.alive ? this.lifeStyle : this.deathStyle;
-    }
+  setPaintStyles(canvasCtx) {
+    canvasCtx.fillStyle = this.alive ? this.lifeStyle : this.deathStyle;
+  }
 }
diff --git a/src/styles/gol.css b/src/styles/header.css
similarity index 87%
rename from src/styles/gol.css
rename to src/styles/header.css
index 07cce3e..58bede8 100644
--- a/src/styles/gol.css
+++ b/src/styles/header.css
@@ -1,5 +1,9 @@
 .container {
   width: 710px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin: 24px 0px;
 }
 
 .header {
@@ -49,9 +53,14 @@
   gap: 8px;
 }
 
+.title-and-nav hr {
+  margin-bottom: 0;
+}
+
 .title-and-gol {
   display: flex;
   flex-direction: row;
+  gap: 16px;
   align-items: center;
   height: 110px;
 }
@@ -62,6 +71,7 @@
   max-width: 250;
   margin: 0;
   padding: 0;
+  padding-bottom: 8px;
 }
 
 .footer {
diff --git a/src/styles/home.css b/src/styles/home.css
new file mode 100644
index 0000000..556a7c1
--- /dev/null
+++ b/src/styles/home.css
@@ -0,0 +1,35 @@
+.posts {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+.post {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.post-category {
+  margin: 0;
+  padding: 0;
+  color: #2f4f4f;
+}
+
+.post-title {
+  font-size: var(--h4-desktop);
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+.post-summary {
+  margin: 0;
+  padding: 0;
+}
+
+.post-date {
+  margin: 0;
+  padding: 0;
+  color: gray;
+}