Added content to the contact, page. Added about page. Changed front p…

…age to a conway grid. Adjusted blog index styles.

frontend/package.json

@@ -36,6 +36,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@rodneylab/svelte-social-icons": "^0.0.30",
     "@svelte-dev/pretty-code": "^1.0.0",
     "@sveltejs/adapter-node": "^5.2.0",
     "remark-breaks": "^4.0.0",

frontend/src/app.css

@@ -13,19 +13,19 @@
         @apply bg-base text-text outline outline-1 outline-slate-400 drop-shadow-md transition-colors duration-700
     }
     h1 {
-        @apply text-2xl font-bold py-2 mt-3 mb-1 text-text
+        @apply text-2xl font-bold mt-4 mb-2 text-text
     }
     h2 {
-        @apply text-xl font-bold py-2 mt-3 text-subtext1
+        @apply text-xl font-bold mt-4 mb-1 text-subtext1
     }
     h3 {
-        @apply text-lg font-semibold italic mt-5 text-subtext0
+        @apply text-lg font-semibold italic mt-4 mb-1 text-subtext0
     }
     h4 {
-
+        @apply font-bold mt-2 mb-1
     }
-    a {
-        @apply text-cyan-700 dark:text-sapphire font-semibold
+    p {
+        @apply px-3
     }
     pre {
         @apply p-2 w-full
@@ -35,9 +35,12 @@
     }
     code span {
     }
+    a {
+        @apply text-cyan-700 dark:text-sapphire font-semibold underline
+    }
     @media (hover: hover) {
         a:hover {
-            @apply invert drop-shadow-2xl transition-all duration-300 ease-in
+            @apply invert
         }
     }
     .button {
@@ -82,7 +85,7 @@
             transition-all duration-700
         }
         a {
-            @apply text-cyan-700 dark:text-sapphire text-lg font-bold
+            @apply no-underline text-lg font-bold
         }
     }
     .darkMode_toggle {

frontend/src/blogposts/conway.md

@@ -50,7 +50,9 @@ Cells have a finite number of states. For now, we will describe cells as 'dead'
 <br/>
 We can represent living cells with a value of 1, and dead cells with a value of 0. In the example below, gray squares are 'dead' (state 0) and sapphire-blue squares are 'alive' (state 1). In more complex systems, we might represent the numerous transitional states with a sequence of colors, names, and/or numbers. In example below, you may experiment with toggling cell states by left-clicking any cell.
 
-<Grid size={7} isResizable={false} isStateVisible={false} isToggleable={true} isRandom={true} model={Models.CONWAY}/>
+<Grid size={7} isResizable={false} isStateVisible={false} isToggleable={true} 
+    isRandom={true} model={Models.CONWAY} hasStateToggle={true}
+/>
 <Note type={NoteType.NOTE}>
     Click the checkbox above to view the numeric state of the automata.
 </Note>
@@ -86,9 +88,8 @@ Based on our observations of each neighbor's state and the system's rules, we ca
 Here's an example of Conway's game of Life with a simple seed.
 
 <Grid
-    size={10} isToggleable={false} model={Models.CONWAY} isManual={true} 
-    isLooped={true} isAutoplayed={true} isClearable={false}
-    seed={firstSeed} 
+    size={10} isToggleable={false} model={Models.CONWAY} isManual={true} hasStateToggle={true}
+    isLooped={true} isAutoplayed={true} isClearable={false} seed={firstSeed} 
 />
 
 # Your Turn
@@ -99,7 +100,7 @@ I've enabled all the controls for you as well!
 <br/>
 
 <Grid 
-    size={15} isResizable={true} isStateVisible={false} isToggleable={true} isRandomizable={true} 
+    size={15} isResizable={true} isStateVisible={false} isToggleable={true} isRandomizable={true} hasStateToggle={true}
     model={Models.CONWAY} isManual={true} isPlayable={true} isLooped={false} seed={secondSeed} intervalSec={0.8}
 />
 

frontend/src/routes/+page.svelte

@@ -1,53 +1,17 @@
-<script>
-
+<script context="module">
+    import Grid, { Models } from "./components/Grid.svelte";
 </script>
 
-<div class="flex flex-col">
-
-    <div class="text-center">
-
-        # Welcome, いっらしゃいませ！
-
-    </div>
-
-    <div class="flex flex-col md:flex-row items-center gap-0 md:gap-4 ">
-        <aside class="w-1/4 flex justify-center">
-            <img class="me max-w-[8rem] md:max-w-[12rem]" alt='pixel art of Nathan Jodoin' src="me-pixelated.png"/>
-        </aside>
-
-        <article class="p-0 md:p-4">
-
-            ## Bio
-
-            My name is Nathan Jodoin. I'm a software engineer, artist, and active hobbyist.
-            I served in the United States Navy for about 8 years as an Information Systems Technician,
-            after which I sought out an education in computer science.
+<div class="flex flex-col text-center">
 
-        </article>
-    </div>
-
-    ## Occupation  
-
-    I'm currently working as a Student Researcher with the [xREZ Lab for Art and Science](http://www.xrezlab.com), where,
-    in conjunction with [Sean Moulton](https://github.com/WindowsVista42) and [James Heath](https://github.com/Lain255)
-    we develop tools for reasearching VR UI/UX.
-
-    ## Experience
-
-    I have experience with the Unity game-engine and a myriad of programming languages,
-    including but not limited to:
-
-    <ul class="ulist">
-        <li>c</li>
-        <li>c++</li>
-        <li>c# </li>
-        <li>javascript/typescript</li>
-        <li>golang</li>
-        <li>rust</li>
-    </ul>
+    # Welcome, いっらしゃいませ！
+    This is my devblog and personal site.
 
+    <Grid 
+        size={20} isToggleable={true} isRandomizable={true} 
+        isAutoplayed={true} isRandom={true} model={Models.CONWAY} isLooped={true} intervalSec={0.09}
+    />
+
+    This simulation is interactive, try clicking. 
+    <a href="blog/conway">What is this???</a>
 </div>
-
-<style>
-
-</style>

frontend/src/routes/about/+page.svelte

@@ -0,0 +1,60 @@
+<div class="flex flex-col md:flex-row items-center gap-0 md:gap-4 ">
+    <aside class="w-1/4 flex justify-center">
+        <img class="me max-w-[8rem] md:max-w-[12rem]" alt='pixel art of Nathan Jodoin' src="me-pixelated.png"/>
+    </aside>
+
+    <article class="p-0 md:p-4">
+
+        ## About Me
+
+        My name is Nathan Jodoin. I'm a software engineer, artist, and active hobbyist.
+        I served in the United States Navy for about 8 years as an Information Systems Technician,
+        after which I sought out an education in computer science.
+
+    </article>
+</div>
+
+## Occupation  
+
+I'm currently working as a Student Researcher with the [xREZ Lab for Art and Science](http://www.xrezlab.com), where,
+in conjunction with [Sean Moulton](https://github.com/WindowsVista42) and [James Heath](https://github.com/Lain255)
+we develop tools for reasearching VR UI/UX.
+
+## Experience
+
+I have experience with the Unity game-engine and a myriad of programming languages,
+including but not limited to:
+
+<ul class="ulist">
+    <li>c</li>
+    <li>c++</li>
+    <li>c# </li>
+    <li>javascript/typescript</li>
+    <li>golang</li>
+    <li>rust</li>
+</ul>
+
+# Work Experience
+For a more detailed resume, please see [my LinkedIn](https://www.linkedin.com/in/nathan-jodoin-2076a049/)
+
+## Current and Relevant Employment
+
+### XR(AR/VR) @ [xREZ Lab](https://xrezlab.com)
+I cannot disclose the specific details of ongoing projects, but my team and I have been developing unique tools for multiplatform/multiplayer collaboration in support of an ongoing NSF grant funded NASA project. We've been working with MS Hololens, Vive Pro Eye, Vive Focus and other similar devices. Please keep an eye out for upcoming publications.
+
+### DevSecOps @ [xREZ Lab](https://xrezlab.com)
+GitHub Actions for CI/CD, Linux Server Administration, Systems Security, NGINX, etc.
+
+### Fullstack Development @ [NIWC Atlantic](https://www.niwcatlantic.navy.mil/)
+Integrated into an agile team, responsible for developing AWS Lambda serverless API routes and integrating them into a ReactJS frontend.
+
+## Past Employment
+
+For 8 years I worked as an Information Systems Technician in the US Navy. I requested honorable discharged as IT1 in 2020 to pursue an education in computer science. I've worked in other roles such as QA Lead for [Nynja](https://nynja.io/) and as an SWE intern for [CafeX Communications](https://www.cafex.com/contact-us/).
+
+# Education 
+[uMass Dartmouth](https://umassd.edu) and [UNT](https://unt.edu).
+
+<br/>
+
+[Contact me](contact) for more information.

frontend/src/routes/blog/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { goto } from "$app/navigation";
     import type { BlogPost } from "$lib/types";
     export let data: { posts: BlogPost[] }
 </script>
@@ -8,16 +9,31 @@
 </header>
 
 <section>
-    <ul class="posts flex flex-col gap-5" >
+    <div class="posts flex flex-col md:flex-row flex-wrap justify-start items-start" >
         {#each data.posts as post}
-            <li class="post outline outline-overlay2 bg-mantle p-4 rounded-md">
-                <a href="/blog/{post.slug}" class="title text-lg font-bold">{post.title}</a>
-                <p class="date text-overlay1 italic">Published: {post.date}</p>
-                <p class="description">{post.description}</p>
-            </li>
+            <div class="post-container">
+                <button aria-label={`Blog Post`} class="post" on:click={() => goto(`blog/${post.slug}`)}>
+                    <span class="text-cyan-700 dark:text-sapphire text-lg font-bold">{post.title}</span>
+                    <p class="date text-overlay font-semibold italic">Published: {post.date}</p>
+                    <p class="description">{post.description}</p>
+                </button>
+            </div>
         {/each}
-    </ul>
+    </div>
 </section>
 
 <style>
+.post-container {
+    @apply w-full md:w-1/2 xl:w-1/3 2xl:w-1/4 p-1
+}
+.post {
+    @apply border-overlay2 border bg-crust p-1 drop-shadow-sm w-full
+}
+.post {
+    border-style: outset;
+}
+.post:hover {
+    @apply drop-shadow-md bg-mantle translate-y-1 transition-all duration-300 ease-in-out 
+    motion-reduce:transition-none motion-reduce:transform-none
+}
 </style>

frontend/src/routes/components/Grid.svelte

@@ -49,14 +49,15 @@ export let isClearable: boolean = false
 export let isRandom : boolean = false
 export let isStateVisible : boolean = false
 export let isToggleable : boolean = false
+export let hasStateToggle : boolean = false
 export let isRandomizable : boolean = false
 export let isManual: boolean = false
 export let isPlayable: boolean = false
 export let isLooped: boolean = false
 export let isAutoplayed: boolean = false
 export let model: Model = Models.DEFAULT
 export let seed: string = ''
-export let intervalSec : number = 1.5
+export let intervalSec : number = 1.2
 export let id: string = ''
 
 const colors = [
@@ -122,14 +123,14 @@ onMount(() => {
         let observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
             entries.forEach((entry: IntersectionObserverEntry) => {
                 if(entry.target === grid) {
-                    if (entry.intersectionRatio !=1) {
+                    if (entry.intersectionRatio < 0.5) {
                         stopPlaying()
                     } else {
                         startPlaying()
                     }
                 }
             });
-        }, {threshold: 1})
+        }, {threshold: 0.5})
         observer.observe(grid)
     }
 })
@@ -195,10 +196,12 @@ export const startPlaying = () => {
         if (isStale) { 
             if (!isLooped) { 
                 stopPlaying() 
+                if (seed) { fillSeed() } else if (isRandom) { fillRandomly() } else { fillZero() }
+                wait(1000)
+                return
             }
-            wait(1000)
             if (seed) { fillSeed() } else if (isRandom) { fillRandomly() } else { fillZero() }
-            return
+            wait(250)
         }
         startPlaying()
     }, intervalSec * 1000);
@@ -239,7 +242,7 @@ const getCellStyle = () => {
         {/each}
     </table>
 </div>
-{#if isResizable || isToggleable}
+{#if isResizable || hasStateToggle}
     <div class='grid-slider flex flex-col gap-1 justify-center items-center'>
         {#if isResizable}
             <div class="flex flex-col md:flex-row justify-center items-center">
@@ -251,7 +254,7 @@ const getCellStyle = () => {
                 />
             </div>
         {/if}
-        {#if isToggleable}
+        {#if hasStateToggle}
             <div>
                 <label 
                     for='vis-impaired-toggle' 
@@ -324,7 +327,7 @@ const getCellStyle = () => {
         {#if isPlayable}
             <div class="flex flex-col md:flex-row justify-center items-center">
                 <label for='timestep-length-slider' class='p-2 text-sm'>Interval: {intervalSec.toFixed(2)} s</label>
-                <input id='timestep-length-slider' class='slider' type='range' min='0.1' max='2.0' step='.05' 
+                <input id='timestep-length-slider' class='slider' type='range' min='0.02' max='2.0' step='.01' 
                     bind:value={intervalSec}
                     on:input={() => { if (timer) {
                         stopPlaying()

frontend/src/routes/components/Header.svelte

@@ -10,6 +10,9 @@ import ThemeToggle from './ThemeToggle.svelte';
         </a>
 
         <ul id="header-navbar" class="header-navbar">
+            <li>
+                <a href="/about">about</a>
+            </li>
             <li>
                 <a href="/blog">blog</a>
             </li>