change index file

Merging udl github with new website

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Notebooks/Chap01/1_1_BackgroundMathematics.ipynb

@@ -341,7 +341,7 @@
         "2. What is $\\exp[1]$?\n",
         "3. What is $\\exp[-\\infty]$?\n",
         "4. What is $\\exp[+\\infty]$?\n",
-        "5. A function is convex if we can draw a straight line between any two points on the function, and this line always lies above the function. Similarly, a function is concave if a straight line between any two points always lies below the function.  Is the exponential function convex or concave or neither?\n"
+        "5. A function is convex if we can draw a straight line between any two points on the function, and the line lies above the function everywhere between these two points. Similarly, a function is concave if a straight line between any two points lies below the function everywhere between these two points.  Is the exponential function convex or concave or neither?\n"
       ]
     },
     {

Notebooks/Chap04/4_1_Composing_Networks.ipynb

@@ -134,7 +134,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "Let's define two networks.  We'll put the prefixes n1_ and n2_ before all the variables to make it clear which network is which.  We'll just consider the inputs and outputs over the range [-1,1].  If you set the \"plot_all\" flat to True,  you can see the details of how they were created."
+        "Let's define two networks.  We'll put the prefixes n1_ and n2_ before all the variables to make it clear which network is which.  We'll just consider the inputs and outputs over the range [-1,1]."
       ],
       "metadata": {
         "id": "LxBJCObC-NTY"

Notebooks/Chap04/4_3_Deep_Networks.ipynb

@@ -118,7 +118,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "Let's define a network.  We'll just consider the inputs and outputs over the range [-1,1].  If you set the \"plot_all\" flat to True,  you can see the details of how it was created."
+        "Let's define a network.  We'll just consider the inputs and outputs over the range [-1,1]."
       ],
       "metadata": {
         "id": "LxBJCObC-NTY"

Notebooks/Chap06/6_2_Gradient_Descent.ipynb

@@ -265,7 +265,7 @@
         "\\frac{\\partial L}{\\partial \\phi_{1}}&\\approx & \\frac{L[\\phi_0, \\phi_1+\\delta]-L[\\phi_0, \\phi_1]}{\\delta}\n",
         "\\end{align}\n",
         "\n",
-        "We can't do this when there are many parameters;  for a million parameters, we would have to evaluate the loss function two million times, and usually computing the gradients directly is much more efficient."
+        "We can't do this when there are many parameters;  for a million parameters, we would have to evaluate the loss function one million plus one times, and usually computing the gradients directly is much more efficient."
       ]
     },
     {

Notebooks/Chap07/7_1_Backpropagation_in_Toy_Model.ipynb

@@ -279,7 +279,7 @@
             "f2: true value = 7.137, your value = 0.000\n",
             "h3: true value = 0.657, your value = 0.000\n",
             "f3: true value = 2.372, your value = 0.000\n",
-            "like original = 0.139, like from forward pass = 0.000\n"
+            "l_i original = 0.139, l_i from forward pass = 0.000\n"
           ]
         }
       ],
@@ -292,7 +292,7 @@
         "print(\"f2: true value = %3.3f, your value = %3.3f\"%(7.137, f2))\n",
         "print(\"h3: true value = %3.3f, your value = %3.3f\"%(0.657, h3))\n",
         "print(\"f3: true value = %3.3f, your value = %3.3f\"%(2.372, f3))\n",
