adding game of life image to portfolio

_includes/portfolio.html

@@ -8,8 +8,17 @@
                     <i class="fas fa-search-plus fa-3x"></i>
                 </div>
             </div>
+            {% if item.title == "Conway's Game of Life" %}
+            <canvas id="game-of-life-canvas" style="width: 100%; height: 100%;"/>
+            {% else %}
             <img alt="" class="" src="{{ item.img | relative_url }}">
+            {% endif %}
         </a>
     </div>
     {% endfor %}
 </div>
+
+<script>
+    window.gameOfLifeCanvasId = 'game-of-life-canvas';
+</script>
+<script type="module" src="{{ '/assets/js/projects/game_of_life/index.js' | relative_url }}"></script>

_portfolio/game_of_life.md

@@ -1,13 +1,10 @@
 ---
 layout: post
 title: Conway's Game of Life
-img: "assets/img/portfolio/goes-look-angles.png"
 date: June 2024
 tags: [fun]
 ---
 
-![image]({{ page.img | relative_url }})
-
 # Determined Unpredictability
 
 [Conway's game of life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life) encodes the rules for cell life
@@ -27,7 +24,6 @@ future, we have to let the cells play their interminable, fully determined game.
 <div id="conway-container">
   <canvas id="canvas"></canvas>
 </div>
-<link rel="stylesheet" type="text/css" href="{{ '/assets/css/theme/light.css' | relative_url }}">
 <link rel="stylesheet" type="text/css" href="{{ '/assets/css/projects/conway.css' | relative_url }}">
 
 <script type="module" src="{{ '/assets/js/projects/game_of_life/index.js' | relative_url }}"></script>

_portfolio/research.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Research
-img: "assets/img/portfolio/goes-look-angles.png"
+img: "assets/img/portfolio/research/goes-look-angles.png"
 date: December 2023
 tags: [research]
 ---
@@ -12,7 +12,7 @@ tags: [research]
 
 ## Model Comparison
 
-{% include aligner.html images="portfolio/densities-with-test-set-scores.png" column=1 %}
+{% include aligner.html images="portfolio/research/densities-with-test-set-scores.png" column=1 %}
 
 I focus on the use of machine learning to estimate a harmful component
 of air quality: particulate matter smaller than 2.5 micrometers, or PM

_sass/includes/_navbar.scss

@@ -16,9 +16,10 @@
 .site-header {
   padding: 2% 2% 1% 2%;
   background: var(--background);
-  display: inline-block;
   float: left;
   width: 100%;
+  /* add a slight shadow below */
+  box-shadow: 0 2px 2px var(--md-sys-color-secondary-container);
 
   .separator {
     user-select: none;

_sass/includes/_portfolio.scss

@@ -3,6 +3,7 @@
   position: relative;
   margin: 0 auto;
   max-width: 400px;
+  height: 100%;
 
   .caption {
     margin: 0;

_sass/layouts/_blog.scss

@@ -52,7 +52,7 @@
     margin-bottom: 0;
     display: inline-block;
     background-size: cover;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid var(--border);
 
     p a {
       @extend .body-link;

_sass/layouts/_posts.scss

@@ -1,6 +1,6 @@
 .comments {
   @extend %padding-post;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid var(--border);
   float: left;
   width: 100%;
 }

assets/js/projects/game_of_life/index.js

@@ -3,6 +3,11 @@ import * as canvas from './src/canvas.js';
 
 let data = canvas.GridData();
 
+console.log(window.gameOfLifeCanvasId)
+if (window.gameOfLifeCanvasId !== undefined) {
+  data.canvas_id = window.gameOfLifeCanvasId;
+}
+
 // Initialize the game
 let [rows, cols] = canvas.initializeCanvas(data);
 let grid = createGrid(rows, cols);

assets/js/projects/game_of_life/src/canvas.js

@@ -55,7 +55,7 @@ const setClickHandler = (data, callback) => {
 };
 
 function clearCanvas(data) {
-  data.ctx.clearRect(0, 0, canvas.width, canvas.height);
+  data.ctx.clearRect(0, 0, data.canvas.width, data.canvas.height);
 }
 
 const drawGrid = (grid, data) => {
@@ -68,13 +68,13 @@ const drawGrid = (grid, data) => {
   // draw vertical lines
   for (let i = 0; i <= cols; i++) {
     data.ctx.moveTo(i * data.cell_size + data.offsetX, 0);
-    data.ctx.lineTo(i * data.cell_size + data.offsetX, canvas.height);
+    data.ctx.lineTo(i * data.cell_size + data.offsetX, data.canvas.height);
   }
 
   // draw horizontal lines
   for (let i = 0; i <= rows; i++) {
     data.ctx.moveTo(0, i * data.cell_size + data.offsetY);
-    data.ctx.lineTo(canvas.width, i * data.cell_size + data.offsetY);
+    data.ctx.lineTo(data.canvas.width, i * data.cell_size + data.offsetY);
   }
   data.ctx.stroke();
 };

pages/portfolio.md

@@ -2,7 +2,7 @@
 layout: page
 title : Portfolio 
 permalink: /portfolio/
-subtitle: "Projects I am working on" 
+subtitle: "Some things I've done" 
 feature-img: "assets/img/pexels/computer.jpeg"
 position: 4
 ---