Starting blog post on stackoverflow

And loads of supporting graph code

assets/sass/pages/blog.scss

@@ -271,14 +271,12 @@
         }
       }
 
-      
       .tag-filter-link {
         background: rgba(255, 153, 0, 0.2);
         border-color: rgba(255, 153, 0, 0.5);
         color: #ff9900;
         text-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
       }
-    
     }
 
     // Post title
@@ -555,7 +553,8 @@
     background:
       linear-gradient(#000, #000) padding-box,
       linear-gradient(180deg, #0f0, #000) border-box;
-    filter: grayscale(100%) contrast(1.2) brightness(0.9) sepia(100%) hue-rotate(60deg) saturate(300%);
+    filter: grayscale(100%) contrast(1.2) brightness(0.9) sepia(100%)
+      hue-rotate(60deg) saturate(300%);
     transition: all 0.3s ease;
 
     &:hover {

assets/sass/pages/resources.scss

@@ -52,8 +52,10 @@
   }
 
   .whiteboard-description {
-    color: #546e7a;
-    font-size: 1.1rem;
+    font-family: "Caveat", cursive;
+    font-size: 28px;
+    font-weight: bold;
+    color: #2c3e50;
     max-width: 600px;
     margin: 0 auto;
   }

assets/sass/partials/_graphs.scss

@@ -0,0 +1,174 @@
+// Graph container styling to match terminal aesthetic
+.graph-container {
+  margin: 2rem 0;
+  padding: 20px 20px 100px 20px; // Extra bottom padding for rotated x-axis labels
+  background: rgba(0, 255, 0, 0.05);
+  border: 2px solid rgba(0, 255, 0, 0.3);
+  border-radius: 8px;
+  position: relative;
+  box-shadow:
+    0 0 20px rgba(0, 255, 0, 0.1),
+    inset 0 0 40px rgba(0, 255, 0, 0.05);
+  overflow: visible; // Prevent clipping of labels
+
+  @include media-down(lg) {
+    padding: 15px 15px 120px 15px;
+    margin: 1.5rem 0;
+  }
+
+  // Terminal-style border glow on hover
+  &:hover {
+    border-color: rgba(0, 255, 0, 0.5);
+    box-shadow:
+      0 0 30px rgba(0, 255, 0, 0.2),
+      inset 0 0 40px rgba(0, 255, 0, 0.08);
+  }
+
+  // Scanline effect overlay
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.1) 0px,
+      rgba(0, 0, 0, 0.1) 1px,
+      transparent 1px,
+      transparent 3px
+    );
+    pointer-events: none;
+    z-index: 1;
+    border-radius: 6px;
+  }
+
+  // Graph title
+  .graph-title {
+    color: greenyellow;
+    font-family: monospace;
+    font-size: 1.3rem;
+    margin: 0 0 15px 0;
+    text-align: center;
+    text-shadow: 0 0 10px rgba(173, 255, 47, 0.5);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    position: relative;
+    z-index: 2;
+
+    @include media-down(lg) {
+      font-size: 1.1rem;
+      margin-bottom: 10px;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      width: 60%;
+      height: 2px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 255, 0, 0.6),
+        transparent
+      );
+      margin: 8px auto 0;
+      box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
+    }
+  }
+
+  // Canvas element
+  canvas {
+    position: relative;
+    z-index: 2;
+    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.3));
+  }
+
+  // CRT flicker effect (subtle)
+  @keyframes graph-flicker {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.98;
+    }
+  }
+
+  animation: graph-flicker 3s ease-in-out infinite;
+}
+
+// Special styling for graphs in blog posts
+.blog-summary,
+.blogs-content {
+  .graph-container {
+    // Ensure proper spacing in blog context
+    margin: 2.5rem 0;
+
+    @include media-down(lg) {
+      margin: 1.5rem 0;
+    }
+  }
+}
+
+// Full-width graph variant
+.graph-container.full-width {
+  margin-left: -20px;
+  margin-right: -20px;
+  border-radius: 0;
+
+  @include media-down(lg) {
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+}
+
+// Compact graph variant
+.graph-container.compact {
+  padding: 15px;
+
+  .graph-title {
+    font-size: 1.1rem;
+    margin-bottom: 10px;
+  }
+
+  @include media-down(lg) {
+    padding: 10px;
+
+    .graph-title {
+      font-size: 1rem;
+    }
+  }
+}
+
+// Loading state
+.graph-container.loading {
+  &::after {
+    content: "LOADING DATA...";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #0f0;
+    font-family: monospace;
+    font-size: 1.2rem;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
+    animation: pulse 1.5s ease-in-out infinite;
+    z-index: 3;
+  }
+
+  canvas {
+    opacity: 0.3;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

assets/sass/style.scss

@@ -14,6 +14,7 @@
 @import "partials/lcd-display";
 @import "partials/window";
 @import "partials/crt-tv";
+@import "partials/graphs";
 
 @import "partials/content-screens";