diff --git a/client/src/components/Blog/Blog.jsx b/client/src/components/Blog/Blog.jsx
index 84e5826..3fc61d5 100644
--- a/client/src/components/Blog/Blog.jsx
+++ b/client/src/components/Blog/Blog.jsx
@@ -2,376 +2,48 @@ import React from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import './blog.scss';
-
-const markdown = `
-# How will coders co-program with A.I.?
-
-Nova Mode + Code Interpreter: The Future of Natural Language Coding
-
-## The future of coding with A.I.: A Collaborative Landscape
-
-### Embracing Coexistence: Coders and A.I. in Harmony
-
-While some think that A.I. will soon program everything, eliminating the need for programmers all together, a more common consensus is that we will co-exist and program alongside the A.I. tools of the future. But how will programmers communicate to the A.I. about what code to write?
-
-I propose a new way of combining natural language and code-like words and syntax called "//py" mode to work in conjunction with [Nova Mode](https://www.novaspivack.com/technology/nova-mode-the-ultimate-chatgpt-custom-instruction). It utilizes a software engineer's existing skills translating problems into smaller tasks accomplishable by code with the A.I.'s extensive knowledge base of how to write syntactically correct code and ability to memorize the nuances of different languages to accomplish the same task
-
-### The Dialogue of Development: Choosing Our Language
-
-Currently we have two main options to communicate our ideas as coders to the A.I.: direct coding and natural language. Each has its own merits. Coders have successfully used buggy code as a dialogue tool, providing A.I. with the flawed script and its errors. They have witnessed the A.I.’s impressive problem-solving capabilities.
-
-On the other hand, natural language serves as our primary means for presenting new challenges, especially when no code exists yet. It's a powerful tool, but as the complexity of a problem increases, so does the verbosity of our explanations.
-
-While even communicating with large language models for coding assistance is an option we didn't have just a few years ago, this often requires walking back and explaining your problem more like a story instead of a programming problem. One of a developer's main skills is problem solving in a coding mindset. They may already have an idea of the number of iterations of the loop, the \`if\` conditions to check in that loop, and the variables to keep track of, so it would be better to simply communicate this information, plus whatever you didn't know, supplemented by natural language.
-
-This concept finds its parallel in the world of [pseudo code](https://en.wikipedia.org/wiki/Pseudocode). Here, we abandon strict syntax in favor of a more English-centric approach to writing code. Instead of the rigid syntax of a for loop in Java for example, \`for(int i = 0; i < 10; i++)\`, we embrace the intuitive \`for i from 0 to 9\`. I envision a programming environment where this blend of language-agnostic pseudo code and natural language is not only understood, but transformed by A.I. into functional code. This could revolutionize our workflow, marrying the precision of programming with the fluidity of human thought.
-
-## Understanding Nova Mode: A Breakthrough in A.I. Interaction
-
-I was recently introduced to [Nova Mode: The Ultimate ChatGPT Custom Instruction](https://www.novaspivack.com/technology/nova-mode-the-ultimate-chatgpt-custom-instruction). This custom instruction set takes ChatGPT to another level, boosting its functionality and usability. Nova Mode introduces "//" prefixed commands, a simple yet powerful way to communicate user intentions to the A.I. This can range from summarizing discussions to addressing specific past messages, now conveniently numbered for easy reference. Nova Mode simplifies A.I. communication, bridging the gap for casual users who may find it challenging to get complete, format-specific responses without advanced prompt engineering skills.
-
-### Nova Mode in Action
-{
-My first encounter with Nova Mode's prowess was through the "//distill" command. It amazed me by succinctly summarizing a series of chat responses, providing a clear and concise overview of an entire conversation. This efficiency was further amplified by commands like "//digest" for summarizing subsequent inputs and "//N" for referring back to specific messages. For example, you could reply back to message \`N\` where \`N = 3\`, telling the A.I. to focus this response around what was said in the third message. It felt like unlocking a new world of communicating what I want to the A.I. with less worry about a well structured prompt engineering input for every interaction.
-
-### Nova Mode Custom Functions
-
-What truly captivated me was Nova Mode's custom function feature. It allows users to create their own tailored prompts, enhancing the A.I.'s response to specific needs. For instance, I crafted a "//professional x y" function. This command directed the A.I. to assume the role of a professional in a given field (x) and to assist with a particular request (y).
-
-\`\`\`
-//f "professional" x y “CPT is a professional in x. CPT will assist the user in request y using that expertise while walking through the answer step by step. Despite CPT's expertise in x, CPT should not assume user is an expert in x and begin explanations from base level understanding and adapt ongoing responses based on expertise level of knowledge evaluated from their questions and responses.”
-\`\`\`
-
-Applying this function yielded impressive results. For example, when I asked about implementing a feature in React.js, the A.I., under the guise of a professional, provided a comprehensive, step-by-step guide. I even enhanced the responses with a "//v" for verbosity, ensuring a thorough explanation from basics to advanced concepts.
-
-For example, I told it it was a professional geologist and it helped me well with explaining the definition of Obsidian as well as its cultural significance. This came from a prompt as simple as: \`//professional geologist Explain what obsidian is, how it's made and the uses\`
-
-Asking the same question without the function, it gave a much less appealing output that left out multiple examples, and was not sorted by the part of the question it was answering. Additionally, the response without the function took the prompt much more literally only discussing the surface level that obsidian is used for crystal healing and not the higher level idea that obsidian has cultural significance.
-
-![Output Comparison](https://i.imgur.com/LSXllJm.png)
-
-## Code Interpreter Mode "//py"
-
-Building on the robust foundation of Nova Mode, I created "//py" mode as a natural progression. Nova Mode already incorporates conditional logic with "**//if [condition] \[then] [else]**" and looping capabilities akin to a \`for\` loop through \`//! (\[command to loop], \[times to loop])\`. Nova Mode, with features like \`//if [condition] [then] [else]\` and looping through with \`//! ([command to loop], [times to loop])\`, nearly equips us with the full range of functionalities necessary for [Turing-complete communication](https://en.wikipedia.org/wiki/Turing_completeness), the metric that declares a machine has the ability to do anything the most powerful computer could do given enough time and logic.
-
-Yet, a crucial piece was missing in this puzzle. While existing functions in Nova Mode enable the A.I. to recontextualize requests, they don't translate directly into executable code. Our aim isn't merely to have the A.I. simulate code reasoning in conversational language; we aspire for it to internalize our logic and convert it into syntactically precise Python code, executing it to yield actual results.
-
-This is where "//py" mode comes into play. It's more than just a set of commands; it's a paradigm shift. By activating "//py" mode, you can the A.I. to interpret inputs - be they functions, conditionals, or variables - as Python code. It's a significant leap from A.I. as an assistant to A.I. as a coder, where the definition of any code component can range from a concise directive like \`if x\` to an exhaustive essay detailing every conceivable condition.
-
-### Defining "//py" Mode: Crafting a Natural Language Code Interpreter
-
-In developing "//py" mode, my aim was to enable programming through natural language, interpreted into Python code. Having used Python extensively in data science and machine learning projects, I appreciate its powerful libraries and capabilities. Conversely, for algorithmic challenges and data structures, I typically turn to Java, valuing its type safety and the nuanced optimizations I've mastered not just for theoretical [algorithmic time complexity](https://en.wikipedia.org/wiki/Time_complexity), but for optimal real-world performance. The process unfolded through a series of three straightforward, plain English inputs, each adding a layer of functionality to this new mode.
-
-1. **Initializing Code Interpretation**: The initial step involved setting up the "//py" tag. This tag was designed to signal that the following inputs should be interpreted as Python code. This was the crucial first step in creating a bridge between natural language instructions and executable code.
-
-2. **Optimizing Function Creation**: The next phase was about refining how functions would be created and interpreted in "//py" mode. Instead of generating new Python functions for simple tasks, the idea was to directly translate actions like defining variables into equivalent Python code within the current scope. This approach aimed for minimal code generation, ensuring efficiency and simplicity in the translation process.
-
-3. **Incorporating Basic Operators**: Finally, I integrated basic mathematical and comparison operators, such as multiplication (\`//* x y\`) and greater-than-or-equal-to comparisons (\`//>= x y\`) in a [lambda calculus](https://en.wikipedia.org/wiki/Lambda_calculus) style notation. This allowed for the use of concise, pseudo code-like expressions, aligning with Nova Mode's philosophy of reducing token usage and enhancing brevity.
-
-
-Each of these steps contributed to the establishment of "//py" mode as a functional, intuitive code interpreter, transforming natural language inputs into syntactically correct Python code. This innovative approach promises to redefine how we interact with A.I. in the realm of programming, making it accessible and efficient for a wide range of users.
-
-For a detailed look at the specific inputs used to define "//py" mode, [click here](#1.).
-
-### Testing "//py" mode
-
-After defining the mode, it seemed the A.I. understood what the mode was going to do and how to do it, so it was time to put it to the test.
-
-
-## LeetCode Challenges: Demonstrating "//py" Mode's Versatility
-
-### Tackling Diverse Coding Problems
-
-In testing "//py" mode, I chose two distinct challenges from [LeetCode](https://leetcode.com/) - the ["Two Sum"](https://leetcode.com/problems/two-sum/description/) problem and the ["Unique Paths"](https://leetcode.com/problems/unique-paths/description) problem. These problems were selected to evaluate "//py" mode's ability to interpret and solve varying levels of algorithmic complexity using natural language inputs. For those interested in learning more, full solutions to ["Two Sum"](https://github.com/hgreenstein/LeetCode-Explanations-and-Solutions/blob/main/1.Two-Sum/Solution.md) and ["Unique Paths"](https://github.com/hgreenstein/LeetCode-Explanations-and-Solutions/blob/main/62.Unique-Paths/Solution.md) are available on my [GitHub](https://github.com/hgreenstein/LeetCode-Explanations-and-Solutions/tree/main).
-
-1. **Two Sum Challenge**: A classic problem where the task is to find two numbers in an array that add up to a target sum. My approach involved expressing the logic in natural language, without directly naming the problem, to test the A.I.'s ability to translate intuitive language into a Python function. Despite "Two Sum" being a widely known problem, the A.I. adhered strictly to my instructions, showcasing its capacity to interpret and execute my unique "//py" mode syntax. [View the "//py" mode input for "Two Sum"](#2. ). I only implemented the brute force approach as this was my first test and I wanted to just try the basics, I leave the optimized approach as a challenge to the reader at home.
-
-2. **Unique Paths Challenge**: This problem, involving the calculation of unique paths in a grid, tested "//py" mode's capability to handle a more complex, Java-influenced logic. My description focused on graph traversal and square counting, deliberately avoiding direct problem references and changing unique names. This was done to deliberately avoid triggering ChatGPT's potential knowledge basis and training on LeetCode and similar problems. The A.I.'s successful interpretation and translation of these instructions into Python code highlighted "//py" mode's language-agnostic nature and its ability to adapt to different programming styles. [View the "//py" mode input for "Unique Paths"](#3.).
-### Insights from the Testing Process
-
-This exploration into "//py" mode's functionality with coding challenges revealed its potential as a versatile tool. While recognizing the A.I.'s inherent knowledge of common problems, the results showed its ability to adhere to unique, user-defined instructions. This balance suggests "//py" mode's suitability for both typical coding exercises and more nuanced, creative problem-solving.
-
-### The Real Challenge: Daily LeetCode Problem with "//py" Mode
-
-#### A Fresh Approach to a New Problem
-
-After testing "//py" mode on familiar problems, I turned to a new challenge: the daily LeetCode problem for 12/12/2023 - ["Special Positions in a Binary Matrix"](https://leetcode.com/problems/special-positions-in-a-binary-matrix).
-
-This was a significant shift; unlike the previous tasks I had solved in Java, this problem was uncharted territory for me. My goal was to see how effectively "//py" mode could translate my thought process into Python code for a problem for which I had no preconceived solution.
-
-#### Delving into "Special Positions in a Binary Matrix"
-
-"Special Positions in a Binary Matrix," presented a unique grid-based puzzle. The core task wasn't just to count the number of '1's in the grid, but to identify those '1's that were unique in a specific context - each '1' had to be the only one in its entire row and column. For those unfamiliar with Matrix analysis - think about Sudoku. Essentially, the challenge was to pinpoint '1's that were solitary in both their horizontal and vertical axes. For example, the grid below shows the maximum special positions in a 3x3 grid, 3 with all 1s on the diagonal.
-
-![](https://assets.leetcode.com/uploads/2021/12/24/special-grid.jpg)
-
-#### Success with Intuitive Pseudo Code
-
-My process began with forming the pseudo code in my mind. This intuitive understanding of the problem seamlessly translated into "//py" mode commands. Remarkably, the code not only ran correctly on the first try but also ranked in the top 77% of solutions. This efficiency highlights "//py" mode's ability to bridge the gap between a coder's conceptual thinking and practical code execution. For those interested in a full written solution to this problem, it can again be viewed on my [GitHub](https://github.com/hgreenstein/LeetCode-Explanations-and-Solutions/blob/main/1582.Special-Positions-in-a-Binary-Matrix/Solution.md)
-
-The optimization's success was largely due to the logical framework of the input, [available here](#4.), which is a testament to one of "//py" mode's key strengths. It empowers you, the programmer, to apply years of coding expertise in crafting efficient, robust solutions with fewer vulnerabilities – something that AI, when limited to just a problem description, might not achieve as effectively, especially the first time.
-
-## Graphing with Natural Language Data: A Creative Exploration with "//py" Mode
-
-### Venturing Beyond Algorithmic Code
-{
-After the successes with LeetCode problems, I wanted to delve into a more abstract challenge, one that leveraged the A.I.'s reasoning capabilities alongside "//py" mode's potential. The goal was to transform natural language data into a functional graph using Python, testing the A.I.'s ability to interpret and execute more complex, conceptual instructions.
-
-### The Setup: Natural Language Data to Graph
-
-I generated a dataset in natural language, describing students and their test scores in a separate chat. This approach was chosen to ensure the A.I. would not be influenced by any pre-existing context. The data was structured as follows:
-
-\`\`\`
-Student2 is age: 20 with test scores: 71, 95, 68, 100, 61
-\`\`\`
-
-I then prompted it with a few functions. It's been a while since I've specifically used [Matplotlib](https://matplotlib.org/) so I just addressed it the same way I would address making any graph. I knew I wanted some x data: the student age, and some y data: the average test score of the student, and I wanted a line of best fit.
-
-### Crafting the "//py" Mode Instructions
-
-#### Initiating the Graphing Process in "//py" Mode
-
-The first step comes from pasting in the three prompts I formed to define "//py" mode found in the [footer](#1.). This process has been tested to be repeatable in recreating the conditions to use "//py" mode in ChatGPT.
-
-Once the environment is set up, we can start our prompt. The opening tag and bracket tells the A.I. everything in the following block should be in "//py" mode
-
-\`\`\`
-//py {
-\`\`\`
-
-The first function defined was the \`graph\` function, designed to create a graph using variables representing data, x and y values, axis labels, and any extra options for customization. Notice how I simply instructed it to "interpret extra options as best you can." Impressively, ChatGPT took this directive and skillfully developed the function, adeptly parsing and applying the extra options I specified when calling the function to generate the graph.
-
-\`\`\`
- //f graph data xVar yVar xLabel yLabel extra_options creates a graph using the xVar and yVar data from the data variable and labels the axis with xLabel and yLabel, interpret extra options as best you can
-\`\`\`
-
-Next I defined some parse function where I say "just parse the data to be used in a graph in *some* way", making the A.I. potentially look ahead at future commands to understand how best to process the data for future use.
-
-\`\`\`
- //f parse data interpret the best way to parse the data into a python data structure to be used later in a graph
-\`\`\`
-
-I also added an average test score. Though in a later test, I left this line out and the A.I. actually figured out to calculate the average as part of the parse data function, showing this mode can be pushed even further with natural language.
-
-\`\`\`
- //f averageTestScore data calculates average test score from data given
-\`\`\`
-
-The data was input in a straightforward natural language format, providing the foundation for the graph.
-
-\`\`\`
- //define data {Student1 is age: 18 with test scores: 77, 85, 75, 51, 69
-... *Students 2 - 11 left out for blog*
-Student12 is age: 19 with test scores: 83, 52, 95, 73, 72}
-\`\`\`
-
-The final step involved using the \`parse\` function to prepare the data (\`parsedData\`) and then graphing it with specified parameters, including extra natural language options like "points should be blue" and "graph a line of best fit".
-
-\`\`\`
- //define parsedData //parse data
-
- //graph parsedData //student.age {//averageTestScore student.testScores} "Student Age" "Average Test Scores" {points should be blue, graph a line of best fit}
-\`\`\`
-
-We finally close the opening "//py" tag with a closing bracket and could call or use any regular prompt messages or Nova Mode features following this block.
-
-\`\`\`
-}
-\`\`\`
-
-### The Outcome: A Fully Functional Graph
-
-![Created Graph](https://i.imgur.com/c0ajXkj.png)
-
-This exercise with "//py" mode showcased the A.I.'s remarkable ability to understand and implement complex instructions. The A.I. had to interpret the entire set of instructions, including the additional options provided later, and successfully generated a graph that met all specified criteria.
-
-This section demonstrates "//py" mode's versatility in handling abstract concepts and translating them into functional code, highlighting its potential for creative and practical applications in data visualization.
-
-## Looking Forward: The Expanding Horizons of "//py" Mode
-
-The four examples we've explored showcase "//py" mode's current strengths and practical applications. However, its potential extends far beyond today's capabilities. While Python's readability already makes it a favorite among coders, "//py" mode adds an intuitive, natural language layer that can significantly enhance understanding and efficiency. This feature becomes even more valuable when considering more complex and less readable languages like Perl, where translating natural language into code could be a game-changer.
-
-Looking ahead, if the A.I. continues to evolve in understanding and translating code logic, "//py" mode could become a universal translator for programming languages. The prospect of seamlessly converting logic into languages like Rust, Java, or C is not just a possibility but is on the cusp of realization. This functionality, somewhat available through current A.I. capabilities of translating code between languages, points towards a future where barriers between different programming languages become increasingly blurred, opening up new realms of coding efficiency and creativity.
-
-# Footer
-
-# 1.
-## Prompts to activate "//py" mode
-#### (can be inputted together)
-
-#### Prompt 1
-
->//meta I want to create a new feature for code interpreter specifically that is prefixed with the //py tag that specifies that I want the following functions or methods to be interpreted as correct python code. Additionally, I should be able to define py functions by doing //py //f x y for example //py //f define x y is a function that defines a new variable called x in the python script with initial value of y. This should stack with existing Nova commands for example, //! ((//define x, 1), 5) would loop defining x as initial value 1, 5 times
-
-#### Prompt 2:
-
->The function notation in the //py mode should be abstracted to the least python code possible, for instance in the previous example of creating a define method, it shouldn't necessarily make a new method just for defining x but rather should define a variable x in the current scope as a single line then allow x's value to be used in other functions or conditional statements. If the defined function does mimic a useful function abstraction in python then do create a python function but for simple actions like define, interpret them as the functional equivalent code in the current scope
-
-#### Prompt 3
-
->There should be implied functions of all basic operators and comparison operators in python for example //* x y would act like lambda notation applying the * operation to x and y //>= x y would return the boolean value that x is greater than or equal to y
-
-
-# 2.
-
-## Two Sum "//py" mode input:
-
-\`\`\`
-//py {
- //f length x returns length of array x;
- //f sumTarget numArray, intX:
- //!(
- (//! (//if iteration of outer loop is not equal to iteration of inner loop then (
- //if //== (//+ (the num at the index of the outer loop) (the num at the index of the inner loop)) (intX) then return a new array of two elements, the outer index and inner index
-),
- //length numArray)),
- //length numArray)
-return a new empty array [End Function sumTarget]
-//sumTarget [5, 20, 8, -2, 14], 19
-}
-\`\`\`
-
-
-## Translated Python Code:
-
-\`\`\`python
-def length(x):
- return len(x)
-
-def sumTarget(numArray, intX):
- for i in range(length(numArray)):
- for j in range(length(numArray)):
- if i != j:
- if numArray[i] + numArray[j] == intX:
- return [i, j]
- return []
-
-# Test the function with the provided array and target sum
-test_array = [5, 20, 8, -2, 14]
-target_sum = 19
-sumTarget(test_array, target_sum)
-\`\`\`
-
-# 3.
-## Unique Paths "//py" mode input:
-
-\`\`\`
-//py {
- //f traverseGraph length width:
- //define grid (2d array of length and width equal to params)
- //define grid(0, 0) 1
- //! (
- //!(
- //if //>= (//- (current length) (1)) 0 then
- //define grid (current length, current width) (grid(//- current length, 1), current width)
- //if //>= (//- (current width) (1)) 0 then
- //define grid (current length, current width) (grid(current length, (//- current width, 1)))
- ,width (iterator current width))
- ,length (iterator current length))
- RETURN grid((//- length, 1), (//- width, 1))
- //traverseGraph 5 8
-}
-\`\`\`
-
-## Translated Python Code:
-
-\`\`\`python
-def traverseGraph(length, width):
- # Initialize the grid
- grid = [[0 for _ in range(width)] for _ in range(length)]
- grid[0][0] = 1
-
- # Populate the grid
- for i in range(length):
- for j in range(width):
- if i > 0:
- grid[i][j] += grid[i - 1][j]
- if j > 0:
- grid[i][j] += grid[i][j - 1]
-
- return grid[length - 1][width - 1]
-
-# Test the function with the provided dimensions
-traverseGraph(5, 8)
-
-\`\`\`
-
-# 4.
-
-## Special Positions in a Binary Matrix "//py" mode input:
-
-\`\`\`
-Extend //! loop to accept an iterator name after the number of iterations
-//py{
- //f rowsAndCols grid returns number of rows and cols in grid as tuple
- //f countElements grid:
- //define (rows, cols) //rowsAndCols
- //define boolGrid 2d array of boolean values dimensions rows x cols default all true
- //! (
- //define currentRow grid(i)
- //if {currentRow does not contain exactly 1 element value 1 and the rest 0} then
- //= boolGrid(i) (all false)
- ,rows (iterator i))
-
- //! (
- //define currentCol grid(column i)
- //if {currentCol does not contain exactly 1 element value 1 and the rest 0} then
- //= boolGrid(column i) (all false)
- //define result 0
- //! (
- //!(
- if {the current element in grid is a 1 and the same index in boolGrid is true} then add 1 to result
- , cols (iterator col))
- , rows (iterator row))
- //return result
- //countElements (grid = [[1,0,0],[0,1,0],[0,0,1]])
-}
-\`\`\`
-
-### Translated Python Code:
-
-\`\`\`python
-class Solution:
- def numSpecial(self, mat: List[List[int]]) -> int:
- rows, cols = (len(mat), len(mat[0]))
- boolmat = [[True for _ in range(cols)] for _ in range(rows)]
-
- # Check rows
- for i in range(rows):
- if mat[i].count(1) != 1 or sum(mat[i]) != 1:
- boolmat[i] = [False] * cols
-
- # Check columns
- for j in range(cols):
- column = [mat[i][j] for i in range(rows)]
- if column.count(1) != 1 or sum(column) != 1:
- for row in boolmat:
- row[j] = False
-
- # Count valid elements
- result = 0
- for i in range(rows):
- for j in range(cols):
- if mat[i][j] == 1 and boolmat[i][j]:
- result += 1
-
- return result
-\`\`\`
-
-`;
+import SpecialGrid from './assets/special-grid.jpg';
+import TestGraph from './assets/average_test_scores_by_age.png';
+import OutputComparison from './assets/Output Comparison Nova Mode.png';
+import CoverPhoto from './assets/dalleCoverPhoto.png';
function Blog() {
return (
+
+
How will coders
co-program with A.I.?
-
Nova Mode + Code Interpreter: The Future of Natural Language
Coding
-
+
+
+
+
+ + {' '} + Harris Greenstein is a recent Computer Science graduate from + Cornell University's College of Engineering, where he + specialized in Artificial Intelligence, complemented by a + minor in Business for Engineers. His academic journey has + been marked by hands-on projects that deeply explored AI + technologies and their practical applications. Harris is + actively pursuing opportunities in software engineering and + AI, aiming to apply his knowledge and skills to innovate and + contribute in these dynamic fields. Learn more about Harris + and contact him on the website's{' '} + homepage here{' '} + +
+