Add files via upload

Notebook 9_5_Augmentation - Removed duplicate weight initialization

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*.{js,jsx,ts,tsx,md,mdx,json,cjs,mjs,css}]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true, node: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+    ],
+    ignorePatterns: ["build", ".eslintrc.cjs"],
+    parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+    settings: { react: { version: "18.2" } },
+    plugins: ["react-refresh"],
+    rules: {
+        "react/jsx-no-target-blank": "off",
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    },
+};

.gitignore

@@ -9,15 +9,22 @@
 /coverage
 
 # production
-/build
+/dist
 
-# misc
+# ENV
-.DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# IDE
+.idea
+.vscode
+
+# macOS
+.DS_Store

.prettierignore

@@ -0,0 +1,7 @@
+# ignore these directories when formatting the repo
+/Blogs
+/CM20315
+/CM20315_2023
+/Notebooks
+/PDFFigures
+/Slides

.prettierrc.cjs

@@ -0,0 +1,14 @@
+/** @type {import("prettier").Config} */
+const prettierConfig = {
+    trailingComma: "all",
+    tabWidth: 4,
+    useTabs: false,
+    semi: true,
+    singleQuote: false,
+    bracketSpacing: true,
+    printWidth: 100,
+    endOfLine: "lf",
+    plugins: [require.resolve("prettier-plugin-organize-imports")],
+};
+
+module.exports = prettierConfig;

Blogs/BorealisGradientFlow.ipynb

@@ -31,7 +31,7 @@
       "source": [
         "# Gradient flow\n",
         "\n",
-        "This notebook replicates some of the results in the the Borealis AI [blog](https://www.borealisai.com/research-blogs/gradient-flow/) on gradient flow.  \n"
+        "This notebook replicates some of the results in the Borealis AI [blog](https://www.borealisai.com/research-blogs/gradient-flow/) on gradient flow.  \n"
       ],
       "metadata": {
         "id": "ucrRRJ4dq8_d"

Blogs/BorealisNTK.ipynb

@@ -166,7 +166,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "Routines to calculate the empirical and analytical NTK (i.e. the NTK with infinite hidden units) for the the shallow network"
+        "Routines to calculate the empirical and analytical NTK (i.e. the NTK with infinite hidden units) for the shallow network"
       ],
       "metadata": {
         "id": "mxW8E5kYIzlj"

CM20315/CM20315_Coursework_IV.ipynb

@@ -128,7 +128,7 @@
         "\n",
         "In part (b) of the practical we calculate the volume of a hypersphere of radius 0.5 (i.e., of diameter 1) as a function of the radius.  You will find that the volume decreases to almost nothing in high dimensions.  All of the volume is in the corners of the unit hypercube (which always has volume 1). Double weird.\n",
         "\n",
-        "Note that you you can check your answer by doing the calculation for 2D using the standard formula for the area of a circle and making sure it matches."
+        "Note that you can check your answer by doing the calculation for 2D using the standard formula for the area of a circle and making sure it matches."
       ],
       "metadata": {
         "id": "b2FYKV1SL4Z7"

CM20315/CM20315_Loss_II.ipynb

@@ -199,7 +199,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "The left is model output and the right is the model output after the sigmoid has been applied, so it now lies in the range [0,1] and represents the probability, that y=1.  The black dots show the training data.  We'll compute the the likelihood and the negative log likelihood."
+        "The left is model output and the right is the model output after the sigmoid has been applied, so it now lies in the range [0,1] and represents the probability, that y=1.  The black dots show the training data.  We'll compute the likelihood and the negative log likelihood."
       ],
       "metadata": {
         "id": "MvVX6tl9AEXF"

CM20315/CM20315_Loss_III.ipynb

@@ -218,7 +218,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "The left is model output and the right is the model output after the softmax has been applied, so it now lies in the range [0,1] and represents the probability, that y=0 (red), 1 (green) and 2 (blue)   The dots at the bottom show the training data with the same color scheme.  So we want the red curve to be high where there are red dots, the green curve to be high where there are green dotsmand the blue curve to be high where there are blue dots  We'll compute the the likelihood and the negative log likelihood."
+        "The left is model output and the right is the model output after the softmax has been applied, so it now lies in the range [0,1] and represents the probability, that y=0 (red), 1 (green) and 2 (blue)   The dots at the bottom show the training data with the same color scheme.  So we want the red curve to be high where there are red dots, the green curve to be high where there are green dotsmand the blue curve to be high where there are blue dots  We'll compute the likelihood and the negative log likelihood."
       ],
       "metadata": {
         "id": "MvVX6tl9AEXF"

CM20315_2023/CM20315_Coursework_IV.ipynb

@@ -128,7 +128,7 @@
         "\n",
         "In part (b) of the practical we calculate the volume of a hypersphere of radius 0.5 (i.e., of diameter 1) as a function of the radius.  You will find that the volume decreases to almost nothing in high dimensions.  All of the volume is in the corners of the unit hypercube (which always has volume 1). Double weird.\n",
         "\n",
-        "Note that you you can check your answer by doing the calculation for 2D using the standard formula for the area of a circle and making sure it matches."
+        "Note that you can check your answer by doing the calculation for 2D using the standard formula for the area of a circle and making sure it matches."
       ],
       "metadata": {
         "id": "b2FYKV1SL4Z7"

CM20315_2023/CM20315_Coursework_V_2023.ipynb

@@ -214,7 +214,7 @@
     {
       "cell_type": "code",
       "source": [
-        "# Compute the derivative of the the loss with respect to the function output f_val\n",
+        "# Compute the derivative of the loss with respect to the function output f_val\n",
         "def dl_df(f_val,y):\n",
         "  # Compute sigmoid of network output\n",
         "  sig_f_val = sig(f_val)\n",

Notebooks/Chap05/5_3_Multiclass_Cross_entropy_Loss.ipynb

@@ -211,7 +211,7 @@
         "id": "MvVX6tl9AEXF"
       },
       "source": [
-        "The left is model output and the right is the model output after the softmax has been applied, so it now lies in the range [0,1] and represents the probability, that y=0 (red), 1 (green) and 2 (blue).  The dots at the bottom show the training data with the same color scheme.  So we want the red curve to be high where there are red dots, the green curve to be high where there are green dots, and the blue curve to be high where there are blue dots  We'll compute the the likelihood and the negative log likelihood."
+        "The left is model output and the right is the model output after the softmax has been applied, so it now lies in the range [0,1] and represents the probability, that y=0 (red), 1 (green) and 2 (blue).  The dots at the bottom show the training data with the same color scheme.  So we want the red curve to be high where there are red dots, the green curve to be high where there are green dots, and the blue curve to be high where there are blue dots  We'll compute the likelihood and the negative log likelihood."
       ]
     },
     {

Notebooks/Chap06/6_1_Line_Search.ipynb

@@ -130,7 +130,8 @@
         "\n",
         "        print('Iter %d, a=%3.3f, b=%3.3f, c=%3.3f, d=%3.3f'%(n_iter, a,b,c,d))\n",
         "\n",
-        "        # Rule #1 If the HEIGHT at point A is less than the HEIGHT at points B, C, and D then halve values of B, C, and D\n",
+        "        # Rule #1 If the HEIGHT at point A is less than the HEIGHT at points B, C, and D then move them to they are half\n",
+        "        # as far from A as they start\n",
         "        # i.e. bring them closer to the original point\n",
         "        # TODO REPLACE THE BLOCK OF CODE BELOW WITH THIS RULE\n",
         "        if (0):\n",

Notebooks/Chap06/6_2_Gradient_Descent.ipynb

@@ -1,18 +1,16 @@
 {
   "cells": [
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
-        "colab_type": "text",
+        "id": "view-in-github",
-        "id": "view-in-github"
+        "colab_type": "text"
       },
       "source": [
         "<a href=\"https://colab.research.google.com/github/udlbook/udlbook/blob/main/Notebooks/Chap06/6_2_Gradient_Descent.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "el8l05WQEO46"
@@ -111,7 +109,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "QU5mdGvpTtEG"
@@ -140,7 +137,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "eB5DQvU5hYNx"
@@ -162,7 +158,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "F3trnavPiHpH"
@@ -218,7 +213,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "s9Duf05WqqSC"
@@ -252,7 +246,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "RS1nEcYVuEAM"
@@ -290,7 +283,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "5EIjMM9Fw2eT"
@@ -333,11 +325,11 @@
         "          print('Iter %d, a=%3.3f, b=%3.3f, c=%3.3f, d=%3.3f'%(n_iter, a,b,c,d))\n",
         "          print('a %f, b%f, c%f, d%f'%(lossa,lossb,lossc,lossd))\n",
         "\n",
-        "        # Rule #1 If point A is less than points B, C, and D then halve points B,C, and D\n",
+        "        # Rule #1 If point A is less than points B, C, and D then halve distance from A to points B,C, and D\n",
         "        if np.argmin((lossa,lossb,lossc,lossd))==0:\n",
-        "          b = b/2\n",
+        "          b = a+ (b-a)/2\n",
-        "          c = c/2\n",
+        "          c = a+ (c-a)/2\n",
-        "          d = d/2\n",
+        "          d = a+ (d-a)/2\n",
         "          continue;\n",
         "\n",
         "        # Rule #2 If point b is less than point c then\n",
@@ -412,8 +404,8 @@
   ],
   "metadata": {
     "colab": {
-      "include_colab_link": true,
+      "provenance": [],
-      "provenance": []
+      "include_colab_link": true
     },
     "kernelspec": {
       "display_name": "Python 3",

Notebooks/Chap06/6_3_Stochastic_Gradient_Descent.ipynb

@@ -1,18 +1,16 @@
 {
   "cells": [
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
-        "colab_type": "text",
+        "id": "view-in-github",
-        "id": "view-in-github"
+        "colab_type": "text"
       },
       "source": [
         "<a href=\"https://colab.research.google.com/github/udlbook/udlbook/blob/main/Notebooks/Chap06/6_3_Stochastic_Gradient_Descent.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "el8l05WQEO46"
@@ -122,7 +120,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "QU5mdGvpTtEG"
@@ -150,7 +147,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "eB5DQvU5hYNx"
@@ -172,7 +168,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "F3trnavPiHpH"
@@ -228,7 +223,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "s9Duf05WqqSC"
@@ -279,7 +273,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "RS1nEcYVuEAM"
@@ -316,7 +309,6 @@
       ]
     },
     {
-      "attachments": {},
       "cell_type": "markdown",
       "metadata": {
         "id": "5EIjMM9Fw2eT"
@@ -359,11 +351,11 @@
         "          print('Iter %d, a=%3.3f, b=%3.3f, c=%3.3f, d=%3.3f'%(n_iter, a,b,c,d))\n",
         "          print('a %f, b%f, c%f, d%f'%(lossa,lossb,lossc,lossd))\n",
         "\n",
-        "        # Rule #1 If point A is less than points B, C, and D then halve points B,C, and D\n",
+        "        # Rule #1 If point A is less than points B, C, and D then change B,C,D so they are half their current distance from A\n",
         "        if np.argmin((lossa,lossb,lossc,lossd))==0:\n",
-        "          b = b/2\n",
+        "          b = a+ (b-a)/2\n",
-        "          c = c/2\n",
+        "          c = a+ (c-a)/2\n",
-        "          d = d/2\n",
+        "          d = a+ (d-a)/2\n",
         "          continue;\n",
         "\n",
         "        # Rule #2 If point b is less than point c then\n",
@@ -577,9 +569,8 @@
   ],
   "metadata": {
     "colab": {
-      "authorship_tag": "ABX9TyNk5FN4qlw3pk8BwDVWw1jN",
+      "provenance": [],
-      "include_colab_link": true,
+      "include_colab_link": true
-      "provenance": []
     },
     "kernelspec": {
       "display_name": "Python 3",

Notebooks/Chap07/7_3_Initialization.ipynb

@@ -337,8 +337,8 @@
     {
       "cell_type": "code",
       "source": [
-        "# You can see that the values of the hidden units are increasing on average (the variance is across all hidden units at the layer\n",
+        "# You can see that the gradients of the hidden units are increasing on average (the standard deviation is across all hidden units at the layer\n",
-        "# and the 1000 training examples\n",
+        "# and the 100 training examples\n",
         "\n",
         "# TO DO\n",
         "# Change this to 50 layers with 80 hidden units per layer\n",

Notebooks/Chap08/8_1_MNIST_1D_Performance.ipynb

@@ -1,28 +1,10 @@
 {
-  "nbformat": 4,
-  "nbformat_minor": 0,
-  "metadata": {
-    "colab": {
-      "provenance": [],
-      "gpuType": "T4",
-      "authorship_tag": "ABX9TyOuKMUcKfOIhIL2qTX9jJCy",
-      "include_colab_link": true
-    },
-    "kernelspec": {
-      "name": "python3",
-      "display_name": "Python 3"
-    },
-    "language_info": {
-      "name": "python"
-    },
-    "accelerator": "GPU"
-  },
   "cells": [
     {
       "cell_type": "markdown",
       "metadata": {
-        "id": "view-in-github",
+        "colab_type": "text",
-        "colab_type": "text"
+        "id": "view-in-github"
       },
       "source": [
         "<a href=\"https://colab.research.google.com/github/udlbook/udlbook/blob/main/Notebooks/Chap08/8_1_MNIST_1D_Performance.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
@@ -30,6 +12,9 @@
     },
     {
       "cell_type": "markdown",
+      "metadata": {
+        "id": "L6chybAVFJW2"
+      },
       "source": [
         "# **Notebook 8.1: MNIST_1D_Performance**\n",
         "\n",
@@ -38,25 +23,27 @@
         "Work through the cells below, running each cell in turn. In various places you will see the words \"TO DO\". Follow the instructions at these places and make predictions about what is going to happen or write code to complete the functions.\n",
         "\n",
         "Contact me at udlbookmail@gmail.com if you find any mistakes or have any suggestions."
-      ],
+      ]
-      "metadata": {
-        "id": "L6chybAVFJW2"
-      }
     },
     {
       "cell_type": "code",
-      "source": [
+      "execution_count": null,
-        "# Run this if you're in a Colab to install MNIST 1D repository\n",
-        "%pip install git+https://github.com/greydanus/mnist1d"
-      ],
       "metadata": {
         "id": "ifVjS4cTOqKz"
       },
-      "execution_count": null,
+      "outputs": [],
-      "outputs": []
+      "source": [
+        "# Run this if you're in a Colab to install MNIST 1D repository\n",
+        "%pip install git+https://github.com/greydanus/mnist1d"
+      ]
     },
     {
       "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "id": "qyE7G1StPIqO"
+      },
+      "outputs": [],
       "source": [
         "import torch, torch.nn as nn\n",
         "from torch.utils.data import TensorDataset, DataLoader\n",
@@ -64,44 +51,42 @@
         "import numpy as np\n",
         "import matplotlib.pyplot as plt\n",
         "import mnist1d"
-      ],
+      ]
-      "metadata": {
-        "id": "qyE7G1StPIqO"
-      },
-      "execution_count": null,
-      "outputs": []
     },
     {
       "cell_type": "markdown",
-      "source": [
-        "Let's generate a training and test dataset using the MNIST1D code.  The dataset gets saved as a .pkl file so it doesn't have to be regenerated each time."
-      ],
       "metadata": {
         "id": "F7LNq72SP6jO"
-      }
+      },
+      "source": [
+        "Let's generate a training and test dataset using the MNIST1D code.  The dataset gets saved as a .pkl file so it doesn't have to be regenerated each time."
+      ]
     },
     {
       "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "id": "YLxf7dJfPaqw"
+      },
+      "outputs": [],
       "source": [
-        "!mkdir ./sample_data\n",
-        "\n",
         "args = mnist1d.data.get_dataset_args()\n",
-        "data = mnist1d.data.get_dataset(args, path='./sample_data/mnist1d_data.pkl', download=False, regenerate=False)\n",
+        "data = mnist1d.data.get_dataset(args, path='./mnist1d_data.pkl', download=False, regenerate=False)\n",
         "\n",
         "# The training and test input and outputs are in\n",
         "# data['x'], data['y'], data['x_test'], and data['y_test']\n",
         "print(\"Examples in training set: {}\".format(len(data['y'])))\n",
         "print(\"Examples in test set: {}\".format(len(data['y_test'])))\n",
         "print(\"Length of each example: {}\".format(data['x'].shape[-1]))"
-      ],
+      ]
-      "metadata": {
-        "id": "YLxf7dJfPaqw"
-      },
-      "execution_count": null,
-      "outputs": []
     },
     {
       "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "id": "FxaB5vc0uevl"
+      },
+      "outputs": [],
       "source": [
         "D_i = 40    # Input dimensions\n",
         "D_k = 100   # Hidden dimensions\n",
@@ -122,15 +107,15 @@
         "\n",
         "# Call the function you just defined\n",
         "model.apply(weights_init)\n"
-      ],
+      ]
-      "metadata": {
-        "id": "FxaB5vc0uevl"
-      },
-      "execution_count": null,
-      "outputs": []
     },
     {
       "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "id": "_rX6N3VyyQTY"
+      },
+      "outputs": [],
       "source": [
         "# choose cross entropy loss function (equation 5.24)\n",
         "loss_function = torch.nn.CrossEntropyLoss()\n",
@@ -139,9 +124,9 @@
         "# object that decreases learning rate by half every 10 epochs\n",
         "scheduler = StepLR(optimizer, step_size=10, gamma=0.5)\n",
         "x_train = torch.tensor(data['x'].astype('float32'))\n",
-        "y_train = torch.tensor(data['y'].transpose().astype('long'))\n",
+        "y_train = torch.tensor(data['y'].transpose().astype('int64'))\n",
         "x_test= torch.tensor(data['x_test'].astype('float32'))\n",
-        "y_test = torch.tensor(data['y_test'].astype('long'))\n",
+        "y_test = torch.tensor(data['y_test'].astype('int64'))\n",
         "\n",
         "# load the data into a class that creates the batches\n",
         "data_loader = DataLoader(TensorDataset(x_train,y_train), batch_size=100, shuffle=True, worker_init_fn=np.random.seed(1))\n",
@@ -186,15 +171,15 @@
         "\n",
         "  # tell scheduler to consider updating learning rate\n",
         "  scheduler.step()"
-      ],
+      ]
-      "metadata": {
-        "id": "_rX6N3VyyQTY"
-      },
-      "execution_count": null,
-      "outputs": []
     },
     {
       "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "id": "yI-l6kA_EH9G"
+      },
+      "outputs": [],
       "source": [
         "# Plot the results\n",
         "fig, ax = plt.subplots()\n",
@@ -215,25 +200,38 @@
         "ax.set_title('Train loss %3.2f, Test loss %3.2f'%(losses_train[-1],losses_test[-1]))\n",
         "ax.legend()\n",
         "plt.show()"
-      ],
+      ]
-      "metadata": {
-        "id": "yI-l6kA_EH9G"
-      },
-      "execution_count": null,
-      "outputs": []
     },
     {
       "cell_type": "markdown",
+      "metadata": {
+        "id": "q-yT6re6GZS4"
+      },
       "source": [
         "**TO DO**\n",
         "\n",
         "Play with the model -- try changing the number of layers, hidden units, learning rate, batch size, momentum or anything else you like.  See if you can improve the test results.\n",
         "\n",
         "Is it a good idea to optimize the hyperparameters in this way?  Will the final result be a good estimate of the true test performance?"
-      ],
-      "metadata": {
-        "id": "q-yT6re6GZS4"
-      }
-    }
       ]
     }