-        "print(\"like original = %3.3f, like from forward pass = %3.3f\"%(l_i_func, l_i))\n"
+        "print(\"l_i original = %3.3f, l_i from forward pass = %3.3f\"%(l_i_func, l_i))\n"
       ]
     },
     {

Notebooks/Chap07/7_2_Backpropagation.ipynb

@@ -115,9 +115,9 @@
     {
       "cell_type": "markdown",
       "source": [
-        "Now let's run our random network.  The weight matrices $\\boldsymbol\\Omega_{1\\ldots K}$ are the entries of the list \"all_weights\" and the biases $\\boldsymbol\\beta_{1\\ldots k}$ are the entries of the list \"all_biases\"\n",
+        "Now let's run our random network.  The weight matrices $\\boldsymbol\\Omega_{1\\ldots K}$ are the entries of the list \"all_weights\" and the biases $\\boldsymbol\\beta_{1\\ldots K}$ are the entries of the list \"all_biases\"\n",
         "\n",
-        "We know that we will need the activations $\\mathbf{f}_{0\\ldots K}$ and the activations $\\mathbf{h}_{1\\ldots K}$ for the forward pass of backpropagation, so we'll store and return these as well.\n"
+        "We know that we will need the preactivations $\\mathbf{f}_{0\\ldots K}$ and the activations $\\mathbf{h}_{1\\ldots K}$ for the forward pass of backpropagation, so we'll store and return these as well.\n"
       ],
       "metadata": {
         "id": "5irtyxnLJSGX"
@@ -132,7 +132,7 @@
         "  K = len(all_weights) -1\n",
         "\n",
         "  # We'll store the pre-activations at each layer in a list \"all_f\"\n",
-        "  # and the activations in a second list[all_h].\n",
+        "  # and the activations in a second list \"all_h\".\n",
         "  all_f = [None] * (K+1)\n",
         "  all_h = [None] * (K+1)\n",
         "\n",
@@ -143,7 +143,7 @@
         "  # Run through the layers, calculating all_f[0...K-1] and all_h[1...K]\n",
         "  for layer in range(K):\n",
         "      # Update preactivations and activations at this layer according to eqn 7.16\n",
-        "      # Remmember to use np.matmul for matrrix multiplications\n",
+        "      # Remmember to use np.matmul for matrix multiplications\n",
         "      # TODO -- Replace the lines below\n",
         "      all_f[layer] = all_h[layer]\n",
         "      all_h[layer+1] = all_f[layer]\n",
@@ -166,7 +166,7 @@
     {
       "cell_type": "code",
       "source": [
-        "# Define in input\n",
+        "# Define input\n",
         "net_input = np.ones((D_i,1)) * 1.2\n",
         "# Compute network output\n",
         "net_output, all_f, all_h = compute_network_output(net_input,all_weights, all_biases)\n",
@@ -249,7 +249,7 @@
         "\n",
         "  # Now work backwards through the network\n",
         "  for layer in range(K,-1,-1):\n",
-        "    # TODO Calculate the derivatives of the loss with respect to the biases at layer this from all_dl_df[layer]. (eq 7.21)\n",
+        "    # TODO Calculate the derivatives of the loss with respect to the biases at layer from all_dl_df[layer]. (eq 7.21)\n",
         "    # NOTE!  To take a copy of matrix X, use Z=np.array(X)\n",
         "    # REPLACE THIS LINE\n",
         "    all_dl_dbiases[layer] = np.zeros_like(all_biases[layer])\n",
@@ -265,7 +265,7 @@
         "\n",
         "\n",
         "    if layer > 0:\n",
-        "      # TODO Calculate the derivatives of the loss with respect to the pre-activation f (use deriv of ReLu function, first part of last line of eq. 7.24)\n",
+        "      # TODO Calculate the derivatives of the loss with respect to the pre-activation f (use derivative of ReLu function, first part of last line of eq. 7.24)\n",
         "      # REPLACE THIS LINE\n",
         "      all_dl_df[layer-1] = np.zeros_like(all_f[layer-1])\n",
         "\n",

Notebooks/Chap07/7_3_Initialization.ipynb

@@ -4,7 +4,7 @@
   "metadata": {
     "colab": {
       "provenance": [],
-      "authorship_tag": "ABX9TyNHLXFpiSnUzAbzhtOk+bxu",
+      "authorship_tag": "ABX9TyOaATWBrwVMylV1akcKtHjt",
       "include_colab_link": true
     },
     "kernelspec": {
@@ -120,7 +120,7 @@
         "  K = len(all_weights)-1\n",
         "\n",
         "  # We'll store the pre-activations at each layer in a list \"all_f\"\n",
-        "  # and the activations in a second list[all_h].\n",
+        "  # and the activations in a second list \"all_h\".\n",
         "  all_f = [None] * (K+1)\n",
         "  all_h = [None] * (K+1)\n",
         "\n",
@@ -151,7 +151,7 @@
     {
       "cell_type": "markdown",
       "source": [
-        "Now let's investigate how this the size of the outputs vary as we change the initialization variance:\n"
+        "Now let's investigate how the size of the outputs vary as we change the initialization variance:\n"
       ],
       "metadata": {
         "id": "bIUrcXnOqChl"
@@ -177,7 +177,7 @@
         "data_in = np.random.normal(size=(1,n_data))\n",
         "net_output, all_f, all_h = compute_network_output(data_in, all_weights, all_biases)\n",
         "\n",
-        "for layer in range(K):\n",
+        "for layer in range(1,K+1):\n",
         "  print(\"Layer %d, std of hidden units = %3.3f\"%(layer, np.std(all_h[layer])))"
       ],
       "metadata": {
@@ -196,7 +196,7 @@
         "# Change this to 50 layers with 80 hidden units per layer\n",
         "\n",
         "# TO DO\n",
-        "# Now experiment with sigma_sq_omega to try to stop the variance of the forward computation explode"
+        "# Now experiment with sigma_sq_omega to try to stop the variance of the forward computation exploding"
       ],
       "metadata": {
         "id": "VL_SO4tar3DC"
@@ -249,6 +249,9 @@
         "\n",
         "# Main backward pass routine\n",
         "def backward_pass(all_weights, all_biases, all_f, all_h, y):\n",
+        "  # Retrieve number of layers\n",
+        "  K = all_weights\n",
+        "\n",
         "  # We'll store the derivatives dl_dweights and dl_dbiases in lists as well\n",
         "  all_dl_dweights = [None] * (K+1)\n",
         "  all_dl_dbiases = [None] * (K+1)\n",

index_old.html

@@ -15,8 +15,8 @@
         <ul>
             <li>
                 <p style="font-size: larger; margin-bottom: 0">Download full PDF <a
-                        href="https://github.com/udlbook/udlbook/releases/download/v2.0.1/UnderstandingDeepLearning_02_15_24_C.pdf">here</a>
+                        href="https://github.com/udlbook/udlbook/releases/download/v2.03/UnderstandingDeepLearning_02_26_24_C.pdf">here</a>
-                </p>2024-02-15. CC-BY-NC-ND license<br>
+                </p>2024-03-26. CC-BY-NC-ND license<br>
                 <img src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield">
             </li>
             <li> Order your copy from  <a href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">here </a></li>

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-website-smooth-scroll",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "https://udlbook.github.io/udlbook/",
+  "dependencies": {
+    "@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",
+    "build": "react-scripts --openssl-legacy-provider build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "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"
+  }
+}

public/index.html

@@ -0,0 +1,46 @@
+<!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>React App</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

@@ -0,0 +1,25 @@
+{
+  "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

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

src/App.css

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

src/App.js

@@ -0,0 +1,19 @@
+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="/" element ={<Home/>} />      
+      </Routes>
+      
+    </Router>
+  );
+}
+
+export default App;

src/components/ButtonElement.js

@@ -0,0 +1,23 @@
+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.js

@@ -0,0 +1,139 @@
+import styled from 'styled-components'
+import {Link} from 'react-router-dom'
+
+export const FooterContainer = styled.footer` 
+    background-color: #101522;
+`
+
+export const FooterWrap = styled.div` 
+    padding: 48x 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 1100px;
+    margin: 0 auto;
+`
+
+export const FooterLinksContainer = styled.div` 
+    display: flex;
+    justify-content: center;
+
+    @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;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 16px;
+    text-align: left;
+    width: 160px;
+    box-sizing: border-box;
+    color: #fff;
+
+    @media screen and (max-width: 420px){
+        margin: 0;
+        padding: 10px;
+        width: 100%;
+    }
+`
+
+export const FooterLinkTitle = styled.h1` 
+    font-size: 14px;
+    margin-bottom: 16px ; 
+`
+
+export const FooterLink = styled(Link)`
+    color: #ffffff;
+    text-decoration: none;
+    margin-bottom: 0.5rem;
+    font-size: 14px;
+
+    &:hover{
+        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;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1100px; 
+    margin: 20px auto 0 auto ; 
+
+    @media screen and (max-width: 820px){
+        flex-direction: column;
+    }
+`
+
+export const SocialAttrWrap = styled.div` 
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 1100px; 
+    margin: 10px auto 0 auto ; 
+
+    @media screen and (max-width: 820px){
+        flex-direction: column;
+    }
+`
+
+export const SocialLogo = styled(Link)` 
+    color: #fff;
+    justify-self: start;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    font-weight: bold;
+`
+
+export const WebsiteRights = styled.small` 
+    color: #fff ; 
+    margin-bottom: 8px ; 
+`
+
+export const SocialIcons = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 60px;
+    margin-bottom: 8px ; 
+`
+
+export const SocialIconLink = styled.a` 
+    color: #fff;
+    font-size: 24px;
+`
+
+export const FooterImgWrap = styled.div` 
+    max-width: 555px;
+    height: 100%;
+`
+
+export const FooterImg = styled.img`
+  width: 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;

src/components/Footer/index.js

@@ -0,0 +1,42 @@
+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='/' 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/HeroSection/HeroElements.js

@@ -0,0 +1,242 @@
+import styled from "styled-components";
+
+export const HeroContainer = styled.div`
+    background: #57c6d1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 0px;
+    position: static;
+    z-index: 1;
+    }
+`
+
+
+
+export const HeroContent = styled.div` 
+    z-index: 3; 
+    width: 100% ; 
+    max-width: 1100px;
+    position: static;
+    padding: 8px 24px;
+    margin: 80px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center ; 
+`
+export const HeroH1 = styled.h1` 
+    color: #fff;
+    font-size: 48px;
+    text-align: center;
+
+    @media screen and (max-width: 768px) {
+        font-size: 40px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 32px;
+    }
+
+`
+
+export const HeroP = styled.p` 
+    margin-top: 24px;
+    color: #fff;
+    font-size: 24px ; 
+    text-align: center ; 
+    max-width: 600px ; 
+
+    
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @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);
+    align-items: top;
+    grid-template-areas:  'col1 col2' };
+
+    @media screen and (max-width: 768px){
+        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%;
+    font-size: 16px ; 
+    margin-right: 20px ; 
+
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+export const HeroNewsItemContent = styled.div`
+    width: 80%; 
+    color: #000000;
+    font-size: 16px ; 
+
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+
+
+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;
+`
+
+
+export const HeroColumn2 = styled.div` 
+    margin-bottom: 15px;
+    padding: 0 15px;
+    grid-area: col2;
+    display: flex;
+    align-items:center;
+    flex-direction:column;
+`
+
+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%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;
+
+export const HeroDownloadsImg = styled.img`
+    margin-top: 5px;
+    margin-right: 0;
+    margin-left: 0;
+    padding-right: 0;
+    margin-bottom: 10px;
+`
+
+export const HeroLink = styled.a`
+  color: #fff;
+  text-decoration: none;
+  padding: 0.1rem 0rem;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.85);
+  }
+
+  &.active {
+    color: #000
+    border-bottom: 3px solid #01bf71;
+  }
+`;
+
+
+export const HeroNewsTitle = styled.div` 
+    margin-left: 0px;
+    color: #000000;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 16px;
+    margin-bottom: 36px; 
+
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+export const HeroCitationTitle = styled.div` 
+    margin-left: 0px;
+    color: #000000;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 16px;
+    margin-bottom: 10px; 
+    margin-top:36px;
+
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }
+
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`
+
+
+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: 24px;
+}
+
+@media screen and (max-width: 480px) {
+    font-size: 18px;
+}
+`

src/components/HeroSection/index.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent} 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/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 <a href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </a> published.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>12/26/23</HeroNewsItemDate>
+                                <HeroNewsItemContent> Machine Learning Street Talk  <a href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </a>  discussing book.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>12/19/23</HeroNewsItemDate>
+                                <HeroNewsItemContent>Deeper Insights <a href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</a> discussing book.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>12/06/23</HeroNewsItemDate>
+                                <HeroNewsItemContent> I did an <a href="https://www.borealisai.com/news/understanding-deep-learning/">interview</a> discussing the book with Borealis AI.</HeroNewsItemContent>
+                            </HeroNewsItem>
+
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>12/05/23</HeroNewsItemDate>
+                                <HeroNewsItemContent> Book released by <a href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</a>.</HeroNewsItemContent>
+                            </HeroNewsItem>
+                        </HeroNewsBlock>
+                        <HeroFollowBlock>
+                            Follow me on <a href="https://twitter.com/SimonPrinceAI">Twitter</a> or <a
+                            href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</a> for updates.
+                        </HeroFollowBlock>
+                        <HeroCitationTitle>CITATION:</HeroCitationTitle>
+                        <HeroCitationBlock>
+                            <pre>
+                                <code>
+                                    <React.Fragment>{citation}</React.Fragment>
+                                </code>
+                            </pre>
+                        </HeroCitationBlock>
+                    </HeroColumn1>
+                    <HeroColumn2>
+                        <HeroImgWrap>
+                            <Img src={img} alt="book cover"/>
+                        </HeroImgWrap>
+                        <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v2.03/UnderstandingDeepLearning_02_26_24_C.pdf">Download full pdf</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">Find/Report Errata</HeroLink>
+                    </HeroColumn2>
+                </HeroRow>
+            </HeroContent>
+        </HeroContainer>
+    )
+}
+
+export default HeroSection

src/components/Instructors/InstructorsElements.js

@@ -0,0 +1,130 @@
+import styled from "styled-components";
+
+
+export const InstructorsContainer = styled.div` 
+    color: #fff;
+    /* background: #f9f9f9; */
+    background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
+
+    @media screen and (max-width: 768px) {
+        padding: 100px 0;
+    }
+`
+
+export const InstructorsWrapper = styled.div`
+    display: grid ; 
+    z-index: 1;
+    width: 100% ; 
+    max-width: 1100px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 24px;
+    justify-content: center;
+`
+
+export const InstructorsRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: center;
+    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'`)};
+    }
+`
+
+export const InstructorsRow2 = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: top;
+    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'`)};
+    }
+`
+
+
+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;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    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')};
+    
+    @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')};
+
+`
+
+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%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;
+
+
+export const InstructorsContent = styled.div` 
+    z-index: 3; 
+    width: 100% ; 
+    max-width: 1100px;
+    position: static;
+    padding: 8px 0px;
+    margin: 10px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: left ; 
+    list-style-position: inside;
+`

src/components/Instructors/index.js

@@ -0,0 +1,178 @@
+import React from 'react'
+import { ImgWrap, Img, 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>
+                            <a href="https://mitpress.ublish.com/request?cri=15055">Register</a> 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 <a href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">PPTX</a></li>
+                                    <li>Supervised Learning <a href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">PPTX</a></li>
+                                    <li>Shallow Neural Networks <a href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">PPTX</a></li>
+                                    <li>Deep Neural Networks <a href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">PPTX</a></li>
+                                    <li>Loss Functions <a href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">PPTX</a></li>
+                                    <li>Fitting Models <a href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">PPTX</a></li>
+                                    <li>Computing Gradients <a href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">PPTX</a></li>
+                                    <li>Initialization <a href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">PPTX</a></li>
+                                    <li>Performance <a href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">PPTX</a></li>
+                                    <li>Regularization <a href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">PPTX</a></li>
+                                    <li>Convolutional Networks <a href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">PPTX</a></li>
+                                    <li>Image Generation <a href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">PPTX</a></li>
+                                    <li>Transformers and LLMs <a href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">PPTX</a></li>
+                                </ol>
+                             </InstructorsContent>
+                        </Column1>
+                        <Column2>
+                            <TopLine>Figures</TopLine>
+                            <InstructorsContent>
+                            <ol>
+                                <li> Introduction: <a href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap1PDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1udnl5pUOAc8DcAQ7HQwyzP9pwL95ynnv"> SVG</a> / <a href="https://docs.google.com/presentation/d/1IjTqIUvWCJc71b5vEJYte-Dwujcp7rvG/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX </a></li>
+
+                            <li> Supervised learning: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla"> SVG</a> / <a href="https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Shallow neural networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI"> SVG</a> / <a href="https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Deep neural networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa"> SVG</a>
+                                    /
+                                    <a href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Loss functions: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">PDF
+                                    </a> / <a href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ">
+                                    SVG
+                                    </a> / <a
+                                        href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Training models: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">PDF
+                                    </a> / <a href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK">
+                                    SVG
+                                    </a> / <a
+                                        href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Gradients and initialization: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs"> SVG</a> / <a href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Measuring performance: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx"> SVG</a> / <a href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Regularization: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">PDF
+                                    </a> / <a href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
+                                    SVG
+                                    </a> / <a
+                                        href="https://docs.google.com/presentation/d/1VwIfvjpdfTny6sEfu4ZETwCnw6m8Eg-5/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Convolutional networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap10PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1-Wb3VzaSvVeRzoUzJbI2JjZE0uwqupM9"> SVG</a> / <a href="https://docs.google.com/presentation/d/1MtfKBC4Y9hWwGqeP6DVwUNbi1j5ncQCg/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Residual networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap11PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1Mr58jzEVseUAfNYbGWCQyDtEDwvfHRi1"> SVG</a> / <a href="https://docs.google.com/presentation/d/1saY8Faz0KTKAAifUrbkQdLA2qkyEjOPI/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Transformers: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap12PDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1txzOVNf8-jH4UfJ6SLnrtOfPd1Q3ebzd">
+                                    SVG</a> / <a
+                                        href="https://docs.google.com/presentation/d/1GVNvYWa0WJA6oKg89qZre-UZEhABfm0l/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Graph neural networks: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap13PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1lQIV6nRp6LVfaMgpGFhuwEXG-lTEaAwe"> SVG</a> / <a href="https://docs.google.com/presentation/d/1YwF3U82c1mQ74c1WqHVTzLZ0j7GgKaWP/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Unsupervised learning: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap14PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1aMbI6iCuUvOywqk5pBOmppJu1L1anqsM"> SVG</a> / <a href="https://docs.google.com/presentation/d/1A-lBGv3NHl4L32NvfFgy1EKeSwY-0UeB/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                        PPTX</a></li>
+                                <li> GANs: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap15PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1EErnlZCOlXc3HK7m83T2Jh_0NzIUHvtL"> SVG</a> / <a href="https://docs.google.com/presentation/d/10Ernk41ShOTf4IYkMD-l4dJfKATkXH4w/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Normalizing flows: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap16PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1B9bxtmdugwtg-b7Y4AdQKAIEVWxjx8l3"> SVG</a> / <a href="https://docs.google.com/presentation/d/1nLLzqb9pdfF_h6i1HUDSyp7kSMIkSUUA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Variational autoencoders: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap17PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1SNtNIY7khlHQYMtaOH-FosSH3kWwL4b7"> SVG</a> / <a href="https://docs.google.com/presentation/d/1lQE4Bu7-LgvV2VlJOt_4dQT-kusYl7Vo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Diffusion models: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap18PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1A-pIGl4PxjVMYOKAUG3aT4a8wD3G-q_r"> SVG</a> / 
+                                    <a href="https://docs.google.com/presentation/d/1x_ufIBtVPzWUvRieKMkpw5SdRjXWwdfR/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                    PPTX</a></li>
+                                <li> Deep reinforcement learning: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1a5WUoF7jeSgwC_PVdckJi1Gny46fCqh0"> SVG</a> / <a href="https://docs.google.com/presentation/d/1TnYmVbFNhmMFetbjyfXGmkxp1EHauMqr/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                        PPTX </a></li>
+                                <li> Why does deep learning work?: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap20PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1M2d0DHEgddAQoIedKSDTTt7m1ZdmBLQ3"> SVG</a> / <a href="https://docs.google.com/presentation/d/1coxF4IsrCzDTLrNjRagHvqB_FBy10miA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                        PPTX</a></li>
+                                <li> Deep learning and ethics: <a
+                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap21PDF.zip">PDF</a> / <a
+                                        href="https://drive.google.com/uc?export=download&id=1jixmFfwmZkW_UVYzcxmDcMsdFFtnZ0bU">SVG</a> / <a
+                                            href="https://docs.google.com/presentation/d/1EtfzanZYILvi9_-Idm28zD94I_6OrN9R/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                                <li> Appendices - <a href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLAppendixPDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1k2j7hMN40ISPSg9skFYWFL3oZT7r8v-l">
+                                    SVG</a> / <a
+                                        href="https://docs.google.com/presentation/d/1_2cJHRnsoQQHst0rwZssv-XH4o5SEHks/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
+                            </ol>
+                            </InstructorsContent>
+                            <a href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">Instructions</a> for editing equations in figures.
+
+                            <InstructorsContent>
+                                
+                            </InstructorsContent>
+                        </Column2>
+                    </InstructorsRow2>
+
+                </InstructorsWrapper>
+            </InstructorsContainer>
+        </>
+    )
+}
+
+export default InstructorsSection

