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

25
.eslintrc.cjs
View File

@@ -2,20 +2,17 @@ module.exports = {
root: true, root: true,
env: { browser: true, es2020: true }, env: { browser: true, es2020: true },
extends: [ extends: [
'eslint:recommended', "eslint:recommended",
'plugin:react/recommended', "plugin:react/recommended",
'plugin:react/jsx-runtime', "plugin:react/jsx-runtime",
'plugin:react-hooks/recommended', "plugin:react-hooks/recommended",
], ],
ignorePatterns: ['build', '.eslintrc.cjs'], ignorePatterns: ["build", ".eslintrc.cjs"],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, parserOptions: { ecmaVersion: "latest", sourceType: "module" },
settings: { react: { version: '18.2' } }, settings: { react: { version: "18.2" } },
plugins: ['react-refresh'], plugins: ["react-refresh"],
rules: { rules: {
'react/jsx-no-target-blank': 'off', "react/jsx-no-target-blank": "off",
'react-refresh/only-export-components': [ "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
'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, bracketSpacing: true,
printWidth: 100, printWidth: 100,
endOfLine: "lf", endOfLine: "lf",
plugins: [ plugins: [require.resolve("prettier-plugin-organize-imports")],
require.resolve("prettier-plugin-organize-imports"),
],
}; };
module.exports = prettierConfig; module.exports = prettierConfig;

2
index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />

6
src/App.css
View File

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

12
src/App.jsx
View File

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

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

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

@@ -1,9 +1,9 @@
import styled from 'styled-components' import { Link } from "react-router-dom";
import {Link} from 'react-router-dom' import styled from "styled-components";
export const FooterContainer = styled.footer` export const FooterContainer = styled.footer`
background-color: #101522; background-color: #101522;
` `;
export const FooterWrap = styled.div` export const FooterWrap = styled.div`
padding: 48x 24px; padding: 48x 24px;
@@ -13,23 +13,23 @@ export const FooterWrap = styled.div`
align-items: center; align-items: center;
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;
` `;
export const FooterLinksContainer = styled.div` export const FooterLinksContainer = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
@media screen and (max-width: 820px){ @media screen and (max-width: 820px) {
padding-top: 32px; padding-top: 32px;
} }
` `;
export const FooterLinksWrapper = styled.div` export const FooterLinksWrapper = styled.div`
display: flex; display: flex;
@media screen and (max-width: 820px){ @media screen and (max-width: 820px) {
flex-direction: column; flex-direction: column;
} }
` `;
export const FooterLinkItems = styled.div` export const FooterLinkItems = styled.div`
display: flex; display: flex;
@@ -41,17 +41,17 @@ export const FooterLinkItems = styled.div`
box-sizing: border-box; box-sizing: border-box;
color: #fff; color: #fff;
@media screen and (max-width: 420px){ @media screen and (max-width: 420px) {
margin: 0; margin: 0;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
} }
` `;
export const FooterLinkTitle = styled.h1` export const FooterLinkTitle = styled.h1`
font-size: 14px; font-size: 14px;
margin-bottom: 16px ; margin-bottom: 16px;
` `;
export const FooterLink = styled(Link)` export const FooterLink = styled(Link)`
color: #ffffff; color: #ffffff;
@@ -59,28 +59,28 @@ export const FooterLink = styled(Link)`
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 14px; font-size: 14px;
&:hover{ &:hover {
color: #01bf71; color: #01bf71;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
` `;
export const SocialMedia = styled.section` export const SocialMedia = styled.section`
max-width: 1000px; max-width: 1000px;
width: 100%; width: 100%;
` `;
export const SocialMediaWrap = styled.div` export const SocialMediaWrap = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
max-width: 1100px; max-width: 1100px;
margin: 20px auto 0 auto ; margin: 20px auto 0 auto;
@media screen and (max-width: 820px){ @media screen and (max-width: 820px) {
flex-direction: column; flex-direction: column;
} }
` `;
export const SocialAttrWrap = styled.div` export const SocialAttrWrap = styled.div`
color: #fff; color: #fff;
@@ -88,12 +88,12 @@ export const SocialAttrWrap = styled.div`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
max-width: 1100px; max-width: 1100px;
margin: 10px auto 0 auto ; margin: 10px auto 0 auto;
@media screen and (max-width: 820px){ @media screen and (max-width: 820px) {
flex-direction: column; flex-direction: column;
} }
` `;
export const SocialLogo = styled(Link)` export const SocialLogo = styled(Link)`
color: #fff; color: #fff;
@@ -108,30 +108,30 @@ export const SocialLogo = styled(Link)`
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 20px; font-size: 20px;
} }
` `;
export const WebsiteRights = styled.small` export const WebsiteRights = styled.small`
color: #fff ; color: #fff;
margin-bottom: 8px ; margin-bottom: 8px;
` `;
export const SocialIcons = styled.div` export const SocialIcons = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 60px; width: 60px;
margin-bottom: 8px ; margin-bottom: 8px;
` `;
export const SocialIconLink = styled.a` export const SocialIconLink = styled.a`
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
` `;
export const FooterImgWrap = styled.div` export const FooterImgWrap = styled.div`
max-width: 555px; max-width: 555px;
height: 100%; height: 100%;
` `;
export const FooterImg = styled.img` export const FooterImg = styled.img`
width: 100%; width: 100%;

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

@@ -1,14 +1,22 @@
import React from 'react' import { FaLinkedin } from "react-icons/fa";
import { FaLinkedin} from 'react-icons/fa' import { animateScroll as scroll } from "react-scroll";
import { FooterContainer, FooterWrap, FooterImg } from './FooterElements' import twitterImg from "../../images/square-x-twitter.svg";
import { SocialMedia, SocialMediaWrap, SocialIcons, SocialIconLink, WebsiteRights, SocialLogo } from './FooterElements' import {
import { animateScroll as scroll } from 'react-scroll' FooterContainer,
import twitterImg from '../../images/square-x-twitter.svg' FooterImg,
FooterWrap,
SocialIconLink,
SocialIcons,
SocialLogo,
SocialMedia,
SocialMediaWrap,
WebsiteRights,
} from "./FooterElements";
const Footer = () => { const Footer = () => {
const toggleHome = () => { const toggleHome = () => {
scroll.scrollToTop(); scroll.scrollToTop();
} };
return ( return (
<> <>
@@ -16,19 +24,44 @@ const Footer = () => {
<FooterWrap> <FooterWrap>
<SocialMedia> <SocialMedia>
<SocialMediaWrap> <SocialMediaWrap>
<SocialLogo to='/udlbook/' onClick={toggleHome}> <SocialLogo to="/udlbook/" onClick={toggleHome}>
Understanding Deep Learning Understanding Deep Learning
</SocialLogo> </SocialLogo>
<WebsiteRights>©{new Date().getFullYear()} Simon J.D. Prince</WebsiteRights>
<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> </WebsiteRights>
<SocialIcons> <SocialIcons>
<SocialIconLink href="https://twitter.com/SimonPrinceAI" target="_blank" aria-label="Twitter"> <SocialIconLink
<FooterImg src={twitterImg} alt="twitter"/> href="https://twitter.com/SimonPrinceAI"
target="_blank"
aria-label="Twitter"
>
<FooterImg src={twitterImg} alt="twitter" />
</SocialIconLink> </SocialIconLink>
<SocialIconLink href="https://www.linkedin.com/in/simon-prince-615bb9165/" target="_blank" aria-label="LinkedIn"> <SocialIconLink
<FaLinkedin/> href="https://www.linkedin.com/in/simon-prince-615bb9165/"
target="_blank"
aria-label="LinkedIn"
>
<FaLinkedin />
</SocialIconLink> </SocialIconLink>
</SocialIcons> </SocialIcons>
</SocialMediaWrap> </SocialMediaWrap>
@@ -36,7 +69,7 @@ const Footer = () => {
</FooterWrap> </FooterWrap>
</FooterContainer> </FooterContainer>
</> </>
) );
} };
export default Footer export default Footer;

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

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

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

@@ -1,10 +1,27 @@
import React from 'react' 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 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 HeroSection = () => {
const citation = ` const citation = `
@book{prince2023understanding, @book{prince2023understanding,
author = "Simon J.D. Prince", author = "Simon J.D. Prince",
@@ -12,7 +29,7 @@ const HeroSection = () => {
publisher = "The MIT Press", publisher = "The MIT Press",
year = 2023, year = 2023,
url = "http://udlbook.com"} url = "http://udlbook.com"}
` `;
return ( return (
<HeroContainer id="home"> <HeroContainer id="home">
@@ -24,42 +41,89 @@ const HeroSection = () => {
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>03/12/24</HeroNewsItemDate> <HeroNewsItemDate>03/12/24</HeroNewsItemDate>
<HeroNewsItemContent> Book now available again.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
Book now available again.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>02/21/24</HeroNewsItemDate> <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>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>02/15/24</HeroNewsItemDate> <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>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>01/29/24</HeroNewsItemDate> <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>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/26/23</HeroNewsItemDate> <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>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/19/23</HeroNewsItemDate> <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>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/06/23</HeroNewsItemDate> <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>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/05/23</HeroNewsItemDate> <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> </HeroNewsItem>
</HeroNewsBlock> </HeroNewsBlock>
<HeroCitationTitle>CITATION:</HeroCitationTitle> <HeroCitationTitle>CITATION:</HeroCitationTitle>
@@ -71,24 +135,39 @@ const HeroSection = () => {
</pre> </pre>
</HeroCitationBlock> </HeroCitationBlock>
<HeroFollowBlock> <HeroFollowBlock>
Follow me on <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or <UDLLink Follow me on{" "}
href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</UDLLink> for updates. <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or{" "}
<UDLLink href="https://www.linkedin.com/in/simon-prince-615bb9165/">
LinkedIn
</UDLLink>{" "}
for updates.
</HeroFollowBlock> </HeroFollowBlock>
</HeroColumn1> </HeroColumn1>
<HeroColumn2> <HeroColumn2>
<HeroImgWrap> <HeroImgWrap>
<Img src={img} alt="book cover"/> <Img src={img} alt="book cover" />
</HeroImgWrap> </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> <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v2.05/UnderstandingDeepLearning_04_18_24_C.pdf">
<HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/> Download full pdf (18 Apr 2024)
<HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">Buy the book</HeroLink> </HeroLink>
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">Answers to selected questions</HeroLink> <HeroDownloadsImg
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Errata</HeroLink> 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> </HeroColumn2>
</HeroRow> </HeroRow>
</HeroContent> </HeroContent>
</HeroContainer> </HeroContainer>
) );
} };
export default HeroSection export default HeroSection;

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

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

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

@@ -1,5 +1,19 @@
import React from 'react' import {
import { ImgWrap, Img, InstructorsLink, InstructorsContainer, InstructorsContent, InstructorsRow2, InstructorsWrapper, InstructorsRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './InstructorsElements' Column1,
Column2,
Heading,
Img,
ImgWrap,
InstructorsContainer,
InstructorsContent,
InstructorsLink,
InstructorsRow,
InstructorsRow2,
InstructorsWrapper,
Subtitle,
TextWrapper,
TopLine,
} from "./InstructorsElements";
// export const homeObjOne = { // export const homeObjOne = {
// id: 'about', // id: 'about',
@@ -19,56 +33,122 @@ import { ImgWrap, Img, InstructorsLink, InstructorsContainer, InstructorsContent
// darkText: false // darkText: false
// }; // };
import img from '../../images/instructor.svg' import img from "../../images/instructor.svg";
const InstructorsSection = () => { const InstructorsSection = () => {
return ( return (
<> <>
<InstructorsContainer lightBg={true} id='Instructors'> <InstructorsContainer lightBg={true} id="Instructors">
<InstructorsWrapper> <InstructorsWrapper>
<InstructorsRow imgStart={false}> <InstructorsRow imgStart={false}>
<Column1> <Column1>
<TextWrapper> <TextWrapper>
<TopLine>Instructors</TopLine> <TopLine>Instructors</TopLine>
<Heading lightText={false}>Resources for instructors</Heading> <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> </TextWrapper>
</Column1> </Column1>
<Column2> <Column2>
<ImgWrap> <ImgWrap>
<Img src={img} alt='Car'/> <Img src={img} alt="Car" />
</ImgWrap> </ImgWrap>
</Column2> </Column2>
</InstructorsRow> </InstructorsRow>
<InstructorsRow2> <InstructorsRow2>
<Column1> <Column1>
<TopLine>Register</TopLine> <TopLine>Register</TopLine>
<InstructorsLink href="https://mitpress.ublish.com/request?cri=15055">Register</InstructorsLink> with MIT Press for answer booklet. <InstructorsLink href="https://mitpress.ublish.com/request?cri=15055">
<InstructorsContent> Register
</InstructorsLink>{" "}
</InstructorsContent> with MIT Press for answer booklet.
<InstructorsContent></InstructorsContent>
<TopLine>Full slides</TopLine> <TopLine>Full slides</TopLine>
<InstructorsContent> <InstructorsContent>
Slides for 20 lecture undergraduate deep learning course: Slides for 20 lecture undergraduate deep learning course:
</InstructorsContent> </InstructorsContent>
<InstructorsContent> <InstructorsContent>
<ol> <ol>
<li>Introduction <InstructorsLink href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">PPTX</InstructorsLink></li> <li>
<li>Supervised Learning <InstructorsLink href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">PPTX</InstructorsLink></li> Introduction{" "}
<li>Shallow Neural Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">PPTX</InstructorsLink></li> <InstructorsLink href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">
<li>Deep Neural Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">PPTX</InstructorsLink></li> PPTX
<li>Loss Functions <InstructorsLink href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">PPTX</InstructorsLink></li> </InstructorsLink>
<li>Fitting Models <InstructorsLink href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">PPTX</InstructorsLink></li> </li>
<li>Computing Gradients <InstructorsLink href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">PPTX</InstructorsLink></li> <li>
<li>Initialization <InstructorsLink href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">PPTX</InstructorsLink></li> Supervised Learning{" "}
<li>Performance <InstructorsLink href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">PPTX</InstructorsLink></li> <InstructorsLink href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">
<li>Regularization <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">PPTX</InstructorsLink></li> PPTX
<li>Convolutional Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">PPTX</InstructorsLink></li> </InstructorsLink>
<li>Image Generation <InstructorsLink href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">PPTX</InstructorsLink></li> </li>
<li>Transformers and LLMs <InstructorsLink href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">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> </ol>
</InstructorsContent> </InstructorsContent>
</Column1> </Column1>
@@ -76,103 +156,366 @@ const InstructorsSection = () => {
<TopLine>Figures</TopLine> <TopLine>Figures</TopLine>
<InstructorsContent> <InstructorsContent>
<ol> <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>
{" "}
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 <li>
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> Supervised learning:{" "}
<li> Shallow neural networks: <InstructorsLink <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">PDF</InstructorsLink> / <InstructorsLink PDF
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> </InstructorsLink>{" "}
<li> Deep neural networks: <InstructorsLink /{" "}
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">PDF</InstructorsLink> / <InstructorsLink <InstructorsLink href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla">
href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa"> SVG</InstructorsLink> {" "}
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> <InstructorsLink href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
<li> Loss functions: <InstructorsLink PPTX
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">PDF </InstructorsLink>
</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ"> </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 SVG
</InstructorsLink> / <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 <InstructorsLink href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">PDF PPTX
</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK"> </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 SVG
</InstructorsLink> / <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 <InstructorsLink href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">PDF</InstructorsLink> / <InstructorsLink PPTX
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> </InstructorsLink>
<li> Measuring performance: <InstructorsLink </li>
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">PDF</InstructorsLink> / <InstructorsLink <li>
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 Gradients and initialization:{" "}
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">PDF <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">
</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0"> PDF
</InstructorsLink>{" "}
/{" "}
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs">
{" "}
SVG SVG
</InstructorsLink> / <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 <InstructorsLink href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap10PDF.zip">PDF</InstructorsLink> / <InstructorsLink PPTX
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> </InstructorsLink>
<li> Residual networks: <InstructorsLink </li>
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap11PDF.zip">PDF</InstructorsLink> / <InstructorsLink <li>
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 Measuring performance:{" "}
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"> <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">
SVG</InstructorsLink> / <InstructorsLink PDF
href="https://docs.google.com/presentation/d/1GVNvYWa0WJA6oKg89qZre-UZEhABfm0l/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li> </InstructorsLink>{" "}
<li> Graph neural networks: <InstructorsLink /{" "}
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap13PDF.zip">PDF</InstructorsLink> / <InstructorsLink <InstructorsLink href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx">
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 SVG
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap14PDF.zip">PDF</InstructorsLink> / <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> <InstructorsLink href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
<li> GANs: <InstructorsLink PPTX
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap15PDF.zip">PDF</InstructorsLink> / <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>
<li> Normalizing flows: <InstructorsLink <li>
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> Regularization:{" "}
<li> Variational autoencoders: <InstructorsLink <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap17PDF.zip">PDF</InstructorsLink> / <InstructorsLink PDF
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> </InstructorsLink>{" "}
<li> Diffusion models: <InstructorsLink /{" "}
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap18PDF.zip">PDF</InstructorsLink> / <InstructorsLink <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
href="https://drive.google.com/uc?export=download&id=1A-pIGl4PxjVMYOKAUG3aT4a8wD3G-q_r"> SVG</InstructorsLink> / 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"> <InstructorsLink href="https://docs.google.com/presentation/d/1x_ufIBtVPzWUvRieKMkpw5SdRjXWwdfR/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
PPTX</InstructorsLink></li> PPTX
<li> Deep reinforcement learning: <InstructorsLink </InstructorsLink>
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip">PDF</InstructorsLink> / <InstructorsLink </li>
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"> <li>
PPTX </InstructorsLink></li> {" "}
<li> Why does deep learning work?: <InstructorsLink Deep reinforcement learning:{" "}
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap20PDF.zip">PDF</InstructorsLink> / <InstructorsLink <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip">
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"> PDF
PPTX</InstructorsLink></li> </InstructorsLink>{" "}
<li> Deep learning and ethics: <InstructorsLink /{" "}
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap21PDF.zip">PDF</InstructorsLink> / <InstructorsLink <InstructorsLink href="https://drive.google.com/uc?export=download&id=1a5WUoF7jeSgwC_PVdckJi1Gny46fCqh0">
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> SVG
<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"> </InstructorsLink>{" "}
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> <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> </ol>
</InstructorsContent> </InstructorsContent>
<InstructorsLink href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">Instructions</InstructorsLink> for editing equations in figures. <InstructorsLink href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">
Instructions
<InstructorsContent> </InstructorsLink>{" "}
for editing equations in figures.
</InstructorsContent> <InstructorsContent></InstructorsContent>
</Column2> </Column2>
</InstructorsRow2> </InstructorsRow2>
</InstructorsWrapper> </InstructorsWrapper>
</InstructorsContainer> </InstructorsContainer>
</> </>
) );
} };
export default InstructorsSection export default InstructorsSection;

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

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

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

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

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

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

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

@@ -1,34 +1,58 @@
import React from 'react' import img from "../../images/more.svg";
import { ImgWrap, Img, MoreContainer, MoreLink, MoreRow2, MoreWrapper, MoreRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle, MoreOuterList, MoreInnerList, MoreInnerP} from './MoreElements' import {
import img from '../../images/more.svg' Column1,
Column2,
Heading,
Img,
ImgWrap,
MoreContainer,
MoreInnerList,
MoreInnerP,
MoreLink,
MoreOuterList,
MoreRow,
MoreRow2,
MoreWrapper,
Subtitle,
TextWrapper,
TopLine,
} from "./MoreElements";
const MoreSection = () => { const MoreSection = () => {
return ( return (
<> <>
<MoreContainer lightBg={true} id='More'> <MoreContainer lightBg={true} id="More">
<MoreWrapper> <MoreWrapper>
<MoreRow imgStart={false}> <MoreRow imgStart={false}>
<Column1> <Column1>
<TextWrapper> <TextWrapper>
<TopLine>More</TopLine> <TopLine>More</TopLine>
<Heading lightText={false}>Further reading</Heading> <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> <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> </TextWrapper>
</Column1> </Column1>
<Column2> <Column2>
<ImgWrap> <ImgWrap>
<Img src={img} alt='Car'/> <Img src={img} alt="Car" />
</ImgWrap> </ImgWrap>
</Column2> </Column2>
</MoreRow> </MoreRow>
<MoreRow2> <MoreRow2>
<Column1> <Column1>
<TopLine>Book</TopLine> <TopLine>Book</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="http://computervisionmodels.com" target="_blank" rel="noreferrer">Computer vision: models, learning, and inference</MoreLink> <MoreLink
href="http://computervisionmodels.com"
target="_blank"
rel="noreferrer"
>
Computer vision: models, learning, and inference
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> 2012 book published with CUP </li> <li> 2012 book published with CUP </li>
@@ -44,7 +68,13 @@ const MoreSection = () => {
<TopLine>Transformers & LLMs</TopLine> <TopLine>Transformers & LLMs</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/" target="_blank" rel="noreferrer">Intro to LLMs</MoreLink> <MoreLink
href="https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/"
target="_blank"
rel="noreferrer"
>
Intro to LLMs
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> What is an LLM?</li> <li> What is an LLM?</li>
@@ -57,7 +87,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/" target="_blank" rel="noreferrer">Transformers I</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/"
target="_blank"
rel="noreferrer"
>
Transformers I
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Dot-Product self-attention </li> <li> Dot-Product self-attention </li>
@@ -72,7 +108,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/" target="_blank" rel="noreferrer">Transformers II</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/"
target="_blank"
rel="noreferrer"
>
Transformers II
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Sinusoidal position embeddings </li> <li> Sinusoidal position embeddings </li>
@@ -93,7 +135,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/" target="_blank" rel="noreferrer">Transformers III</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/"
target="_blank"
rel="noreferrer"
>
Transformers III
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Tricks for training transformers </li> <li> Tricks for training transformers </li>
@@ -101,12 +149,21 @@ const MoreSection = () => {
<li> Removing layer normalization</li> <li> Removing layer normalization</li>
<li> Balancing residual dependencies </li> <li> Balancing residual dependencies </li>
<li> Reducing optimizer variance </li> <li> Reducing optimizer variance </li>
<li> How to train deeper transformers on small datasets </li> <li>
{" "}
How to train deeper transformers on small datasets{" "}
</li>
</MoreInnerList> </MoreInnerList>
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/" target="_blank" rel="noreferrer">Training and fine-tuning LLMs</MoreLink> <MoreLink
href="https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/"
target="_blank"
rel="noreferrer"
>
Training and fine-tuning LLMs
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Large language models </li> <li> Large language models </li>
@@ -118,7 +175,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/" target="_blank" rel="noreferrer">Speeding up inference in LLMs</MoreLink> <MoreLink
href="https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/"
target="_blank"
rel="noreferrer"
>
Speeding up inference in LLMs
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Problems with transformers</li> <li> Problems with transformers</li>
@@ -135,7 +198,13 @@ const MoreSection = () => {
<TopLine>Math for machine learning</TopLine> <TopLine>Math for machine learning</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing" target="_blank" rel="noreferrer">Linear algebra</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Linear algebra
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Vectors and matrices </li> <li> Vectors and matrices </li>
@@ -154,7 +223,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing" target="_blank" rel="noreferrer">Introduction to probability</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Introduction to probability
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Random variables </li> <li> Random variables </li>
@@ -168,7 +243,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing" target="_blank" rel="noreferrer">Probability distributions</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Probability distributions
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Bernouilli distribution </li> <li> Bernouilli distribution </li>
@@ -184,7 +265,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing" target="_blank" rel="noreferrer">Fitting probability distributions</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Fitting probability distributions
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Maximum likelihood </li> <li> Maximum likelihood </li>
@@ -196,7 +283,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing" target="_blank" rel="noreferrer">The normal distribution</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
The normal distribution
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Types of covariance matrix </li> <li> Types of covariance matrix </li>
@@ -214,7 +307,13 @@ const MoreSection = () => {
<TopLine>Optimization</TopLine> <TopLine>Optimization</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing" target="_blank" rel="noreferrer">Gradient-based optimization</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Gradient-based optimization
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Convexity </li> <li> Convexity </li>
@@ -227,7 +326,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/" target="_blank" rel="noreferrer">Bayesian optimization</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/"
target="_blank"
rel="noreferrer"
>
Bayesian optimization
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Gaussian processes </li> <li> Gaussian processes </li>
@@ -243,7 +348,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/" target="_blank" rel="noreferrer">SAT Solvers I</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/"
target="_blank"
rel="noreferrer"
>
SAT Solvers I
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Boolean logic and satisfiability </li> <li> Boolean logic and satisfiability </li>
@@ -258,7 +369,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/" target="_blank" rel="noreferrer">SAT Solvers II</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/"
target="_blank"
rel="noreferrer"
>
SAT Solvers II
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Conditioning </li> <li> Conditioning </li>
@@ -272,7 +389,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank" rel="noreferrer">SAT Solvers III</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/"
target="_blank"
rel="noreferrer"
>
SAT Solvers III
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Satisfiability vs. problem size </li> <li> Satisfiability vs. problem size </li>
@@ -286,7 +409,13 @@ const MoreSection = () => {
</li> </li>
</MoreOuterList> </MoreOuterList>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank" rel="noreferrer">SAT Solvers III</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/"
target="_blank"
rel="noreferrer"
>
SAT Solvers III
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Satisfiability vs. problem size </li> <li> Satisfiability vs. problem size </li>
@@ -302,7 +431,13 @@ const MoreSection = () => {
<TopLine>Computer vision</TopLine> <TopLine>Computer vision</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing" target="_blank" rel="noreferrer">Image Processing</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Image Processing
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Whitening </li> <li> Whitening </li>
@@ -314,7 +449,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing" target="_blank" rel="noreferrer">Pinhole camera</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Pinhole camera
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Pinhole camera model </li> <li> Pinhole camera model </li>
@@ -327,10 +468,20 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing" target="_blank" rel="noreferrer">Geometric transformations</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Geometric transformations
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Euclidean, similarity, affine, projective transformations </li> <li>
{" "}
Euclidean, similarity, affine, projective
transformations{" "}
</li>
<li> Fitting transformation models </li> <li> Fitting transformation models </li>
<li> Inference in transformation models </li> <li> Inference in transformation models </li>
<li> Three geometric problems for planes </li> <li> Three geometric problems for planes </li>
@@ -340,7 +491,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing" target="_blank" rel="noreferrer">Multiple cameras</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Multiple cameras
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Two view geometry </li> <li> Two view geometry </li>
@@ -357,7 +514,13 @@ const MoreSection = () => {
<TopLine>Reinforcement learning</TopLine> <TopLine>Reinforcement learning</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://arxiv.org/abs/2307.05979" target="_blank" rel="noreferrer">Transformers in RL</MoreLink> <MoreLink
href="https://arxiv.org/abs/2307.05979"
target="_blank"
rel="noreferrer"
>
Transformers in RL
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Challenges in RL</li> <li> Challenges in RL</li>
@@ -381,7 +544,13 @@ const MoreSection = () => {
<TopLine>AI Theory</TopLine> <TopLine>AI Theory</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://www.borealisai.com/research-blogs/gradient-flow/" target="_blank" rel="noreferrer">Gradient flow</MoreLink> <MoreLink
href="https://www.borealisai.com/research-blogs/gradient-flow/"
target="_blank"
rel="noreferrer"
>
Gradient flow
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Gradient flow </li> <li> Gradient flow </li>
@@ -393,7 +562,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/" target="_blank" rel="noreferrer">Neural tangent kernel</MoreLink> <MoreLink
href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/"
target="_blank"
rel="noreferrer"
>
Neural tangent kernel
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Infinite width neural networks </li> <li> Infinite width neural networks </li>
@@ -410,7 +585,13 @@ const MoreSection = () => {
<TopLine>Temporal models</TopLine> <TopLine>Temporal models</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing" target="_blank" rel="noreferrer">Temporal models</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Temporal models
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Kalman filter </li> <li> Kalman filter </li>
@@ -426,7 +607,13 @@ const MoreSection = () => {
<TopLine> Unsupervised learning</TopLine> <TopLine> Unsupervised learning</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing" target="_blank" rel="noreferrer">Modeling complex data densities</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Modeling complex data densities
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Hidden variables </li> <li> Hidden variables </li>
@@ -440,7 +627,13 @@ const MoreSection = () => {
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/" target="_blank" rel="noreferrer">Variational autoencoders</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/"
target="_blank"
rel="noreferrer"
>
Variational autoencoders
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Non-linear latent variable models </li> <li> Non-linear latent variable models </li>
@@ -453,7 +646,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://arxiv.org/abs/1908.09257" target="_blank" rel="noreferrer">Normalizing flows: introduction and review</MoreLink> <MoreLink
href="https://arxiv.org/abs/1908.09257"
target="_blank"
rel="noreferrer"
>
Normalizing flows: introduction and review
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Normalizing flows </li> <li> Normalizing flows </li>
@@ -471,7 +670,13 @@ const MoreSection = () => {
<TopLine>Graphical Models</TopLine> <TopLine>Graphical Models</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing" target="_blank" rel="noreferrer">Graphical models</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Graphical models
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Conditional independence </li> <li> Conditional independence </li>
@@ -484,7 +689,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing" target="_blank" rel="noreferrer">Models for chains and trees</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Models for chains and trees
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Hidden Markov models </li> <li> Hidden Markov models </li>
@@ -498,7 +709,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing" target="_blank" rel="noreferrer">Models for grids</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Models for grids
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Markov random fields </li> <li> Markov random fields </li>
@@ -515,7 +732,13 @@ const MoreSection = () => {
<TopLine>Machine learning</TopLine> <TopLine>Machine learning</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing" target="_blank" rel="noreferrer">Learning and inference</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Learning and inference
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Discriminative models </li> <li> Discriminative models </li>
@@ -526,7 +749,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing" target="_blank" rel="noreferrer">Regression models</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Regression models
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Linear regression </li> <li> Linear regression </li>
@@ -541,7 +770,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing" target="_blank" rel="noreferrer">Classification models</MoreLink> <MoreLink
href="https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Classification models
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Logistic regression </li> <li> Logistic regression </li>
@@ -555,7 +790,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-2-few-shot-learning-and-meta-learning-i/" target="_blank" rel="noreferrer">Few-shot learning and meta-learning I</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-2-few-shot-learning-and-meta-learning-i/"
target="_blank"
rel="noreferrer"
>
Few-shot learning and meta-learning I
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Meta-learning framework </li> <li> Meta-learning framework </li>
@@ -567,7 +808,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-3-few-shot-learning-and-meta-learning-ii/" target="_blank" rel="noreferrer">Few-shot learning and meta-learning II</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-3-few-shot-learning-and-meta-learning-ii/"
target="_blank"
rel="noreferrer"
>
Few-shot learning and meta-learning II
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> MAML & Reptile </li> <li> MAML & Reptile </li>
@@ -585,7 +832,13 @@ const MoreSection = () => {
<TopLine>Natural language processing</TopLine> <TopLine>Natural language processing</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/" target="_blank" rel="noreferrer">Neural natural language generation I</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/"
target="_blank"
rel="noreferrer"
>
Neural natural language generation I
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Encoder-decoder architecture </li> <li> Encoder-decoder architecture </li>
@@ -599,7 +852,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-7-neural-natural-language-generation-sequence-level-training/" target="_blank" rel="noreferrer">Neural natural language generation II</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-7-neural-natural-language-generation-sequence-level-training/"
target="_blank"
rel="noreferrer"
>
Neural natural language generation II
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Fine-tuning with reinforcement learning </li> <li> Fine-tuning with reinforcement learning </li>
@@ -614,7 +873,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/" target="_blank" rel="noreferrer">Parsing I</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/"
target="_blank"
rel="noreferrer"
>
Parsing I
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Parse trees </li> <li> Parse trees </li>
@@ -626,7 +891,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/" target="_blank" rel="noreferrer">Parsing II</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/"
target="_blank"
rel="noreferrer"
>
Parsing II
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Weighted context-free grammars </li> <li> Weighted context-free grammars </li>
@@ -638,7 +909,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/" target="_blank" rel="noreferrer">Parsing III</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/"
target="_blank"
rel="noreferrer"
>
Parsing III
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Probabilistic context-free grammars </li> <li> Probabilistic context-free grammars </li>
@@ -652,7 +929,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/understanding-xlnet/" target="_blank" rel="noreferrer">XLNet</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/understanding-xlnet/"
target="_blank"
rel="noreferrer"
>
XLNet
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Language modeling </li> <li> Language modeling </li>
@@ -665,12 +948,16 @@ const MoreSection = () => {
</li> </li>
</MoreOuterList> </MoreOuterList>
<TopLine>Responsible AI</TopLine> <TopLine>Responsible AI</TopLine>
<MoreOuterList> <MoreOuterList>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/" target="_blank" rel="noreferrer">Bias and fairness</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/"
target="_blank"
rel="noreferrer"
>
Bias and fairness
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Sources of bias</li> <li> Sources of bias</li>
@@ -683,7 +970,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/" target="_blank" rel="noreferrer">Explainability I</MoreLink> <MoreLink
href="https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/"
target="_blank"
rel="noreferrer"
>
Explainability I
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Taxonomy of XAI approaches</li> <li> Taxonomy of XAI approaches</li>
@@ -696,7 +989,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/" target="_blank" rel="noreferrer">Explainability II</MoreLink> <MoreLink
href="https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/"
target="_blank"
rel="noreferrer"
>
Explainability II
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Global feature importance</li> <li> Global feature importance</li>
@@ -710,7 +1009,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/" target="_blank" rel="noreferrer">Differential privacy I</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/"
target="_blank"
rel="noreferrer"
>
Differential privacy I
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Early approaches to privacy </li> <li> Early approaches to privacy </li>
@@ -724,7 +1029,13 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/" target="_blank" rel="noreferrer">Differential privacy II</MoreLink> <MoreLink
href="https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/"
target="_blank"
rel="noreferrer"
>
Differential privacy II
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Differential privacy and matchine learning</li> <li> Differential privacy and matchine learning</li>
@@ -742,9 +1053,7 @@ const MoreSection = () => {
</MoreWrapper> </MoreWrapper>
</MoreContainer> </MoreContainer>
</> </>
) );
} };
export default MoreSection
export default MoreSection;

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

@@ -1,9 +1,9 @@
import { Link as LinkS } from 'react-scroll'; import { Link as LinkR } from "react-router-dom";
import { Link as LinkR } from 'react-router-dom'; import { Link as LinkS } from "react-scroll";
import styled from 'styled-components'; import styled from "styled-components";
export const Nav = styled.nav` export const Nav = styled.nav`
background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')}; background: ${({ scrollNav }) => (scrollNav ? "#000" : "transparent")};
height: 100px; height: 100px;
margin-top: -100px; margin-top: -100px;
display: flex; display: flex;
@@ -40,9 +40,8 @@ export const NavLogo = styled(LinkR)`
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 1.0rem; font-size: 1rem;
} }
`; `;
export const MobileIcon = styled.div` export const MobileIcon = styled.div`
@@ -94,7 +93,7 @@ export const NavLinks = styled(LinkS)`
cursor: pointer; cursor: pointer;
&.active { &.active {
border-bottom: 3px solid #57c6d1 border-bottom: 3px solid #57c6d1;
} }
`; `;

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

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

10
src/components/ScrollToTop.jsx
View File

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

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

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

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

@@ -1,8 +1,13 @@
import React from 'react' import {
import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements' CloseIcon,
Icon,
SidebarContainer,
SidebarLink,
SidebarMenu,
SidebarWrapper,
} from "./SidebarElements";
const Sidebar = ({ isOpen, toggle }) => {
const Sidebar = ({isOpen, toggle}) => {
return ( return (
<> <>
<SidebarContainer isOpen={isOpen} onClick={toggle}> <SidebarContainer isOpen={isOpen} onClick={toggle}>
@@ -10,7 +15,7 @@ const Sidebar = ({isOpen, toggle}) => {
<CloseIcon /> <CloseIcon />
</Icon> </Icon>
<SidebarWrapper> <SidebarWrapper>
<SidebarMenu > <SidebarMenu>
<SidebarLink to="Notebooks" onClick={toggle}> <SidebarLink to="Notebooks" onClick={toggle}>
Notebooks Notebooks
</SidebarLink> </SidebarLink>
@@ -27,7 +32,7 @@ const Sidebar = ({isOpen, toggle}) => {
</SidebarWrapper> </SidebarWrapper>
</SidebarContainer> </SidebarContainer>
</> </>
) );
} };
export default Sidebar export default Sidebar;

13
src/index.jsx
View File

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

42
src/pages/index.jsx
View File

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

10
vite.config.js
View File

@@ -1,5 +1,5 @@
import react from '@vitejs/plugin-react-swc' import react from "@vitejs/plugin-react-swc";
import { defineConfig } from 'vite' import { defineConfig } from "vite";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
@@ -11,6 +11,6 @@ export default defineConfig({
port: 3000, port: 3000,
}, },
build: { build: {
outDir: 'build', outDir: "build",
} },
}) });