+  ],
+  "metadata": {
+    "accelerator": "GPU",
+    "colab": {
+      "authorship_tag": "ABX9TyOuKMUcKfOIhIL2qTX9jJCy",
+      "gpuType": "T4",
+      "include_colab_link": true,
+      "provenance": []
+    },
+    "kernelspec": {
+      "display_name": "Python 3",
+      "name": "python3"
+    },
+    "language_info": {
+      "name": "python"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 0
+}

Notebooks/Chap08/8_3_Double_Descent.ipynb

@@ -99,7 +99,7 @@
         "# data['x'], data['y'], data['x_test'], and data['y_test']\n",
         "print(\"Examples in training set: {}\".format(len(data['y'])))\n",
         "print(\"Examples in test set: {}\".format(len(data['y_test'])))\n",
-        "print(\"Length of each example: {}\".format(data['x'].shape[-1]))"
+        "print(\"Dimensionality of each example: {}\".format(data['x'].shape[-1]))"
       ],
       "metadata": {
         "id": "PW2gyXL5UkLU"
@@ -147,7 +147,7 @@
     {
       "cell_type": "code",
       "source": [
-        "def fit_model(model, data):\n",
+        "def fit_model(model, data, n_epoch):\n",
         "\n",
         "  # choose cross entropy loss function (equation 5.24)\n",
         "  loss_function = torch.nn.CrossEntropyLoss()\n",
@@ -164,9 +164,6 @@
         "  # load the data into a class that creates the batches\n",
         "  data_loader = DataLoader(TensorDataset(x_train,y_train), batch_size=100, shuffle=True, worker_init_fn=np.random.seed(1))\n",
         "\n",
-        "  # loop over the dataset n_epoch times\n",
-        "  n_epoch = 1000\n",
-        "\n",
         "  for epoch in range(n_epoch):\n",
         "    # loop over batches\n",
         "    for i, batch in enumerate(data_loader):\n",
@@ -203,6 +200,18 @@
       "execution_count": null,
       "outputs": []
     },
+    {
+      "cell_type": "code",
+      "source": [
+        "def count_parameters(model):\n",
+        "    return sum(p.numel() for p in model.parameters() if p.requires_grad)"
+      ],
+      "metadata": {
+        "id": "AQNCmFNV6JpV"
+      },
+      "execution_count": null,
+      "outputs": []
+    },
     {
       "cell_type": "markdown",
       "source": [
@@ -226,19 +235,27 @@
         "# This code will take a while (~30 mins on GPU) to run!  Go and make a cup of coffee!\n",
         "\n",
         "hidden_variables = np.array([2,4,6,8,10,14,18,22,26,30,35,40,45,50,55,60,70,80,90,100,120,140,160,180,200,250,300,400]) ;\n",
+        "\n",
         "errors_train_all = np.zeros_like(hidden_variables)\n",
         "errors_test_all = np.zeros_like(hidden_variables)\n",
+        "total_weights_all = np.zeros_like(hidden_variables)\n",
+        "\n",
+        "# loop over the dataset n_epoch times\n",
+        "n_epoch = 1000\n",
         "\n",
         "# For each hidden variable size\n",
         "for c_hidden in range(len(hidden_variables)):\n",
         "    print(f'Training model with {hidden_variables[c_hidden]:3d} hidden variables')\n",
         "    # Get a model\n",
         "    model = get_model(hidden_variables[c_hidden]) ;\n",
+        "    # Count and store number of weights\n",
+        "    total_weights_all[c_hidden] = count_parameters(model)\n",
         "    # Train the model\n",
-        "    errors_train, errors_test = fit_model(model, data)\n",
+        "    errors_train, errors_test = fit_model(model, data, n_epoch)\n",
         "    # Store the results\n",
         "    errors_train_all[c_hidden] = errors_train\n",
-        "    errors_test_all[c_hidden]= errors_test"
+        "    errors_test_all[c_hidden]= errors_test\n",
+        "\n"
       ],
       "metadata": {
         "id": "K4OmBZGHWXpk"
@@ -249,12 +266,29 @@
     {
       "cell_type": "code",
       "source": [
+        "import matplotlib.pyplot as plt\n",
+        "import numpy as np\n",
+        "\n",
+        "# Assuming data['y'] is available and contains the training examples\n",
+        "num_training_examples = len(data['y'])\n",
+        "\n",
+        "# Find the index where total_weights_all is closest to num_training_examples\n",
+        "closest_index = np.argmin(np.abs(np.array(total_weights_all) - num_training_examples))\n",
+        "\n",
+        "# Get the corresponding value of hidden variables\n",
+        "hidden_variable_at_num_training_examples = hidden_variables[closest_index]\n",
+        "\n",
         "# Plot the results\n",
         "fig, ax = plt.subplots()\n",
         "ax.plot(hidden_variables, errors_train_all, 'r-', label='train')\n",
         "ax.plot(hidden_variables, errors_test_all, 'b-', label='test')\n",
-        "ax.set_ylim(0,100);\n",
+        "\n",
-        "ax.set_xlabel('No hidden variables'); ax.set_ylabel('Error')\n",
+        "# Add a vertical line at the point where total weights equal the number of training examples\n",
+        "ax.axvline(x=hidden_variable_at_num_training_examples, color='g', linestyle='--', label='N(weights) = N(train)')\n",
+        "\n",
+        "ax.set_ylim(0, 100)\n",
+        "ax.set_xlabel('No. hidden variables')\n",
+        "ax.set_ylabel('Error')\n",
         "ax.legend()\n",
         "plt.show()\n"
       ],
@@ -263,6 +297,24 @@
       },
       "execution_count": null,
       "outputs": []
+    },
+    {
+      "cell_type": "code",
+      "source": [],
+      "metadata": {
+        "id": "KT4X8_hE5NFb"
+      },
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "code",
+      "source": [],
+      "metadata": {
+        "id": "iGKZSfVF2r4z"
+      },
+      "execution_count": null,
+      "outputs": []
     }
   ]
 }

Notebooks/Chap08/8_4_High_Dimensional_Spaces.ipynb

@@ -134,7 +134,7 @@
       "source": [
         "# Volume of a hypersphere\n",
         "\n",
-        "In the second part of this notebook we calculate the volume of a hypersphere of radius 0.5 (i.e., of diameter 1) as a function of the radius.  Note that you you can check your answer by doing the calculation for 2D using the standard formula for the area of a circle and making sure it matches."
+        "In the second part of this notebook we calculate the volume of a hypersphere of radius 0.5 (i.e., of diameter 1) as a function of the radius.  Note that you can check your answer by doing the calculation for 2D using the standard formula for the area of a circle and making sure it matches."
       ],
       "metadata": {
         "id": "b2FYKV1SL4Z7"

Notebooks/Chap09/9_5_Augmentation.ipynb

@@ -107,10 +107,7 @@
         "  # Initialize the parameters with He initialization\n",
         "  if isinstance(layer_in, nn.Linear):\n",
         "    nn.init.kaiming_uniform_(layer_in.weight)\n",
-        "    layer_in.bias.data.fill_(0.0)\n",
+        "    layer_in.bias.data.fill_(0.0)\n"
-        "\n",
-        "# Call the function you just defined\n",
-        "model.apply(weights_init)"
       ],
       "metadata": {
         "id": "JfIFWFIL33eF"

Notebooks/Chap10/10_4_Downsampling_and_Upsampling.ipynb

@@ -301,7 +301,7 @@
       "cell_type": "code",
       "source": [
         "# Define 2 by 2 original patch\n",
-        "orig_2_2 = np.array([[2, 4], [4,8]])\n",
+        "orig_2_2 = np.array([[6, 8], [8,4]])\n",
         "print(orig_2_2)"
       ],
       "metadata": {

Notebooks/Chap10/10_5_Convolution_For_MNIST.ipynb

@@ -4,7 +4,7 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyNAcc98STMeyQgh9SbVHWG+",
+      "authorship_tag": "ABX9TyNELb86uz5qbhEKH81UqFKT",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -65,6 +65,11 @@
       "source": [
         "# Run this once to load the train and test data straight into a dataloader class\n",
         "# that will provide the batches\n",
+        "\n",
+        "# (It may complain that some files are missing because the files seem to have been\n",
+        "# reorganized on the underlying website, but it still seems to work). If everything is working\n",
+        "# properly, then the whole notebook should run to the end without further problems\n",
+        "# even before you make changes.\n",
         "batch_size_train = 64\n",
         "batch_size_test = 1000\n",
         "train_loader = torch.utils.data.DataLoader(\n",
@@ -91,6 +96,15 @@
       "execution_count": null,
       "outputs": []
     },
+    {
+      "cell_type": "code",
+      "source": [],
+      "metadata": {
+        "id": "YGwbxJDEm88i"
+      },
+      "execution_count": null,
+      "outputs": []
+    },
     {
       "cell_type": "code",
       "source": [

Notebooks/Chap12/12_2_Multihead_Self_Attention.ipynb

@@ -28,7 +28,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "# **Notebook 12.1: Multhead Self-Attention**\n",
+        "# **Notebook 12.2: Multihead Self-Attention**\n",
         "\n",
         "This notebook builds a multihead self-attention mechanism as in figure 12.6\n",
         "\n",

Notebooks/Chap15/15_1_GAN_Toy_Example.ipynb

@@ -4,7 +4,6 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyM0StKV3FIZ3MZqfflqC0Rv",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -339,7 +338,7 @@
         "    print(\"Initial generator loss = \", compute_generator_loss(z, theta, phi0, phi1))\n",
         "    for iter in range(n_iter):\n",
         "      # Get gradient\n",
-        "      dl_dtheta = compute_generator_gradient(x_real, x_syn, phi0, phi1)\n",
+        "      dl_dtheta = compute_generator_gradient(z, theta, phi0, phi1)\n",
         "      # Take a gradient step (uphill, since we are trying to make synthesized data less well classified by discriminator)\n",
         "      theta = theta + alpha * dl_dtheta ;\n",
         "\n",

Notebooks/Chap17/17_1_Latent_Variable_Models.ipynb

@@ -55,7 +55,7 @@
         "Pr(z) = \\text{Norm}_{z}[0,1]\n",
         "\\end{equation}\n",
         "\n",
-        "As in figure 17.2, we'll assume that the output is two dimensional, we we need to define a function that maps from the 1D latent variable to two dimensions.  Usually, we would use a neural network, but in this case, we'll just define an arbitrary relationship.\n",
+        "As in figure 17.2, we'll assume that the output is two dimensional, we need to define a function that maps from the 1D latent variable to two dimensions.  Usually, we would use a neural network, but in this case, we'll just define an arbitrary relationship.\n",
         "\n",
         "\\begin{align}\n",
         "x_{1} &=& 0.5\\cdot\\exp\\Bigl[\\sin\\bigl[2+ 3.675 z \\bigr]\\Bigr]\\\\\n",

Notebooks/Chap17/17_3_Importance_Sampling.ipynb

@@ -61,7 +61,7 @@
         "by drawing $I$ samples $y_i$ and using the formula:\n",
         "\n",
         "\\begin{equation}\n",
-        "\\mathbb{E}_{y}\\Bigl[\\exp\\bigl[- (y-1)^4\\bigr]\\Bigr] \\approx \\frac{1}{I} \\sum_{i=1}^I \\exp\\bigl[-(y-1)^4 \\bigr]\n",
+        "\\mathbb{E}_{y}\\Bigl[\\exp\\bigl[- (y-1)^4\\bigr]\\Bigr] \\approx \\frac{1}{I} \\sum_{i=1}^I \\exp\\bigl[-(y_i-1)^4 \\bigr]\n",
         "\\end{equation}"
       ]
     },

Notebooks/Chap19/19_2_Dynamic_Programming.ipynb

@@ -393,7 +393,7 @@
     {
       "cell_type": "code",
       "source": [
-        "# Update the state values for the current policy, by making the values at at adjacent\n",
+        "# Update the state values for the current policy, by making the values at adjacent\n",
         "# states compatible with the Bellman equation (equation 19.11)\n",
         "def policy_evaluation(policy, state_values, rewards,  transition_probabilities_given_action, gamma):\n",
         "\n",

Notebooks/Chap20/20_3_Lottery_Tickets.ipynb

@@ -44,7 +44,8 @@
       },
       "source": [
         "# Run this if you're in a Colab to install MNIST 1D repository\n",
-        "!pip install git+https://github.com/greydanus/mnist1d"
+        "!pip install git+https://github.com/greydanus/mnist1d\n",
+        "!git clone https://github.com/greydanus/mnist1d"
       ],
       "execution_count": null,
       "outputs": []
@@ -95,6 +96,12 @@
         "id": "I-vm_gh5xTJs"
       },
       "source": [
+        "from mnist1d.data import get_dataset, get_dataset_args\n",
+        "from mnist1d.utils import set_seed, to_pickle, from_pickle\n",
+        "\n",
+        "import sys ; sys.path.append('./mnist1d/notebooks')\n",
+        "from train import get_model_args, train_model\n",
+        "\n",
         "args = mnist1d.get_dataset_args()\n",
         "data = mnist1d.get_dataset(args=args)  # by default, this will download a pre-made dataset from the GitHub repo\n",
         "\n",
@@ -210,7 +217,7 @@
         "  # we would return [1,1,0,0,1]\n",
         "  # Remember that these are torch tensors and not numpy arrays\n",
         "  # Replace this function:\n",
-        "  mask = torch.ones_like(scores)\n",
+        "  mask = torch.ones_like(absolute_weights)\n",
         "\n",
         "\n",
         "  return mask"
@@ -237,7 +244,6 @@
         "def find_lottery_ticket(model, dataset, args, sparsity_schedule, criteria_fn=None, **kwargs):\n",
         "\n",
         "  criteria_fn = lambda init_params, final_params: final_params.abs()\n",
-        "\n",
         "  init_params = model.get_layer_vecs()\n",
         "  stats = {'train_losses':[], 'test_losses':[], 'train_accs':[], 'test_accs':[]}\n",
         "  models = []\n",
@@ -253,7 +259,7 @@
         "    model.set_layer_masks(masks)\n",
         "\n",
         "    # training process\n",
-        "    results = mnist1d.train_model(dataset, model, args)\n",
+        "    results = train_model(dataset, model, args)\n",
         "    model = results['checkpoints'][-1]\n",
         "\n",
         "    # store stats\n",
@@ -291,7 +297,8 @@
       },
       "source": [
         "# train settings\n",
-        "model_args = mnist1d.get_model_args()\n",
+        "from train import get_model_args, train_model\n",
+        "model_args = get_model_args()\n",
         "model_args.total_steps = 1501\n",
         "model_args.hidden_size = 500\n",
         "model_args.print_every = 5000 # print never\n",

Notebooks/Chap21/21_1_Bias_Mitigation.ipynb

@@ -137,7 +137,7 @@
         "id": "CfZ-srQtmff2"
       },
       "source": [
-        "Why might the distributions for blue and yellow populations be different? It could be that the behaviour of the populations is identical, but the credit rating algorithm is biased; it may favor one population over another or simply be more noisy for one group. Alternatively, it could be that that the populations genuinely behave differently. In practice, the differences in blue and yellow distributions are probably attributable to a combination of these factors.\n",
+        "Why might the distributions for blue and yellow populations be different? It could be that the behaviour of the populations is identical, but the credit rating algorithm is biased; it may favor one population over another or simply be more noisy for one group. Alternatively, it could be that the populations genuinely behave differently. In practice, the differences in blue and yellow distributions are probably attributable to a combination of these factors.\n",
         "\n",
         "Let’s assume that we can’t retrain the credit score prediction algorithm; our job is to adjudicate whether each individual is refused the loan ($\\hat{y}=0$)\n",
         " or granted it ($\\hat{y}=1$). Since we only have the credit score\n",
@@ -382,7 +382,7 @@
       "source": [
         "# Equal opportunity:\n",
         "\n",
-        "The thresholds are chosen so that so that the true positive rate is is the same for both population. Of the people who pay back the loan, the same proportion are offered credit in each group. In terms of the two ROC curves, it means choosing thresholds so that the vertical position on each curve is the same without regard for the horizontal position."
+        "The thresholds are chosen so that so that the true positive rate is the same for both population. Of the people who pay back the loan, the same proportion are offered credit in each group. In terms of the two ROC curves, it means choosing thresholds so that the vertical position on each curve is the same without regard for the horizontal position."
       ]
     },
     {

Notebooks/LICENSE (MIT)

@@ -0,0 +1,7 @@
+Copyright 2023 Simon Prince
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap"
+            rel="stylesheet"
+        />
+        
+        <title>Understanding Deep Learning</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/index.jsx"></script>
+    </body>
+</html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    }
+}

package.json

@@ -1,50 +1,36 @@
 {
-  "name": "react-website-smooth-scroll",
+    "name": "udlbook-website",
     "version": "0.1.0",
     "private": true,
     "homepage": "https://udlbook.github.io/udlbook",
-  "dependencies": {
+    "type": "module",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@testing-library/jest-dom": "^5.15.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-icons": "^5.0.1",
-    "react-router-dom": "^6.0.2",
-    "react-scripts": "4.0.3",
-    "react-scroll": "^1.8.4",
-    "styled-components": "^5.3.3",
-    "url-loader": "^4.1.1",
-    "web-vitals": "^1.1.2"
-  },
     "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
+        "dev": "vite",
-    "build": "react-scripts --openssl-legacy-provider build",
+        "build": "vite build",
-    "test": "react-scripts test",
+        "preview": "vite preview",
-    "eject": "react-scripts eject",
+        "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
         "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+        "deploy": "gh-pages -d dist",
+        "clean": "rm -rf node_modules dist",
+        "format": "prettier --write ."
     },
-  "eslintConfig": {
+    "dependencies": {
-    "extends": [
+        "react": "^18.3.1",
-      "react-app",
+        "react-dom": "^18.3.1",
-      "react-app/jest"
+        "react-icons": "^5.2.1",
-    ]
+        "react-router-dom": "^6.23.1",
-  },
+        "react-scroll": "^1.8.4",
-  "browserslist": {
+        "styled-components": "^6.1.11"
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
     },
     "devDependencies": {
-    "gh-pages": "^6.1.1"
+        "@vitejs/plugin-react-swc": "^3.5.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react": "^7.34.2",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "gh-pages": "^6.1.1",
+        "prettier": "^3.3.1",
+        "prettier-plugin-organize-imports": "^3.2.4",
+        "vite": "^5.2.12"
     }
 }

public/index.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap" rel="stylesheet">
-    <title>Understanding Deep Learning</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

src/App.css

@@ -1,6 +0,0 @@
-*{
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0 ;
-    font-family: 'Encode Sans Expanded', sans-serif;
-}

src/App.js

@@ -1,19 +0,0 @@
-import './App.css';
-import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
-import Home from './pages';
-
-
-
-
-function App() {
-  return (
-    <Router>
-      <Routes>
-        <Route exact path="/udlbook/" element ={<Home/>} />      
-      </Routes>
-      
-    </Router>
-  );
-}
-
-export default App;

src/App.jsx

@@ -0,0 +1,12 @@
+import Index from "@/pages";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
+export default function App() {
+    return (
+        <Router>
+            <Routes>
+                <Route exact path="/udlbook" element={<Index />} />
+            </Routes>
+        </Router>
+    );
+}

src/README.md

@@ -0,0 +1,34 @@
+# Understanding Deep Learning
+
+Understanding Deep Learning - Simon J.D. Prince
+
+## Website
+
+```shell
+# Install dependencies
+npm install
+
+# Run the website in development mode
+npm dev
+
+# Build the website
+npm build
+
+# Preview the built website
+npm preview
+
+# Format the code
+npm run format
+
+# Lint the code
+npm run lint
+
+# Clean the repository
+npm run clean
+
+# Prepare to deploy the website
+npm run predeploy
+
+# Deploy the website
+npm run deploy
+```

src/components/ButtonElement.js

@@ -1,23 +0,0 @@
-import styled from  'styled-components'
-import {Link} from 'react-scroll'
-
-
-export const Button= styled(Link)` 
-    border-radius: 50px;
-    background: ${({primary}) => (primary ? '#01BF71' : '#010606')};
-    white-space: nowrap;
-    padding: ${({big}) => (big? ' 14px 48px': '12px 30px')};
-    color: ${({dark}) => (dark ? '#010106': '#fff')};
-    font-size: $${({fontBig}) => (fontBig ? '20px' : '16px')};
-    outline: none;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.2s ease-in-out;
-    &:hover {
-        transition: all 0.2s ease-in-out;
-        background: ${({primary}) => (primary ? '#fff' : '#01BF71')}
-    }
-`

src/components/Footer/FooterElements.jsx

@@ -1,9 +1,9 @@
-import styled from 'styled-components'
+import { Link } from "react-router-dom";
-import {Link} from 'react-router-dom'
+import styled from "styled-components";
 
 export const FooterContainer = styled.footer`
     background-color: #101522;
-`
+`;
 
 export const FooterWrap = styled.div`
     padding: 48x 24px;
@@ -13,7 +13,7 @@ export const FooterWrap = styled.div`
     align-items: center;
     max-width: 1100px;
     margin: 0 auto;
-`
+`;
 
 export const FooterLinksContainer = styled.div`
     display: flex;
@@ -22,14 +22,15 @@ export const FooterLinksContainer = styled.div`
     @media screen and (max-width: 820px) {
         padding-top: 32px;
     }
-`
+`;
 
 export const FooterLinksWrapper = styled.div`
     display: flex;
+
     @media screen and (max-width: 820px) {
         flex-direction: column;
     }
-`
+`;
 
 export const FooterLinkItems = styled.div`
     display: flex;
@@ -46,12 +47,12 @@ export const FooterLinkItems = styled.div`
         padding: 10px;
         width: 100%;
     }
-`
+`;
 
 export const FooterLinkTitle = styled.h1`
     font-size: 14px;
     margin-bottom: 16px;
-`
+`;
 
 export const FooterLink = styled(Link)`
     color: #ffffff;
@@ -63,12 +64,12 @@ export const FooterLink = styled(Link)`
         color: #01bf71;
         transition: 0.3s ease-in-out;
     }
-`
+`;
 
 export const SocialMedia = styled.section`
     max-width: 1000px;
     width: 100%;
-`
+`;
 
 export const SocialMediaWrap = styled.div`
     display: flex;
@@ -80,7 +81,7 @@ export const SocialMediaWrap = styled.div`
     @media screen and (max-width: 820px) {
         flex-direction: column;
     }
-`
+`;
 
 export const SocialAttrWrap = styled.div`
     color: #fff;
@@ -93,7 +94,7 @@ export const SocialAttrWrap = styled.div`
     @media screen and (max-width: 820px) {
         flex-direction: column;
     }
-`
+`;
 
 export const SocialLogo = styled(Link)`
     color: #fff;
@@ -105,15 +106,16 @@ export const SocialLogo = styled(Link)`
     align-items: center;
     margin-bottom: 16px;
     font-weight: bold;
+
     @media screen and (max-width: 768px) {
         font-size: 20px;
     }
-`
+`;
 
 export const WebsiteRights = styled.small`
     color: #fff;
     margin-bottom: 8px;
-`
+`;
 
 export const SocialIcons = styled.div`
     display: flex;
@@ -121,17 +123,18 @@ export const SocialIcons = styled.div`
     align-items: center;
     width: 60px;
     margin-bottom: 8px;
-`
+`;
 
 export const SocialIconLink = styled.a`
     color: #fff;
     font-size: 24px;
-`
+    margin-right: 8px;
+`;
 
 export const FooterImgWrap = styled.div`
     max-width: 555px;
     height: 100%;
-`
+`;
 
 export const FooterImg = styled.img`
     width: 100%;

src/components/Footer/index.js

@@ -1,42 +0,0 @@
-import React from 'react'
-import { FaLinkedin} from 'react-icons/fa'
-import { FooterContainer, FooterWrap, FooterImg } from './FooterElements'
-import { SocialMedia,  SocialMediaWrap, SocialIcons, SocialIconLink, WebsiteRights, SocialLogo } from './FooterElements'
-import { animateScroll as scroll } from 'react-scroll'
-import twitterImg from '../../images/square-x-twitter.svg'
-
-const Footer = () => {
-    const toggleHome = () => {
-        scroll.scrollToTop();
-    }
-
-    return (
-        <>
-            <FooterContainer>
-                <FooterWrap>
-                    <SocialMedia>
-                        <SocialMediaWrap>
-                            <SocialLogo to='/udlbook/' onClick={toggleHome}>
-                                Understanding Deep Learning
-                            </SocialLogo>
-                            <WebsiteRights>©{new Date().getFullYear()} Simon J.D. Prince</WebsiteRights>
-                            <WebsiteRights>
-                            Images by StorySet on FreePik: <a href="https://www.freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933"> [1] </a> <a href="https://www.freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c">[2]</a> <a href="https://www.freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153"> [3]</a>  <a href="https://www.freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649"> [4]</a> 
-                            </WebsiteRights>
-                            <SocialIcons>
-                                <SocialIconLink href="https://twitter.com/SimonPrinceAI" target="_blank" aria-label="Twitter">
-                                    <FooterImg src={twitterImg} alt="twitter"/>
-                                </SocialIconLink>
-                                <SocialIconLink href="https://www.linkedin.com/in/simon-prince-615bb9165/" target="_blank" aria-label="LinkedIn">
-                                    <FaLinkedin/>
-                                </SocialIconLink>
-                            </SocialIcons>
-                        </SocialMediaWrap>
-                    </SocialMedia>
-                </FooterWrap>  
-            </FooterContainer>  
-        </>
-    )
-}
-
-export default Footer

src/components/Footer/index.jsx

@@ -0,0 +1,84 @@
+import {
+    FooterContainer,
+    FooterWrap,
+    SocialIconLink,
+    SocialIcons,
+    SocialLogo,
+    SocialMedia,
+    SocialMediaWrap,
+    WebsiteRights,
+} from "@/components/Footer/FooterElements";
+import { FaGithub, FaLinkedin } from "react-icons/fa";
+import { FaSquareXTwitter } from "react-icons/fa6";
+import { animateScroll as scroll } from "react-scroll";
+
+const images = [
+    "https://freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933",
+    "https://freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c",
+    "https://freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153",
+    "https://freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649",
+];
+
+const socials = [
+    {
+        href: "https://twitter.com/SimonPrinceAI",
+        icon: FaSquareXTwitter,
+        alt: "Twitter",
+    },
+    {
+        href: "https://linkedin.com/in/simon-prince-615bb9165/",
+        icon: FaLinkedin,
+        alt: "LinkedIn",
+    },
+    {
+        href: "https://github.com/udlbook/udlbook",
+        icon: FaGithub,
+        alt: "GitHub",
+    },
+];
+
+export default function Footer() {
+    const scrollToHome = () => {
+        scroll.scrollToTop();
+    };
+
+    return (
+        <>
+            <FooterContainer>
+                <FooterWrap>
+                    <SocialMedia>
+                        <SocialMediaWrap>
+                            <SocialLogo to="/udlbook" onClick={scrollToHome}>
+                                Understanding Deep Learning
+                            </SocialLogo>
+                            <WebsiteRights>
+                                &copy; {new Date().getFullYear()} Simon J.D. Prince
+                            </WebsiteRights>
+                            <WebsiteRights>
+                                Images by StorySet on FreePik:{" "}
+                                {images.map((image, index) => (
+                                    <a key={index} href={image}>
+                                        [{index + 1}]
+                                    </a>
+                                ))}
+                            </WebsiteRights>
+                            <SocialIcons>
+                                {socials.map((social, index) => (
+                                    <SocialIconLink
+                                        key={index}
+                                        href={social.href}
+                                        target="_blank"
+                                        aria-label={social.alt}
+                                        alt={social.alt}
+                                    >
+                                        <social.icon />
+                                    </SocialIconLink>
+                                ))}
+                            </SocialIcons>
+                        </SocialMediaWrap>
+                    </SocialMedia>
+                </FooterWrap>
+            </FooterContainer>
+        </>
+    );
+}

src/components/HeroSection/HeroElements.jsx

@@ -8,10 +8,7 @@ export const HeroContainer = styled.div`
     padding: 0 0px;
     position: static;
     z-index: 1;
-    }
+`;
-`
-
-
 
 export const HeroContent = styled.div`
     z-index: 3;
@@ -23,7 +20,8 @@ export const HeroContent = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-`
+`;
+
 export const HeroH1 = styled.h1`
     color: #fff;
     font-size: 48px;
@@ -36,8 +34,7 @@ export const HeroH1 = styled.h1`
     @media screen and (max-width: 480px) {
         font-size: 32px;
     }
-
+`;
-`
 
 export const HeroP = styled.p`
     margin-top: 24px;
@@ -46,7 +43,6 @@ export const HeroP = styled.p`
     text-align: center;
     max-width: 600px;
 
-    
     @media screen and (max-width: 768px) {
         font-size: 24px;
     }
@@ -54,48 +50,51 @@ export const HeroP = styled.p`
     @media screen and (max-width: 480px) {
         font-size: 18px;
     }
-`
+`;
 
 export const HeroBtnWrapper = styled.div`
     margin-top: 32px;
     display: flex;
     flex-direction: column;
     align-items: center;
-`
+`;
-
 
 export const HeroRow = styled.div`
     display: grid;
-    grid-auto-columns: minmax(auto, 1fr);
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
     align-items: top;
-    grid-template-areas:  'col1 col2' };
+    grid-template-areas: "col1 col2";
 
     @media screen and (max-width: 768px) {
-        grid-template-areas: 'col2' 'col1';
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "col2"
+            "col1";
     }
-`
+`;
-
 
 export const HeroNewsItem = styled.div`
     margin-left: 4px;
     color: #000000;
     font-size: 16px;
-    // line-height: 16px;
     margin-bottom: 16px;
     display: flex;
     justify-content: start;
+`;
 
-`
 export const HeroNewsItemDate = styled.div`
     width: 20%;
     margin-right: 20px;
+
     @media screen and (max-width: 768px) {
         font-size: 12px;
     }
+
     @media screen and (max-width: 480px) {
         font-size: 12px;
     }
-`
+`;
 
 export const HeroNewsItemContent = styled.div`
     width: 80%;
@@ -108,23 +107,24 @@ export const HeroNewsItemContent = styled.div`
     @media screen and (max-width: 480px) {
         font-size: 12px;
     }
-`
+`;
-
-
 
 export const HeroColumn1 = styled.div`
     margin-bottom: 15px;
     margin-left: 12px;
     margin-top: 60px;
     padding: 10px 15px;
-    padding: 0 15px;
     grid-area: col1;
-    align-items:left;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-`
 
+    @media screen and (max-width: 768px) {
+        margin-left: 0;
+        margin-top: 20px;
+        padding: 0;
+    }
+`;
 
 export const HeroColumn2 = styled.div`
     margin-bottom: 15px;
@@ -133,17 +133,22 @@ export const HeroColumn2 = styled.div`
     display: flex;
     align-items: center;
     flex-direction: column;
-`
+
+    @media screen and (max-width: 768px) {
+        padding: 0;
+    }
+`;
 
 export const TextWrapper = styled.div`
     max-width: 540px;
     padding-top: 0;
     padding-bottom: 0;
-`
+`;
+
 export const HeroImgWrap = styled.div`
     max-width: 555px;
     height: 100%;
-`
+`;
 
 export const Img = styled.img`
     width: 100%;
@@ -159,7 +164,7 @@ export const HeroDownloadsImg = styled.img`
     margin-left: 0;
     padding-right: 0;
     margin-bottom: 10px;
-`
+`;
 
 export const HeroLink = styled.a`
     color: #fff;
@@ -176,11 +181,13 @@ export const HeroLink = styled.a`
         width: 100%;
         height: 2px;
         background-color: #fff;
-    content: '';
+        content: "";
-    opacity: .3;
+        opacity: 0.3;
         -webkit-transform: scaleX(1);
-    transition-property: opacity, -webkit-transform;
+        transition-property:
-    transition-duration: .3s;
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
     }
 
     &:hover:before {
@@ -189,34 +196,6 @@ export const HeroLink = styled.a`
     }
 `;
 
-//   color: #fff;
-//   text-decoration: none;
-//   padding: 0.1rem 0rem;
-//   height: 100%;
-//   cursor: pointer;
-//   position:relative ; 
-
-//   &:before{
-//     position: absolute;
-//     margin: 0 auto;
-//     top: 100%;
-//     left: 0;
-//     width: 100%;
-//     height: 2px;
-//     background-color: #000;
-//     content: '';
-//     opacity: .3;
-//     -webkit-transform: scaleX(1);
-//     transition-property: opacity, -webkit-transform;
-//     transition-duration: .3s;
-// }
-
-//     &:hover:before {
-//     opacity: 1;
-//     -webkit-transform: scaleX(1.05);
-//   }
-// `;
-
 export const UDLLink = styled.a`
     text-decoration: none;
     color: #000;
@@ -232,21 +211,20 @@ export const UDLLink = styled.a`
         width: 100%;
         height: 2px;
         background-color: #000;
-        content: '';
+        content: "";
-        opacity: .3;
+        opacity: 0.3;
         -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
+        transition-property:
-        transition-duration: .3s;
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
     }
 
     &:hover:before {
         opacity: 1;
         -webkit-transform: scaleX(1.05);
     }
-`
+`;
-
-
-
 
 export const HeroNewsTitle = styled.div`
     margin-left: 0px;
@@ -263,7 +241,7 @@ export const HeroNewsTitle = styled.div`
     @media screen and (max-width: 480px) {
         font-size: 18px;
     }
-`
+`;
 
 export const HeroCitationTitle = styled.div`
     margin-left: 0px;
@@ -281,24 +259,36 @@ export const HeroCitationTitle = styled.div`
     @media screen and (max-width: 480px) {
         font-size: 18px;
     }
-`
+`;
 
+export const HeroNewsBlock = styled.div``;
 
-export const HeroNewsBlock = styled.div`
-
-`
 export const HeroCitationBlock = styled.div`
     font-size: 14px;
     margin-bottom: 0px;
     margin-top: 0px;
-
+`;
-`
-
-
-
 
 export const HeroFollowBlock = styled.div`
     @media screen and (max-width: 768px) {
         font-size: 14px;
     }
-`
+`;
+
+export const HeroNewsMoreButton = styled.button`
+    background: #fff;
+    color: #000;
+    font-size: 16px;
+    padding: 10px 24px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    align-self: center;
+
+    &:hover {
+        background: #000;
+        color: #fff;
+    }
+`;

src/components/HeroSection/index.js

@@ -1,94 +0,0 @@
-import React from 'react'
-import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent, UDLLink} from './HeroElements'
-import img from '../../images/F23.prince.learning.turquoise.jpg'
-
-const HeroSection = () => {
-
-
-    const citation = `
-@book{prince2023understanding,
-    author = "Simon J.D. Prince",
-    title = "Understanding Deep Learning",
-    publisher = "The MIT Press",
-    year = 2023,
-    url = "http://udlbook.com"}
-    `
- 
-    return (
-        <HeroContainer id="home">
-            <HeroContent>
-                <HeroRow>
-                    <HeroColumn1>
-                        <HeroNewsBlock>
-                            <HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
-
-                            <HeroNewsItem>
-                                <HeroNewsItemDate>03/12/24</HeroNewsItemDate>
-                                <HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
-                            </HeroNewsItem>
-
-                            <HeroNewsItem>
-                                <HeroNewsItemDate>02/21/24</HeroNewsItemDate>
-                                <HeroNewsItemContent>New blog about the <UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">Neural Tangent Kernel.</UDLLink></HeroNewsItemContent>
-                            </HeroNewsItem>
-                            <HeroNewsItem>
-                                <HeroNewsItemDate>02/15/24</HeroNewsItemDate>
-                                <HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
-                            </HeroNewsItem>
-
-
-                            <HeroNewsItem>
-                                <HeroNewsItemDate>01/29/24</HeroNewsItemDate>
-                                <HeroNewsItemContent> New blog about <UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </UDLLink> published.</HeroNewsItemContent>
-                            </HeroNewsItem>
-
-                            <HeroNewsItem>
-                                <HeroNewsItemDate>12/26/23</HeroNewsItemDate>
-                                <HeroNewsItemContent> Machine Learning Street Talk  <UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </UDLLink>  discussing book.</HeroNewsItemContent>
-                            </HeroNewsItem>
-
-                            <HeroNewsItem>
-                                <HeroNewsItemDate>12/19/23</HeroNewsItemDate>
-                                <HeroNewsItemContent>Deeper Insights <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</UDLLink> discussing book.</HeroNewsItemContent>
-                            </HeroNewsItem>
-
-                            <HeroNewsItem>
-                                <HeroNewsItemDate>12/06/23</HeroNewsItemDate>
-                                <HeroNewsItemContent> I did an <UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">interview</UDLLink> discussing the book with Borealis AI.</HeroNewsItemContent>
-                            </HeroNewsItem>
-
-                            <HeroNewsItem>
-                                <HeroNewsItemDate>12/05/23</HeroNewsItemDate>
-                                <HeroNewsItemContent> Book released by <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</UDLLink>.</HeroNewsItemContent>
-                            </HeroNewsItem>
-                        </HeroNewsBlock>
-                        <HeroCitationTitle>CITATION:</HeroCitationTitle>
-                        <HeroCitationBlock>
-                            <pre>
-                                <code>
-                                    <React.Fragment>{citation}</React.Fragment>
-                                </code>
-                            </pre>
-                        </HeroCitationBlock>
-                        <HeroFollowBlock>
-                            Follow me on <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or <UDLLink
-                            href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</UDLLink> for updates.
-                        </HeroFollowBlock>
-                    </HeroColumn1>
-                    <HeroColumn2>
-                        <HeroImgWrap>
-                            <Img src={img} alt="book cover"/>
-                        </HeroImgWrap>
-                        <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v2.05/UnderstandingDeepLearning_04_18_24_C.pdf">Download full pdf (18 Apr 2024)</HeroLink>
-                        <HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/>
-                        <HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">Buy the book</HeroLink>
-                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">Answers to selected questions</HeroLink>
-                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Errata</HeroLink>
-                    </HeroColumn2>
-                </HeroRow>
-            </HeroContent>
-        </HeroContainer>
-    )
-}
-
-export default HeroSection

src/components/HeroSection/index.jsx

@@ -0,0 +1,209 @@
+import {
+    HeroCitationBlock,
+    HeroCitationTitle,
+    HeroColumn1,
+    HeroColumn2,
+    HeroContainer,
+    HeroContent,
+    HeroDownloadsImg,
+    HeroFollowBlock,
+    HeroImgWrap,
+    HeroLink,
+    HeroNewsBlock,
+    HeroNewsItem,
+    HeroNewsItemContent,
+    HeroNewsItemDate,
+    HeroNewsMoreButton,
+    HeroNewsTitle,
+    HeroRow,
+    Img,
+    UDLLink,
+} from "@/components/HeroSection/HeroElements";
+import img from "@/images/book_cover.jpg";
+import { useState } from "react";
+
+const citation = `
+    @book{prince2023understanding,
+        author = "Simon J.D. Prince",
+        title = "Understanding Deep Learning",
+        publisher = "The MIT Press",
+        year = 2023,
+        url = "http://udlbook.com"
+    }
+    `;
+
+const news = [
+    {
+        date: "05/22/24",
+        content: (
+            <HeroNewsItemContent>
+                New{" "}
+                <UDLLink href="https://borealisai.com/research-blogs/neural-tangent-kernel-applications/">
+                    blog
+                </UDLLink>{" "}
+                about the applications of the neural tangent kernel.
+            </HeroNewsItemContent>
+        ),
+    },
+    {
+        date: "05/10/24",
+        content: (
+            <HeroNewsItemContent>
+                Positive{" "}
+                <UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">
+                    review
+                </UDLLink>{" "}
+                in Nature Machine Intelligence.
+            </HeroNewsItemContent>
+        ),
+    },
+    // {
+    //     date: "03/12/24",
+    //     content: <HeroNewsItemContent>Book now available again.</HeroNewsItemContent>,
+    // },
+    {
+        date: "02/21/24",
+        content: (
+            <HeroNewsItemContent>
+                New blog about the{" "}
+                <UDLLink href="https://borealisai.com/research-blogs/the-neural-tangent-kernel/">
+                    Neural Tangent Kernel
+                </UDLLink>
+                .
+            </HeroNewsItemContent>
+        ),
+    },
+    // {
+    //     date: "02/15/24",
+    //     content: (
+    //         <HeroNewsItemContent>
+    //             First printing of book has sold out in most places. Second printing available
+    //             mid-March.
+    //         </HeroNewsItemContent>
+    //     ),
+    // },
+    {
+        date: "01/29/24",
+        content: (
+            <HeroNewsItemContent>
+                New blog about{" "}
+                <UDLLink href="https://borealisai.com/research-blogs/gradient-flow/">
+                    gradient flow
+                </UDLLink>{" "}
+                published.
+            </HeroNewsItemContent>
+        ),
+    },
+    {
+        date: "12/26/23",
+        content: (
+            <HeroNewsItemContent>
+                Machine Learning Street Talk{" "}
+                <UDLLink href="https://youtube.com/watch?v=sJXn4Cl4oww">podcast</UDLLink> discussing
+                book.
+            </HeroNewsItemContent>
+        ),
+    },
+    {
+        date: "12/19/23",
+        content: (
+            <HeroNewsItemContent>
+                Deeper Insights{" "}
+                <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">
+                    podcast
+                </UDLLink>{" "}
+                discussing book.
+            </HeroNewsItemContent>
+        ),
+    },
+    {
+        date: "12/06/23",
+        content: (
+            <HeroNewsItemContent>
+                <UDLLink href="https://borealisai.com/news/understanding-deep-learning/">
+                    Interview
+                </UDLLink>{" "}
+                with Borealis AI.
+            </HeroNewsItemContent>
+        ),
+    },
+    {
+        date: "12/05/23",
+        content: (
+            <HeroNewsItemContent>
+                Book released by{" "}
+                <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
+                    The MIT Press
+                </UDLLink>
+                .
+            </HeroNewsItemContent>
+        ),
+    },
+];
+
+export default function HeroSection() {
+    const [showMoreNews, setShowMoreNews] = useState(false);
+
+    const toggleShowMore = () => {
+        setShowMoreNews((p) => !p);
+    };
+
+    return (
+        <HeroContainer id="home">
+            <HeroContent>
+                <HeroRow>
+                    <HeroColumn1>
+                        <HeroNewsBlock>
+                            <HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
+                            {(showMoreNews ? news : news.slice(0, 7)).map((item, index) => (
+                                <HeroNewsItem key={index}>
+                                    <HeroNewsItemDate>{item.date}</HeroNewsItemDate>
+                                    {item.content}
+                                </HeroNewsItem>
+                            ))}
+                            <HeroNewsMoreButton onClick={toggleShowMore}>
+                                {showMoreNews ? "Show less" : "Show more"}
+                            </HeroNewsMoreButton>
+                        </HeroNewsBlock>
+                        <HeroCitationTitle>CITATION:</HeroCitationTitle>
+                        <HeroCitationBlock>
+                            <pre>
+                                <code>{citation}</code>
+                            </pre>
+                        </HeroCitationBlock>
+                        <HeroFollowBlock>
+                            Follow me on{" "}
+                            <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or{" "}
+                            <UDLLink href="https://linkedin.com/in/simon-prince-615bb9165/">
+                                LinkedIn
+                            </UDLLink>{" "}
+                            for updates.
+                        </HeroFollowBlock>
+                    </HeroColumn1>
+                    <HeroColumn2>
+                        <HeroImgWrap>
+                            <Img src={img} alt="Book Cover" />
+                        </HeroImgWrap>
+                        <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">
+                            Download full PDF (27 May 2024)
+                        </HeroLink>
+                        <br />
+                        <HeroDownloadsImg
+                            src="https://img.shields.io/github/downloads/udlbook/udlbook/total"
+                            alt="download stats shield"
+                        />
+                        <HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
+                            Buy the book
+                        </HeroLink>
+                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">
+                            Answers to selected questions
+                        </HeroLink>
+                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">
+                            Errata
+                        </HeroLink>
+                    </HeroColumn2>
+                </HeroRow>
+            </HeroContent>
+        </HeroContainer>
+    );
+}

src/components/Instructors/InstructorsElements.jsx

@@ -1,15 +1,14 @@
 import styled from "styled-components";
 
-
 export const InstructorsContainer = styled.div`
     color: #fff;
     /* background: #f9f9f9; */
-    background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
+    background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};
 
     @media screen and (max-width: 768px) {
         padding: 100px 0;
     }
-`
+`;
 
 export const InstructorsWrapper = styled.div`
     display: grid;
@@ -20,7 +19,7 @@ export const InstructorsWrapper = styled.div`
     margin-left: auto;
     padding: 0 24px;
     justify-content: center;
-`
+`;
 
 export const InstructorsRow = styled.div`
     display: grid;
@@ -29,9 +28,10 @@ export const InstructorsRow = styled.div`
     grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
 
     @media screen and (max-width: 768px) {
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
     }
-`
+`;
 
 export const InstructorsRow2 = styled.div`
     display: grid;
@@ -40,28 +40,28 @@ export const InstructorsRow2 = styled.div`
     grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
 
     @media screen and (max-width: 768px) {
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
     }
-`
+`;
-
 
 export const Column1 = styled.div`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col1;
-`
+`;
 
 export const Column2 = styled.div`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col2;
-`
+`;
 
 export const TextWrapper = styled.div`
     max-width: 540px;
     padding-top: 0;
     padding-bottom: 0;
-`
+`;
 
 export const TopLine = styled.p`
     color: #773c23;
@@ -71,41 +71,37 @@ export const TopLine = styled.p`
     letter-spacing: 1.4px;
     text-transform: uppercase;
     margin-bottom: 16px;
-`
+`;
 
 export const Heading = styled.h1`
-
     margin-bottom: 24px;
     font-size: 48px;
     line-height: 1.1;
     font-weight: 600;
-    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
 
-    @media screen and (max-width: 480px)
+    @media screen and (max-width: 480px) {
-    {
         font-size: 32px;
     }
-`
+`;
-
 
 export const Subtitle = styled.p`
     max-width: 440px;
     margin-bottom: 35px;
     font-size: 18px;
     line-height: 24px;
-    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
+    color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
-
+`;
-`
 
 export const BtnWrap = styled.div`
     display: flex;
     justify-content: flex-start;
-`
+`;
 
 export const ImgWrap = styled.div`
     max-width: 555px;
     height: 100%;
-`
+`;
 
 export const Img = styled.img`
     width: 100%;
@@ -115,7 +111,6 @@ export const Img = styled.img`
     padding-right: 0;
 `;
 
-
 export const InstructorsContent = styled.div`
     z-index: 3;
     width: 100%;