src/components/Media/MediaElements.js

@@ -0,0 +1,139 @@
+import styled from "styled-components";
+
+
+export const MediaContainer = styled.div` 
+    color: #fff;
+    /* background: #f9f9f9; */
+    background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
+
+    @media screen and (max-width: 768px) {
+        padding: 100px 0;
+    }
+`
+
+export const MediaWrapper = styled.div`
+    display: grid ; 
+    z-index: 1;
+    width: 100% ; 
+    max-width: 1100px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 24px;
+    justify-content: center;
+`
+
+export const MediaRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: center;
+    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'`)};
+    }
+`
+
+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;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    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')};
+    
+    @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')};
+
+`
+
+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%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;
+
+
+export const MediaTextBlock = styled.div`
+@media screen and (max-width: 768px) {
+    font-size: 24px;
+}
+
+@media screen and (max-width: 480px) {
+    font-size: 18px;
+}
+`
+
+export const MediaContent = styled.div` 
+    z-index: 3; 
+    width: 100% ; 
+    max-width: 1100px;
+    position: static;
+    padding: 8px 0px;
+    margin: 10px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: left ; 
+    list-style-position: inside;
+`
+
+export const MediaRow2 = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: top;
+    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'`)};
+    }
+`

src/components/Media/index.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { ImgWrap, Img, MediaContainer, MediaContent, MediaWrapper, 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
+                            <iframe width="560" height="315" 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>
+                        </Column1>
+                        <Column2>
+                        Deeper insights podcast 
+                        <iframe width="560" height="315" 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>
+                        </Column2>
+                    </MediaRow>
+                    <MediaRow2>
+                        <Column1>
+                            <TopLine>Reviews</TopLine>
+                            <MediaContent>
+                                <ul>
+                                    <li> Amazon <a href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">reviews</a></li>          
+                                    <li>Goodreads <a href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">reviews </a></li>
+                                    <li>Book <a href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">review</a> by Vishal V.</li>
+                                </ul>
+                            </MediaContent>
+                        </Column1>
+                        <Column2>
+                            <TopLine>Interviews</TopLine>
+                            <MediaContent>
+                                <ul>
+                                    <li>Borealis AI <a href="https://www.borealisai.com/news/understanding-deep-learning/">interview</a></li>
+                                    <li>Shepherd ML book <a href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">recommendations</a></li>
+                                </ul>
+                            </MediaContent>
+                        </Column2>
+                    </MediaRow2>
+
+                </MediaWrapper>
+            </MediaContainer>
+        </>
+    )
+}
+
+export default MediaSection

src/components/More/MoreElements.js

@@ -0,0 +1,167 @@
+import styled from "styled-components";
+
+
+export const MoreContainer = styled.div` 
+    color: #fff;
+    /* background: #f9f9f9; */
+    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 ;  
+    width: 100% ; 
+    max-width: 1100px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 24px;
+    justify-content: center;
+`
+
+export const MoreRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: center;
+    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'`)};
+    }
+`
+
+export const MoreRow2 = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: top;
+    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'`)};
+    }
+`
+
+
+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;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    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')};
+    
+    @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')};
+
+`
+
+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%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;
+
+
+export const MoreContent = styled.div` 
+    z-index: 3; 
+    width: 100% ; 
+    max-width: 1100px;
+    position: static;
+    padding: 8px 0px;
+    margin: 10px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: left ; 
+    list-style-position: inside;
+`
+
+export const MoreOuterList = styled.ul`
+    // list-style:none;
+    list-style-position: inside;
+    margin:0;
+`
+
+export const MoreInnerList = styled.ul`
+    list-style-position: inside;
+`
+
+export const MoreInnerP = styled.p`
+    padding-left: 18px;
+    padding-bottom: 10px ; 
+    padding-top: 3px ; 
+    font-size:14px;
+    color: #fff
+`
+
+export const MoreLink = styled.a`
+  color: #fff;
+  text-decoration: none;
+  padding: 0.1rem 0rem;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(0.85);
+  }
+
+  &.active {
+    color: #000
+    border-bottom: 3px solid #01bf71;
+  }
+`;

