refactor: Remove music page and update navigation menu

package.json

@@ -12,11 +12,13 @@
     "axios": "^1.6.7",
     "firebase": "^10.8.0",
     "gray-matter": "^4.0.3",
+    "katex": "^0.16.11",
     "next": "14.1.0",
     "next-mdx-remote": "^4.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.0.1",
+    "react-katex": "^3.0.1",
     "rehype-highlight": "^7.0.0",
     "rss": "^1.2.2"
   },

src/components/(posts)/(slug)/BlogContent.tsx

@@ -1,4 +1,6 @@
 import { MDXRemote } from 'next-mdx-remote';
+import { InlineMath, BlockMath } from 'react-katex'; 
+import 'katex/dist/katex.min.css'; 
 
 interface BlogContentProps {
     mdxSource: {
@@ -9,7 +11,10 @@ interface BlogContentProps {
     };
 }
 
-const components = {};
+const components = {
+    InlineMath,
+    BlockMath,
+};
 
 const BlogContent: React.FC<BlogContentProps> = ({ mdxSource }) => (
     <div className="post break-words w-full p-0 m-0">

src/posts/gameoflife.mdx

@@ -9,6 +9,8 @@ readTime: '5 min'
 
 Conway’s Game of Life is a cellular automaton devised by the British mathematician John Horton Conway in 1970. It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves.
 
+![GoL](https://github.com/user-attachments/assets/4ce1e84a-59ae-46ba-a721-93ad94163de9)
+
 ## Rules
 
 The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, alive or dead. Every cell interacts with its eight neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur: