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

Merge pull request #198 from tomheaton/cleanup

Browse Source 
website code cleanup
This commit is contained in:
udlbook
2024-06-17 16:15:54 -04:00
committed by GitHub
parent 1cf21ea61a e4191beb79
commit 55dbe7e0c4
35 changed files with 6997 additions and 24140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.editorconfig Normal file
View File

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

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 },
],
}, },
} };

13
.gitignore vendored
View File

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

7
.prettierignore Normal file
View File

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

14
.prettierrc.cjs Normal file
View File

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

0
LICENSE.txt → LICENSE
View File

34
README.md Normal file
View File

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

6
index.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link

18841
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

37
package.json
View File

@@ -1,33 +1,36 @@
{ {
"name": "react-website-smooth-scroll", "name": "udlbook-website",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"homepage": "https://udlbook.github.io/udlbook", "homepage": "https://udlbook.github.io/udlbook",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"react": "^18.0.2",
"react-dom": "^18.0.2",
"react-icons": "^5.0.1",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-scroll": "^1.8.4",
"styled-components": "^5.3.3"
},
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"predeploy": "npm run build", "predeploy": "npm run build",
"deploy": "gh-pages -d build" "deploy": "gh-pages -d dist",
"clean": "rm -rf node_modules dist",
"format": "prettier --write ."
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-router-dom": "^6.23.1",
"react-scroll": "^1.8.4",
"styled-components": "^6.1.11"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react-swc": "^3.5.0", "@vitejs/plugin-react-swc": "^3.5.0",
"gh-pages": "^6.1.1",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1", "eslint-plugin-react": "^7.34.2",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-react-refresh": "^0.4.7",
"vite": "^5.2.0" "gh-pages": "^6.1.1",
"prettier": "^3.3.1",
"prettier-plugin-organize-imports": "^3.2.4",
"vite": "^5.2.12"
} }
} }

6
src/App.css
View File

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

15
src/App.jsx
View File

@@ -1,19 +1,12 @@
import './App.css'; import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom' import Home from "./pages";
import Home from './pages';
export default 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>
); );
} }
export default App;

20
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;
@@ -16,8 +15,9 @@ export const Button= styled(Link)`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
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")};
} }
` `;

60
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,24 @@ 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 +42,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 +60,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 +89,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;
@@ -105,33 +106,34 @@ export const SocialLogo = styled(Link)`
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: bold; font-weight: bold;
@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 = () => { export default function 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,5 @@ const Footer = () => {
</FooterWrap> </FooterWrap>
</FooterContainer> </FooterContainer>
</> </>
) );
} }
export default Footer

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

@@ -8,22 +8,20 @@ export const HeroContainer = styled.div`
padding: 0 0px; padding: 0 0px;
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,29 +68,30 @@ 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;
color: #000000; color: #000000;
font-size: 16px; font-size: 16px;
// line-height: 16px; /* line-height: 16px; */
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 +104,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 +113,31 @@ 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 +153,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 +170,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;
@@ -189,34 +185,6 @@ export const HeroLink = styled.a`
} }
`; `;
// color: #fff;
// text-decoration: none;
// padding: 0.1rem 0rem;
// height: 100%;
// cursor: pointer;
// position:relative ;
// &:before{
// position: absolute;
// margin: 0 auto;
// top: 100%;
// left: 0;
// width: 100%;
// height: 2px;
// background-color: #000;
// content: '';
// opacity: .3;
// -webkit-transform: scaleX(1);
// transition-property: opacity, -webkit-transform;
// transition-duration: .3s;
// }
// &:hover:before {
// opacity: 1;
// -webkit-transform: scaleX(1.05);
// }
// `;
export const UDLLink = styled.a` export const UDLLink = styled.a`
text-decoration: none; text-decoration: none;
color: #000; color: #000;
@@ -224,7 +192,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 +200,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 +230,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 +239,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 +248,18 @@ 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;
} }
` `;

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