src/components/More/index.js

@@ -0,0 +1,750 @@
+import React from 'react'
+import { ImgWrap, Img, MoreContainer, 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>
+                                        <a href="http://computervisionmodels.com" target="_blank" rel="noreferrer">Computer vision: models, learning, and inference</a>
+                                        <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>
+                                    <a href="https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/" target="_blank"  rel="noreferrer">Intro to LLMs</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/" target="_blank"  rel="noreferrer">Transformers I</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/" target="_blank"  rel="noreferrer">Transformers II</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/" target="_blank"  rel="noreferrer">Transformers III</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/" target="_blank"  rel="noreferrer">Training and fine-tuning LLMs</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/" target="_blank"  rel="noreferrer">Speeding up inference in LLMs</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing" target="_blank"  rel="noreferrer">Linear algebra</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing" target="_blank"  rel="noreferrer">Introduction to probability</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing" target="_blank"  rel="noreferrer">Probability distributions</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing" target="_blank"  rel="noreferrer">Fitting probability distributions</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing" target="_blank"  rel="noreferrer">The normal distribution</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing" target="_blank"  rel="noreferrer">Gradient-based optimmization</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/" target="_blank"  rel="noreferrer">Bayesian optimization</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/" target="_blank"  rel="noreferrer">SAT Solvers I</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/" target="_blank"  rel="noreferrer">SAT Solvers II</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank"  rel="noreferrer">SAT Solvers III</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank"  rel="noreferrer">SAT Solvers III</a>
+                                    <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>
+                                        <a href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing" target="_blank" rel="noreferrer">Image Processing</a>
+                                        <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>
+                                        <a href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing" target="_blank" rel="noreferrer">Pinhole camera</a>
+                                        <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>
+                                    <a href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing" target="_blank" rel="noreferrer">Geometric transformations</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing" target="_blank" rel="noreferrer">Multiple cameras</a>
+                                    <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>
+                                    <a href="https://arxiv.org/abs/2307.05979" target="_blank"  rel="noreferrer">Transformers in RL</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/research-blogs/gradient-flow/" target="_blank"  rel="noreferrer">Gradient flow</a>
+                                    <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>
+                                <a href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/" target="_blank"  rel="noreferrer">Neural tangent kernel</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing" target="_blank"  rel="noreferrer">Temporal models</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing" target="_blank"  rel="noreferrer">Modeling complex data densities</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/" target="_blank"  rel="noreferrer">Variational autoencoders</a>
+                                    <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>
+                                    <a href="https://arxiv.org/abs/1908.09257" target="_blank"  rel="noreferrer">Normalizing flows: introduction and review</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing" target="_blank"  rel="noreferrer">Graphical models</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing" target="_blank"  rel="noreferrer">Models for chains and trees</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing" target="_blank"  rel="noreferrer">Models for grids</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing" target="_blank"  rel="noreferrer">Learning and inference</a>
+                                    <MoreInnerP>
+                                        <MoreInnerList> 
+                                            <li> Discriminative models </li>
+                                            <li> Generative models </li>
+                                            <li> Example: regression </li>
+                                            <li> Example: classification </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <a href="https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing" target="_blank"  rel="noreferrer">Regression models</a>
+                                    <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>
+                                    <a href="https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing" target="_blank"  rel="noreferrer">Classification models</a>
+                                    <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>
+                                    <a 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</a>
+                                    <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>
+                                    <a 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</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/" target="_blank"  rel="noreferrer">Neural natural language generation I</a>
+                                    <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>
+                                    <a 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</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/" target="_blank"  rel="noreferrer">Parsing I</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/" target="_blank"  rel="noreferrer">Parsing II</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/" target="_blank"  rel="noreferrer">Parsing III</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/understanding-xlnet/" target="_blank"  rel="noreferrer">XLNet</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/" target="_blank"  rel="noreferrer">Bias and fairness</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/" target="_blank"  rel="noreferrer">Explainability I</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/" target="_blank"  rel="noreferrer">Explainability II</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/" target="_blank"  rel="noreferrer">Differential privacy I</a>
+                                    <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>
+                                    <a href="https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/" target="_blank"  rel="noreferrer">Differential privacy II</a>
+                                    <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/NavBar/NavbarElements.js

@@ -0,0 +1,115 @@
+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;
+`;
+
+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

@@ -0,0 +1,59 @@
+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="/" 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/Notebooks/NotebookElements.js

@@ -0,0 +1,105 @@
+import styled from "styled-components";
+
+
+export const NotebookContainer = styled.div` 
+    color: #fff;
+    /* background: #f9f9f9; */
+    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 ;  
+    width: 100% ; 
+    max-width: 1100px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 24px;
+    justify-content: center;
+`
+
+export const NotebookRow = styled.div` 
+    display: grid; 
+    grid-auto-columns: minmax(auto, 1fr);
+    align-items: center;
+    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'`)};
+    }
+`
+
+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;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 700;
+    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')};
+    
+    @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')};
+
+`
+
+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%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 10px;
+  padding-right: 0;
+`;

src/components/Notebooks/index.js

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

src/components/ScrollToTop.js

@@ -0,0 +1,11 @@
+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.js

@@ -0,0 +1,98 @@
+import styled from 'styled-components'
+import {Link as LinkS} from 'react-scroll'
+import {Link as LinkR} from 'react-router-dom'
+import {FaTimes} from 'react-icons/fa'
+
+
+
+export const SidebarContainer = styled.aside`
+    position:fixed ; 
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background: #0d0d0d;
+    display: grid;
+    align-items: center;
+    top: 0;
+    left: 0;
+    transition: 0.3s ease-in-out;
+    opacity: ${({ isOpen }) => (isOpen ? '100%' :  '0')};
+    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;
+    top: 1.2rem;
+    right: 1.5rem;
+    background: transparent;
+    font-size: 2rem;
+    cursor: pointer;
+    outline: none;
+`
+
+export const SidebarWrapper = styled.div`
+    color: #ffffff;
+`
+
+export const SidebarMenu = styled.ul`
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(6,80px);
+    text-align: center;
+
+    @media screen and (max-width: 480px){
+        grid-template-rows: repeat(6, 60px) ; 
+    }
+`
+
+export const SidebarLink = styled(LinkS)`
+    display: flex ;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    text-decoration: none;
+    list-style: none;
+    transition: 0.2s ease-in-out;
+    text-decoration: none;
+    color: #fff;
+    cursor: pointer;
+
+    &:hover {
+        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;
+    background: #01bf71;
+    white-space: nowrap;
+    padding: 16px 46px;
+    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/Sidebar/index.js

@@ -0,0 +1,33 @@
+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/images/square-x-twitter.svg

@@ -0,0 +1,39 @@
+<?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

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

src/pages/index.js

@@ -0,0 +1,34 @@
+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/signin.js

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