dr_domi/udlbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Tom Heaton
2024-06-05 23:58:58 +01:00
parent def3e5234b
commit 03c92541ad
27 changed files with 24481 additions and 23650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
.eslintrc.cjs
View File

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

7
.prettierignore Normal file
View File

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

4
.prettierrc.cjs
View File

@@ -8,9 +8,7 @@ const prettierConfig = {
bracketSpacing: true,
printWidth: 100,
endOfLine: "lf",
plugins: [
require.resolve("prettier-plugin-organize-imports"),
],
plugins: [require.resolve("prettier-plugin-organize-imports")],
};
module.exports = prettierConfig;

34
index.html
View File

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

45198
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
src/App.css
View File

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

24
src/App.jsx
View File

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

19
src/components/ButtonElement.jsx
View File

@@ -1,14 +1,13 @@
import styled from 'styled-components'
import {Link} from 'react-scroll'
import { Link } from "react-scroll";
import styled from "styled-components";
export const Button= styled(Link)`
export const Button = styled(Link)`
border-radius: 50px;
background: ${({primary}) => (primary ? '#01BF71' : '#010606')};
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')};
padding: ${({ big }) => (big ? " 14px 48px" : "12px 30px")};
color: ${({ dark }) => (dark ? "#010106" : "#fff")};
font-size: $ ${({ fontBig }) => (fontBig ? "20px" : "16px")};
outline: none;
border: none;
cursor: pointer;
@@ -18,6 +17,6 @@ export const Button= styled(Link)`
transition: all 0.2s ease-in-out;
&:hover {
transition: all 0.2s ease-in-out;
background: ${({primary}) => (primary ? '#fff' : '#01BF71')}
background: ${({ primary }) => (primary ? "#fff" : "#01BF71")};
}
`
`;

98
src/components/Footer/FooterElements.jsx
View File

@@ -1,11 +1,11 @@
import styled from 'styled-components'
import {Link} from 'react-router-dom'
import { Link } from "react-router-dom";
import styled from "styled-components";
export const FooterContainer = styled.footer`
export const FooterContainer = styled.footer`
background-color: #101522;
`
`;
export const FooterWrap = styled.div`
export const FooterWrap = styled.div`
padding: 48x 24px;
display: flex;
flex-direction: column;
@@ -13,25 +13,25 @@ export const FooterWrap = styled.div`
align-items: center;
max-width: 1100px;
margin: 0 auto;
`
`;
export const FooterLinksContainer = styled.div`
export const FooterLinksContainer = styled.div`
display: flex;
justify-content: center;
@media screen and (max-width: 820px){
@media screen and (max-width: 820px) {
padding-top: 32px;
}
`
`;
export const FooterLinksWrapper = styled.div`
export const FooterLinksWrapper = styled.div`
display: flex;
@media screen and (max-width: 820px){
@media screen and (max-width: 820px) {
flex-direction: column;
}
`
`;
export const FooterLinkItems = styled.div`
export const FooterLinkItems = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -41,17 +41,17 @@ export const FooterLinkItems = styled.div`
box-sizing: border-box;
color: #fff;
@media screen and (max-width: 420px){
@media screen and (max-width: 420px) {
margin: 0;
padding: 10px;
width: 100%;
}
`
`;
export const FooterLinkTitle = styled.h1`
export const FooterLinkTitle = styled.h1`
font-size: 14px;
margin-bottom: 16px ;
`
margin-bottom: 16px;
`;
export const FooterLink = styled(Link)`
color: #ffffff;
@@ -59,43 +59,43 @@ export const FooterLink = styled(Link)`
margin-bottom: 0.5rem;
font-size: 14px;
&:hover{
&:hover {
color: #01bf71;
transition: 0.3s ease-in-out;
}
`
`;
export const SocialMedia = styled.section`
export const SocialMedia = styled.section`
max-width: 1000px;
width: 100%;
`
`;
export const SocialMediaWrap = styled.div`
export const SocialMediaWrap = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 20px auto 0 auto ;
max-width: 1100px;
margin: 20px auto 0 auto;
@media screen and (max-width: 820px){
@media screen and (max-width: 820px) {
flex-direction: column;
}
`
`;
export const SocialAttrWrap = styled.div`
export const SocialAttrWrap = styled.div`
color: #fff;
display: flex;
justify-content: center;
align-items: center;
max-width: 1100px;
margin: 10px auto 0 auto ;
max-width: 1100px;
margin: 10px auto 0 auto;
@media screen and (max-width: 820px){
@media screen and (max-width: 820px) {
flex-direction: column;
}
`
`;
export const SocialLogo = styled(Link)`
export const SocialLogo = styled(Link)`
color: #fff;
justify-self: start;
cursor: pointer;
@@ -108,35 +108,35 @@ export const SocialLogo = styled(Link)`
@media screen and (max-width: 768px) {
font-size: 20px;
}
`
`;
export const WebsiteRights = styled.small`
color: #fff ;
margin-bottom: 8px ;
`
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 ;
`
margin-bottom: 8px;
`;
export const SocialIconLink = styled.a`
export const SocialIconLink = styled.a`
color: #fff;
font-size: 24px;
`
`;
export const FooterImgWrap = styled.div`
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;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;

71
src/components/Footer/index.jsx
View File

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

194
src/components/HeroSection/HeroElements.jsx
View File

@@ -9,22 +9,20 @@ export const HeroContainer = styled.div`
position: static;
z-index: 1;
}
`
`;
export const HeroContent = styled.div`
z-index: 3;
width: 100% ;
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`
align-items: center;
`;
export const HeroH1 = styled.h1`
color: #fff;
font-size: 48px;
text-align: center;
@@ -36,17 +34,15 @@ export const HeroH1 = styled.h1`
@media screen and (max-width: 480px) {
font-size: 32px;
}
`;
`
export const HeroP = styled.p`
export const HeroP = styled.p`
margin-top: 24px;
color: #fff;
font-size: 24px ;
text-align: center ;
max-width: 600px ;
font-size: 24px;
text-align: center;
max-width: 600px;
@media screen and (max-width: 768px) {
font-size: 24px;
}
@@ -54,15 +50,14 @@ export const HeroP = styled.p`
@media screen and (max-width: 480px) {
font-size: 18px;
}
`
`;
export const HeroBtnWrapper = styled.div`
margin-top: 32px ;
margin-top: 32px;
display: flex;
flex-direction: column ;
align-items: center ;
`
flex-direction: column;
align-items: center;
`;
export const HeroRow = styled.div`
display: grid;
@@ -73,8 +68,7 @@ export const HeroRow = styled.div`
@media screen and (max-width: 768px){
grid-template-areas: 'col2' 'col1';
}
`
`;
export const HeroNewsItem = styled.div`
margin-left: 4px;
@@ -82,23 +76,22 @@ export const HeroNewsItem = styled.div`
font-size: 16px;
// line-height: 16px;
margin-bottom: 16px;
display: flex;
display: flex;
justify-content: start;
`
`;
export const HeroNewsItemDate = styled.div`
width: 20%;
margin-right: 20px ;
margin-right: 20px;
@media screen and (max-width: 768px) {
font-size: 12px;
}
@media screen and (max-width: 480px) {
font-size: 12px;
}
`
`;
export const HeroNewsItemContent = styled.div`
width: 80%;
width: 80%;
color: #000000;
@media screen and (max-width: 768px) {
@@ -108,49 +101,46 @@ export const HeroNewsItemContent = styled.div`
@media screen and (max-width: 480px) {
font-size: 12px;
}
`
`;
export const HeroColumn1 = styled.div`
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;
align-items: left;
display: flex;
flex-direction:column;
flex-direction: column;
justify-content: space-between;
`
`;
export const HeroColumn2 = styled.div`
export const HeroColumn2 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col2;
display: flex;
align-items:center;
flex-direction:column;
`
align-items: center;
flex-direction: column;
`;
export const TextWrapper = styled.div`
max-width: 540px ;
max-width: 540px;
padding-top: 0;
padding-bottom: 0;
`
export const HeroImgWrap = styled.div`
`;
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;
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;
export const HeroDownloadsImg = styled.img`
@@ -159,34 +149,36 @@ export const HeroDownloadsImg = styled.img`
margin-left: 0;
padding-right: 0;
margin-bottom: 10px;
`
`;
export const HeroLink = styled.a`
color: #fff;
text-decoration: none;
padding: 0.6rem 0rem 0rem 0rem;
cursor: pointer;
position:relative ;
color: #fff;
text-decoration: none;
padding: 0.6rem 0rem 0rem 0rem;
cursor: pointer;
position: relative;
&:before{
position: absolute;
margin: 0 auto;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
content: '';
opacity: .3;
-webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
}
&:before {
position: absolute;
margin: 0 auto;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
content: "";
opacity: 0.3;
-webkit-transform: scaleX(1);
transition-property:
opacity,
-webkit-transform;
transition-duration: 0.3s;
}
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`;
// color: #fff;
@@ -194,7 +186,7 @@ export const HeroLink = styled.a`
// padding: 0.1rem 0rem;
// height: 100%;
// cursor: pointer;
// position:relative ;
// position:relative ;
// &:before{
// position: absolute;
@@ -224,7 +216,7 @@ export const UDLLink = styled.a`
margin: 0 2px;
position: relative;
&:before{
&:before {
position: absolute;
margin: 0 auto;
top: 100%;
@@ -232,29 +224,28 @@ export const UDLLink = styled.a`
width: 100%;
height: 2px;
background-color: #000;
content: '';
opacity: .3;
content: "";
opacity: 0.3;
-webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
transition-property:
opacity,
-webkit-transform;
transition-duration: 0.3s;
}
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`
}
`;
export const HeroNewsTitle = styled.div`
export const HeroNewsTitle = styled.div`
margin-left: 0px;
color: #000000;
font-size: 16px;
font-weight: bold;
line-height: 16px;
margin-bottom: 36px;
margin-bottom: 36px;
@media screen and (max-width: 768px) {
font-size: 24px;
@@ -263,16 +254,16 @@ export const HeroNewsTitle = styled.div`
@media screen and (max-width: 480px) {
font-size: 18px;
}
`
`;
export const HeroCitationTitle = styled.div`
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;
margin-bottom: 10px;
margin-top: 36px;
@media screen and (max-width: 768px) {
font-size: 24px;
@@ -281,24 +272,17 @@ export const HeroCitationTitle = styled.div`
@media screen and (max-width: 480px) {
font-size: 18px;
}
`
`;
export const HeroNewsBlock = styled.div`
`
export const HeroNewsBlock = styled.div``;
export const HeroCitationBlock = styled.div`
font-size: 14px;
margin-bottom: 0px;
margin-top: 0px;
`
`;
export const HeroFollowBlock = styled.div`
@media screen and (max-width: 768px) {
font-size: 14px;
}
`
@media screen and (max-width: 768px) {
font-size: 14px;
}
`;

133
src/components/HeroSection/index.jsx
View File

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

127
src/components/Instructors/InstructorsElements.jsx
View File

@@ -1,69 +1,69 @@
import styled from "styled-components";
export const InstructorsContainer = styled.div`
export const InstructorsContainer = styled.div`
color: #fff;
/* background: #f9f9f9; */
background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};
@media screen and (max-width: 768px) {
padding: 100px 0;
}
`
`;
export const InstructorsWrapper = styled.div`
display: grid ;
display: grid;
z-index: 1;
width: 100% ;
width: 100%;
max-width: 1100px;
margin-right: auto;
margin-left: auto;
padding: 0 24px;
justify-content: center;
`
`;
export const InstructorsRow = styled.div`
display: grid;
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'`)};
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'`)};
@media screen and (max-width: 768px) {
grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
}
`
`;
export const InstructorsRow2 = styled.div`
display: grid;
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'`)};
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'`)};
@media screen and (max-width: 768px) {
grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
}
`
`;
export const Column1 = styled.div`
export const Column1 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col1;
`
`;
export const Column2 = styled.div`
export const Column2 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col2;
`
`;
export const TextWrapper = styled.div`
max-width: 540px ;
max-width: 540px;
padding-top: 0;
padding-bottom: 0;
`
`;
export const TopLine = styled.p`
export const TopLine = styled.p`
color: #773c23;
font-size: 16px;
line-height: 16px;
@@ -71,61 +71,56 @@ export const TopLine = styled.p`
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 16px;
`
export const Heading= styled.h1`
`;
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)
{
color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
@media screen and (max-width: 480px) {
font-size: 32px;
}
`
`;
export const Subtitle = styled.p`
export const Subtitle = styled.p`
max-width: 440px;
margin-bottom: 35px;
font-size: 18px;
line-height: 24px;
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
`
color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
`;
export const BtnWrap = styled.div`
display: flex;
justify-content: flex-start;
`
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`
export const Img = styled.img`
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`;
export const InstructorsContent = styled.div`
z-index: 3;
width: 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 ;
align-items: left;
list-style-position: inside;
@media screen and (max-width: 1050px) {
font-size: 12px;
@@ -134,7 +129,7 @@ export const InstructorsContent = styled.div`
@media screen and (max-width: 768px) {
font-size: 10px;
}
`
`;
export const InstructorsLink = styled.a`
text-decoration: none;
@@ -143,7 +138,7 @@ export const InstructorsLink = styled.a`
margin: 0 2px;
position: relative;
&:before{
&:before {
position: absolute;
margin: 0 auto;
top: 100%;
@@ -151,15 +146,17 @@ export const InstructorsLink = styled.a`
width: 100%;
height: 2px;
background-color: #555;
content: '';
opacity: .3;
content: "";
opacity: 0.3;
-webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
transition-property:
opacity,
-webkit-transform;
transition-duration: 0.3s;
}
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`
}
`;

583
src/components/Instructors/index.jsx
View File

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

158
src/components/Media/MediaElements.jsx
View File

@@ -1,57 +1,57 @@
import styled from "styled-components";
export const MediaContainer = styled.div`
export const MediaContainer = styled.div`
color: #fff;
/* background: #f9f9f9; */
background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
background: ${({ lightBg }) => (lightBg ? "#f9f9f9" : "#010606")};
@media screen and (max-width: 768px) {
padding: 100px 0;
}
`
`;
export const MediaWrapper = styled.div`
display: grid ;
display: grid;
z-index: 1;
width: 100% ;
width: 100%;
max-width: 1100px;
margin-right: auto;
margin-left: auto;
padding: 0 24px;
justify-content: center;
`
`;
export const MediaRow = styled.div`
display: grid;
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'`)};
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'`)};
@media screen and (max-width: 768px) {
grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
}
`
`;
export const Column1 = styled.div`
export const Column1 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col1;
`
`;
export const Column2 = styled.div`
export const Column2 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col2;
`
`;
export const TextWrapper = styled.div`
max-width: 540px ;
max-width: 540px;
padding-top: 0;
padding-bottom: 0;
`
`;
export const TopLine = styled.p`
export const TopLine = styled.p`
color: #57c6d1;
font-size: 16px;
line-height: 16px;
@@ -59,100 +59,92 @@ export const TopLine = styled.p`
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 16px;
`
export const Heading= styled.h1`
`;
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)
{
color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
@media screen and (max-width: 480px) {
font-size: 32px;
}
`
`;
export const Subtitle = styled.p`
export const Subtitle = styled.p`
max-width: 440px;
margin-bottom: 35px;
font-size: 18px;
line-height: 24px;
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
`
color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
`;
export const BtnWrap = styled.div`
display: flex;
justify-content: flex-start;
`
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`
export const Img = styled.img`
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;
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: 768px) {
font-size: 24px;
}
@media screen and (max-width: 480px) {
font-size: 18px;
}
`
@media screen and (max-width: 480px) {
font-size: 18px;
}
`;
export const MediaContent = styled.div`
z-index: 3;
width: 100% ;
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 ;
align-items: left;
list-style-position: inside;
@media screen and (max-width: 768px) {
font-size: 14px;
}
`;
`
export const MediaRow2 = styled.div`
display: grid;
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'`)};
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'`)};
@media screen and (max-width: 768px) {
grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
}
`
`;
export const VideoFrame=styled.div`
width: 560px ;
height: 315px ;
export const VideoFrame = styled.div`
width: 560px;
height: 315px;
@media screen and (max-width: 1050px) {
width: 280px ;
height: 157px ;
width: 280px;
height: 157px;
}
`
`;
export const MediaLink = styled.a`
text-decoration: none;
@@ -161,23 +153,25 @@ export const MediaLink = styled.a`
margin: 0 2px;
position: relative;
&:before{
&:before {
position: absolute;
margin: 0 auto;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background-color: #57c6d1;;
content: '';
opacity: .3;
background-color: #57c6d1;
content: "";
opacity: 0.3;
-webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
transition-property:
opacity,
-webkit-transform;
transition-duration: 0.3s;
}
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`
}
`;

105
src/components/Media/index.jsx
View File

@@ -1,5 +1,20 @@
import React from 'react'
import { ImgWrap, Img, MediaLink, MediaContainer, MediaContent, MediaWrapper, VideoFrame, MediaRow, MediaRow2, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './MediaElements'
import {
Column1,
Column2,
Heading,
Img,
ImgWrap,
MediaContainer,
MediaContent,
MediaLink,
MediaRow,
MediaRow2,
MediaWrapper,
Subtitle,
TextWrapper,
TopLine,
VideoFrame,
} from "./MediaElements";
// export const homeObjOne = {
// id: 'about',
@@ -19,26 +34,29 @@ import { ImgWrap, Img, MediaLink, MediaContainer, MediaContent, MediaWrapper, Vi
// darkText: false
// };
import img from '../../images/media.svg'
import img from "../../images/media.svg";
const MediaSection = () => {
return (
<>
<MediaContainer lightBg={false} id='Media'>
<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>
<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'/>
<Img src={img} alt="Car" />
</ImgWrap>
</Column2>
</MediaRow>
@@ -46,16 +64,29 @@ const MediaSection = () => {
<Column1>
Machine learning street talk podcast
<VideoFrame>
<iframe width="100%" height="100%"
src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&amp;controls=0"
title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&amp;controls=0"
title="YouTube video player"
frameborder="2"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</VideoFrame>
</Column1>
<Column2>
Deeper insights podcast
Deeper insights podcast
<VideoFrame>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0"
title="YouTube video player"
frameborder="2"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</VideoFrame>
</Column2>
</MediaRow>
@@ -64,9 +95,26 @@ const MediaSection = () => {
<TopLine>Reviews</TopLine>
<MediaContent>
<ul>
<li> Amazon <MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">reviews</MediaLink></li>
<li>Goodreads <MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">reviews </MediaLink></li>
<li>Book <MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">review</MediaLink> by Vishal V.</li>
<li>
{" "}
Amazon{" "}
<MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
reviews
</MediaLink>
</li>
<li>
Goodreads{" "}
<MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
reviews{" "}
</MediaLink>
</li>
<li>
Book{" "}
<MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
review
</MediaLink>{" "}
by Vishal V.
</li>
</ul>
</MediaContent>
</Column1>
@@ -74,17 +122,26 @@ const MediaSection = () => {
<TopLine>Interviews</TopLine>
<MediaContent>
<ul>
<li>Borealis AI <MediaLink href="https://www.borealisai.com/news/understanding-deep-learning/">interview</MediaLink></li>
<li>Shepherd ML book <MediaLink href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">recommendations</MediaLink></li>
<li>
Borealis AI{" "}
<MediaLink href="https://www.borealisai.com/news/understanding-deep-learning/">
interview
</MediaLink>
</li>
<li>
Shepherd ML book{" "}
<MediaLink href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">
recommendations
</MediaLink>
</li>
</ul>
</MediaContent>
</Column2>
</MediaRow2>
</MediaWrapper>
</MediaContainer>
</>
)
}
);
};
export default MediaSection
export default MediaSection;

150
src/components/More/MoreElements.jsx
View File

@@ -1,70 +1,70 @@
import styled from "styled-components";
export const MoreContainer = styled.div`
export const MoreContainer = styled.div`
color: #fff;
/* background: #f9f9f9; */
background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};
@media screen and (max-width: 768px) {
padding: 100px 0;
}
`
`;
export const MoreWrapper = styled.div`
display: grid ;
display: grid;
z-index: 1;
// height: 1050px ;
width: 100% ;
// 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;
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'`)};
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'`)};
@media screen and (max-width: 768px) {
grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
}
`
`;
export const MoreRow2 = styled.div`
display: grid;
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'`)};
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'`)};
@media screen and (max-width: 768px) {
grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
}
`
`;
export const Column1 = styled.div`
export const Column1 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col1;
`
`;
export const Column2 = styled.div`
export const Column2 = styled.div`
margin-bottom: 15px;
padding: 0 15px;
grid-area: col2;
`
`;
export const TextWrapper = styled.div`
max-width: 540px ;
max-width: 540px;
padding-top: 0;
padding-bottom: 0;
`
`;
export const TopLine = styled.p`
export const TopLine = styled.p`
color: #773c23;
font-size: 16px;
line-height: 16px;
@@ -72,91 +72,83 @@ export const TopLine = styled.p`
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 12px;
margin-top: 16px ;
`
export const Heading= styled.h1`
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)
{
color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
@media screen and (max-width: 480px) {
font-size: 32px;
}
`
`;
export const Subtitle = styled.p`
export const Subtitle = styled.p`
max-width: 440px;
margin-bottom: 35px;
font-size: 18px;
line-height: 24px;
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
`
color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
`;
export const BtnWrap = styled.div`
display: flex;
justify-content: flex-start;
`
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`
export const Img = styled.img`
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`;
export const MoreContent = styled.div`
z-index: 3;
width: 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 ;
align-items: left;
list-style-position: inside;
`
`;
export const MoreOuterList = styled.ul`
// list-style:none;
list-style-position: inside;
margin:0;
margin: 0;
@media screen and (max-width: 768px) {
font-size: 14px;
}
`
`;
export const MoreInnerList = styled.ul`
list-style-position: inside;
@media screen and (max-width: 768px) {
font-size: 12px;
}
`
`;
export const MoreInnerP = styled.p`
padding-left: 18px;
padding-bottom: 10px ;
padding-top: 3px ;
font-size:14px;
color: #fff
`
padding-bottom: 10px;
padding-top: 3px;
font-size: 14px;
color: #fff;
`;
export const MoreLink = styled.a`
text-decoration: none;
@@ -165,7 +157,7 @@ export const MoreLink = styled.a`
margin: 0 2px;
position: relative;
&:before{
&:before {
position: absolute;
margin: 0 auto;
top: 100%;
@@ -173,15 +165,17 @@ export const MoreLink = styled.a`
width: 100%;
height: 2px;
background-color: #555;
content: '';
opacity: .3;
content: "";
opacity: 0.3;
-webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform;
transition-duration: .3s;
transition-property:
opacity,
-webkit-transform;
transition-duration: 0.3s;
}
&:hover:before {
opacity: 1;
-webkit-transform: scaleX(1.05);
}
`
}
`;

655
src/components/More/index.jsx
View File

File diff suppressed because it is too large Load Diff

171
src/components/NavBar/NavbarElements.jsx
View File

@@ -1,119 +1,118 @@
import { Link as LinkS } from 'react-scroll';
import { Link as LinkR } from 'react-router-dom';
import styled from 'styled-components';
import { Link as LinkR } from "react-router-dom";
import { Link as LinkS } from "react-scroll";
import styled from "styled-components";
export const Nav = styled.nav`
background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')};
height: 100px;
margin-top: -100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
position: sticky;
top: 0;
z-index: 10;
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;
}
@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;
display: flex;
justify-content: space-between;
height: 100px;
z-index: 1;
width: 100%;
padding: 0 24px;
max-width: 1100px;
`;
export const NavLogo = styled(LinkR)`
color: #fff;
justify-self: flex-start;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
@media screen and (max-width: 768px) {
font-size: 1.0rem;
}
color: #fff;
justify-self: flex-start;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
@media screen and (max-width: 768px) {
font-size: 1rem;
}
`;
export const MobileIcon = styled.div`
display: none;
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;
}
@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;
display: flex;
align-items: center;
list-style: none;
text-align: center;
margin-right: -22px;
@media screen and (max-width: 768px) {
display: none;
}
@media screen and (max-width: 768px) {
display: none;
}
`;
export const NavItem = styled.li`
height: 80px;
height: 80px;
`;
export const NavBtn = styled.nav`
display: flex;
align-items: center;
display: flex;
align-items: center;
@media screen and (max-width: 768px) {
display: none;
}
@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;
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&.active {
border-bottom: 3px solid #57c6d1
}
&.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;
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;
}
`;

139
src/components/NavBar/index.jsx
View File

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

10
src/components/ScrollToTop.jsx
View File

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

47
src/components/Sidebar/SidebarElements.jsx
View File

@@ -1,12 +1,10 @@
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'
import { FaTimes } from "react-icons/fa";
import { Link as LinkR } from "react-router-dom";
import { Link as LinkS } from "react-scroll";
import styled from "styled-components";
export const SidebarContainer = styled.aside`
position:fixed ;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
@@ -16,18 +14,17 @@ export const SidebarContainer = styled.aside`
top: 0;
left: 0;
transition: 0.3s ease-in-out;
opacity: ${({ isOpen }) => (isOpen ? '100%' : '0')};
top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};
`
opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")};
top: ${({ isOpen }) => (isOpen ? "0" : "-100%")};
`;
export const CloseIcon = styled(FaTimes)`
color: #fff ;
color: #fff;
&:hover {
color: #01bf71;
transition: 0.2s ease-in-out;
}
`
`;
export const Icon = styled.div`
position: absolute;
@@ -37,25 +34,25 @@ export const Icon = styled.div`
font-size: 2rem;
cursor: pointer;
outline: none;
`
`;
export const SidebarWrapper = styled.div`
color: #ffffff;
`
`;
export const SidebarMenu = styled.ul`
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6,80px);
grid-template-rows: repeat(6, 80px);
text-align: center;
@media screen and (max-width: 480px){
grid-template-rows: repeat(6, 60px) ;
@media screen and (max-width: 480px) {
grid-template-rows: repeat(6, 60px);
}
`
`;
export const SidebarLink = styled(LinkS)`
display: flex ;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
@@ -70,14 +67,14 @@ export const SidebarLink = styled(LinkS)`
color: #01bf71;
transition: 0.2s ease-in-out;
}
`
`;
export const SideBtnWrap = styled.div`
export const SideBtnWrap = styled.div`
display: flex;
justify-content: center;
`
`;
export const SidebarRoute = styled(LinkR)`
export const SidebarRoute = styled(LinkR)`
border-radius: 50px;
background: #01bf71;
white-space: nowrap;
@@ -95,4 +92,4 @@ export const SidebarRoute = styled(LinkR)`
background: #fff;
color: #010606;
}
`
`;

61
src/components/Sidebar/index.jsx
View File

@@ -1,33 +1,38 @@
import React from 'react'
import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements'
import {
CloseIcon,
Icon,
SidebarContainer,
SidebarLink,
SidebarMenu,
SidebarWrapper,
} from "./SidebarElements";
const Sidebar = ({isOpen, toggle}) => {
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>
<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
export default Sidebar;

17
src/index.jsx
View File

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

44
src/pages/index.jsx
View File

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

9
src/pages/signin.jsx
View File

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

26
vite.config.js
View File

@@ -1,16 +1,16 @@
import react from '@vitejs/plugin-react-swc'
import { defineConfig } from 'vite'
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
preview: {
port: 3000,
},
build: {
outDir: 'build',
}
})
plugins: [react()],
server: {
port: 3000,
},
preview: {
port: 3000,
},
build: {
outDir: "build",
},
});