@@ -127,6 +122,7 @@ export const InstructorsContent = styled.div`
     flex-direction: column;
     align-items: left;
     list-style-position: inside;
+
     @media screen and (max-width: 1050px) {
         font-size: 12px;
     }
@@ -134,7 +130,7 @@ export const InstructorsContent = styled.div`
     @media screen and (max-width: 768px) {
         font-size: 10px;
     }
-`
+`;
 
 export const InstructorsLink = styled.a`
     text-decoration: none;
@@ -151,15 +147,17 @@ export const InstructorsLink = styled.a`
         width: 100%;
         height: 2px;
         background-color: #555;
-        content: '';
+        content: "";
-        opacity: .3;
+        opacity: 0.3;
         -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
+        transition-property:
-        transition-duration: .3s;
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
     }
 
     &:hover:before {
         opacity: 1;
         -webkit-transform: scaleX(1.05);
     }
-`
+`;

src/components/Instructors/index.js

@@ -1,178 +0,0 @@
-import React from 'react'
-import { ImgWrap, Img, InstructorsLink, InstructorsContainer, InstructorsContent, InstructorsRow2, InstructorsWrapper, InstructorsRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './InstructorsElements'
-
-// export const homeObjOne = {
-//     id: 'about',
-//     lightBg: false,
-//     lightText: true,
-//     lightTextDesc: true,
-//     topLine: 'Premium Bank',
-//     headline: 'Unlimited transactions with zero fees',
-//     description:
-//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
-//     buttonLabel: 'Get Started',
-//     imgStart: false,
-//     img: require('../../images/svg-1.svg').default,
-//     alt: 'Car',
-//     dark: true,
-//     primary: true,
-//     darkText: false
-//   };
-
-import img from '../../images/instructor.svg'
-
-
-
-const InstructorsSection = () => {
-    return (
-        <>
-            <InstructorsContainer lightBg={true} id='Instructors'>
-                <InstructorsWrapper>
-                    <InstructorsRow imgStart={false}>
-                        <Column1>
-                            <TextWrapper>
-                                <TopLine>Instructors</TopLine>
-                                <Heading lightText={false}>Resources for instructors</Heading>
-                                <Subtitle darkText={true}>All the figures in vector and image formats, full slides for first twelve chapters, instructor answer booklet</Subtitle>
-                            </TextWrapper>
-                        </Column1>
-                        <Column2>
-                            <ImgWrap>
-                                <Img src={img} alt='Car'/>
-                            </ImgWrap>
-                        </Column2>
-                    </InstructorsRow>
-                    <InstructorsRow2>
-                        <Column1>
-                            <TopLine>Register</TopLine>
-                            <InstructorsLink href="https://mitpress.ublish.com/request?cri=15055">Register</InstructorsLink> with MIT Press for answer booklet.
-                            <InstructorsContent>
-
-                            </InstructorsContent>
-                           
-                            <TopLine>Full slides</TopLine>
-                            <InstructorsContent>
-                                Slides for 20 lecture undergraduate deep learning course:
-                            </InstructorsContent>
-                            <InstructorsContent>
-                                <ol>
-                                    <li>Introduction <InstructorsLink href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">PPTX</InstructorsLink></li>
-                                    <li>Supervised Learning <InstructorsLink href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">PPTX</InstructorsLink></li>
-                                    <li>Shallow Neural Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">PPTX</InstructorsLink></li>
-                                    <li>Deep Neural Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">PPTX</InstructorsLink></li>
-                                    <li>Loss Functions <InstructorsLink href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">PPTX</InstructorsLink></li>
-                                    <li>Fitting Models <InstructorsLink href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">PPTX</InstructorsLink></li>
-                                    <li>Computing Gradients <InstructorsLink href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">PPTX</InstructorsLink></li>
-                                    <li>Initialization <InstructorsLink href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">PPTX</InstructorsLink></li>
-                                    <li>Performance <InstructorsLink href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">PPTX</InstructorsLink></li>
-                                    <li>Regularization <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">PPTX</InstructorsLink></li>
-                                    <li>Convolutional Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">PPTX</InstructorsLink></li>
-                                    <li>Image Generation <InstructorsLink href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">PPTX</InstructorsLink></li>
-                                    <li>Transformers and LLMs <InstructorsLink href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">PPTX</InstructorsLink></li>
-                                </ol>
-                             </InstructorsContent>
-                        </Column1>
-                        <Column2>
-                            <TopLine>Figures</TopLine>
-                            <InstructorsContent>
-                            <ol>
-                                <li> Introduction: <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap1PDF.zip">PDF</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1udnl5pUOAc8DcAQ7HQwyzP9pwL95ynnv"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1IjTqIUvWCJc71b5vEJYte-Dwujcp7rvG/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX </InstructorsLink></li>
-
-                            <li> Supervised learning: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Shallow neural networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Deep neural networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa"> SVG</InstructorsLink>
-                                    /
-                                    <InstructorsLink href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Loss functions: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">PDF
-                                    </InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ">
-                                    SVG
-                                    </InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Training models: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">PDF
-                                    </InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK">
-                                    SVG
-                                    </InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Gradients and initialization: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Measuring performance: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Regularization: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">PDF
-                                    </InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
-                                    SVG
-                                    </InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1VwIfvjpdfTny6sEfu4ZETwCnw6m8Eg-5/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Convolutional networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap10PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1-Wb3VzaSvVeRzoUzJbI2JjZE0uwqupM9"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1MtfKBC4Y9hWwGqeP6DVwUNbi1j5ncQCg/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Residual networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap11PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1Mr58jzEVseUAfNYbGWCQyDtEDwvfHRi1"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1saY8Faz0KTKAAifUrbkQdLA2qkyEjOPI/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Transformers: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap12PDF.zip">PDF</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1txzOVNf8-jH4UfJ6SLnrtOfPd1Q3ebzd">
-                                    SVG</InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1GVNvYWa0WJA6oKg89qZre-UZEhABfm0l/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Graph neural networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap13PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1lQIV6nRp6LVfaMgpGFhuwEXG-lTEaAwe"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1YwF3U82c1mQ74c1WqHVTzLZ0j7GgKaWP/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Unsupervised learning: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap14PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1aMbI6iCuUvOywqk5pBOmppJu1L1anqsM"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1A-lBGv3NHl4L32NvfFgy1EKeSwY-0UeB/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
-                                        PPTX</InstructorsLink></li>
-                                <li> GANs: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap15PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1EErnlZCOlXc3HK7m83T2Jh_0NzIUHvtL"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/10Ernk41ShOTf4IYkMD-l4dJfKATkXH4w/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Normalizing flows: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap16PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1SNtNIY7khlHQYMtaOH-FosSH3kWwL4b7"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1nLLzqb9pdfF_h6i1HUDSyp7kSMIkSUUA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Variational autoencoders: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap17PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1B9bxtmdugwtg-b7Y4AdQKAIEVWxjx8l3"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1lQE4Bu7-LgvV2VlJOt_4dQT-kusYl7Vo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Diffusion models: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap18PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1A-pIGl4PxjVMYOKAUG3aT4a8wD3G-q_r"> SVG</InstructorsLink> / 
-                                    <InstructorsLink href="https://docs.google.com/presentation/d/1x_ufIBtVPzWUvRieKMkpw5SdRjXWwdfR/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
-                                    PPTX</InstructorsLink></li>
-                                <li> Deep reinforcement learning: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1a5WUoF7jeSgwC_PVdckJi1Gny46fCqh0"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1TnYmVbFNhmMFetbjyfXGmkxp1EHauMqr/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
-                                        PPTX </InstructorsLink></li>
-                                <li> Why does deep learning work?: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap20PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1M2d0DHEgddAQoIedKSDTTt7m1ZdmBLQ3"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1coxF4IsrCzDTLrNjRagHvqB_FBy10miA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
-                                        PPTX</InstructorsLink></li>
-                                <li> Deep learning and ethics: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap21PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1jixmFfwmZkW_UVYzcxmDcMsdFFtnZ0bU">SVG</InstructorsLink> / <InstructorsLink
-                                            href="https://docs.google.com/presentation/d/1EtfzanZYILvi9_-Idm28zD94I_6OrN9R/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Appendices - <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLAppendixPDF.zip">PDF</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1k2j7hMN40ISPSg9skFYWFL3oZT7r8v-l">
-                                    SVG</InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1_2cJHRnsoQQHst0rwZssv-XH4o5SEHks/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                            </ol>
-                            </InstructorsContent>
-                            <InstructorsLink href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">Instructions</InstructorsLink> for editing equations in figures.
-
-                            <InstructorsContent>
-                                
-                            </InstructorsContent>
-                        </Column2>
-                    </InstructorsRow2>
-
-                </InstructorsWrapper>
-            </InstructorsContainer>
-        </>
-    )
-}
-
-export default InstructorsSection

src/components/Instructors/index.jsx

@@ -0,0 +1,334 @@
+import {
+    Column1,
+    Column2,
+    Heading,
+    Img,
+    ImgWrap,
+    InstructorsContainer,
+    InstructorsContent,
+    InstructorsLink,
+    InstructorsRow,
+    InstructorsRow2,
+    InstructorsWrapper,
+    Subtitle,
+    TextWrapper,
+    TopLine,
+} from "@/components/Instructors/InstructorsElements";
+import img from "@/images/instructor.svg";
+
+const fullSlides = [
+    {
+        text: "Introduction",
+        link: "https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m",
+    },
+    {
+        text: "Supervised Learning",
+        link: "https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub",
+    },
+    {
+        text: "Shallow Neural Networks",
+        link: "https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7",
+    },
+    {
+        text: "Deep Neural Networks",
+        link: "https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1",
+    },
+    {
+        text: "Loss Functions",
+        link: "https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH",
+    },
+    {
+        text: "Fitting Models",
+        link: "https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW",
+    },
+    {
+        text: "Computing Gradients",
+        link: "https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK",
+    },
+    {
+        text: "Initialization",
+        link: "https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d",
+    },
+    {
+        text: "Performance",
+        link: "https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl",
+    },
+    {
+        text: "Regularization",
+        link: "https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood",
+    },
+    {
+        text: "Convolutional Networks",
+        link: "https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0",
+    },
+    {
+        text: "Image Generation",
+        link: "https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs",
+    },
+    {
+        text: "Transformers and LLMs",
+        link: "https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr",
+    },
+];
+
+const figures = [
+    {
+        text: "Introduction",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap1PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1udnl5pUOAc8DcAQ7HQwyzP9pwL95ynnv",
+            pptx: "https://docs.google.com/presentation/d/1IjTqIUvWCJc71b5vEJYte-Dwujcp7rvG/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Supervised learning",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla",
+            pptx: "https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Shallow neural networks",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI",
+            pptx: "https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Deep neural networks",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa",
+            pptx: "https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Loss functions",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ",
+            pptx: "https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Training models",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK",
+            pptx: "https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Gradients and initialization",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs",
+            pptx: "https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Measuring performance",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx",
+            pptx: "https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Regularization",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0",
+            pptx: "https://docs.google.com/presentation/d/1VwIfvjpdfTny6sEfu4ZETwCnw6m8Eg-5/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Convolutional networks",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap10PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1-Wb3VzaSvVeRzoUzJbI2JjZE0uwqupM9",
+            pptx: "https://docs.google.com/presentation/d/1MtfKBC4Y9hWwGqeP6DVwUNbi1j5ncQCg/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Residual networks",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap11PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1Mr58jzEVseUAfNYbGWCQyDtEDwvfHRi1",
+            pptx: "https://docs.google.com/presentation/d/1saY8Faz0KTKAAifUrbkQdLA2qkyEjOPI/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Transformers",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap12PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1txzOVNf8-jH4UfJ6SLnrtOfPd1Q3ebzd",
+            pptx: "https://docs.google.com/presentation/d/1GVNvYWa0WJA6oKg89qZre-UZEhABfm0l/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Graph neural networks",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap13PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1lQIV6nRp6LVfaMgpGFhuwEXG-lTEaAwe",
+            pptx: "https://docs.google.com/presentation/d/1YwF3U82c1mQ74c1WqHVTzLZ0j7GgKaWP/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Unsupervised learning",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap14PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1aMbI6iCuUvOywqk5pBOmppJu1L1anqsM",
+            pptx: "https://docs.google.com/presentation/d/1A-lBGv3NHl4L32NvfFgy1EKeSwY-0UeB/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "GANs",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap15PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1EErnlZCOlXc3HK7m83T2Jh_0NzIUHvtL",
+            pptx: "https://docs.google.com/presentation/d/10Ernk41ShOTf4IYkMD-l4dJfKATkXH4w/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Normalizing flows",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap16PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1SNtNIY7khlHQYMtaOH-FosSH3kWwL4b7",
+            pptx: "https://docs.google.com/presentation/d/1nLLzqb9pdfF_h6i1HUDSyp7kSMIkSUUA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Variational autoencoders",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap17PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1B9bxtmdugwtg-b7Y4AdQKAIEVWxjx8l3",
+            pptx: "https://docs.google.com/presentation/d/1lQE4Bu7-LgvV2VlJOt_4dQT-kusYl7Vo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Diffusion models",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap18PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1A-pIGl4PxjVMYOKAUG3aT4a8wD3G-q_r",
+            pptx: "https://docs.google.com/presentation/d/1x_ufIBtVPzWUvRieKMkpw5SdRjXWwdfR/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Deep reinforcement learning",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1a5WUoF7jeSgwC_PVdckJi1Gny46fCqh0",
+            pptx: "https://docs.google.com/presentation/d/1TnYmVbFNhmMFetbjyfXGmkxp1EHauMqr/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Why does deep learning work?",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap20PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1M2d0DHEgddAQoIedKSDTTt7m1ZdmBLQ3",
+            pptx: "https://docs.google.com/presentation/d/1coxF4IsrCzDTLrNjRagHvqB_FBy10miA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Deep learning and ethics",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap21PDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1jixmFfwmZkW_UVYzcxmDcMsdFFtnZ0bU",
+            pptx: "https://docs.google.com/presentation/d/1EtfzanZYILvi9_-Idm28zD94I_6OrN9R/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+    {
+        text: "Appendices",
+        links: {
+            pdf: "https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLAppendixPDF.zip",
+            svg: "https://drive.google.com/uc?export=download&id=1k2j7hMN40ISPSg9skFYWFL3oZT7r8v-l",
+            pptx: "https://docs.google.com/presentation/d/1_2cJHRnsoQQHst0rwZssv-XH4o5SEHks/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true",
+        },
+    },
+];
+
+export default function InstructorsSection() {
+    return (
+        <>
+            <InstructorsContainer lightBg={true} id="Instructors">
+                <InstructorsWrapper>
+                    <InstructorsRow imgStart={false}>
+                        <Column1>
+                            <TextWrapper>
+                                <TopLine>Instructors</TopLine>
+                                <Heading lightText={false}>Resources for instructors</Heading>
+                                <Subtitle darkText={true}>
+                                    All the figures in vector and image formats, full slides for
+                                    first twelve chapters, instructor answer booklet
+                                </Subtitle>
+                            </TextWrapper>
+                        </Column1>
+                        <Column2>
+                            <ImgWrap>
+                                <Img src={img} alt="Instructor" />
+                            </ImgWrap>
+                        </Column2>
+                    </InstructorsRow>
+                    <InstructorsRow2>
+                        <Column1>
+                            <TopLine>Register</TopLine>
+                            <InstructorsLink href="https://mitpress.ublish.com/request?cri=15055">
+                                Register
+                            </InstructorsLink>{" "}
+                            with MIT Press for answer booklet.
+                            <InstructorsContent></InstructorsContent>
+                            <TopLine>Full slides</TopLine>
+                            <InstructorsContent>
+                                Slides for 20 lecture undergraduate deep learning course:
+                            </InstructorsContent>
+                            <InstructorsContent>
+                                <ol>
+                                    {fullSlides.map((slide, index) => (
+                                        <li key={index}>
+                                            {slide.text}{" "}
+                                            <InstructorsLink href={slide.link}>
+                                                PPTX
+                                            </InstructorsLink>
+                                        </li>
+                                    ))}
+                                </ol>
+                            </InstructorsContent>
+                        </Column1>
+                        <Column2>
+                            <TopLine>Figures</TopLine>
+                            <InstructorsContent>
+                                <ol>
+                                    {figures.map((figure, index) => (
+                                        <li key={index}>
+                                            {figure.text}:{" "}
+                                            <InstructorsLink href={figure.links.pdf}>
+                                                PDF
+                                            </InstructorsLink>{" "}
+                                            /{" "}
+                                            <InstructorsLink href={figure.links.svg}>
+                                                {" "}
+                                                SVG
+                                            </InstructorsLink>{" "}
+                                            /{" "}
+                                            <InstructorsLink href={figure.links.pptx}>
+                                                PPTX{" "}
+                                            </InstructorsLink>
+                                        </li>
+                                    ))}
+                                </ol>
+                            </InstructorsContent>
+                            <InstructorsLink href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">
+                                Instructions
+                            </InstructorsLink>{" "}
+                            for editing equations in figures.
+                            <InstructorsContent></InstructorsContent>
+                        </Column2>
+                    </InstructorsRow2>
+                </InstructorsWrapper>
+            </InstructorsContainer>
+        </>
+    );
+}

src/components/Media/MediaElements.jsx

@@ -1,15 +1,14 @@
 import styled from "styled-components";
 
-
 export const MediaContainer = styled.div`
     color: #fff;
     /* background: #f9f9f9; */
-    background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
+    background: ${({ lightBg }) => (lightBg ? "#f9f9f9" : "#010606")};
 
     @media screen and (max-width: 768px) {
         padding: 100px 0;
     }
-`
+`;
 
 export const MediaWrapper = styled.div`
     display: grid;
@@ -20,7 +19,7 @@ export const MediaWrapper = styled.div`
     margin-left: auto;
     padding: 0 24px;
     justify-content: center;
-`
+`;
 
 export const MediaRow = styled.div`
     display: grid;
@@ -29,27 +28,28 @@ export const MediaRow = styled.div`
     grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
 
     @media screen and (max-width: 768px) {
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
     }
-`
+`;
 
 export const Column1 = styled.div`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col1;
-`
+`;
 
 export const Column2 = styled.div`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col2;
-`
+`;
 
 export const TextWrapper = styled.div`
     max-width: 540px;
     padding-top: 0;
     padding-bottom: 0;
-`
+`;
 
 export const TopLine = styled.p`
     color: #57c6d1;
@@ -59,41 +59,37 @@ export const TopLine = styled.p`
     letter-spacing: 1.4px;
     text-transform: uppercase;
     margin-bottom: 16px;
-`
+`;
 
 export const Heading = styled.h1`
-
     margin-bottom: 24px;
     font-size: 48px;
     line-height: 1.1;
     font-weight: 600;
-    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
 
-    @media screen and (max-width: 480px)
+    @media screen and (max-width: 480px) {
-    {
         font-size: 32px;
     }
-`
+`;
-
 
 export const Subtitle = styled.p`
     max-width: 440px;
     margin-bottom: 35px;
     font-size: 18px;
     line-height: 24px;
-    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
+    color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
-
+`;
-`
 
 export const BtnWrap = styled.div`
     display: flex;
     justify-content: flex-start;
-`
+`;
 
 export const ImgWrap = styled.div`
     max-width: 555px;
     height: 100%;
-`
+`;
 
 export const Img = styled.img`
     width: 100%;
@@ -103,7 +99,6 @@ export const Img = styled.img`
     padding-right: 0;
 `;
 
-
 export const MediaTextBlock = styled.div`
     @media screen and (max-width: 768px) {
         font-size: 24px;
@@ -112,7 +107,7 @@ export const MediaTextBlock = styled.div`
     @media screen and (max-width: 480px) {
         font-size: 18px;
     }
-`
+`;
 
 export const MediaContent = styled.div`
     z-index: 3;
@@ -125,11 +120,11 @@ export const MediaContent = styled.div`
     flex-direction: column;
     align-items: left;
     list-style-position: inside;
+
     @media screen and (max-width: 768px) {
         font-size: 14px;
     }
-
+`;
-`
 
 export const MediaRow2 = styled.div`
     display: grid;
@@ -138,21 +133,20 @@ export const MediaRow2 = styled.div`
     grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
 
     @media screen and (max-width: 768px) {
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
     }
-`
+`;
 
 export const VideoFrame = styled.div`
     width: 560px;
     height: 315px;
+
     @media screen and (max-width: 1050px) {
         width: 280px;
         height: 157px;
     }
-
+`;
-
-`
-
 
 export const MediaLink = styled.a`
     text-decoration: none;
@@ -168,16 +162,18 @@ export const MediaLink = styled.a`
         left: 0;
         width: 100%;
         height: 2px;
-        background-color: #57c6d1;;
+        background-color: #57c6d1;
-        content: '';
+        content: "";
-        opacity: .3;
+        opacity: 0.3;
         -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
+        transition-property:
-        transition-duration: .3s;
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
     }
 
     &:hover:before {
         opacity: 1;
         -webkit-transform: scaleX(1.05);
     }
-`
+`;

src/components/Media/index.js

@@ -1,90 +0,0 @@
-import React from 'react'
-import { ImgWrap, Img, MediaLink, MediaContainer, MediaContent, MediaWrapper, VideoFrame, MediaRow, MediaRow2, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './MediaElements'
-
-// export const homeObjOne = {
-//     id: 'about',
-//     lightBg: false,
-//     lightText: true,
-//     lightTextDesc: true,
-//     topLine: 'Premium Bank',
-//     headline: 'Unlimited transactions with zero fees',
-//     description:
-//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
-//     buttonLabel: 'Get Started',
-//     imgStart: false,
-//     img: require('../../images/svg-1.svg').default,
-//     alt: 'Car',
-//     dark: true,
-//     primary: true,
-//     darkText: false
-//   };
-
-import img from '../../images/media.svg'
-
-
-
-const MediaSection = () => {
-    return (
-        <>
-            <MediaContainer lightBg={false} id='Media'>
-                <MediaWrapper>
-                    <MediaRow imgStart={true}>
-                        <Column1>
-                            <TextWrapper>
-                                <TopLine>Media</TopLine>
-                                <Heading lightText={true}> Reviews, videos, podcasts, interviews</Heading>
-                                <Subtitle darkText={false}>Various resources connected to the book</Subtitle>                            
-                            </TextWrapper>
-                        </Column1>
-                        <Column2>
-                            <ImgWrap>
-                                <Img src={img} alt='Car'/>
-                            </ImgWrap>
-                        </Column2>
-                    </MediaRow>
-                    <MediaRow>
-                        <Column1>
-                            Machine learning street talk podcast
-                            <VideoFrame>
-                                <iframe width="100%" height="100%" 
-                                    src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&amp;controls=0" 
-                                    title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
-                                </iframe>
-                            </VideoFrame>
-                        </Column1>
-                        <Column2>
-                            Deeper insights podcast 
-                            <VideoFrame>
-                                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-                            </VideoFrame>
-                        </Column2>
-                    </MediaRow>
-                    <MediaRow2>
-                        <Column1>
-                            <TopLine>Reviews</TopLine>
-                            <MediaContent>
-                                <ul>
-                                    <li> Amazon <MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">reviews</MediaLink></li>          
-                                    <li>Goodreads <MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">reviews </MediaLink></li>
-                                    <li>Book <MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">review</MediaLink> by Vishal V.</li>
-                                </ul>
-                            </MediaContent>
-                        </Column1>
-                        <Column2>
-                            <TopLine>Interviews</TopLine>
-                            <MediaContent>
-                                <ul>
-                                    <li>Borealis AI <MediaLink href="https://www.borealisai.com/news/understanding-deep-learning/">interview</MediaLink></li>
-                                    <li>Shepherd ML book <MediaLink href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">recommendations</MediaLink></li>
-                                </ul>
-                            </MediaContent>
-                        </Column2>
-                    </MediaRow2>
-
-                </MediaWrapper>
-            </MediaContainer>
-        </>
-    )
-}
-
-export default MediaSection

src/components/Media/index.jsx

@@ -0,0 +1,164 @@
+import {
+    Column1,
+    Column2,
+    Heading,
+    Img,
+    ImgWrap,
+    MediaContainer,
+    MediaContent,
+    MediaLink,
+    MediaRow,
+    MediaRow2,
+    MediaWrapper,
+    Subtitle,
+    TextWrapper,
+    TopLine,
+    VideoFrame,
+} from "@/components/Media/MediaElements";
+import img from "@/images/media.svg";
+
+const interviews = [
+    {
+        href: "https://www.borealisai.com/news/understanding-deep-learning/",
+        text: "Borealis AI",
+        linkText: "interview",
+    },
+    {
+        href: "https://shepherd.com/best-books/machine-learning-and-deep-neural-networks",
+        text: "Shepherd ML book",
+        linkText: "recommendations",
+    },
+];
+
+export default function MediaSection() {
+    return (
+        <>
+            <MediaContainer lightBg={false} id="Media">
+                <MediaWrapper>
+                    <MediaRow imgStart={true}>
+                        <Column1>
+                            <TextWrapper>
+                                <TopLine>Media</TopLine>
+                                <Heading lightText={true}>
+                                    Reviews, videos, podcasts, interviews
+                                </Heading>
+                                <Subtitle darkText={false}>
+                                    Various resources connected to the book
+                                </Subtitle>
+                            </TextWrapper>
+                        </Column1>
+                        <Column2>
+                            <ImgWrap>
+                                <Img src={img} alt="Media" />
+                            </ImgWrap>
+                        </Column2>
+                    </MediaRow>
+                    <MediaRow>
+                        <Column1>
+                            Machine learning street talk podcast
+                            <VideoFrame>
+                                <iframe
+                                    width="100%"
+                                    height="100%"
+                                    src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&amp;controls=0"
+                                    title="YouTube video player"
+                                    frameBorder="2"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                    allowfullscreen
+                                ></iframe>
+                            </VideoFrame>
+                        </Column1>
+                        <Column2>
+                            Deeper insights podcast
+                            <VideoFrame>
+                                <iframe
+                                    width="100%"
+                                    height="100%"
+                                    src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0"
+                                    title="YouTube video player"
+                                    frameBorder="2"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                    allowfullscreen
+                                ></iframe>
+                            </VideoFrame>
+                        </Column2>
+                    </MediaRow>
+                    <MediaRow2>
+                        <Column1>
+                            <TopLine>Reviews</TopLine>
+                            <MediaContent>
+                                {/* TODO: add dynamic rendering for reviews */}
+                                <ul>
+                                    <li>
+                                        Nature Machine Intelligence{" "}
+                                        <MediaLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">
+                                            {" "}
+                                            review{" "}
+                                        </MediaLink>{" "}
+                                        by{" "}
+                                        <MediaLink href="https://wang-axis.github.io/">
+                                            Ge Wang
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Amazon{" "}
+                                        <MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
+                                            reviews
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Goodreads{" "}
+                                        <MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
+                                            reviews{" "}
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Book{" "}
+                                        <MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
+                                            review
+                                        </MediaLink>{" "}
+                                        by Vishal V.
+                                    </li>
+                                    <li>
+                                        Amazon{" "}
+                                        <MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
+                                            reviews
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Goodreads{" "}
+                                        <MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
+                                            reviews{" "}
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Book{" "}
+                                        <MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
+                                            review
+                                        </MediaLink>{" "}
+                                        by Vishal V.
+                                    </li>
+                                </ul>
+                            </MediaContent>
+                        </Column1>
+                        <Column2>
+                            <TopLine>Interviews</TopLine>
+                            <MediaContent>
+                                <ul>
+                                    {interviews.map((interview, index) => (
+                                        <li key={index}>
+                                            {interview.text}{" "}
+                                            <MediaLink href={interview.href}>
+                                                {interview.linkText}
+                                            </MediaLink>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </MediaContent>
+                        </Column2>
+                    </MediaRow2>
+                </MediaWrapper>
+            </MediaContainer>
+        </>
+    );
+}

src/components/More/MoreElements.jsx

@@ -1,27 +1,26 @@
 import styled from "styled-components";
 
-
 export const MoreContainer = styled.div`
     color: #fff;
     /* background: #f9f9f9; */
-    background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
+    background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};
 
     @media screen and (max-width: 768px) {
         padding: 100px 0;
     }
-`
+`;
 
 export const MoreWrapper = styled.div`
     display: grid;
     z-index: 1;
-    // height: 1050px ;  
+    /* height: 1050px; */
     width: 100%;
     max-width: 1100px;
     margin-right: auto;
     margin-left: auto;
     padding: 0 24px;
     justify-content: center;
-`
+`;
 
 export const MoreRow = styled.div`
     display: grid;
@@ -30,9 +29,10 @@ export const MoreRow = styled.div`
     grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
 
     @media screen and (max-width: 768px) {
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
     }
-`
+`;
 
 export const MoreRow2 = styled.div`
     display: grid;
@@ -41,28 +41,28 @@ export const MoreRow2 = styled.div`
     grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
 
     @media screen and (max-width: 768px) {
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
     }
-`
+`;
-
 
 export const Column1 = styled.div`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col1;
-`
+`;
 
 export const Column2 = styled.div`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col2;
-`
+`;
 
 export const TextWrapper = styled.div`
     max-width: 540px;
     padding-top: 0;
     padding-bottom: 0;
-`
+`;
 
 export const TopLine = styled.p`
     color: #773c23;
@@ -73,41 +73,37 @@ export const TopLine = styled.p`
     text-transform: uppercase;
     margin-bottom: 12px;
     margin-top: 16px;
-`
+`;
 
 export const Heading = styled.h1`
-
     margin-bottom: 24px;
     font-size: 48px;
     line-height: 1.1;
     font-weight: 600;
-    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
 
-    @media screen and (max-width: 480px)
+    @media screen and (max-width: 480px) {
-    {
         font-size: 32px;
     }
-`
+`;
-
 
 export const Subtitle = styled.p`
     max-width: 440px;
     margin-bottom: 35px;
     font-size: 18px;
     line-height: 24px;
-    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
+    color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
-
+`;
-`
 
 export const BtnWrap = styled.div`
     display: flex;
     justify-content: flex-start;
-`
+`;
 
 export const ImgWrap = styled.div`
     max-width: 555px;
     height: 100%;
-`
+`;
 
 export const Img = styled.img`
     width: 100%;
@@ -117,7 +113,6 @@ export const Img = styled.img`
     padding-right: 0;
 `;
 
-
 export const MoreContent = styled.div`
     z-index: 3;
     width: 100%;
@@ -129,34 +124,33 @@ export const MoreContent = styled.div`
     flex-direction: column;
     align-items: left;
     list-style-position: inside;
-`
+`;
 
 export const MoreOuterList = styled.ul`
-    // list-style:none;
+    /* list-style:none; */
     list-style-position: inside;
     margin: 0;
+
     @media screen and (max-width: 768px) {
         font-size: 14px;
     }
-
+`;
-`
 
 export const MoreInnerList = styled.ul`
     list-style-position: inside;
+
     @media screen and (max-width: 768px) {
         font-size: 12px;
     }
-
+`;
-`
 
 export const MoreInnerP = styled.p`
     padding-left: 18px;
     padding-bottom: 10px;
     padding-top: 3px;
     font-size: 14px;
-    color: #fff
+    color: #fff;
-`
+`;
-
 
 export const MoreLink = styled.a`
     text-decoration: none;
@@ -173,15 +167,17 @@ export const MoreLink = styled.a`
         width: 100%;
         height: 2px;
         background-color: #555;
-        content: '';
+        content: "";
-        opacity: .3;
+        opacity: 0.3;
         -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
+        transition-property:
-        transition-duration: .3s;
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
     }
 
     &:hover:before {
         opacity: 1;
         -webkit-transform: scaleX(1.05);
     }
-`
+`;

src/components/More/index.js

@@ -1,750 +0,0 @@
-import React from 'react'
-import { ImgWrap, Img, MoreContainer, MoreLink, MoreRow2, MoreWrapper, MoreRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle, MoreOuterList, MoreInnerList, MoreInnerP} from './MoreElements'
-import img from '../../images/more.svg'
-
-
-const MoreSection = () => {
-    return (
-        <>
-            <MoreContainer lightBg={true} id='More'>
-                <MoreWrapper> 
-                    <MoreRow imgStart={false}>
-                        <Column1>
-                            <TextWrapper>
-                                <TopLine>More</TopLine>
-                                <Heading lightText={false}>Further reading</Heading>
-                                <Subtitle darkText={true}>Other articles, blogs, and books that I have written. Most in a similar style and using the same notation as Understanding Deep Learning. </Subtitle>
-                            </TextWrapper>
-                        </Column1>
-                        <Column2>
-                            <ImgWrap>
-                                <Img src={img} alt='Car'/>
-                            </ImgWrap>
-                        </Column2>
-                    </MoreRow>
-                    <MoreRow2>
-                     
-                        <Column1>
-                            <TopLine>Book</TopLine>
-                                <MoreOuterList>
-                                    <li>
-                                        <MoreLink href="http://computervisionmodels.com" target="_blank" rel="noreferrer">Computer vision: models, learning, and inference</MoreLink>
-                                        <MoreInnerP>
-                                            <MoreInnerList>
-                                                <li> 2012 book published with CUP </li>
-                                                <li> Focused on probabilistic models </li>
-                                                <li> Pre-"deep learning" </li>
-                                                <li> Lots of ML content</li>
-                                                <li> Individual chapters available below</li>
-                                            </MoreInnerList> 
-                                        </MoreInnerP>
-                                    </li>
-                                </MoreOuterList>
-
-                            <TopLine>Transformers & LLMs</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/" target="_blank"  rel="noreferrer">Intro to LLMs</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> What is an LLM?</li>
-                                            <li> Pretraining</li>
-                                            <li> Instruction fine-tuning</li>
-                                            <li> Reinforcement learning from human feedback</li>
-                                            <li> Notable LLMs</li>
-                                            <li> LLMs without training from scratch</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/" target="_blank"  rel="noreferrer">Transformers I</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Dot-Product self-attention </li>
-                                            <li> Scaled dot-product self-attention </li>
-                                            <li> Position encoding</li>
-                                            <li> Multiple heads </li>
-                                            <li> Transformer block </li>
-                                            <li> Encoders </li>
-                                            <li> Decoders </li>
-                                            <li> Encoder-Decoders </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/" target="_blank"  rel="noreferrer">Transformers II</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Sinusoidal position embeddings </li>
-                                            <li> Learned position embeddings </li>
-                                            <li> Relatives vs. absolute position embeddings</li>
-                                            <li> Extending transformers to longer sequences </li>
-                                            <li> Reducing attention matrix size </li>
-                                            <li> Making attention matrix sparse </li>
-                                            <li> Kernelizing attention computation </li>
-                                            <li> Attention as an RNN</li>
-                                            <li> Attention as a hypernetwork </li>
-                                            <li> Attention as a routing network </li>
-                                            <li> Attention and graphs </li>
-                                            <li> Attention and convolutions </li>
-                                            <li> Attention and gating </li>
-                                            <li> Attention and memory retrieval </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/" target="_blank"  rel="noreferrer">Transformers III</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Tricks for training transformers </li>
-                                            <li> Why are these tricks required? </li>
-                                            <li> Removing layer normalization</li>
-                                            <li> Balancing residual dependencies </li>
-                                            <li> Reducing optimizer variance </li>
-                                            <li> How to train deeper transformers on small datasets </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/" target="_blank"  rel="noreferrer">Training and fine-tuning LLMs</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Large language models </li>
-                                            <li> Pretraining </li>
-                                            <li> Supervised fine tuning</li>
-                                            <li> Reinforcement learning from human feedback </li>
-                                            <li> Direct preference optimization</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/" target="_blank"  rel="noreferrer">Speeding up inference in LLMs</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Problems with transformers</li>
-                                            <li> Attention-free transformers </li>
-                                            <li> Complexity</li>
-                                            <li> RWKV </li>
-                                            <li> Linear transformers and performers</li>
-                                            <li> Retentive network</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-
-                            <TopLine>Math for machine learning</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing" target="_blank"  rel="noreferrer">Linear algebra</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Vectors and matrices </li>
-                                            <li> Determinant and trace </li>
-                                            <li> Orthogonal matrices </li>
-                                            <li> Null space </li>
-                                            <li> Linear transformations </li>
-                                            <li> Singular value decomposition </li>
-                                            <li> Least squares problems </li>
-                                            <li> Principal direction problems </li>
-                                            <li> Inversion of block matrices</li>
-                                            <li> Schur complement identity</li>
-                                            <li> Sherman-Morrison-Woodbury</li>
-                                            <li> Matrix determinant lemma</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing" target="_blank"  rel="noreferrer">Introduction to probability</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Random variables </li>
-                                            <li> Joint probability </li>
-                                            <li> Marginal probability </li>
-                                            <li> Conditional probability </li>
-                                            <li> Bayes' rule </li>
-                                            <li> Independence </li>
-                                            <li> Expectation </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing" target="_blank"  rel="noreferrer">Probability distributions</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Bernouilli distribution </li>
-                                            <li> Beta distribution</li>
-                                            <li> Categorical distribution </li>
-                                            <li> Dirichlet distribution</li>
-                                            <li> Univariate normal distribution </li>
-                                            <li> Normal inverse-scaled gamma distribution </li>
-                                            <li> Multivariate normal distribution </li>
-                                            <li> Normal inverse Wishart distribution </li>
-                                            <li> Conjugacy </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing" target="_blank"  rel="noreferrer">Fitting probability distributions</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Maximum likelihood </li>
-                                            <li> Maximum a posteriori </li>
-                                            <li> Bayesian approach </li>
-                                            <li> Example: fitting normal </li>
-                                            <li> Example: fitting categorical </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing" target="_blank"  rel="noreferrer">The normal distribution</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Types of covariance matrix </li>
-                                            <li> Decomposition of covariance </li>
-                                            <li> Linear transformations </li>
-                                            <li> Marginal distributions </li>
-                                            <li> Conditional distributions </li>
-                                            <li> Product of two normals </li>
-                                            <li> Change of variable formula </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-
-                            <TopLine>Optimization</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing" target="_blank"  rel="noreferrer">Gradient-based optimization</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Convexity </li>
-                                            <li> Steepest descent </li>
-                                            <li> Newton's method </li>
-                                            <li> Gauss-Newton method </li>
-                                            <li> Line search </li>
-                                            <li> Reparameterization </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/" target="_blank"  rel="noreferrer">Bayesian optimization</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Gaussian processes </li>
-                                            <li> Acquisition functions </li>
-                                            <li> Incorporating noise</li>
-                                            <li> Kernel choice </li>
-                                            <li> Learning GP parameters </li>
-                                            <li> Tips, tricks, and limitations  </li>
-                                            <li> Beta-Bernoulli bandit  </li>
-                                            <li> Random forests for BO </li>
-                                            <li> Tree-Parzen estimators </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/" target="_blank"  rel="noreferrer">SAT Solvers I</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Boolean logic and satisfiability </li>
-                                            <li> Conjunctive normal form </li>
-                                            <li> The Tseitin transformation </li>
-                                            <li> SAT and related problems </li>
-                                            <li> SAT constructions </li>
-                                            <li> Graph coloring and scheduling </li>
-                                            <li> Fitting binary neural networks</li>
-                                            <li> Fitting decision trees</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/" target="_blank"  rel="noreferrer">SAT Solvers II</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Conditioning </li>
-                                            <li> Resolution </li>
-                                            <li> Solving 2-SAT by unit propagation </li>
-                                            <li> Directional resolution </li>
-                                            <li> SAT as binary search </li>
-                                            <li> DPLL </li>
-                                            <li> Conflict driven clause learning</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank"  rel="noreferrer">SAT Solvers III</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Satisfiability vs. problem size </li>
-                                            <li> Factor graph representation </li>
-                                            <li> Max product / sum product for SAT </li>
-                                            <li> Survey propagation </li>
-                                            <li> SAT with non-binary variables </li>
-                                            <li> SMT solvers </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank"  rel="noreferrer">SAT Solvers III</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Satisfiability vs. problem size </li>
-                                            <li> Factor graph representation </li>
-                                            <li> Max product / sum product for SAT </li>
-                                            <li> Survey propagation </li>
-                                            <li> SAT with non-binary variables </li>
-                                            <li> SMT solvers </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-
-                            <TopLine>Computer vision</TopLine>
-                                <MoreOuterList>
-                                    <li>
-                                        <MoreLink href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing" target="_blank" rel="noreferrer">Image Processing</MoreLink>
-                                        <MoreInnerP>
-                                            <MoreInnerList>
-                                                <li> Whitening </li>
-                                                <li> Histogram equalization </li>
-                                                <li> Filtering </li>
-                                                <li> Edges and corners </li>
-                                                <li> Dimensionality reduction </li>
-                                            </MoreInnerList> 
-                                        </MoreInnerP>
-                                    </li>
-                                    <li>
-                                        <MoreLink href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing" target="_blank" rel="noreferrer">Pinhole camera</MoreLink>
-                                        <MoreInnerP>
-                                            <MoreInnerList> 
-                                                <li> Pinhole camera model </li>
-                                                <li> Radial distortion </li>
-                                                <li> Homogeneous coordinates </li>
-                                                <li> Learning extrinsic parameters </li>
-                                                <li> Learning intrinsic parameters </li>
-                                                <li> Inferring three-dimensional world points </li>
-                                            </MoreInnerList>
-                                        </MoreInnerP>
-                                    </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing" target="_blank" rel="noreferrer">Geometric transformations</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Euclidean, similarity, affine, projective transformations </li>
-                                            <li> Fitting transformation models </li>
-                                            <li> Inference in transformation models </li>
-                                            <li> Three geometric problems for planes </li>
-                                            <li> Transformations between images </li>
-                                            <li> Robust learning of transformations </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing" target="_blank" rel="noreferrer">Multiple cameras</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Two view geometry </li>
-                                            <li> The essential matrix </li>
-                                            <li> The fundamental matrix </li>
-                                            <li> Two-view reconstruction pipeline </li>
-                                            <li> Rectification </li>
-                                            <li> Multiview reconstruction </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>  
-
-                            <TopLine>Reinforcement learning</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://arxiv.org/abs/2307.05979" target="_blank"  rel="noreferrer">Transformers in RL</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Challenges in RL</li>
-                                            <li> Advantages of transformers for RL</li>
-                                            <li> Representation learning</li>
-                                            <li> Transition function learning</li>
-                                            <li> Reward learning </li>
-                                            <li> Policy learning </li>
-                                            <li> Training strategy </li>
-                                            <li> Interpretability </li>
-                                            <li> Applications </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-                        </Column1>
-
-                        {/* ########################################### */}
-
-                        <Column2>
-                            <TopLine>AI Theory</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/gradient-flow/" target="_blank"  rel="noreferrer">Gradient flow</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Gradient flow </li>
-                                            <li> Evolution of residual </li>
-                                            <li> Evolution of parameters </li>
-                                            <li> Evolution of model predictions </li>
-                                            <li> Evolution of prediction covariance </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                <MoreLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/" target="_blank"  rel="noreferrer">Neural tangent kernel</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Infinite width neural networks </li>
-                                            <li> Training dynamics </li>
-                                            <li> Empirical NTK for shallow network</li>
-                                            <li> Analytical NTK for shallow network </li>
-                                            <li> Empirical NTK for ddep network </li>
-                                            <li> Analtical NTK for deep network</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-
-                            <TopLine>Temporal models</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing" target="_blank"  rel="noreferrer">Temporal models</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Kalman filter </li>
-                                            <li> Smoothing </li>
-                                            <li> Extended Kalman filter </li>
-                                            <li> Unscented Kalman filter </li>
-                                            <li> Particle filtering </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-
-                            <TopLine> Unsupervised learning</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing" target="_blank"  rel="noreferrer">Modeling complex data densities</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Hidden variables </li>
-                                            <li> Expectation maximization </li>
-                                            <li> Mixture of Gaussians </li>
-                                            <li> The t-distribution </li>
-                                            <li> Factor analysis </li>
-                                            <li> The EM algorithm in detail </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/" target="_blank"  rel="noreferrer">Variational autoencoders</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Non-linear latent variable models </li>
-                                            <li> Evidence lower bound (ELBO) </li>
-                                            <li> ELBO properties </li>
-                                            <li> Variational approximation </li>
-                                            <li> The variational autoencoder </li>
-                                            <li> Reparameterization trick </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://arxiv.org/abs/1908.09257" target="_blank"  rel="noreferrer">Normalizing flows: introduction and review</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                        <li> Normalizing flows </li>
-                                        <li> Elementwise and linear flows </li>
-                                        <li> Planar and radial flows </li>
-                                        <li> Coupling and auto-regressive flows </li>
-                                        <li> Coupling functions </li>
-                                        <li> Residual flows </li>
-                                        <li> Infinitesimal (continuous) flows </li>
-                                        <li> Datasets and performance </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-                            <TopLine>Graphical Models</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing" target="_blank"  rel="noreferrer">Graphical models</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Conditional independence </li>
-                                            <li> Directed graphical models </li>
-                                            <li> Undirected graphical models </li>
-                                            <li> Inference in graphical models </li>
-                                            <li> Sampling in graphical models </li>
-                                            <li> Learning in graphical models </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing" target="_blank"  rel="noreferrer">Models for chains and trees</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Hidden Markov models </li>
-                                            <li> Viterbi algorithm </li>
-                                            <li> Forward-backward algorithm </li>
-                                            <li> Belief propagation </li>
-                                            <li> Sum product algorithm </li>
-                                            <li> Extension to trees </li>
-                                            <li> Graphs with loops </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing" target="_blank"  rel="noreferrer">Models for grids</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Markov random fields </li>
-                                            <li> MAP inference in binary pairwise MRFs </li>
-                                            <li> Graph cuts </li>
-                                            <li> Multi-label pairwise MRFs </li>
-                                            <li> Alpha-expansion algorithm </li>
-                                            <li> Conditional random fields </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-
-                            <TopLine>Machine learning</TopLine>
-                            <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing" target="_blank"  rel="noreferrer">Learning and inference</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Discriminative models </li>
-                                            <li> Generative models </li>
-                                            <li> Example: regression </li>
-                                            <li> Example: classification </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing" target="_blank"  rel="noreferrer">Regression models</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Linear regression </li>
-                                            <li> Bayesian linear regression </li>
-                                            <li> Non-linear regression </li>
-                                            <li> Bayesian non-linear regression </li>
-                                            <li> The kernel trick </li>
-                                            <li> Gaussian process regression </li>
-                                            <li> Sparse linear regression </li>
-                                            <li> Relevance vector regression </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing" target="_blank"  rel="noreferrer">Classification models</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Logistic regression </li>
-                                            <li> Bayesian logistic regression </li>
-                                            <li> Non-linear logistic regression </li>
-                                            <li> Gaussian process classification </li>
-                                            <li> Relevance vector classification </li>
-                                            <li> Incremental fitting: boosting and trees </li>
-                                            <li> Multi-class logistic regression </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-2-few-shot-learning-and-meta-learning-i/" target="_blank"  rel="noreferrer">Few-shot learning and meta-learning I</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Meta-learning framework </li>
-                                            <li> Approaches to meta-learning </li>
-                                            <li> Matching networks </li>
-                                            <li> Prototypical networks </li>
-                                            <li> Relation networks </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-3-few-shot-learning-and-meta-learning-ii/" target="_blank"  rel="noreferrer">Few-shot learning and meta-learning II</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> MAML & Reptile </li>
-                                            <li> LSTM based meta-learning </li>
-                                            <li> Reinforcement learning based approaches</li>
-                                            <li> Memory augmented neural networks </li>
-                                            <li> SNAIL </li>
-                                            <li> Generative models </li>
-                                            <li> Data augmentation approaches </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                           </MoreOuterList>
-
-                           <TopLine>Natural language processing</TopLine>
-                           <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/" target="_blank"  rel="noreferrer">Neural natural language generation I</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Encoder-decoder architecture </li>
-                                            <li> Maximum-likelihood training </li>
-                                            <li> Greedy search </li>
-                                            <li> Beam search </li>
-                                            <li> Diverse beam search </li>
-                                            <li> Top-k sampling </li>
-                                            <li> Nucleus sampling </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-7-neural-natural-language-generation-sequence-level-training/" target="_blank"  rel="noreferrer">Neural natural language generation II</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Fine-tuning with reinforcement learning </li>
-                                            <li> Training from scratch with RL </li>
-                                            <li> RL vs. structured prediction </li>
-                                            <li> Minimum risk training </li>
-                                            <li> Scheduled sampling </li>
-                                            <li> Beam search optimization </li>
-                                            <li> SeaRNN </li>
-                                            <li> Reward-augmented maximum likelihood </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/" target="_blank"  rel="noreferrer">Parsing I</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Parse trees </li>
-                                            <li> Context-free grammars </li>
-                                            <li> Chomsky normal form </li>
-                                            <li> CYK recognition algorithm </li>
-                                            <li> Worked example </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/" target="_blank"  rel="noreferrer">Parsing II</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Weighted context-free grammars </li>
-                                            <li> Semirings </li>
-                                            <li> Inside algorithm </li>
-                                            <li> Inside weights </li>
-                                            <li> Weighted parsing </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/" target="_blank"  rel="noreferrer">Parsing III</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Probabilistic context-free grammars </li>
-                                            <li> Parameter estimation (supervised) </li>
-                                            <li> Parameter estimation (unsupervised) </li>
-                                            <li> Viterbi training </li>
-                                            <li> Expectation maximization </li>
-                                            <li> Outside from inside </li>
-                                            <li> Interpretation of outside weights </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/understanding-xlnet/" target="_blank"  rel="noreferrer">XLNet</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Language modeling </li>
-                                            <li> XLNet training objective </li>
-                                            <li> Permutations </li>
-                                            <li> Attention mask </li>
-                                            <li> Two stream self-attention </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                            </MoreOuterList>
-
-       
-                           
-                           <TopLine>Responsible AI</TopLine>
-                           <MoreOuterList>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/" target="_blank"  rel="noreferrer">Bias and fairness</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Sources of bias</li>
-                                            <li> Demographic Parity </li>
-                                            <li> Equality of odds</li>
-                                            <li> Equality of opportunity </li>
-                                            <li> Individual fairness</li>
-                                            <li> Bias mitigation</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/" target="_blank"  rel="noreferrer">Explainability I</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Taxonomy of XAI approaches</li>
-                                            <li> Local post-hoc explanations </li>
-                                            <li> Individual conditional explanation</li>
-                                            <li> Counterfactual explanations</li>
-                                            <li> LIME & Anchors</li>
-                                            <li> Shapley additive explanations & SHAP</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/" target="_blank"  rel="noreferrer">Explainability II</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Global feature importance</li>
-                                            <li> Partial dependence & ICE plots</li>
-                                            <li> Accumulated local effects</li>
-                                            <li> Aggregate SHAP values</li>
-                                            <li> Prototypes & criticisms</li>
-                                            <li> Surrogate / proxy models</li>
-                                            <li> Inherently interpretable models</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/" target="_blank"  rel="noreferrer">Differential privacy I</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Early approaches to privacy </li>
-                                            <li> Fundamental law of information recovery </li>
-                                            <li> Differential privacy</li>
-                                            <li> Properties of differential privacy </li>
-                                            <li> The Laplace mechanism</li>
-                                            <li> Examples</li>
-                                            <li> Other mechanisms and definitions</li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/" target="_blank"  rel="noreferrer">Differential privacy II</MoreLink>
-                                    <MoreInnerP>
-                                        <MoreInnerList> 
-                                            <li> Differential privacy and matchine learning</li>
-                                            <li> DPSGD</li>
-                                            <li> PATE </li>
-                                            <li> Differentially private data generation</li>
-                                            <li> DPGAN</li>
-                                            <li> PateGAN </li>
-                                        </MoreInnerList>
-                                    </MoreInnerP>
-                                </li>
-                           </MoreOuterList>
-                        </Column2>
-                    </MoreRow2>
-                </MoreWrapper>
-            </MoreContainer>
-        </>
-    )
-}
-
-export default MoreSection
-
-

src/components/More/index.jsx

@@ -0,0 +1,933 @@
+import {
+    Column1,
+    Column2,
+    Heading,
+    Img,
+    ImgWrap,
+    MoreContainer,
+    MoreInnerList,
+    MoreInnerP,
+    MoreLink,
+    MoreOuterList,
+    MoreRow,
+    MoreRow2,
+    MoreWrapper,
+    Subtitle,
+    TextWrapper,
+    TopLine,
+} from "@/components/More/MoreElements";
+import img from "@/images/more.svg";
+
+const book = [
+    {
+        text: "Computer vision: models, learning, and inference",
+        link: "http://computervisionmodels.com",
+        details: [
+            "2012 book published with CUP",
+            "Focused on probabilistic models",
+            'Pre-"deep learning"',
+            "Lots of ML content",
+            "Individual chapters available below",
+        ],
+    },
+];
+
+const transformersAndLLMs = [
+    {
+        text: "Intro to LLMs",
+        link: "https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/",
+        details: [
+            "What is an LLM?",
+            "Pretraining",
+            "Instruction fine-tuning",
+            "Reinforcement learning from human feedback",
+            "Notable LLMs",
+            "LLMs without training from scratch",
+        ],
+    },
+    {
+        text: "Transformers I",
+        link: "https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/",
+        details: [
+            "Dot-Product self-attention",
+            "Scaled dot-product self-attention",
+            "Position encoding",
+            "Multiple heads",
+            "Transformer block",
+            "Encoders",
+            "Decoders",
+            "Encoder-Decoders",
+        ],
+    },
+    {
+        text: "Transformers II",
+        link: "https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/",
+        details: [
+            "Sinusoidal position embeddings",
+            "Learned position embeddings",
+            "Relatives vs. absolute position embeddings",
+            "Extending transformers to longer sequences",
+            "Reducing attention matrix size",
+            "Making attention matrix sparse",
+            "Kernelizing attention computation",
+            "Attention as an RNN",
+            "Attention as a hypernetwork",
+            "Attention as a routing network",
+            "Attention and graphs",
+            "Attention and convolutions",
+            "Attention and gating",
+            "Attention and memory retrieval",
+        ],
+    },
+    {
+        text: "Transformers III",
+        link: "https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/",
+        details: [
+            "Tricks for training transformers",
+            "Why are these tricks required?",
+            "Removing layer normalization",
+            "Balancing residual dependencies",
+            "Reducing optimizer variance",
+            "How to train deeper transformers on small datasets",
+        ],
+    },
+    {
+        text: "Training and fine-tuning LLMs",
+        link: "https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/",
+        details: [
+            "Large language models",
+            "Pretraining",
+            "Supervised fine tuning",
+            "Reinforcement learning from human feedback",
+            "Direct preference optimization",
+        ],
+    },
+    {
+        text: "Speeding up inference in LLMs",
+        link: "https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/",
+        details: [
+            "Problems with transformers",
+            "Attention-free transformers",
+            "Complexity",
+            "RWKV",
+            "Linear transformers and performers",
+            "Retentive network",
+        ],
+    },
+];
+
+const mathForMachineLearning = [
+    {
+        text: "Linear algebra",
+        link: "https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing",
+        details: [
+            "Vectors and matrices",
+            "Determinant and trace",
+            "Orthogonal matrices",
+            "Null space",
+            "Linear transformations",
+            "Singular value decomposition",
+            "Least squares problems",
+            "Principal direction problems",
+            "Inversion of block matrices",
+            "Schur complement identity",
+            "Sherman-Morrison-Woodbury",
+            "Matrix determinant lemma",
+        ],
+    },
+    {
+        text: "Introduction to probability",
+        link: "https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing",
+        details: [
+            "Random variables",
+            "Joint probability",
+            "Marginal probability",
+            "Conditional probability",
+            "Bayes' rule",
+            "Independence",
+            "Expectation",
+        ],
+    },
+    {
+        text: "Probability distributions",
+        link: "https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing",
+        details: [
+            "Bernouilli distribution",
+            "Beta distribution",
+            "Categorical distribution",
+            "Dirichlet distribution",
+            "Univariate normal distribution",
+            "Normal inverse-scaled gamma distribution",
+            "Multivariate normal distribution",
+            "Normal inverse Wishart distribution",
+            "Conjugacy",
+        ],
+    },
+    {
+        text: "Fitting probability distributions",
+        link: "https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing",
+        details: [
+            "Maximum likelihood",
+            "Maximum a posteriori",
+            "Bayesian approach",
+            "Example: fitting normal",
+            "Example: fitting categorical",
+        ],
+    },
+    {
+        text: "The normal distribution",
+        link: "https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing",
+        details: [
+            "Types of covariance matrix",
+            "Decomposition of covariance",
+            "Linear transformations",
+            "Marginal distributions",
+            "Conditional distributions",
+            "Product of two normals",
+            "Change of variable formula",
+        ],
+    },
+];
+
+const optimization = [
+    {
+        text: "Gradient-based optimization",
+        link: "https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing",
+        details: [
+            "Convexity",
+            "Steepest descent",
+            "Newton's method",
+            "Gauss-Newton method",
+            "Line search",
+            "Reparameterization",
+        ],
+    },
+    {
+        text: "Bayesian optimization",
+        link: "https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/",
+        details: [
+            "Gaussian processes",
+            "Acquisition functions",
+            "Incorporating noise",
+            "Kernel choice",
+            "Learning GP parameters",
+            "Tips, tricks, and limitations",
+            "Beta-Bernoulli bandit",
+            "Random forests for BO",
+            "Tree-Parzen estimators",
+        ],
+    },
+    {
+        text: "SAT Solvers I",
+        link: "https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/",
+        details: [
+            "Boolean logic and satisfiability",
+            "Conjunctive normal form",
+            "The Tseitin transformation",
+            "SAT and related problems",
+            "SAT constructions",
+            "Graph coloring and scheduling",
+            "Fitting binary neural networks",
+            "Fitting decision trees",
+        ],
+    },
+    {
+        text: "SAT Solvers II",
+        link: "https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/",
+        details: [
+            "Conditioning",
+            "Resolution",
+            "Solving 2-SAT by unit propagation",
+            "Directional resolution",
+            "SAT as binary search",
+            "DPLL",
+            "Conflict driven clause learning",
+        ],
+    },
+    {
+        text: "SAT Solvers III",
+        link: "https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/",
+        details: [
+            "Satisfiability vs. problem size",
+            "Factor graph representation",
+            "Max product / sum product for SAT",
+            "Survey propagation",
+            "SAT with non-binary variables",
+            "SMT solvers",
+        ],
+    },
+];
+
+const temporalModels = [
+    {
+        text: "Temporal models",
+        link: "https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing",
+        details: [
+            "Kalman filter",
+            "Smoothing",
+            "Extended Kalman filter",
+            "Unscented Kalman filter",
+            "Particle filtering",
+        ],
+    },
+];
+
+const computerVision = [
+    {
+        text: "Image Processing",
+        link: "https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing",
+        details: [
+            "Whitening",
+            "Histogram equalization",
+            "Filtering",
+            "Edges and corners",
+            "Dimensionality reduction",
+        ],
+    },
+    {
+        text: "Pinhole camera",
+        link: "https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing",
+        details: [
+            "Pinhole camera model",
+            "Radial distortion",
+            "Homogeneous coordinates",
+            "Learning extrinsic parameters",
+            "Learning intrinsic parameters",
+            "Inferring three-dimensional world points",
+        ],
+    },
+    {
+        text: "Geometric transformations",
+        link: "https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing",
+        details: [
+            "Euclidean, similarity, affine, projective transformations",
+            "Fitting transformation models",
+            "Inference in transformation models",
+            "Three geometric problems for planes",
+            "Transformations between images",
+            "Robust learning of transformations",
+        ],
+    },
+    {
+        text: "Multiple cameras",
+        link: "https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing",
+        details: [
+            "Two view geometry",
+            "The essential matrix",
+            "The fundamental matrix",
+            "Two-view reconstruction pipeline",
+            "Rectification",
+            "Multiview reconstruction",
+        ],
+    },
+];
+
+const reinforcementLearning = [
+    {
+        text: "Transformers in RL",
+        link: "https://arxiv.org/abs/2307.05979",
+        details: [
+            "Challenges in RL",
+            "Advantages of transformers for RL",
+            "Representation learning",
+            "Transition function learning",
+            "Reward learning",
+            "Policy learning",
+            "Training strategy",
+            "Interpretability",
+            "Applications",
+        ],
+    },
+];
+
+const aiTheory = [
+    {
+        text: "Gradient flow",
+        link: "https://www.borealisai.com/research-blogs/gradient-flow/",
+        details: [
+            "Gradient flow",
+            "Evolution of residual",
+            "Evolution of parameters",
+            "Evolution of model predictions",
+            "Evolution of prediction covariance",
+        ],
+    },
+    {
+        text: "Neural tangent kernel",
+        link: "https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/",
+        details: [
+            "Infinite width neural networks",
+            "Training dynamics",
+            "Empirical NTK for shallow network",
+            "Analytical NTK for shallow network",
+            "Empirical NTK for deep network",
+            "Analytical NTK for deep network",
+        ],
+    },
+    {
+        text: "NTK applications",
+        link: "https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/",
+        details: [
+            "Trainability",
+            "Convergence bounds",
+            "Evolution of parameters",
+            "Evolution of predictions",
+            "NTK Gaussian processes",
+            "NTK and generalizability",
+        ],
+    },
+];
+
+const unsupervisedLearning = [
+    {
+        text: "Modeling complex data densities",
+        link: "https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing",
+        details: [
+            "Hidden variables",
+            "Expectation maximization",
+            "Mixture of Gaussians",
+            "The t-distribution",
+            "Factor analysis",
+            "The EM algorithm in detail",
+        ],
+    },
+    {
+        text: "Variational autoencoders",
+        link: "https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/",
+        details: [
+            "Non-linear latent variable models",
+            "Evidence lower bound (ELBO)",
+            "ELBO properties",
+            "Variational approximation",
+            "The variational autoencoder",
+            "Reparameterization trick",
+        ],
+    },
+    {
+        text: "Normalizing flows: introduction and review",
+        link: "https://arxiv.org/abs/1908.09257",
+        details: [
+            "Normalizing flows",
+            "Elementwise and linear flows",
+            "Planar and radial flows",
+            "Coupling and auto-regressive flows",
+            "Coupling functions",
+            "Residual flows",
+            "Infinitesimal (continuous) flows",
+            "Datasets and performance",
+        ],
+    },
+];
+
+const graphicalModels = [
+    {
+        text: "Graphical models",
+        link: "https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing",
+        details: [
+            "Conditional independence",
+            "Directed graphical models",
+            "Undirected graphical models",
+            "Inference in graphical models",
+            "Sampling in graphical models",
+            "Learning in graphical models",
+        ],
+    },
+    {
+        text: "Models for chains and trees",
+        link: "https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing",
+        details: [
+            "Hidden Markov models",
+            "Viterbi algorithm",
+            "Forward-backward algorithm",
+            "Belief propagation",
+            "Sum product algorithm",
+            "Extension to trees",
+            "Graphs with loops",
+        ],
+    },
+    {
+        text: "Models for grids",
+        link: "https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing",
+        details: [
+            "Markov random fields",
+            "MAP inference in binary pairwise MRFs",
+            "Graph cuts",
+            "Multi-label pairwise MRFs",
+            "Alpha-expansion algorithm",
+            "Conditional random fields",
+        ],
+    },
+];
+
+const machineLearning = [
+    {
+        text: "Learning and inference",
+        link: "https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing",
+        details: [
+            "Discriminative models",
+            "Generative models",
+            "Example: regression",
+            "Example: classification",
+        ],
+    },
+    {
+        text: "Regression models",
+        link: "https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing",
+        details: [
+            "Linear regression",
+            "Bayesian linear regression",
+            "Non-linear regression",
+            "Bayesian non-linear regression",
+            "The kernel trick",
+            "Gaussian process regression",
+            "Sparse linear regression",
+            "Relevance vector regression",
+        ],
+    },
+    {
+        text: "Classification models",
+        link: "https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing",
+        details: [
+            "Logistic regression",
+            "Bayesian logistic regression",
+            "Non-linear logistic regression",
+            "Gaussian process classification",
+            "Relevance vector classification",
+            "Incremental fitting: boosting and trees",
+            "Multi-class logistic regression",
+        ],
+    },
+    {
+        text: "Few-shot learning and meta-learning I",
+        link: "https://www.borealisai.com/en/blog/tutorial-2-few-shot-learning-and-meta-learning-i/",
+        details: [
+            "Meta-learning framework",
+            "Approaches to meta-learning",
+            "Matching networks",
+            "Prototypical networks",
+            "Relation networks",
+        ],
+    },
+    {
+        text: "Few-shot learning and meta-learning II",
+        link: "https://www.borealisai.com/en/blog/tutorial-3-few-shot-learning-and-meta-learning-ii/",
+        details: [
+            "MAML & Reptile",
+            "LSTM based meta-learning",
+            "Reinforcement learning based approaches",
+            "Memory augmented neural networks",
+            "SNAIL",
+            "Generative models",
+            "Data augmentation approaches",
+        ],
+    },
+];
+
+const nlp = [
+    {
+        text: "Neural natural language generation I",
+        link: "https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/",
+        details: [
+            "Encoder-decoder architecture",
+            "Maximum-likelihood training",
+            "Greedy search",
+            "Beam search",
+            "Diverse beam search",
+            "Top-k sampling",
+            "Nucleus sampling",
+        ],
+    },
+    {
+        text: "Neural natural language generation II",
+        link: "https://www.borealisai.com/en/blog/tutorial-7-neural-natural-language-generation-sequence-level-training/",
+        details: [
+            "Fine-tuning with reinforcement learning",
+            "Training from scratch with RL",
+            "RL vs. structured prediction",
+            "Minimum risk training",
+            "Scheduled sampling",
+            "Beam search optimization",
+            "SeaRNN",
+            "Reward-augmented maximum likelihood",
+        ],
+    },
+    {
+        text: "Parsing I",
+        link: "https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/",
+        details: [
+            "Parse trees",
+            "Context-free grammars",
+            "Chomsky normal form",
+            "CYK recognition algorithm",
+            "Worked example",
+        ],
+    },
+    {
+        text: "Parsing II",
+        link: "https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/",
+        details: [
+            "Weighted context-free grammars",
+            "Semirings",
+            "Inside algorithm",
+            "Inside weights",
+            "Weighted parsing",
+        ],
+    },
+    {
+        text: "Parsing III",
+        link: "https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/",
+        details: [
+            "Probabilistic context-free grammars",
+            "Parameter estimation (supervised)",
+            "Parameter estimation (unsupervised)",
+            "Viterbi training",
+            "Expectation maximization",
+            "Outside from inside",
+            "Interpretation of outside weights",
+        ],
+    },
+    {
+        text: "XLNet",
+        link: "https://www.borealisai.com/en/blog/understanding-xlnet/",
+        details: [
+            "Language modeling",
+            "XLNet training objective",
+            "Permutations",
+            "Attention mask",
+            "Two stream self-attention",
+        ],
+    },
+];
+
+const responsibleAI = [
+    {
+        text: "Bias and fairness",
+        link: "https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/",
+        details: [
+            "Sources of bias",
+            "Demographic Parity",
+            "Equality of odds",
+            "Equality of opportunity",
+            "Individual fairness",
+            "Bias mitigation",
+        ],
+    },
+    {
+        text: "Explainability I",
+        link: "https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/",
+        details: [
+            "Taxonomy of XAI approaches",
+            "Local post-hoc explanations",
+            "Individual conditional explanation",
+            "Counterfactual explanations",
+            "LIME & Anchors",
+            "Shapley additive explanations & SHAP",
+        ],
+    },
+    {
+        text: "Explainability II",
+        link: "https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/",
+        details: [
+            "Global feature importance",
+            "Partial dependence & ICE plots",
+            "Accumulated local effects",
+            "Aggregate SHAP values",
+            "Prototypes & criticisms",
+            "Surrogate / proxy models",
+            "Inherently interpretable models",
+        ],
+    },
+    {
+        text: "Differential privacy I",
+        link: "https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/",
+        details: [
+            "Early approaches to privacy",
+            "Fundamental law of information recovery",
+            "Differential privacy",
+            "Properties of differential privacy",
+            "The Laplace mechanism",
+            "Examples",
+            "Other mechanisms and definitions",
+        ],
+    },
+    {
+        text: "Differential privacy II",
+        link: "https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/",
+        details: [
+            "Differential privacy and matchine learning",
+            "DPSGD",
+            "PATE",
+            "Differentially private data generation",
+            "DPGAN",
+            "PateGAN",
+        ],
+    },
+];
+
+export default function MoreSection() {
+    return (
+        <>
+            <MoreContainer lightBg={true} id="More">
+                <MoreWrapper>
+                    <MoreRow imgStart={false}>
+                        <Column1>
+                            <TextWrapper>
+                                <TopLine>More</TopLine>
+                                <Heading lightText={false}>Further reading</Heading>
+                                <Subtitle darkText={true}>
+                                    Other articles, blogs, and books that I have written. Most in a
+                                    similar style and using the same notation as Understanding Deep
+                                    Learning.
+                                </Subtitle>
+                            </TextWrapper>
+                        </Column1>
+                        <Column2>
+                            <ImgWrap>
+                                <Img src={img} alt="More" />
+                            </ImgWrap>
+                        </Column2>
+                    </MoreRow>
+                    <MoreRow2>
+                        <Column1>
+                            <TopLine>Book</TopLine>
+                            <MoreOuterList>
+                                {book.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Transformers & LLMs</TopLine>
+                            <MoreOuterList>
+                                {transformersAndLLMs.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Math for machine learning</TopLine>
+                            <MoreOuterList>
+                                {mathForMachineLearning.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Optimization</TopLine>
+                            <MoreOuterList>
+                                {optimization.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Temporal models</TopLine>
+                            <MoreOuterList>
+                                {temporalModels.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Computer vision</TopLine>
+                            <MoreOuterList>
+                                {computerVision.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Reinforcement learning</TopLine>
+                            <MoreOuterList>
+                                {reinforcementLearning.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+                        </Column1>
+
+                        <Column2>
+                            <TopLine>AI Theory</TopLine>
+                            <MoreOuterList>
+                                {aiTheory.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Unsupervised learning</TopLine>
+                            <MoreOuterList>
+                                {unsupervisedLearning.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Graphical Models</TopLine>
+                            <MoreOuterList>
+                                {graphicalModels.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Machine learning</TopLine>
+                            <MoreOuterList>
+                                {machineLearning.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Natural language processing</TopLine>
+                            <MoreOuterList>
+                                {nlp.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+
+                            <TopLine>Responsible AI</TopLine>
+                            <MoreOuterList>
+                                {responsibleAI.map((item, index) => (
+                                    <li key={index}>
+                                        <MoreLink href={item.link} target="_blank" rel="noreferrer">
+                                            {item.text}
+                                        </MoreLink>
+                                        <MoreInnerP>
+                                            <MoreInnerList>
+                                                {item.details.map((detail, index) => (
+                                                    <li key={index}>{detail}</li>
+                                                ))}
+                                            </MoreInnerList>
+                                        </MoreInnerP>
+                                    </li>
+                                ))}
+                            </MoreOuterList>
+                        </Column2>
+                    </MoreRow2>
+                </MoreWrapper>
+            </MoreContainer>
+        </>
+    );
+}

src/components/NavBar/NavbarElements.js

@@ -1,119 +0,0 @@
-import { Link as LinkS } from 'react-scroll';
-import { Link as LinkR } from 'react-router-dom';
-import styled from 'styled-components';
-
-export const Nav = styled.nav`
-  background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')};
-  height: 100px;
-  margin-top: -100px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1rem;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-
-  @media screen and (max-width: 960px) {
-    transition: 0.8s all ease;
-  }
-`;
-
-export const NavbarContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  height: 100px;
-  z-index: 1;
-  width: 100%;
-  padding: 0 24px;
-  max-width: 1100px;
-`;
-
-export const NavLogo = styled(LinkR)`
-  color: #fff;
-  justify-self: flex-start;
-  cursor: pointer;
-  font-size: 1.5rem;
-  display: flex;
-  align-items: center;
-  margin-left: 24px;
-  font-weight: bold;
-  text-decoration: none;
-  @media screen and (max-width: 768px) {
-    font-size: 1.0rem;
-  }
-
-`;
-
-export const MobileIcon = styled.div`
-  display: none;
-
-  @media screen and (max-width: 768px) {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(-100%, 60%);
-    font-size: 1.8rem;
-    cursor: pointer;
-  }
-`;
-
-export const NavMenu = styled.ul`
-  display: flex;
-  align-items: center;
-  list-style: none;
-  text-align: center;
-  margin-right: -22px;
-
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-export const NavItem = styled.li`
-  height: 80px;
-`;
-
-export const NavBtn = styled.nav`
-  display: flex;
-  align-items: center;
-
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-export const NavLinks = styled(LinkS)`
-  color: #fff;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  padding: 0 1rem;
-  height: 100%;
-  cursor: pointer;
-
-  &.active {
-    border-bottom: 3px solid #57c6d1
-  }
-`;
-
-export const NavBtnLink = styled(LinkR)`
-  border-radius: 50px;
-  background: #01bf71;
-  white-space: nowrap;
-  padding: 10px 22px;
-  color: #010606;
-  font-size: 16px;
-  outline: none;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  text-decoration: none;
-
-  &:hover {
-    transition: all 0.2s ease-in-out;
-    background: #fff;
-    color: #010606;
-  }
-`;

src/components/NavBar/index.js

@@ -1,59 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import {FaBars} from 'react-icons/fa'
-import {IconContext} from 'react-icons/lib'
-import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements'
-import { animateScroll as scroll } from 'react-scroll'
-
-
-const Navbar = ( {toggle} ) => {
-    const [scrollNav, setScrollNav] = useState(false)
-
-    const changeNav = () =>{
-        if (window.scrollY >= 80){
-            setScrollNav(true)
-        }else{
-            setScrollNav(false)
-        }
-    }
-
-    useEffect(() =>{
-        window.addEventListener('scroll', changeNav)
-    }, [])
-
-    const toggleHome = () => {
-        scroll.scrollToTop();
-    }
-
-    return (
-        <>
-        <IconContext.Provider value={{color: '#fff'}}>
-            <Nav scrollNav={scrollNav}>
-                <NavbarContainer>
-                    <NavLogo to="/udlbook/" onClick={toggleHome}>
-                        <h1> Understanding Deep Learning </h1>
-                    </NavLogo>
-                    <MobileIcon onClick={toggle}>
-                        <FaBars />
-                    </MobileIcon>
-                    <NavMenu>
-                        <NavItem>
-                            <NavLinks to="Notebooks" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Notebooks</NavLinks>
-                        </NavItem>
-                        <NavItem>
-                            <NavLinks to="Instructors" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Instructors</NavLinks>
-                        </NavItem>
-                        <NavItem>
-                            <NavLinks to="Media" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Media</NavLinks>
-                        </NavItem>
-                        <NavItem>
-                            <NavLinks to="More" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>More</NavLinks>
-                        </NavItem>
-                    </NavMenu>
-                </NavbarContainer>
-            </Nav>
-        </IconContext.Provider>
-        </>
-    );
-}
-
-export default Navbar

src/components/Navbar/NavbarElements.jsx

@@ -0,0 +1,119 @@
+import { Link as LinkR } from "react-router-dom";
+import { Link as LinkS } from "react-scroll";
+import styled from "styled-components";
+
+export const Nav = styled.nav`
+    background: ${({ scrollNav }) => (scrollNav ? "#000" : "transparent")};
+    height: 100px;
+    margin-top: -100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+
+    @media screen and (max-width: 960px) {
+        transition: 0.8s all ease;
+    }
+`;
+
+export const NavbarContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    height: 100px;
+    z-index: 1;
+    width: 100%;
+    padding: 0 24px;
+    max-width: 1100px;
+`;
+
+export const NavLogo = styled(LinkR)`
+    color: #fff;
+    justify-self: flex-start;
+    cursor: pointer;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+    font-weight: bold;
+    text-decoration: none;
+
+    @media screen and (max-width: 768px) {
+        font-size: 1rem;
+    }
+`;
+
+export const MobileIcon = styled.div`
+    display: none;
+
+    @media screen and (max-width: 768px) {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(-100%, 60%);
+        font-size: 1.8rem;
+        cursor: pointer;
+    }
+`;
+
+export const NavMenu = styled.ul`
+    display: flex;
+    align-items: center;
+    list-style: none;
+    text-align: center;
+    margin-right: -22px;
+
+    @media screen and (max-width: 768px) {
+        display: none;
+    }
+`;
+
+export const NavItem = styled.li`
+    height: 80px;
+`;
+
+export const NavBtn = styled.nav`
+    display: flex;
+    align-items: center;
+
+    @media screen and (max-width: 768px) {
+        display: none;
+    }
+`;
+
+export const NavLinks = styled(LinkS)`
+    color: #fff;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    padding: 0 1rem;
+    height: 100%;
+    cursor: pointer;
+
+    &.active {
+        border-bottom: 3px solid #57c6d1;
+    }
+`;
+
+export const NavBtnLink = styled(LinkR)`
+    border-radius: 50px;
+    background: #01bf71;
+    white-space: nowrap;
+    padding: 10px 22px;
+    color: #010606;
+    font-size: 16px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    text-decoration: none;
+
+    &:hover {
+        transition: all 0.2s ease-in-out;
+        background: #fff;
+        color: #010606;
+    }
+`;

src/components/Navbar/index.jsx

@@ -0,0 +1,104 @@
+import {
+    MobileIcon,
+    Nav,
+    NavbarContainer,
+    NavItem,
+    NavLinks,
+    NavLogo,
+    NavMenu,
+} from "@/components/Navbar/NavbarElements";
+import { useEffect, useState } from "react";
+import { FaBars } from "react-icons/fa";
+import { IconContext } from "react-icons/lib";
+import { animateScroll as scroll } from "react-scroll";
+
+export default function Navbar({ toggle }) {
+    const [scrollNav, setScrollNav] = useState(false);
+
+    useEffect(() => {
+        const changeNav = () => {
+            setScrollNav(window.scrollY >= 80);
+        };
+
+        window.addEventListener("scroll", changeNav);
+
+        return () => {
+            window.removeEventListener("scroll", changeNav);
+        };
+    }, []);
+
+    const scrollToHome = () => {
+        scroll.scrollToTop();
+    };
+
+    return (
+        <>
+            <IconContext.Provider value={{ color: "#fff" }}>
+                <Nav scrollNav={scrollNav}>
+                    <NavbarContainer>
+                        <NavLogo to="/udlbook/" onClick={scrollToHome}>
+                            <h1> Understanding Deep Learning </h1>
+                        </NavLogo>
+                        <MobileIcon onClick={toggle}>
+                            <FaBars />
+                        </MobileIcon>
+                        <NavMenu>
+                            <NavItem>
+                                <NavLinks
+                                    to="Notebooks"
+                                    smooth={true}
+                                    duration={500}
+                                    spy={true}
+                                    exact="true"
+                                    offset={-80}
+                                    activeClass="active"
+                                >
+                                    Notebooks
+                                </NavLinks>
+                            </NavItem>
+                            <NavItem>
+                                <NavLinks
+                                    to="Instructors"
+                                    smooth={true}
+                                    duration={500}
+                                    spy={true}
+                                    exact="true"
+                                    offset={-80}
+                                    activeClass="active"
+                                >
+                                    Instructors
+                                </NavLinks>
+                            </NavItem>
+                            <NavItem>
+                                <NavLinks
+                                    to="Media"
+                                    smooth={true}
+                                    duration={500}
+                                    spy={true}
+                                    exact="true"
+                                    offset={-80}
+                                    activeClass="active"
+                                >
+                                    Media
+                                </NavLinks>
+                            </NavItem>
+                            <NavItem>
+                                <NavLinks
+                                    to="More"
+                                    smooth={true}
+                                    duration={500}
+                                    spy={true}
+                                    exact="true"
+                                    offset={-80}
+                                    activeClass="active"
+                                >
+                                    More
+                                </NavLinks>
+                            </NavItem>
+                        </NavMenu>
+                    </NavbarContainer>
+                </Nav>
+            </IconContext.Provider>
+        </>
+    );
+}

src/components/Notebooks/NotebookElements.jsx

@@ -1,27 +1,26 @@
 import styled from "styled-components";
 
-
 export const NotebookContainer = styled.div`
     color: #fff;
     /* background: #f9f9f9; */
-    background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
+    background: ${({ lightBg }) => (lightBg ? "#f9f9f9" : "#010606")};
 
     @media screen and (max-width: 768px) {
         padding: 100px 0;
     }
-`
+`;
 
 export const NotebookWrapper = styled.div`
     display: grid;
     z-index: 1;
-    // height: 1250px ;  
+    /* height: 1250px; */
     width: 100%;
     max-width: 1100px;
     margin-right: auto;
     margin-left: auto;
     padding: 0 24px;
     justify-content: center;
-`
+`;
 
 export const NotebookRow = styled.div`
     display: grid;
@@ -30,14 +29,16 @@ export const NotebookRow = styled.div`
     grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
 
     @media screen and (max-width: 768px) {
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
     }
-`
+`;
 
 export const Column1 = styled.p`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col1;
+
     @media screen and (max-width: 1050px) {
         font-size: 12px;
     }
@@ -45,12 +46,13 @@ export const Column1 = styled.p`
     @media screen and (max-width: 768px) {
         font-size: 10px;
     }
-`
+`;
 
 export const Column2 = styled.p`
     margin-bottom: 15px;
     padding: 0 15px;
     grid-area: col2;
+
     @media screen and (max-width: 1050px) {
         font-size: 12px;
     }
@@ -58,13 +60,13 @@ export const Column2 = styled.p`
     @media screen and (max-width: 768px) {
         font-size: 10px;
     }
-`
+`;
 
 export const TextWrapper = styled.div`
     max-width: 540px;
     padding-top: 0;
     padding-bottom: 0;
-`
+`;
 
 export const TopLine = styled.p`
     color: #57c6d1;
@@ -74,40 +76,37 @@ export const TopLine = styled.p`
     letter-spacing: 1.4px;
     text-transform: uppercase;
     margin-bottom: 16px;
-`
+`;
 
 export const Heading = styled.h1`
-
     margin-bottom: 24px;
     font-size: 48px;
     line-height: 1.1;
     font-weight: 600;
-    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
 
-    @media screen and (max-width: 480px)
+    @media screen and (max-width: 480px) {
-    {
         font-size: 32px;
     }
-`
+`;
-
 
 export const Subtitle = styled.p`
     max-width: 440px;
     margin-bottom: 35px;
     font-size: 18px;
     line-height: 24px;
-    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
+    color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
-`
+`;
 
 export const BtnWrap = styled.div`
     display: flex;
     justify-content: flex-start;
-`
+`;
 
 export const ImgWrap = styled.div`
     max-width: 555px;
     height: 100%;
-`
+`;
 
 export const Img = styled.img`
     width: 100%;
@@ -117,10 +116,9 @@ export const Img = styled.img`
     padding-right: 0;
 `;
 
-
 export const NBLink = styled.a`
     text-decoration: none;
-    color: #57c6d1;;
+    color: #57c6d1;
     font-weight: 300;
     margin: 0 2px;
     position: relative;
@@ -132,16 +130,18 @@ export const NBLink = styled.a`
         left: 0;
         width: 100%;
         height: 2px;
-        background-color: #57c6d1;;
+        background-color: #57c6d1;
-        content: '';
+        content: "";
-        opacity: .3;
+        opacity: 0.3;
         -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
+        transition-property:
-        transition-duration: .3s;
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
     }
 
     &:hover:before {
         opacity: 1;
         -webkit-transform: scaleX(1.05);
     }
-`
+`;

src/components/Notebooks/index.js

@@ -1,220 +0,0 @@
-import React from 'react'
-import { NBLink, ImgWrap, Img, NotebookContainer, NotebookWrapper, NotebookRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './NotebookElements'
-
-// export const homeObjOne = {
-//     id: 'about',
-//     lightBg: false,
-//     lightText: true,
-//     lightTextDesc: true,
-//     topLine: 'Premium Bank',
-//     headline: 'Unlimited transactions with zero fees',
-//     description:
-//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
-//     buttonLabel: 'Get Started',
-//     imgStart: false,
-//     img: require('../../images/svg-1.svg').default,
-//     alt: 'Car',
-//     dark: true,
-//     primary: true,
-//     darkText: false
-//   };
-
-import img from '../../images/coding.svg'
-
-
-
-const NotebookSection = () => {
-    return (
-        <>
-            <NotebookContainer lightBg={false} id='Notebooks'>
-                <NotebookWrapper>
-                    <NotebookRow imgStart={true}>
-                        <Column1>
-                            <TextWrapper>
-                                <TopLine>Coding exercises</TopLine>
-                                <Heading lightText={true}>Python notebooks covering the whole text</Heading>
-                                <Subtitle darkText={false}>Sixty eight python notebook exercises with missing code to fill in based on the text</Subtitle>
-                            </TextWrapper>
-                        </Column1>
-                        <Column2>
-                            <ImgWrap>
-                                <Img src={img} alt='Car'/>
-                            </ImgWrap>
-                        </Column2>
-                    </NotebookRow>
-                    <NotebookRow>
-                        <Column1>
-                            <ul>
-                                <li> Notebook 1.1 - Background mathematics: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap01/1_1_BackgroundMathematics.ipynb">ipynb/colab</NBLink>
-                                </li>
-                                <li> Notebook 2.1 - Supervised learning: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap02/2_1_Supervised_Learning.ipynb">ipynb/colab</NBLink>
-                                </li>
-                                <li> Notebook 3.1 - Shallow networks I: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_1_Shallow_Networks_I.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 3.2 - Shallow networks II: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_2_Shallow_Networks_II.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 3.3 - Shallow network regions: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_3_Shallow_Network_Regions.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 3.4 - Activation functions: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_4_Activation_Functions.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 4.1 - Composing networks: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_1_Composing_Networks.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 4.2 - Clipping functions: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_2_Clipping_functions.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 4.3 - Deep networks: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_3_Deep_Networks.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 5.1 - Least squares loss: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_1_Least_Squares_Loss.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 5.2 - Binary cross-entropy loss: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_2_Binary_Cross_Entropy_Loss.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 5.3 - Multiclass cross-entropy loss: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_3_Multiclass_Cross_entropy_Loss.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 6.1 - Line search: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_1_Line_Search.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 6.2 - Gradient descent: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_2_Gradient_Descent.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 6.3 - Stochastic gradient descent: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_3_Stochastic_Gradient_Descent.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 6.4 - Momentum: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_4_Momentum.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 6.5 - Adam: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_5_Adam.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 7.1 - Backpropagation in toy model: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_1_Backpropagation_in_Toy_Model.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 7.2 - Backpropagation: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_2_Backpropagation.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 7.3 - Initialization: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_3_Initialization.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 8.1 - MNIST-1D performance: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_1_MNIST_1D_Performance.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 8.2 - Bias-variance trade-off: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_2_Bias_Variance_Trade_Off.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 8.3 - Double descent: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_3_Double_Descent.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 8.4 - High-dimensional spaces: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_4_High_Dimensional_Spaces.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 9.1 - L2 regularization: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_1_L2_Regularization.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 9.2 - Implicit regularization: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_2_Implicit_Regularization.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 9.3 - Ensembling: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_3_Ensembling.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 9.4 - Bayesian approach: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_4_Bayesian_Approach.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 9.5 - Augmentation <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_5_Augmentation.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 10.1 - 1D convolution: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_1_1D_Convolution.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 10.2 - Convolution for MNIST-1D: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_2_Convolution_for_MNIST_1D.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 10.3 - 2D convolution: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_3_2D_Convolution.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 10.4 - Downsampling & upsampling: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_4_Downsampling_and_Upsampling.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 10.5 - Convolution for MNIST: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_5_Convolution_For_MNIST.ipynb">ipynb/colab </NBLink>
-                                </li>
-                            </ul>
-                        </Column1>
-                        <Column2>
-                        <ul>
-                                <li> Notebook 11.1 - Shattered gradients: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_1_Shattered_Gradients.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 11.2 - Residual networks: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_2_Residual_Networks.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 11.3 - Batch normalization: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_3_Batch_Normalization.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 12.1 - Self-attention: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_1_Self_Attention.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 12.2 - Multi-head self-attention: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_2_Multihead_Self_Attention.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 12.3 - Tokenization: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_3_Tokenization.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 12.4 - Decoding strategies: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_4_Decoding_Strategies.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 13.1 - Encoding graphs: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_1_Graph_Representation.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 13.2 - Graph classification : <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_2_Graph_Classification.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 13.3 - Neighborhood sampling: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_3_Neighborhood_Sampling.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 13.4 - Graph attention: <NBLink
-                                        href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_4_Graph_Attention_Networks.ipynb">ipynb/colab </NBLink>
-                                </li>
-                                <li> Notebook 15.1 - GAN toy example: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap15/15_1_GAN_Toy_Example.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 15.2 - Wasserstein distance: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap15/15_2_Wasserstein_Distance.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 16.1 - 1D normalizing flows: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_1_1D_Normalizing_Flows.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 16.2 - Autoregressive flows: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_2_Autoregressive_Flows.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 16.3 - Contraction mappings: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_3_Contraction_Mappings.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 17.1 - Latent variable models: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_1_Latent_Variable_Models.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 17.2 - Reparameterization trick: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_2_Reparameterization_Trick.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 17.3 - Importance sampling: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_3_Importance_Sampling.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 18.1 - Diffusion encoder: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_1_Diffusion_Encoder.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 18.2 - 1D diffusion model: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_2_1D_Diffusion_Model.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 18.3 - Reparameterized model: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_3_Reparameterized_Model.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 18.4 - Families of diffusion models: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_4_Families_of_Diffusion_Models.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 19.1 - Markov decision processes: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_1_Markov_Decision_Processes.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 19.2 - Dynamic programming: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_2_Dynamic_Programming.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 19.3 - Monte-Carlo methods: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_3_Monte_Carlo_Methods.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 19.4 - Temporal difference methods: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_4_Temporal_Difference_Methods.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 19.5 - Control variates: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_5_Control_Variates.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 20.1 - Random data: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_1_Random_Data.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 20.2 - Full-batch gradient descent: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_2_Full_Batch_Gradient_Descent.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 20.3 - Lottery tickets: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_3_Lottery_Tickets.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 20.4 - Adversarial attacks: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_4_Adversarial_Attacks.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 21.1 - Bias mitigation: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap21/21_1_Bias_Mitigation.ipynb">ipynb/colab </NBLink></li>
-                                <li> Notebook 21.2 - Explainability: <NBLink href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap21/21_2_Explainability.ipynb">ipynb/colab </NBLink></li>
-                            </ul>
-                        </Column2>
-                    </NotebookRow>
-
-                </NotebookWrapper>
-            </NotebookContainer>
-        </>
-    )
-}
-
-export default NotebookSection

src/components/Notebooks/index.jsx

@@ -0,0 +1,344 @@
+import {
+    Column1,
+    Column2,
+    Heading,
+    Img,
+    ImgWrap,
+    NBLink,
+    NotebookContainer,
+    NotebookRow,
+    NotebookWrapper,
+    Subtitle,
+    TextWrapper,
+    TopLine,
+} from "@/components/Notebooks/NotebookElements";
+import img from "@/images/coding.svg";
+
+const notebooks = [
+    {
+        text: "Notebook 1.1 - Background mathematics",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap01/1_1_BackgroundMathematics.ipynb",
+    },
+    {
+        text: "Notebook 2.1 - Supervised learning",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap02/2_1_Supervised_Learning.ipynb",
+    },
+    {
+        text: "Notebook 3.1 - Shallow networks I",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_1_Shallow_Networks_I.ipynb",
+    },
+    {
+        text: "Notebook 3.2 - Shallow networks II",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_2_Shallow_Networks_II.ipynb",
+    },
+    {
+        text: "Notebook 3.3 - Shallow network regions",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_3_Shallow_Network_Regions.ipynb",
+    },
+    {
+        text: "Notebook 3.4 - Activation functions",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_4_Activation_Functions.ipynb",
+    },
+    {
+        text: "Notebook 4.1 - Composing networks",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_1_Composing_Networks.ipynb",
+    },
+    {
+        text: "Notebook 4.2 - Clipping functions",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_2_Clipping_functions.ipynb",
+    },
+    {
+        text: "Notebook 4.3 - Deep networks",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_3_Deep_Networks.ipynb",
+    },
+    {
+        text: "Notebook 5.1 - Least squares loss",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_1_Least_Squares_Loss.ipynb",
+    },
+    {
+        text: "Notebook 5.2 - Binary cross-entropy loss",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_2_Binary_Cross_Entropy_Loss.ipynb",
+    },
+    {
+        text: "Notebook 5.3 - Multiclass cross-entropy loss",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_3_Multiclass_Cross_entropy_Loss.ipynb",
+    },
+    {
+        text: "Notebook 6.1 - Line search",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_1_Line_Search.ipynb",
+    },
+    {
+        text: "Notebook 6.2 - Gradient descent",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_2_Gradient_Descent.ipynb",
+    },
+    {
+        text: "Notebook 6.3 - Stochastic gradient descent",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_3_Stochastic_Gradient_Descent.ipynb",
+    },
+    {
+        text: "Notebook 6.4 - Momentum",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_4_Momentum.ipynb",
+    },
+    {
+        text: "Notebook 6.5 - Adam",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_5_Adam.ipynb",
+    },
+    {
+        text: "Notebook 7.1 - Backpropagation in toy model",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_1_Backpropagation_in_Toy_Model.ipynb",
+    },
+    {
+        text: "Notebook 7.2 - Backpropagation",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_2_Backpropagation.ipynb",
+    },
+    {
+        text: "Notebook 7.3 - Initialization",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_3_Initialization.ipynb",
+    },
+    {
+        text: "Notebook 8.1 - MNIST-1D performance",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_1_MNIST_1D_Performance.ipynb",
+    },
+    {
+        text: "Notebook 8.2 - Bias-variance trade-off",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_2_Bias_Variance_Trade_Off.ipynb",
+    },
+    {
+        text: "Notebook 8.3 - Double descent",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_3_Double_Descent.ipynb",
+    },
+    {
+        text: "Notebook 8.4 - High-dimensional spaces",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_4_High_Dimensional_Spaces.ipynb",
+    },
+    {
+        text: "Notebook 9.1 - L2 regularization",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_1_L2_Regularization.ipynb",
+    },
+    {
+        text: "Notebook 9.2 - Implicit regularization",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_2_Implicit_Regularization.ipynb",
+    },
+    {
+        text: "Notebook 9.3 - Ensembling",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_3_Ensembling.ipynb",
+    },
+    {
+        text: "Notebook 9.4 - Bayesian approach",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_4_Bayesian_Approach.ipynb",
+    },
+    {
+        text: "Notebook 9.5 - Augmentation",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_5_Augmentation.ipynb",
+    },
+    {
+        text: "Notebook 10.1 - 1D convolution",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_1_1D_Convolution.ipynb",
+    },
+    {
+        text: "Notebook 10.2 - Convolution for MNIST-1D",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_2_Convolution_for_MNIST_1D.ipynb",
+    },
+    {
+        text: "Notebook 10.3 - 2D convolution",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_3_2D_Convolution.ipynb",
+    },
+    {
+        text: "Notebook 10.4 - Downsampling & upsampling",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_4_Downsampling_and_Upsampling.ipynb",
+    },
+    {
+        text: "Notebook 10.5 - Convolution for MNIST",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_5_Convolution_For_MNIST.ipynb",
+    },
+    {
+        text: "Notebook 11.1 - Shattered gradients",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_1_Shattered_Gradients.ipynb",
+    },
+    {
+        text: "Notebook 11.2 - Residual networks",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_2_Residual_Networks.ipynb",
+    },
+    {
+        text: "Notebook 11.3 - Batch normalization",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_3_Batch_Normalization.ipynb",
+    },
+    {
+        text: "Notebook 12.1 - Self-attention",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_1_Self_Attention.ipynb",
+    },
+    {
+        text: "Notebook 12.2 - Multi-head self-attention",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_2_Multihead_Self_Attention.ipynb",
+    },
+    {
+        text: "Notebook 12.3 - Tokenization",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_3_Tokenization.ipynb",
+    },
+    {
+        text: "Notebook 12.4 - Decoding strategies",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_4_Decoding_Strategies.ipynb",
+    },
+    {
+        text: "Notebook 13.1 - Encoding graphs",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_1_Graph_Representation.ipynb",
+    },
+    {
+        text: "Notebook 13.2 - Graph classification",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_2_Graph_Classification.ipynb",
+    },
+    {
+        text: "Notebook 13.3 - Neighborhood sampling",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_3_Neighborhood_Sampling.ipynb",
+    },
+    {
+        text: "Notebook 13.4 - Graph attention",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_4_Graph_Attention_Networks.ipynb",
+    },
+    {
+        text: "Notebook 15.1 - GAN toy example",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap15/15_1_GAN_Toy_Example.ipynb",
+    },
+    {
+        text: "Notebook 15.2 - Wasserstein distance",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap15/15_2_Wasserstein_Distance.ipynb",
+    },
+    {
+        text: "Notebook 16.1 - 1D normalizing flows",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_1_1D_Normalizing_Flows.ipynb",
+    },
+    {
+        text: "Notebook 16.2 - Autoregressive flows",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_2_Autoregressive_Flows.ipynb",
+    },
+    {
+        text: "Notebook 16.3 - Contraction mappings",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_3_Contraction_Mappings.ipynb",
+    },
+    {
+        text: "Notebook 17.1 - Latent variable models",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_1_Latent_Variable_Models.ipynb",
+    },
+    {
+        text: "Notebook 17.2 - Reparameterization trick",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_2_Reparameterization_Trick.ipynb",
+    },
+    {
+        text: "Notebook 17.3 - Importance sampling",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_3_Importance_Sampling.ipynb",
+    },
+    {
+        text: "Notebook 18.1 - Diffusion encoder",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_1_Diffusion_Encoder.ipynb",
+    },
+    {
+        text: "Notebook 18.2 - 1D diffusion model",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_2_1D_Diffusion_Model.ipynb",
+    },
+    {
+        text: "Notebook 18.3 - Reparameterized model",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_3_Reparameterized_Model.ipynb",
+    },
+    {
+        text: "Notebook 18.4 - Families of diffusion models",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_4_Families_of_Diffusion_Models.ipynb",
+    },
+    {
+        text: "Notebook 19.1 - Markov decision processes",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_1_Markov_Decision_Processes.ipynb",
+    },
+    {
+        text: "Notebook 19.2 - Dynamic programming",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_2_Dynamic_Programming.ipynb",
+    },
+    {
+        text: "Notebook 19.3 - Monte-Carlo methods",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_3_Monte_Carlo_Methods.ipynb",
+    },
+    {
+        text: "Notebook 19.4 - Temporal difference methods",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_4_Temporal_Difference_Methods.ipynb",
+    },
+    {
+        text: "Notebook 19.5 - Control variates",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_5_Control_Variates.ipynb",
+    },
+    {
+        text: "Notebook 20.1 - Random data",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_1_Random_Data.ipynb",
+    },
+    {
+        text: "Notebook 20.2 - Full-batch gradient descent",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_2_Full_Batch_Gradient_Descent.ipynb",
+    },
+    {
+        text: "Notebook 20.3 - Lottery tickets",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_3_Lottery_Tickets.ipynb",
+    },
+    {
+        text: "Notebook 20.4 - Adversarial attacks",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_4_Adversarial_Attacks.ipynb",
+    },
+    {
+        text: "Notebook 21.1 - Bias mitigation",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap21/21_1_Bias_Mitigation.ipynb",
+    },
+    {
+        text: "Notebook 21.2 - Explainability",
+        link: "https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap21/21_2_Explainability.ipynb",
+    },
+];
+
+export default function NotebookSection() {
+    return (
+        <>
+            <NotebookContainer lightBg={false} id="Notebooks">
+                <NotebookWrapper>
+                    <NotebookRow imgStart={true}>
+                        <Column1>
+                            <TextWrapper>
+                                <TopLine>Coding exercises</TopLine>
+                                <Heading lightText={true}>
+                                    Python notebooks covering the whole text
+                                </Heading>
+                                <Subtitle darkText={false}>
+                                    Sixty eight python notebook exercises with missing code to fill
+                                    in based on the text
+                                </Subtitle>
+                            </TextWrapper>
+                        </Column1>
+                        <Column2>
+                            <ImgWrap>
+                                <Img src={img} alt="Coding" />
+                            </ImgWrap>
+                        </Column2>
+                    </NotebookRow>
+                    <NotebookRow>
+                        <Column1>
+                            <ul>
+                                {/* render first half of notebooks*/}
+                                {notebooks.slice(0, notebooks.length / 2).map((notebook, index) => (
+                                    <li key={index}>
+                                        {notebook.text}:{" "}
+                                        <NBLink href={notebook.link}>ipynb/colab</NBLink>
+                                    </li>
+                                ))}
+                            </ul>
+                        </Column1>
+                        <Column2>
+                            <ul>
+                                {/* render second half of notebooks*/}
+                                {notebooks.slice(notebooks.length / 2).map((notebook, index) => (
+                                    <li key={index}>
+                                        {notebook.text}:{" "}
+                                        <NBLink href={notebook.link}>ipynb/colab</NBLink>
+                                    </li>
+                                ))}
+                            </ul>
+                        </Column2>
+                    </NotebookRow>
+                </NotebookWrapper>
+            </NotebookContainer>
+        </>
+    );
+}

src/components/ScrollToTop.js

@@ -1,11 +0,0 @@
-import {useEffect} from 'react'
-import { useLocation } from 'react-router-dom'
-
-export default function ScrollToTop() {
-    const {pathname} = useLocation()
-    useEffect(() => {
-        window.scrollTo(0,0)
-    }, [pathname])
-
-    return null;
-}

src/components/Sidebar/SidebarElements.jsx

@@ -1,9 +1,7 @@
-import styled from 'styled-components'
+import { FaTimes } from "react-icons/fa";
-import {Link as LinkS} from 'react-scroll'
+import { Link as LinkR } from "react-router-dom";
-import {Link as LinkR} from 'react-router-dom'
+import { Link as LinkS } from "react-scroll";
-import {FaTimes} from 'react-icons/fa'
+import styled from "styled-components";
-
-
 
 export const SidebarContainer = styled.aside`
     position: fixed;
@@ -16,18 +14,18 @@ export const SidebarContainer = styled.aside`
     top: 0;
     left: 0;
     transition: 0.3s ease-in-out;
-    opacity: ${({ isOpen }) => (isOpen ? '100%' :  '0')};
+    opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")};
-    top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};   
+    top: ${({ isOpen }) => (isOpen ? "0" : "-100%")};
- 
+`;
-`
 
 export const CloseIcon = styled(FaTimes)`
     color: #fff;
+
     &:hover {
         color: #01bf71;
         transition: 0.2s ease-in-out;
     }
-`
+`;
 
 export const Icon = styled.div`
     position: absolute;
@@ -37,11 +35,11 @@ export const Icon = styled.div`
     font-size: 2rem;
     cursor: pointer;
     outline: none;
-`
+`;
 
 export const SidebarWrapper = styled.div`
     color: #ffffff;
-`
+`;
 
 export const SidebarMenu = styled.ul`
     display: grid;
@@ -52,7 +50,7 @@ export const SidebarMenu = styled.ul`
     @media screen and (max-width: 480px) {
         grid-template-rows: repeat(6, 60px);
     }
-`
+`;
 
 export const SidebarLink = styled(LinkS)`
     display: flex;
@@ -70,12 +68,12 @@ export const SidebarLink = styled(LinkS)`
         color: #01bf71;
         transition: 0.2s ease-in-out;
     }
-`
+`;
 
 export const SideBtnWrap = styled.div`
     display: flex;
     justify-content: center;
-`
+`;
 
 export const SidebarRoute = styled(LinkR)`
     border-radius: 50px;
@@ -95,4 +93,4 @@ export const SidebarRoute = styled(LinkR)`
         background: #fff;
         color: #010606;
     }
-`
+`;

src/components/Sidebar/index.js

@@ -1,33 +0,0 @@
-import React from 'react'
-import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements'
-
-
-const Sidebar = ({isOpen, toggle}) => {
-    return (
-        <>
-        <SidebarContainer isOpen={isOpen} onClick={toggle}>
-            <Icon onClick={toggle}>
-                <CloseIcon />
-            </Icon>
-            <SidebarWrapper>
-                <SidebarMenu >
-                    <SidebarLink to="Notebooks" onClick={toggle}>
-                        Notebooks
-                    </SidebarLink>
-                    <SidebarLink to="Instructors" onClick={toggle}>
-                        Instructors
-                    </SidebarLink>
-                    <SidebarLink to="Media" onClick={toggle}>
-                        Media
-                    </SidebarLink>
-                    <SidebarLink to="More" onClick={toggle}>
-                        More
-                    </SidebarLink>
-                </SidebarMenu>
-            </SidebarWrapper>
-        </SidebarContainer>
-        </>
-    )
-}
-
-export default Sidebar

src/components/Sidebar/index.jsx

@@ -0,0 +1,36 @@
+import {
+    CloseIcon,
+    Icon,
+    SidebarContainer,
+    SidebarLink,
+    SidebarMenu,
+    SidebarWrapper,
+} from "@/components/Sidebar/SidebarElements";
+
+export default function Sidebar({ isOpen, toggle }) {
+    return (
+        <>
+            <SidebarContainer isOpen={isOpen} onClick={toggle}>
+                <Icon onClick={toggle}>
+                    <CloseIcon />
+                </Icon>
+                <SidebarWrapper>
+                    <SidebarMenu>
+                        <SidebarLink to="Notebooks" onClick={toggle}>
+                            Notebooks
+                        </SidebarLink>
+                        <SidebarLink to="Instructors" onClick={toggle}>
+                            Instructors
+                        </SidebarLink>
+                        <SidebarLink to="Media" onClick={toggle}>
+                            Media
+                        </SidebarLink>
+                        <SidebarLink to="More" onClick={toggle}>
+                            More
+                        </SidebarLink>
+                    </SidebarMenu>
+                </SidebarWrapper>
+            </SidebarContainer>
+        </>
+    );
+}

src/images/square-x-twitter.svg

@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   height="10"
-   width="8.75"
-   viewBox="0 0 448 512"
-   version="1.1"
-   id="svg914"
-   sodipodi:docname="square-x-twitter.svg"
-   inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs918" />
-  <sodipodi:namedview
-     id="namedview916"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="65.6"
-     inkscape:cx="3.8948171"
-     inkscape:cy="4.5426829"
-     inkscape:window-width="1296"
-     inkscape:window-height="906"
-     inkscape:window-x="0"
-     inkscape:window-y="38"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg914" />
-  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-  <path
-     d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"
-     id="path912"
-     style="fill:#ffffff;fill-opacity:1" />
-</svg>

src/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-

src/index.jsx

@@ -0,0 +1,10 @@
+import App from "@/App";
+import "@/styles/globals.css";
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+);

src/pages/index.js

@@ -1,34 +0,0 @@
-import React, {useState} from 'react'
-import Sidebar from '../components/Sidebar'
-import Navbar from '../components/NavBar'
-import HeroSection from '../components/HeroSection';
-import NotebookSection from '../components/Notebooks'
-import InstructorsSection from '../components/Instructors';
-import Footer from '../components/Footer';
-import MediaSection from '../components/Media';
-import MoreSection from '../components/More';
-
-const Home = () => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    const toggle = () => {
-        setIsOpen(!isOpen)
-    };
-
-    return ( 
-        <>
-            <Sidebar isOpen={isOpen} toggle={toggle}/>
-            <Navbar toggle={toggle}/>
-            <HeroSection />
-            <NotebookSection/>
-            <InstructorsSection/>
-            <MediaSection/>
-            <MoreSection/>
-            <Footer/>                
-        </>
-    )
-};
-
-export default Home
-
- 

src/pages/index.jsx

@@ -0,0 +1,30 @@
+import Footer from "@/components/Footer";
+import HeroSection from "@/components/HeroSection";
+import InstructorsSection from "@/components/Instructors";
+import MediaSection from "@/components/Media";
+import MoreSection from "@/components/More";
+import Navbar from "@/components/Navbar";
+import NotebookSection from "@/components/Notebooks";
+import Sidebar from "@/components/Sidebar";
+import { useState } from "react";
+
+export default function Index() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggle = () => {
+        setIsOpen((p) => !p);
+    };
+
+    return (
+        <>
+            <Sidebar isOpen={isOpen} toggle={toggle} />
+            <Navbar toggle={toggle} />
+            <HeroSection />
+            <NotebookSection />
+            <InstructorsSection />
+            <MediaSection />
+            <MoreSection />
+            <Footer />
+        </>
+    );
+}

src/pages/signin.js

@@ -1,14 +0,0 @@
-import React from 'react'
-import ScrollToTop from '../components/ScrollToTop';
-import SignIn from '../components/SignIn';
-
-const SigninPage = () => {
-    return (
-        <>
-            <ScrollToTop />
-            <SignIn />
-        </>
-    )
-}
-
-export default SigninPage;

src/styles/globals.css

@@ -0,0 +1,6 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: "Encode Sans Expanded", sans-serif;
+}

vite.config.js

@@ -0,0 +1,20 @@
+import react from "@vitejs/plugin-react-swc";
+import path from "node:path";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+    server: {
+        port: 3000,
+    },
+    preview: {
+        port: 3000,
+    },
+    base: "/udlbook",
+});