@@ -1,18 +1,35 @@
import React from 'react' import img from "../../images/F23.prince.learning.turquoise.jpg";
import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent, UDLLink} from './HeroElements' import {
import img from '../../images/F23.prince.learning.turquoise.jpg' HeroCitationBlock,
HeroCitationTitle,
const HeroSection = () => { HeroColumn1,
HeroColumn2,
HeroContainer,
HeroContent,
HeroDownloadsImg,
HeroFollowBlock,
HeroImgWrap,
HeroLink,
HeroNewsBlock,
HeroNewsItem,
HeroNewsItemContent,
HeroNewsItemDate,
HeroNewsTitle,
HeroRow,
Img,
UDLLink,
} from "./HeroElements";
export default function HeroSection() {
const citation = ` const citation = `
@book{prince2023understanding, @book{prince2023understanding,
author = "Simon J.D. Prince", author = "Simon J.D. Prince",
title = "Understanding Deep Learning", title = "Understanding Deep Learning",
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">
@@ -21,84 +38,166 @@ const HeroSection = () => {
<HeroColumn1> <HeroColumn1>
<HeroNewsBlock> <HeroNewsBlock>
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle> <HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>05/22/24</HeroNewsItemDate> <HeroNewsItemDate>05/22/24</HeroNewsItemDate>
<HeroNewsItemContent> New <UDLLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/"> blog </UDLLink> about the applications of the neural tangent kernel.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
New{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/">
{" "}
blog{" "}
</UDLLink>{" "}
about the applications of the neural tangent kernel.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>05/10/24</HeroNewsItemDate> <HeroNewsItemDate>05/10/24</HeroNewsItemDate>
<HeroNewsItemContent> Positive <UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">review</UDLLink> in Nature Machine Intelligence.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
Positive{" "}
<UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">
review
</UDLLink>{" "}
in Nature Machine Intelligence.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
{/* <HeroNewsItem> {/* <HeroNewsItem>
<HeroNewsItemDate>03/12/24</HeroNewsItemDate> <HeroNewsItemDate>03/12/24</HeroNewsItemDate>
<HeroNewsItemContent>
{" "}
Book now available again.
</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItem>
<HeroNewsItemDate>02/21/24</HeroNewsItemDate>
<HeroNewsItemContent>
New blog about the{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">
Neural Tangent Kernel.
</UDLLink>
</HeroNewsItemContent>
<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>
</HeroNewsItem>
<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> <UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">Interview</UDLLink> with Borealis AI.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
<UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">
Interview
</UDLLink>{" "}
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>
<HeroCitationBlock> <HeroCitationBlock>
<pre> <pre>
<code> <code>
<React.Fragment>{citation}</React.Fragment> <>{citation}</>
</code> </code>
</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/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">Download full pdf (27 May 2024)</HeroLink> <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">
<HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/> Download full pdf (27 May 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

82
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,18 +111,18 @@ 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 +130,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 +139,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 +147,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);
} }
` `;

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

@@ -1,74 +1,135 @@
import React from 'react' import img from "../../images/instructor.svg";
import { ImgWrap, Img, InstructorsLink, InstructorsContainer, InstructorsContent, InstructorsRow2, InstructorsWrapper, InstructorsRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './InstructorsElements' import {
Column1,
Column2,
Heading,
Img,
ImgWrap,
InstructorsContainer,
InstructorsContent,
InstructorsLink,
InstructorsRow,
InstructorsRow2,
InstructorsWrapper,
Subtitle,
TextWrapper,
TopLine,
} from "./InstructorsElements";
// export const homeObjOne = { export default function InstructorsSection() {
// id: 'about',
// lightBg: false,
// lightText: true,
// lightTextDesc: true,
// topLine: 'Premium Bank',
// headline: 'Unlimited transactions with zero fees',
// description:
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
// buttonLabel: 'Get Started',
// imgStart: false,
// img: require('../../images/svg-1.svg').default,
// alt: 'Car',
// dark: true,
// primary: true,
// darkText: false
// };
import img from '../../images/instructor.svg'
const InstructorsSection = () => {
return ( 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 +137,364 @@ 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

110
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,54 @@ 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`
width: 560px;
height: 315px;
export const VideoFrame=styled.div`
width: 560px ;
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 +155,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);
} }
` `;

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

@@ -1,44 +1,43 @@
import React from 'react' import img from "../../images/media.svg";
import { ImgWrap, Img, MediaLink, MediaContainer, MediaContent, MediaWrapper, VideoFrame, MediaRow, MediaRow2, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './MediaElements' import {
Column1,
Column2,
Heading,
Img,
ImgWrap,
MediaContainer,
MediaContent,
MediaLink,
MediaRow,
MediaRow2,
MediaWrapper,
Subtitle,
TextWrapper,
TopLine,
VideoFrame,
} from "./MediaElements";
// export const homeObjOne = { export default function MediaSection() {
// id: 'about',
// lightBg: false,
// lightText: true,
// lightTextDesc: true,
// topLine: 'Premium Bank',
// headline: 'Unlimited transactions with zero fees',
// description:
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
// buttonLabel: 'Get Started',
// imgStart: false,
// img: require('../../images/svg-1.svg').default,
// alt: 'Car',
// dark: true,
// primary: true,
// darkText: false
// };
import img from '../../images/media.svg'
const MediaSection = () => {
return ( 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 +45,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,10 +76,59 @@ const MediaSection = () => {
<TopLine>Reviews</TopLine> <TopLine>Reviews</TopLine>
<MediaContent> <MediaContent>
<ul> <ul>
<li> Nature Machine Intelligence <MediaLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf"> review </MediaLink> by <MediaLink href="https://wang-axis.github.io/">Ge Wang</MediaLink></li> <li>
<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> Nature Machine Intelligence{" "}
<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> <MediaLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">
{" "}
review{" "}
</MediaLink>{" "}
by{" "}
<MediaLink href="https://wang-axis.github.io/">
Ge Wang
</MediaLink>
</li>
<li>
{" "}
Amazon{" "}
<MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
reviews
</MediaLink>
</li>
<li>
Goodreads{" "}
<MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
reviews{" "}
</MediaLink>
</li>
<li>
Book{" "}
<MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
review
</MediaLink>{" "}
by Vishal V.
</li>
<li>
{" "}
Amazon{" "}
<MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
reviews
</MediaLink>
</li>
<li>
Goodreads{" "}
<MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
reviews{" "}
</MediaLink>
</li>
<li>
Book{" "}
<MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
review
</MediaLink>{" "}
by Vishal V.
</li>
</ul> </ul>
</MediaContent> </MediaContent>
</Column1> </Column1>
@@ -75,17 +136,24 @@ 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

108
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,44 @@ 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 +159,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 +167,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);
} }
` `;

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

@@ -1,41 +1,65 @@
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";
export default function 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>
<li> Focused on probabilistic models </li> <li> Focused on probabilistic models </li>
<li> Pre-"deep learning" </li> <li> Pre-"deep learning" </li>
<li> Lots of ML content</li> <li> Lots of ML content </li>
<li> Individual chapters available below</li> <li> Individual chapters available below </li>
</MoreInnerList> </MoreInnerList>
</MoreInnerP> </MoreInnerP>
</li> </li>
@@ -44,20 +68,32 @@ 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>
<li> Pretraining</li> <li> Pretraining </li>
<li> Instruction fine-tuning</li> <li> Instruction fine-tuning </li>
<li> Reinforcement learning from human feedback</li> <li>Reinforcement learning from human feedback </li>
<li> Notable LLMs</li> <li> Notable LLMs </li>
<li> LLMs without training from scratch</li> <li> LLMs without training from scratch </li>
</MoreInnerList> </MoreInnerList>
</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>
@@ -285,11 +408,91 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
</MoreOuterList> </MoreOuterList>
{/* <li>
<MoreLink
href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/"
target="_blank"
rel="noreferrer"
>
SAT Solvers III
</MoreLink>
<MoreInnerP>
<MoreInnerList>
<li> Satisfiability vs. problem size </li>
<li> Factor graph representation </li>
<li> Max product / sum product for SAT </li>
<li> Survey propagation </li>
<li> SAT with non-binary variables </li>
<li> SMT solvers </li>
</MoreInnerList>
</MoreInnerP>
</li>
<TopLine>Computer vision</TopLine>
<MoreOuterList>
<li>
<MoreLink
href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Image Processing
</MoreLink>
<MoreInnerP>
<MoreInnerList>
<li> Whitening </li>
<li> Histogram equalization </li>
<li> Filtering </li>
<li> Edges and corners </li>
<li> Dimensionality reduction </li>
</MoreInnerList>
</MoreInnerP>
</li>
<li>
<MoreLink
href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Pinhole camera
</MoreLink>
<MoreInnerP>
<MoreInnerList>
<li> Pinhole camera model </li>
<li> Radial distortion </li>
<li> Homogeneous coordinates </li>
<li> Learning extrinsic parameters </li>
<li> Learning intrinsic parameters </li>
<li> Inferring three-dimensional world points </li>
</MoreInnerList>
</MoreInnerP>
</li>
<li>
<MoreLink
href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Geometric transformations
</MoreLink>
<MoreInnerP>
<MoreInnerList>
<li>
{" "}
Euclidean, similarity, affine, projective
transformations{" "}
</li> */}
<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>
@@ -305,7 +508,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>
@@ -317,7 +526,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>
@@ -330,10 +545,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>
@@ -343,7 +568,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>
@@ -360,7 +591,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>
@@ -384,7 +621,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>
@@ -396,7 +639,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>
@@ -409,7 +658,28 @@ const MoreSection = () => {
</MoreInnerP> </MoreInnerP>
</li> </li>
<li> <li>
<MoreLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/" target="_blank" rel="noreferrer">NTK applications</MoreLink> {/*
<MoreLink
href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing"
target="_blank"
rel="noreferrer"
>
Temporal models
</MoreLink>
<MoreInnerP>
<MoreInnerList>
<li> Kalman filter </li>
<li> Smoothing </li>
<li> Extended Kalman filter </li>
<li> Unscented Kalman filter </li>
<li> Particle filtering </li>*/}
<MoreLink
href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/"
target="_blank"
rel="noreferrer"
>
NTK applications
</MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> Trainability </li> <li> Trainability </li>
@@ -423,12 +693,16 @@ const MoreSection = () => {
</li> </li>
</MoreOuterList> </MoreOuterList>
<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>
@@ -442,7 +716,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>
@@ -455,7 +735,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>
@@ -473,7 +759,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>
@@ -486,7 +778,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>
@@ -500,7 +798,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>
@@ -517,7 +821,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>
@@ -528,7 +838,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>
@@ -543,7 +859,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>
@@ -557,7 +879,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>
@@ -569,7 +897,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>
@@ -587,7 +921,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>
@@ -601,7 +941,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>
@@ -616,7 +962,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>
@@ -628,7 +980,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>
@@ -640,7 +998,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>
@@ -654,7 +1018,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>
@@ -667,12 +1037,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>
@@ -685,7 +1059,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>
@@ -698,7 +1078,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>
@@ -712,7 +1098,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>
@@ -726,7 +1118,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>
@@ -744,9 +1142,5 @@ const MoreSection = () => {
</MoreWrapper> </MoreWrapper>
</MoreContainer> </MoreContainer>
</> </>
) );
} }
export default MoreSection

16
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;
@@ -39,10 +39,10 @@ export const NavLogo = styled(LinkR)`
margin-left: 24px; margin-left: 24px;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@media screen and (max-width: 768px) {
font-size: 1.0rem;
}
@media screen and (max-width: 768px) {
font-size: 1rem;
}
`; `;
export const MobileIcon = styled.div` export const MobileIcon = styled.div`
@@ -94,7 +94,7 @@ export const NavLinks = styled(LinkS)`
cursor: pointer; cursor: pointer;
&.active { &.active {
border-bottom: 3px solid #57c6d1 border-bottom: 3px solid #57c6d1;
} }
`; `;

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

@@ -1,32 +1,43 @@
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";
export default function NavBar({ toggle }) {
const [scrollNav, setScrollNav] = useState(false);
const Navbar = ( {toggle} ) => { useEffect(() => {
const [scrollNav, setScrollNav] = useState(false) const changeNav = () => {
if (window.scrollY >= 80) {
const changeNav = () =>{ setScrollNav(true);
if (window.scrollY >= 80){ } else {
setScrollNav(true) setScrollNav(false);
}else{
setScrollNav(false)
}
} }
};
useEffect(() =>{ window.addEventListener("scroll", changeNav);
window.addEventListener('scroll', changeNav)
}, []) return () => {
window.removeEventListener("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 +48,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>
@@ -55,5 +106,3 @@ const Navbar = ( {toggle} ) => {
</> </>
); );
} }
export default Navbar

17
src/components/Notebooks/NotebookElements.jsx
View File

@@ -1,6 +1,5 @@
import styled from "styled-components"; import styled from "styled-components";
export const NotebookContainer = styled.div` export const NotebookContainer = styled.div`
color: #fff; color: #fff;
/* background: #f9f9f9; */ /* background: #f9f9f9; */
@@ -12,10 +11,10 @@ export const NotebookContainer = styled.div`
` `
export const NotebookWrapper = styled.div` export const NotebookWrapper = styled.div`
display: grid ; display: grid;
z-index: 1; z-index: 1;
// height: 1250px ; /* height: 1250px; */
width: 100% ; width: 100%;
max-width: 1100px; max-width: 1100px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
@@ -38,6 +37,7 @@ export const Column1 = styled.p`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col1; grid-area: col1;
@media screen and (max-width: 1050px) { @media screen and (max-width: 1050px) {
font-size: 12px; font-size: 12px;
} }
@@ -51,6 +51,7 @@ export const Column2 = styled.p`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col2; grid-area: col2;
@media screen and (max-width: 1050px) { @media screen and (max-width: 1050px) {
font-size: 12px; font-size: 12px;
} }
@@ -61,7 +62,7 @@ export const Column2 = styled.p`
` `
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;
` `
@@ -77,20 +78,17 @@ export const TopLine = styled.p`
` `
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;
@@ -117,7 +115,6 @@ export const Img = styled.img`
padding-right: 0; padding-right: 0;
`; `;
export const NBLink = styled.a` export const NBLink = styled.a`
text-decoration: none; text-decoration: none;
color: #57c6d1;; color: #57c6d1;;

29
src/components/Notebooks/index.jsx
View File

@@ -1,29 +1,7 @@
import React from 'react'
import { NBLink, ImgWrap, Img, NotebookContainer, NotebookWrapper, NotebookRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './NotebookElements'
// export const homeObjOne = {
// id: 'about',
// lightBg: false,
// lightText: true,
// lightTextDesc: true,
// topLine: 'Premium Bank',
// headline: 'Unlimited transactions with zero fees',
// description:
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
// buttonLabel: 'Get Started',
// imgStart: false,
// img: require('../../images/svg-1.svg').default,
// alt: 'Car',
// dark: true,
// primary: true,
// darkText: false
// };
import img from '../../images/coding.svg' import img from '../../images/coding.svg'
import { Column1, Column2, Heading, Img, ImgWrap, NBLink, NotebookContainer, NotebookRow, NotebookWrapper, Subtitle, TextWrapper, TopLine } from './NotebookElements'
export default function NotebookSection() {
const NotebookSection = () => {
return ( return (
<> <>
<NotebookContainer lightBg={false} id='Notebooks'> <NotebookContainer lightBg={false} id='Notebooks'>
@@ -210,11 +188,8 @@ const NotebookSection = () => {
</ul> </ul>
</Column2> </Column2>
</NotebookRow> </NotebookRow>
</NotebookWrapper> </NotebookWrapper>
</NotebookContainer> </NotebookContainer>
</> </>
) )
} }
export default NotebookSection

11
src/components/ScrollToTop.jsx
View File

@@ -1,11 +1,12 @@
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, { behavior: "smooth" });
}, [pathname]) }, [pathname]);
return null; return null;
} }

44
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,18 @@ 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 +35,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 +68,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 +93,4 @@ export const SidebarRoute = styled(LinkR)`
background: #fff; background: #fff;
color: #010606; color: #010606;
} }
` `;

19
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";
export default function 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,5 @@ const Sidebar = ({isOpen, toggle}) => {
</SidebarWrapper> </SidebarWrapper>
</SidebarContainer> </SidebarContainer>
</> </>
) );
} }
export default Sidebar

14
src/index.jsx
View File

@@ -1,10 +1,10 @@
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";
import "./styles/globals.css";
ReactDOM.createRoot(document.getElementById('root')).render( ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>,
) );

46
src/pages/index.jsx
View File

@@ -1,34 +1,30 @@
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 = () => { export default function 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

11
src/pages/signin.jsx
View File

@@ -1,14 +1,11 @@
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 = () => { export default function SigninPage() {
return ( return (
<> <>
<ScrollToTop /> <ScrollToTop />
<SignIn /> <SignIn />
</> </>
) );
} }
export default SigninPage;

6
src/styles/globals.css Executable file
View File

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

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({
@@ -10,7 +10,5 @@ export default defineConfig({
preview: { preview: {
port: 3000, port: 3000,
}, },
build: { base: "/udlbook",
outDir: 'build', });
}
})