setup gh-pages
23
.gitignore
vendored
Executable file
@@ -0,0 +1,23 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
70
README.md
Executable file
@@ -0,0 +1,70 @@
|
|||||||
|
# Getting Started with Create React App
|
||||||
|
|
||||||
|
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||||
|
|
||||||
|
## Available Scripts
|
||||||
|
|
||||||
|
In the project directory, you can run:
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
|
|
||||||
|
Runs the app in the development mode.\
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||||
|
|
||||||
|
The page will reload if you make edits.\
|
||||||
|
You will also see any lint errors in the console.
|
||||||
|
|
||||||
|
### `npm test`
|
||||||
|
|
||||||
|
Launches the test runner in the interactive watch mode.\
|
||||||
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||||
|
|
||||||
|
### `npm run build`
|
||||||
|
|
||||||
|
Builds the app for production to the `build` folder.\
|
||||||
|
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||||
|
|
||||||
|
The build is minified and the filenames include the hashes.\
|
||||||
|
Your app is ready to be deployed!
|
||||||
|
|
||||||
|
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||||
|
|
||||||
|
### `npm run eject`
|
||||||
|
|
||||||
|
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||||
|
|
||||||
|
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||||
|
|
||||||
|
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||||
|
|
||||||
|
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||||
|
|
||||||
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||||
|
|
||||||
|
### Code Splitting
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||||
|
|
||||||
|
### Analyzing the Bundle Size
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||||
|
|
||||||
|
### Making a Progressive Web App
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||||
|
|
||||||
|
### Advanced Configuration
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||||
|
|
||||||
|
### Deployment
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||||
|
|
||||||
|
### `npm run build` fails to minify
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||||
21722
package-lock.json
generated
Executable file
50
package.json
Executable file
@@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "react-website-smooth-scroll",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"homepage": "https://udlbook.github.io/udlbook/",
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||||
|
"@testing-library/jest-dom": "^5.15.1",
|
||||||
|
"@testing-library/react": "^11.2.7",
|
||||||
|
"@testing-library/user-event": "^12.8.3",
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-dom": "^17.0.2",
|
||||||
|
"react-icons": "^5.0.1",
|
||||||
|
"react-router-dom": "^6.0.2",
|
||||||
|
"react-scripts": "4.0.3",
|
||||||
|
"react-scroll": "^1.8.4",
|
||||||
|
"styled-components": "^5.3.3",
|
||||||
|
"url-loader": "^4.1.1",
|
||||||
|
"web-vitals": "^1.1.2"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts --openssl-legacy-provider start",
|
||||||
|
"build": "react-scripts --openssl-legacy-provider build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject",
|
||||||
|
"predeploy": "npm run build",
|
||||||
|
"deploy": "gh-pages -d build"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"gh-pages": "^6.1.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Executable file
|
After Width: | Height: | Size: 3.8 KiB |
46
public/index.html
Executable file
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/logo192.png
Executable file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/logo512.png
Executable file
|
After Width: | Height: | Size: 9.4 KiB |
25
public/manifest.json
Executable file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
3
public/robots.txt
Executable file
@@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
6
src/App.css
Executable file
@@ -0,0 +1,6 @@
|
|||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 ;
|
||||||
|
font-family: 'Encode Sans Expanded', sans-serif;
|
||||||
|
}
|
||||||
19
src/App.js
Executable file
@@ -0,0 +1,19 @@
|
|||||||
|
import './App.css';
|
||||||
|
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
|
||||||
|
import Home from './pages';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<Routes>
|
||||||
|
<Route exact path="/" element ={<Home/>} />
|
||||||
|
</Routes>
|
||||||
|
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
23
src/components/ButtonElement.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import styled from 'styled-components'
|
||||||
|
import {Link} from 'react-scroll'
|
||||||
|
|
||||||
|
|
||||||
|
export const Button= styled(Link)`
|
||||||
|
border-radius: 50px;
|
||||||
|
background: ${({primary}) => (primary ? '#01BF71' : '#010606')};
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: ${({big}) => (big? ' 14px 48px': '12px 30px')};
|
||||||
|
color: ${({dark}) => (dark ? '#010106': '#fff')};
|
||||||
|
font-size: $${({fontBig}) => (fontBig ? '20px' : '16px')};
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
&:hover {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
background: ${({primary}) => (primary ? '#fff' : '#01BF71')}
|
||||||
|
}
|
||||||
|
`
|
||||||
139
src/components/Footer/FooterElements.js
Executable file
@@ -0,0 +1,139 @@
|
|||||||
|
import styled from 'styled-components'
|
||||||
|
import {Link} from 'react-router-dom'
|
||||||
|
|
||||||
|
export const FooterContainer = styled.footer`
|
||||||
|
background-color: #101522;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const FooterWrap = styled.div`
|
||||||
|
padding: 48x 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const FooterLinksContainer = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
@media screen and (max-width: 820px){
|
||||||
|
padding-top: 32px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const FooterLinksWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
@media screen and (max-width: 820px){
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const FooterLinkItems = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin: 16px;
|
||||||
|
text-align: left;
|
||||||
|
width: 160px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
@media screen and (max-width: 420px){
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const FooterLinkTitle = styled.h1`
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 16px ;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const FooterLink = styled(Link)`
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: #01bf71;
|
||||||
|
transition: 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SocialMedia = styled.section`
|
||||||
|
max-width: 1000px;
|
||||||
|
width: 100%;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SocialMediaWrap = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 20px auto 0 auto ;
|
||||||
|
|
||||||
|
@media screen and (max-width: 820px){
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SocialAttrWrap = styled.div`
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 10px auto 0 auto ;
|
||||||
|
|
||||||
|
@media screen and (max-width: 820px){
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SocialLogo = styled(Link)`
|
||||||
|
color: #fff;
|
||||||
|
justify-self: start;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const WebsiteRights = styled.small`
|
||||||
|
color: #fff ;
|
||||||
|
margin-bottom: 8px ;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SocialIcons = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 60px;
|
||||||
|
margin-bottom: 8px ;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SocialIconLink = styled.a`
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24px;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const FooterImgWrap = styled.div`
|
||||||
|
max-width: 555px;
|
||||||
|
height: 100%;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const FooterImg = styled.img`
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding-right: 0;
|
||||||
|
`;
|
||||||
42
src/components/Footer/index.js
Executable file
@@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { FaLinkedin} from 'react-icons/fa'
|
||||||
|
import { FooterContainer, FooterWrap, FooterImg } from './FooterElements'
|
||||||
|
import { SocialMedia, SocialMediaWrap, SocialIcons, SocialIconLink, WebsiteRights, SocialLogo } from './FooterElements'
|
||||||
|
import { animateScroll as scroll } from 'react-scroll'
|
||||||
|
import twitterImg from '../../images/square-x-twitter.svg'
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
const toggleHome = () => {
|
||||||
|
scroll.scrollToTop();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FooterContainer>
|
||||||
|
<FooterWrap>
|
||||||
|
<SocialMedia>
|
||||||
|
<SocialMediaWrap>
|
||||||
|
<SocialLogo to='/' onClick={toggleHome}>
|
||||||
|
Understanding Deep Learning
|
||||||
|
</SocialLogo>
|
||||||
|
<WebsiteRights>©{new Date().getFullYear()} Simon J.D. Prince</WebsiteRights>
|
||||||
|
<WebsiteRights>
|
||||||
|
Images by StorySet on FreePik: <a href="https://www.freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933"> [1] </a> <a href="https://www.freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c">[2]</a> <a href="https://www.freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153"> [3]</a> <a href="https://www.freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649"> [4]</a>
|
||||||
|
</WebsiteRights>
|
||||||
|
<SocialIcons>
|
||||||
|
<SocialIconLink href="https://twitter.com/SimonPrinceAI" target="_blank" aria-label="Twitter">
|
||||||
|
<FooterImg src={twitterImg} alt="twitter"/>
|
||||||
|
</SocialIconLink>
|
||||||
|
<SocialIconLink href="https://www.linkedin.com/in/simon-prince-615bb9165/" target="_blank" aria-label="LinkedIn">
|
||||||
|
<FaLinkedin/>
|
||||||
|
</SocialIconLink>
|
||||||
|
</SocialIcons>
|
||||||
|
</SocialMediaWrap>
|
||||||
|
</SocialMedia>
|
||||||
|
</FooterWrap>
|
||||||
|
</FooterContainer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer
|
||||||
242
src/components/HeroSection/HeroElements.js
Executable file
@@ -0,0 +1,242 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
export const HeroContainer = styled.div`
|
||||||
|
background: #57c6d1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 0px;
|
||||||
|
position: static;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const HeroContent = styled.div`
|
||||||
|
z-index: 3;
|
||||||
|
width: 100% ;
|
||||||
|
max-width: 1100px;
|
||||||
|
position: static;
|
||||||
|
padding: 8px 24px;
|
||||||
|
margin: 80px 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center ;
|
||||||
|
`
|
||||||
|
export const HeroH1 = styled.h1`
|
||||||
|
color: #fff;
|
||||||
|
font-size: 48px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
export const HeroP = styled.p`
|
||||||
|
margin-top: 24px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24px ;
|
||||||
|
text-align: center ;
|
||||||
|
max-width: 600px ;
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const HeroBtnWrapper = styled.div`
|
||||||
|
margin-top: 32px ;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column ;
|
||||||
|
align-items: center ;
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const HeroRow = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(auto, 1fr);
|
||||||
|
align-items: top;
|
||||||
|
grid-template-areas: 'col1 col2' };
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
grid-template-areas: 'col2' 'col1';
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const HeroNewsItem = styled.div`
|
||||||
|
margin-left: 4px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
// line-height: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
`
|
||||||
|
export const HeroNewsItemDate = styled.div`
|
||||||
|
width: 20%;
|
||||||
|
font-size: 16px ;
|
||||||
|
margin-right: 20px ;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const HeroNewsItemContent = styled.div`
|
||||||
|
width: 80%;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px ;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const HeroColumn1 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-top: 60px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col1;
|
||||||
|
align-items:left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction:column;
|
||||||
|
justify-content: space-between;
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const HeroColumn2 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col2;
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
flex-direction:column;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TextWrapper = styled.div`
|
||||||
|
max-width: 540px ;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
`
|
||||||
|
export const HeroImgWrap = styled.div`
|
||||||
|
max-width: 555px;
|
||||||
|
height: 100%;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Img = styled.img`
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding-right: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const HeroDownloadsImg = styled.img`
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const HeroLink = styled.a`
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.1rem 0rem;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #000
|
||||||
|
border-bottom: 3px solid #01bf71;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
export const HeroNewsTitle = styled.div`
|
||||||
|
margin-left: 0px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const HeroCitationTitle = styled.div`
|
||||||
|
margin-left: 0px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top:36px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const HeroNewsBlock = styled.div`
|
||||||
|
|
||||||
|
`
|
||||||
|
export const HeroCitationBlock = styled.div`
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-top: 0px;
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const HeroFollowBlock = styled.div`
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
`
|
||||||
91
src/components/HeroSection/index.js
Executable file
@@ -0,0 +1,91 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent} from './HeroElements'
|
||||||
|
import img from '../../images/F23.prince.learning.turquoise.jpg'
|
||||||
|
|
||||||
|
const HeroSection = () => {
|
||||||
|
|
||||||
|
|
||||||
|
const citation = `
|
||||||
|
@book{prince2023understanding,
|
||||||
|
author = "Simon J.D. Prince",
|
||||||
|
title = "Understanding Deep Learning",
|
||||||
|
publisher = "The MIT Press",
|
||||||
|
year = 2023,
|
||||||
|
url = "http://udlbook.com"}
|
||||||
|
`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HeroContainer id="home">
|
||||||
|
<HeroContent>
|
||||||
|
<HeroRow>
|
||||||
|
<HeroColumn1>
|
||||||
|
<HeroNewsBlock>
|
||||||
|
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
|
||||||
|
|
||||||
|
<HeroNewsItem>
|
||||||
|
<HeroNewsItemDate>03/12/24</HeroNewsItemDate>
|
||||||
|
<HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
|
||||||
|
</HeroNewsItem>
|
||||||
|
|
||||||
|
|
||||||
|
<HeroNewsItem>
|
||||||
|
<HeroNewsItemDate>02/15/24</HeroNewsItemDate>
|
||||||
|
<HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
|
||||||
|
</HeroNewsItem>
|
||||||
|
|
||||||
|
|
||||||
|
<HeroNewsItem>
|
||||||
|
<HeroNewsItemDate>01/29/24</HeroNewsItemDate>
|
||||||
|
<HeroNewsItemContent> New blog about <a href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </a> published.</HeroNewsItemContent>
|
||||||
|
</HeroNewsItem>
|
||||||
|
|
||||||
|
<HeroNewsItem>
|
||||||
|
<HeroNewsItemDate>12/26/23</HeroNewsItemDate>
|
||||||
|
<HeroNewsItemContent> Machine Learning Street Talk <a href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </a> discussing book.</HeroNewsItemContent>
|
||||||
|
</HeroNewsItem>
|
||||||
|
|
||||||
|
<HeroNewsItem>
|
||||||
|
<HeroNewsItemDate>12/19/23</HeroNewsItemDate>
|
||||||
|
<HeroNewsItemContent>Deeper Insights <a href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</a> discussing book.</HeroNewsItemContent>
|
||||||
|
</HeroNewsItem>
|
||||||
|
|
||||||
|
<HeroNewsItem>
|
||||||
|
<HeroNewsItemDate>12/06/23</HeroNewsItemDate>
|
||||||
|
<HeroNewsItemContent> I did an <a href="https://www.borealisai.com/news/understanding-deep-learning/">interview</a> discussing the book with Borealis AI.</HeroNewsItemContent>
|
||||||
|
</HeroNewsItem>
|
||||||
|
|
||||||
|
<HeroNewsItem>
|
||||||
|
<HeroNewsItemDate>12/05/23</HeroNewsItemDate>
|
||||||
|
<HeroNewsItemContent> Book released by <a href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</a>.</HeroNewsItemContent>
|
||||||
|
</HeroNewsItem>
|
||||||
|
</HeroNewsBlock>
|
||||||
|
<HeroFollowBlock>
|
||||||
|
Follow me on <a href="https://twitter.com/SimonPrinceAI">Twitter</a> or <a
|
||||||
|
href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</a> for updates.
|
||||||
|
</HeroFollowBlock>
|
||||||
|
<HeroCitationTitle>CITATION:</HeroCitationTitle>
|
||||||
|
<HeroCitationBlock>
|
||||||
|
<pre>
|
||||||
|
<code>
|
||||||
|
<React.Fragment>{citation}</React.Fragment>
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</HeroCitationBlock>
|
||||||
|
</HeroColumn1>
|
||||||
|
<HeroColumn2>
|
||||||
|
<HeroImgWrap>
|
||||||
|
<Img src={img} alt="book cover"/>
|
||||||
|
</HeroImgWrap>
|
||||||
|
<HeroLink href="https://github.com/udlbook/udlbook/releases/download/v2.03/UnderstandingDeepLearning_02_26_24_C.pdf">Download full pdf</HeroLink>
|
||||||
|
<HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/>
|
||||||
|
<HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">Buy the book</HeroLink>
|
||||||
|
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">Answers to selected questions</HeroLink>
|
||||||
|
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Find/Report Errata</HeroLink>
|
||||||
|
</HeroColumn2>
|
||||||
|
</HeroRow>
|
||||||
|
</HeroContent>
|
||||||
|
</HeroContainer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HeroSection
|
||||||
130
src/components/Instructors/InstructorsElements.js
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
|
||||||
|
export const InstructorsContainer = styled.div`
|
||||||
|
color: #fff;
|
||||||
|
/* background: #f9f9f9; */
|
||||||
|
background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const InstructorsWrapper = styled.div`
|
||||||
|
display: grid ;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100% ;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const InstructorsRow = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(auto, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const InstructorsRow2 = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(auto, 1fr);
|
||||||
|
align-items: top;
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const Column1 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col1;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Column2 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col2;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TextWrapper = styled.div`
|
||||||
|
max-width: 540px ;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TopLine = styled.p`
|
||||||
|
color: #773c23;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1.4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Heading= styled.h1`
|
||||||
|
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 600;
|
||||||
|
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px)
|
||||||
|
{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const Subtitle = styled.p`
|
||||||
|
max-width: 440px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
export const BtnWrap = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const ImgWrap = styled.div`
|
||||||
|
max-width: 555px;
|
||||||
|
height: 100%;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Img = styled.img`
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding-right: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
export const InstructorsContent = styled.div`
|
||||||
|
z-index: 3;
|
||||||
|
width: 100% ;
|
||||||
|
max-width: 1100px;
|
||||||
|
position: static;
|
||||||
|
padding: 8px 0px;
|
||||||
|
margin: 10px 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: left ;
|
||||||
|
list-style-position: inside;
|
||||||
|
`
|
||||||
178
src/components/Instructors/index.js
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { ImgWrap, Img, InstructorsContainer, InstructorsContent, InstructorsRow2, InstructorsWrapper, InstructorsRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './InstructorsElements'
|
||||||
|
|
||||||
|
// export const homeObjOne = {
|
||||||
|
// id: 'about',
|
||||||
|
// lightBg: false,
|
||||||
|
// lightText: true,
|
||||||
|
// lightTextDesc: true,
|
||||||
|
// topLine: 'Premium Bank',
|
||||||
|
// headline: 'Unlimited transactions with zero fees',
|
||||||
|
// description:
|
||||||
|
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
|
||||||
|
// buttonLabel: 'Get Started',
|
||||||
|
// imgStart: false,
|
||||||
|
// img: require('../../images/svg-1.svg').default,
|
||||||
|
// alt: 'Car',
|
||||||
|
// dark: true,
|
||||||
|
// primary: true,
|
||||||
|
// darkText: false
|
||||||
|
// };
|
||||||
|
|
||||||
|
import img from '../../images/instructor.svg'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const InstructorsSection = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<InstructorsContainer lightBg={true} id='Instructors'>
|
||||||
|
<InstructorsWrapper>
|
||||||
|
<InstructorsRow imgStart={false}>
|
||||||
|
<Column1>
|
||||||
|
<TextWrapper>
|
||||||
|
<TopLine>Instructors</TopLine>
|
||||||
|
<Heading lightText={false}>Resources for instructors</Heading>
|
||||||
|
<Subtitle darkText={true}>All the figures in vector and image formats, full slides for first twelve chapters, instructor answer booklet</Subtitle>
|
||||||
|
</TextWrapper>
|
||||||
|
</Column1>
|
||||||
|
<Column2>
|
||||||
|
<ImgWrap>
|
||||||
|
<Img src={img} alt='Car'/>
|
||||||
|
</ImgWrap>
|
||||||
|
</Column2>
|
||||||
|
</InstructorsRow>
|
||||||
|
<InstructorsRow2>
|
||||||
|
<Column1>
|
||||||
|
<TopLine>Register</TopLine>
|
||||||
|
<a href="https://mitpress.ublish.com/request?cri=15055">Register</a> with MIT Press for answer booklet.
|
||||||
|
<InstructorsContent>
|
||||||
|
|
||||||
|
</InstructorsContent>
|
||||||
|
|
||||||
|
<TopLine>Full slides</TopLine>
|
||||||
|
<InstructorsContent>
|
||||||
|
Slides for 20 lecture undergraduate deep learning course:
|
||||||
|
</InstructorsContent>
|
||||||
|
<InstructorsContent>
|
||||||
|
<ol>
|
||||||
|
<li>Introduction <a href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">PPTX</a></li>
|
||||||
|
<li>Supervised Learning <a href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">PPTX</a></li>
|
||||||
|
<li>Shallow Neural Networks <a href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">PPTX</a></li>
|
||||||
|
<li>Deep Neural Networks <a href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">PPTX</a></li>
|
||||||
|
<li>Loss Functions <a href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">PPTX</a></li>
|
||||||
|
<li>Fitting Models <a href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">PPTX</a></li>
|
||||||
|
<li>Computing Gradients <a href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">PPTX</a></li>
|
||||||
|
<li>Initialization <a href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">PPTX</a></li>
|
||||||
|
<li>Performance <a href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">PPTX</a></li>
|
||||||
|
<li>Regularization <a href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">PPTX</a></li>
|
||||||
|
<li>Convolutional Networks <a href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">PPTX</a></li>
|
||||||
|
<li>Image Generation <a href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">PPTX</a></li>
|
||||||
|
<li>Transformers and LLMs <a href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">PPTX</a></li>
|
||||||
|
</ol>
|
||||||
|
</InstructorsContent>
|
||||||
|
</Column1>
|
||||||
|
<Column2>
|
||||||
|
<TopLine>Figures</TopLine>
|
||||||
|
<InstructorsContent>
|
||||||
|
<ol>
|
||||||
|
<li> Introduction: <a href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap1PDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1udnl5pUOAc8DcAQ7HQwyzP9pwL95ynnv"> SVG</a> / <a href="https://docs.google.com/presentation/d/1IjTqIUvWCJc71b5vEJYte-Dwujcp7rvG/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX </a></li>
|
||||||
|
|
||||||
|
<li> Supervised learning: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla"> SVG</a> / <a href="https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Shallow neural networks: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI"> SVG</a> / <a href="https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Deep neural networks: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa"> SVG</a>
|
||||||
|
/
|
||||||
|
<a href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Loss functions: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">PDF
|
||||||
|
</a> / <a href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ">
|
||||||
|
SVG
|
||||||
|
</a> / <a
|
||||||
|
href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Training models: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">PDF
|
||||||
|
</a> / <a href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK">
|
||||||
|
SVG
|
||||||
|
</a> / <a
|
||||||
|
href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Gradients and initialization: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs"> SVG</a> / <a href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Measuring performance: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx"> SVG</a> / <a href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Regularization: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">PDF
|
||||||
|
</a> / <a href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
|
||||||
|
SVG
|
||||||
|
</a> / <a
|
||||||
|
href="https://docs.google.com/presentation/d/1VwIfvjpdfTny6sEfu4ZETwCnw6m8Eg-5/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Convolutional networks: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap10PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1-Wb3VzaSvVeRzoUzJbI2JjZE0uwqupM9"> SVG</a> / <a href="https://docs.google.com/presentation/d/1MtfKBC4Y9hWwGqeP6DVwUNbi1j5ncQCg/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Residual networks: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap11PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1Mr58jzEVseUAfNYbGWCQyDtEDwvfHRi1"> SVG</a> / <a href="https://docs.google.com/presentation/d/1saY8Faz0KTKAAifUrbkQdLA2qkyEjOPI/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Transformers: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap12PDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1txzOVNf8-jH4UfJ6SLnrtOfPd1Q3ebzd">
|
||||||
|
SVG</a> / <a
|
||||||
|
href="https://docs.google.com/presentation/d/1GVNvYWa0WJA6oKg89qZre-UZEhABfm0l/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Graph neural networks: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap13PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1lQIV6nRp6LVfaMgpGFhuwEXG-lTEaAwe"> SVG</a> / <a href="https://docs.google.com/presentation/d/1YwF3U82c1mQ74c1WqHVTzLZ0j7GgKaWP/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Unsupervised learning: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap14PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1aMbI6iCuUvOywqk5pBOmppJu1L1anqsM"> SVG</a> / <a href="https://docs.google.com/presentation/d/1A-lBGv3NHl4L32NvfFgy1EKeSwY-0UeB/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||||
|
PPTX</a></li>
|
||||||
|
<li> GANs: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap15PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1EErnlZCOlXc3HK7m83T2Jh_0NzIUHvtL"> SVG</a> / <a href="https://docs.google.com/presentation/d/10Ernk41ShOTf4IYkMD-l4dJfKATkXH4w/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Normalizing flows: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap16PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1B9bxtmdugwtg-b7Y4AdQKAIEVWxjx8l3"> SVG</a> / <a href="https://docs.google.com/presentation/d/1nLLzqb9pdfF_h6i1HUDSyp7kSMIkSUUA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Variational autoencoders: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap17PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1SNtNIY7khlHQYMtaOH-FosSH3kWwL4b7"> SVG</a> / <a href="https://docs.google.com/presentation/d/1lQE4Bu7-LgvV2VlJOt_4dQT-kusYl7Vo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Diffusion models: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap18PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1A-pIGl4PxjVMYOKAUG3aT4a8wD3G-q_r"> SVG</a> /
|
||||||
|
<a href="https://docs.google.com/presentation/d/1x_ufIBtVPzWUvRieKMkpw5SdRjXWwdfR/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||||
|
PPTX</a></li>
|
||||||
|
<li> Deep reinforcement learning: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1a5WUoF7jeSgwC_PVdckJi1Gny46fCqh0"> SVG</a> / <a href="https://docs.google.com/presentation/d/1TnYmVbFNhmMFetbjyfXGmkxp1EHauMqr/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||||
|
PPTX </a></li>
|
||||||
|
<li> Why does deep learning work?: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap20PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1M2d0DHEgddAQoIedKSDTTt7m1ZdmBLQ3"> SVG</a> / <a href="https://docs.google.com/presentation/d/1coxF4IsrCzDTLrNjRagHvqB_FBy10miA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||||
|
PPTX</a></li>
|
||||||
|
<li> Deep learning and ethics: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap21PDF.zip">PDF</a> / <a
|
||||||
|
href="https://drive.google.com/uc?export=download&id=1jixmFfwmZkW_UVYzcxmDcMsdFFtnZ0bU">SVG</a> / <a
|
||||||
|
href="https://docs.google.com/presentation/d/1EtfzanZYILvi9_-Idm28zD94I_6OrN9R/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
<li> Appendices - <a href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLAppendixPDF.zip">PDF</a> / <a href="https://drive.google.com/uc?export=download&id=1k2j7hMN40ISPSg9skFYWFL3oZT7r8v-l">
|
||||||
|
SVG</a> / <a
|
||||||
|
href="https://docs.google.com/presentation/d/1_2cJHRnsoQQHst0rwZssv-XH4o5SEHks/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</a></li>
|
||||||
|
</ol>
|
||||||
|
</InstructorsContent>
|
||||||
|
<a href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">Instructions</a> for editing equations in figures.
|
||||||
|
|
||||||
|
<InstructorsContent>
|
||||||
|
|
||||||
|
</InstructorsContent>
|
||||||
|
</Column2>
|
||||||
|
</InstructorsRow2>
|
||||||
|
|
||||||
|
</InstructorsWrapper>
|
||||||
|
</InstructorsContainer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InstructorsSection
|
||||||
139
src/components/Media/MediaElements.js
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
|
||||||
|
export const MediaContainer = styled.div`
|
||||||
|
color: #fff;
|
||||||
|
/* background: #f9f9f9; */
|
||||||
|
background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MediaWrapper = styled.div`
|
||||||
|
display: grid ;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100% ;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MediaRow = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(auto, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Column1 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col1;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Column2 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col2;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TextWrapper = styled.div`
|
||||||
|
max-width: 540px ;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TopLine = styled.p`
|
||||||
|
color: #57c6d1;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1.4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Heading= styled.h1`
|
||||||
|
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 600;
|
||||||
|
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px)
|
||||||
|
{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const Subtitle = styled.p`
|
||||||
|
max-width: 440px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
export const BtnWrap = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const ImgWrap = styled.div`
|
||||||
|
max-width: 555px;
|
||||||
|
height: 100%;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Img = styled.img`
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding-right: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
export const MediaTextBlock = styled.div`
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MediaContent = styled.div`
|
||||||
|
z-index: 3;
|
||||||
|
width: 100% ;
|
||||||
|
max-width: 1100px;
|
||||||
|
position: static;
|
||||||
|
padding: 8px 0px;
|
||||||
|
margin: 10px 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: left ;
|
||||||
|
list-style-position: inside;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MediaRow2 = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(auto, 1fr);
|
||||||
|
align-items: top;
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||||
|
}
|
||||||
|
`
|
||||||
83
src/components/Media/index.js
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { ImgWrap, Img, MediaContainer, MediaContent, MediaWrapper, MediaRow, MediaRow2, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './MediaElements'
|
||||||
|
|
||||||
|
// export const homeObjOne = {
|
||||||
|
// id: 'about',
|
||||||
|
// lightBg: false,
|
||||||
|
// lightText: true,
|
||||||
|
// lightTextDesc: true,
|
||||||
|
// topLine: 'Premium Bank',
|
||||||
|
// headline: 'Unlimited transactions with zero fees',
|
||||||
|
// description:
|
||||||
|
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
|
||||||
|
// buttonLabel: 'Get Started',
|
||||||
|
// imgStart: false,
|
||||||
|
// img: require('../../images/svg-1.svg').default,
|
||||||
|
// alt: 'Car',
|
||||||
|
// dark: true,
|
||||||
|
// primary: true,
|
||||||
|
// darkText: false
|
||||||
|
// };
|
||||||
|
|
||||||
|
import img from '../../images/media.svg'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const MediaSection = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MediaContainer lightBg={false} id='Media'>
|
||||||
|
<MediaWrapper>
|
||||||
|
<MediaRow imgStart={true}>
|
||||||
|
<Column1>
|
||||||
|
<TextWrapper>
|
||||||
|
<TopLine>Media</TopLine>
|
||||||
|
<Heading lightText={true}> Reviews, videos, podcasts, interviews</Heading>
|
||||||
|
<Subtitle darkText={false}>Various resources connected to the book</Subtitle>
|
||||||
|
</TextWrapper>
|
||||||
|
</Column1>
|
||||||
|
<Column2>
|
||||||
|
<ImgWrap>
|
||||||
|
<Img src={img} alt='Car'/>
|
||||||
|
</ImgWrap>
|
||||||
|
</Column2>
|
||||||
|
</MediaRow>
|
||||||
|
<MediaRow>
|
||||||
|
<Column1>
|
||||||
|
Machine learning street talk podcast
|
||||||
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&controls=0" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</Column1>
|
||||||
|
<Column2>
|
||||||
|
Deeper insights podcast
|
||||||
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&controls=0" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</Column2>
|
||||||
|
</MediaRow>
|
||||||
|
<MediaRow2>
|
||||||
|
<Column1>
|
||||||
|
<TopLine>Reviews</TopLine>
|
||||||
|
<MediaContent>
|
||||||
|
<ul>
|
||||||
|
<li> Amazon <a href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">reviews</a></li>
|
||||||
|
<li>Goodreads <a href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">reviews </a></li>
|
||||||
|
<li>Book <a href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">review</a> by Vishal V.</li>
|
||||||
|
</ul>
|
||||||
|
</MediaContent>
|
||||||
|
</Column1>
|
||||||
|
<Column2>
|
||||||
|
<TopLine>Interviews</TopLine>
|
||||||
|
<MediaContent>
|
||||||
|
<ul>
|
||||||
|
<li>Borealis AI <a href="https://www.borealisai.com/news/understanding-deep-learning/">interview</a></li>
|
||||||
|
<li>Shepherd ML book <a href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">recommendations</a></li>
|
||||||
|
</ul>
|
||||||
|
</MediaContent>
|
||||||
|
</Column2>
|
||||||
|
</MediaRow2>
|
||||||
|
|
||||||
|
</MediaWrapper>
|
||||||
|
</MediaContainer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MediaSection
|
||||||
167
src/components/More/MoreElements.js
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
|
||||||
|
export const MoreContainer = styled.div`
|
||||||
|
color: #fff;
|
||||||
|
/* background: #f9f9f9; */
|
||||||
|
background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MoreWrapper = styled.div`
|
||||||
|
display: grid ;
|
||||||
|
z-index: 1;
|
||||||
|
// height: 1050px ;
|
||||||
|
width: 100% ;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MoreRow = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(auto, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MoreRow2 = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(auto, 1fr);
|
||||||
|
align-items: top;
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const Column1 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col1;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Column2 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col2;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TextWrapper = styled.div`
|
||||||
|
max-width: 540px ;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TopLine = styled.p`
|
||||||
|
color: #773c23;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1.4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
margin-top: 16px ;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Heading= styled.h1`
|
||||||
|
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 600;
|
||||||
|
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px)
|
||||||
|
{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const Subtitle = styled.p`
|
||||||
|
max-width: 440px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
export const BtnWrap = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const ImgWrap = styled.div`
|
||||||
|
max-width: 555px;
|
||||||
|
height: 100%;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Img = styled.img`
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding-right: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
export const MoreContent = styled.div`
|
||||||
|
z-index: 3;
|
||||||
|
width: 100% ;
|
||||||
|
max-width: 1100px;
|
||||||
|
position: static;
|
||||||
|
padding: 8px 0px;
|
||||||
|
margin: 10px 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: left ;
|
||||||
|
list-style-position: inside;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MoreOuterList = styled.ul`
|
||||||
|
// list-style:none;
|
||||||
|
list-style-position: inside;
|
||||||
|
margin:0;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MoreInnerList = styled.ul`
|
||||||
|
list-style-position: inside;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MoreInnerP = styled.p`
|
||||||
|
padding-left: 18px;
|
||||||
|
padding-bottom: 10px ;
|
||||||
|
padding-top: 3px ;
|
||||||
|
font-size:14px;
|
||||||
|
color: #fff
|
||||||
|
`
|
||||||
|
|
||||||
|
export const MoreLink = styled.a`
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.1rem 0rem;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #000
|
||||||
|
border-bottom: 3px solid #01bf71;
|
||||||
|
}
|
||||||
|
`;
|
||||||
750
src/components/More/index.js
Normal file
@@ -0,0 +1,750 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { ImgWrap, Img, MoreContainer, MoreRow2, MoreWrapper, MoreRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle, MoreOuterList, MoreInnerList, MoreInnerP} from './MoreElements'
|
||||||
|
import img from '../../images/more.svg'
|
||||||
|
|
||||||
|
|
||||||
|
const MoreSection = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MoreContainer lightBg={true} id='More'>
|
||||||
|
<MoreWrapper>
|
||||||
|
<MoreRow imgStart={false}>
|
||||||
|
<Column1>
|
||||||
|
<TextWrapper>
|
||||||
|
<TopLine>More</TopLine>
|
||||||
|
<Heading lightText={false}>Further reading</Heading>
|
||||||
|
<Subtitle darkText={true}>Other articles, blogs, and books that I have written. Most in a similar style and using the same notation as Understanding Deep Learning. </Subtitle>
|
||||||
|
</TextWrapper>
|
||||||
|
</Column1>
|
||||||
|
<Column2>
|
||||||
|
<ImgWrap>
|
||||||
|
<Img src={img} alt='Car'/>
|
||||||
|
</ImgWrap>
|
||||||
|
</Column2>
|
||||||
|
</MoreRow>
|
||||||
|
<MoreRow2>
|
||||||
|
|
||||||
|
<Column1>
|
||||||
|
<TopLine>Book</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="http://computervisionmodels.com" target="_blank" rel="noreferrer">Computer vision: models, learning, and inference</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> 2012 book published with CUP </li>
|
||||||
|
<li> Focused on probabilistic models </li>
|
||||||
|
<li> Pre-"deep learning" </li>
|
||||||
|
<li> Lots of ML content</li>
|
||||||
|
<li> Individual chapters available below</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
<TopLine>Transformers & LLMs</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/" target="_blank" rel="noreferrer">Intro to LLMs</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> What is an LLM?</li>
|
||||||
|
<li> Pretraining</li>
|
||||||
|
<li> Instruction fine-tuning</li>
|
||||||
|
<li> Reinforcement learning from human feedback</li>
|
||||||
|
<li> Notable LLMs</li>
|
||||||
|
<li> LLMs without training from scratch</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/" target="_blank" rel="noreferrer">Transformers I</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Dot-Product self-attention </li>
|
||||||
|
<li> Scaled dot-product self-attention </li>
|
||||||
|
<li> Position encoding</li>
|
||||||
|
<li> Multiple heads </li>
|
||||||
|
<li> Transformer block </li>
|
||||||
|
<li> Encoders </li>
|
||||||
|
<li> Decoders </li>
|
||||||
|
<li> Encoder-Decoders </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/" target="_blank" rel="noreferrer">Transformers II</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Sinusoidal position embeddings </li>
|
||||||
|
<li> Learned position embeddings </li>
|
||||||
|
<li> Relatives vs. absolute position embeddings</li>
|
||||||
|
<li> Extending transformers to longer sequences </li>
|
||||||
|
<li> Reducing attention matrix size </li>
|
||||||
|
<li> Making attention matrix sparse </li>
|
||||||
|
<li> Kernelizing attention computation </li>
|
||||||
|
<li> Attention as an RNN</li>
|
||||||
|
<li> Attention as a hypernetwork </li>
|
||||||
|
<li> Attention as a routing network </li>
|
||||||
|
<li> Attention and graphs </li>
|
||||||
|
<li> Attention and convolutions </li>
|
||||||
|
<li> Attention and gating </li>
|
||||||
|
<li> Attention and memory retrieval </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/" target="_blank" rel="noreferrer">Transformers III</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Tricks for training transformers </li>
|
||||||
|
<li> Why are these tricks required? </li>
|
||||||
|
<li> Removing layer normalization</li>
|
||||||
|
<li> Balancing residual dependencies </li>
|
||||||
|
<li> Reducing optimizer variance </li>
|
||||||
|
<li> How to train deeper transformers on small datasets </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/" target="_blank" rel="noreferrer">Training and fine-tuning LLMs</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Large language models </li>
|
||||||
|
<li> Pretraining </li>
|
||||||
|
<li> Supervised fine tuning</li>
|
||||||
|
<li> Reinforcement learning from human feedback </li>
|
||||||
|
<li> Direct preference optimization</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/" target="_blank" rel="noreferrer">Speeding up inference in LLMs</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Problems with transformers</li>
|
||||||
|
<li> Attention-free transformers </li>
|
||||||
|
<li> Complexity</li>
|
||||||
|
<li> RWKV </li>
|
||||||
|
<li> Linear transformers and performers</li>
|
||||||
|
<li> Retentive network</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
<TopLine>Math for machine learning</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing" target="_blank" rel="noreferrer">Linear algebra</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Vectors and matrices </li>
|
||||||
|
<li> Determinant and trace </li>
|
||||||
|
<li> Orthogonal matrices </li>
|
||||||
|
<li> Null space </li>
|
||||||
|
<li> Linear transformations </li>
|
||||||
|
<li> Singular value decomposition </li>
|
||||||
|
<li> Least squares problems </li>
|
||||||
|
<li> Principal direction problems </li>
|
||||||
|
<li> Inversion of block matrices</li>
|
||||||
|
<li> Schur complement identity</li>
|
||||||
|
<li> Sherman-Morrison-Woodbury</li>
|
||||||
|
<li> Matrix determinant lemma</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing" target="_blank" rel="noreferrer">Introduction to probability</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Random variables </li>
|
||||||
|
<li> Joint probability </li>
|
||||||
|
<li> Marginal probability </li>
|
||||||
|
<li> Conditional probability </li>
|
||||||
|
<li> Bayes' rule </li>
|
||||||
|
<li> Independence </li>
|
||||||
|
<li> Expectation </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing" target="_blank" rel="noreferrer">Probability distributions</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Bernouilli distribution </li>
|
||||||
|
<li> Beta distribution</li>
|
||||||
|
<li> Categorical distribution </li>
|
||||||
|
<li> Dirichlet distribution</li>
|
||||||
|
<li> Univariate normal distribution </li>
|
||||||
|
<li> Normal inverse-scaled gamma distribution </li>
|
||||||
|
<li> Multivariate normal distribution </li>
|
||||||
|
<li> Normal inverse Wishart distribution </li>
|
||||||
|
<li> Conjugacy </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing" target="_blank" rel="noreferrer">Fitting probability distributions</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Maximum likelihood </li>
|
||||||
|
<li> Maximum a posteriori </li>
|
||||||
|
<li> Bayesian approach </li>
|
||||||
|
<li> Example: fitting normal </li>
|
||||||
|
<li> Example: fitting categorical </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing" target="_blank" rel="noreferrer">The normal distribution</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Types of covariance matrix </li>
|
||||||
|
<li> Decomposition of covariance </li>
|
||||||
|
<li> Linear transformations </li>
|
||||||
|
<li> Marginal distributions </li>
|
||||||
|
<li> Conditional distributions </li>
|
||||||
|
<li> Product of two normals </li>
|
||||||
|
<li> Change of variable formula </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
<TopLine>Optimization</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing" target="_blank" rel="noreferrer">Gradient-based optimmization</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Convexity </li>
|
||||||
|
<li> Steepest descent </li>
|
||||||
|
<li> Newton's method </li>
|
||||||
|
<li> Gauss-Newton method </li>
|
||||||
|
<li> Line search </li>
|
||||||
|
<li> Reparameterization </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/" target="_blank" rel="noreferrer">Bayesian optimization</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Gaussian processes </li>
|
||||||
|
<li> Acquisition functions </li>
|
||||||
|
<li> Incorporating noise</li>
|
||||||
|
<li> Kernel choice </li>
|
||||||
|
<li> Learning GP parameters </li>
|
||||||
|
<li> Tips, tricks, and limitations </li>
|
||||||
|
<li> Beta-Bernoulli bandit </li>
|
||||||
|
<li> Random forests for BO </li>
|
||||||
|
<li> Tree-Parzen estimators </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/" target="_blank" rel="noreferrer">SAT Solvers I</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Boolean logic and satisfiability </li>
|
||||||
|
<li> Conjunctive normal form </li>
|
||||||
|
<li> The Tseitin transformation </li>
|
||||||
|
<li> SAT and related problems </li>
|
||||||
|
<li> SAT constructions </li>
|
||||||
|
<li> Graph coloring and scheduling </li>
|
||||||
|
<li> Fitting binary neural networks</li>
|
||||||
|
<li> Fitting decision trees</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/" target="_blank" rel="noreferrer">SAT Solvers II</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Conditioning </li>
|
||||||
|
<li> Resolution </li>
|
||||||
|
<li> Solving 2-SAT by unit propagation </li>
|
||||||
|
<li> Directional resolution </li>
|
||||||
|
<li> SAT as binary search </li>
|
||||||
|
<li> DPLL </li>
|
||||||
|
<li> Conflict driven clause learning</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank" rel="noreferrer">SAT Solvers III</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Satisfiability vs. problem size </li>
|
||||||
|
<li> Factor graph representation </li>
|
||||||
|
<li> Max product / sum product for SAT </li>
|
||||||
|
<li> Survey propagation </li>
|
||||||
|
<li> SAT with non-binary variables </li>
|
||||||
|
<li> SMT solvers </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank" rel="noreferrer">SAT Solvers III</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Satisfiability vs. problem size </li>
|
||||||
|
<li> Factor graph representation </li>
|
||||||
|
<li> Max product / sum product for SAT </li>
|
||||||
|
<li> Survey propagation </li>
|
||||||
|
<li> SAT with non-binary variables </li>
|
||||||
|
<li> SMT solvers </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<TopLine>Computer vision</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing" target="_blank" rel="noreferrer">Image Processing</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Whitening </li>
|
||||||
|
<li> Histogram equalization </li>
|
||||||
|
<li> Filtering </li>
|
||||||
|
<li> Edges and corners </li>
|
||||||
|
<li> Dimensionality reduction </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing" target="_blank" rel="noreferrer">Pinhole camera</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Pinhole camera model </li>
|
||||||
|
<li> Radial distortion </li>
|
||||||
|
<li> Homogeneous coordinates </li>
|
||||||
|
<li> Learning extrinsic parameters </li>
|
||||||
|
<li> Learning intrinsic parameters </li>
|
||||||
|
<li> Inferring three-dimensional world points </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing" target="_blank" rel="noreferrer">Geometric transformations</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Euclidean, similarity, affine, projective transformations </li>
|
||||||
|
<li> Fitting transformation models </li>
|
||||||
|
<li> Inference in transformation models </li>
|
||||||
|
<li> Three geometric problems for planes </li>
|
||||||
|
<li> Transformations between images </li>
|
||||||
|
<li> Robust learning of transformations </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing" target="_blank" rel="noreferrer">Multiple cameras</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Two view geometry </li>
|
||||||
|
<li> The essential matrix </li>
|
||||||
|
<li> The fundamental matrix </li>
|
||||||
|
<li> Two-view reconstruction pipeline </li>
|
||||||
|
<li> Rectification </li>
|
||||||
|
<li> Multiview reconstruction </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
<TopLine>Reinforcement learning</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://arxiv.org/abs/2307.05979" target="_blank" rel="noreferrer">Transformers in RL</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Challenges in RL</li>
|
||||||
|
<li> Advantages of transformers for RL</li>
|
||||||
|
<li> Representation learning</li>
|
||||||
|
<li> Transition function learning</li>
|
||||||
|
<li> Reward learning </li>
|
||||||
|
<li> Policy learning </li>
|
||||||
|
<li> Training strategy </li>
|
||||||
|
<li> Interpretability </li>
|
||||||
|
<li> Applications </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
</Column1>
|
||||||
|
|
||||||
|
{/* ########################################### */}
|
||||||
|
|
||||||
|
<Column2>
|
||||||
|
<TopLine>AI Theory</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/research-blogs/gradient-flow/" target="_blank" rel="noreferrer">Gradient flow</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Gradient flow </li>
|
||||||
|
<li> Evolution of residual </li>
|
||||||
|
<li> Evolution of parameters </li>
|
||||||
|
<li> Evolution of model predictions </li>
|
||||||
|
<li> Evolution of prediction covariance </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/" target="_blank" rel="noreferrer">Neural tangent kernel</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Infinite width neural networks </li>
|
||||||
|
<li> Training dynamics </li>
|
||||||
|
<li> Empirical NTK for shallow network</li>
|
||||||
|
<li> Analytical NTK for shallow network </li>
|
||||||
|
<li> Empirical NTK for ddep network </li>
|
||||||
|
<li> Analtical NTK for deep network</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
<TopLine>Temporal models</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing" target="_blank" rel="noreferrer">Temporal models</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Kalman filter </li>
|
||||||
|
<li> Smoothing </li>
|
||||||
|
<li> Extended Kalman filter </li>
|
||||||
|
<li> Unscented Kalman filter </li>
|
||||||
|
<li> Particle filtering </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
<TopLine> Unsupervised learning</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing" target="_blank" rel="noreferrer">Modeling complex data densities</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Hidden variables </li>
|
||||||
|
<li> Expectation maximization </li>
|
||||||
|
<li> Mixture of Gaussians </li>
|
||||||
|
<li> The t-distribution </li>
|
||||||
|
<li> Factor analysis </li>
|
||||||
|
<li> The EM algorithm in detail </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/" target="_blank" rel="noreferrer">Variational autoencoders</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Non-linear latent variable models </li>
|
||||||
|
<li> Evidence lower bound (ELBO) </li>
|
||||||
|
<li> ELBO properties </li>
|
||||||
|
<li> Variational approximation </li>
|
||||||
|
<li> The variational autoencoder </li>
|
||||||
|
<li> Reparameterization trick </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://arxiv.org/abs/1908.09257" target="_blank" rel="noreferrer">Normalizing flows: introduction and review</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Normalizing flows </li>
|
||||||
|
<li> Elementwise and linear flows </li>
|
||||||
|
<li> Planar and radial flows </li>
|
||||||
|
<li> Coupling and auto-regressive flows </li>
|
||||||
|
<li> Coupling functions </li>
|
||||||
|
<li> Residual flows </li>
|
||||||
|
<li> Infinitesimal (continuous) flows </li>
|
||||||
|
<li> Datasets and performance </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
<TopLine>Graphical Models</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing" target="_blank" rel="noreferrer">Graphical models</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Conditional independence </li>
|
||||||
|
<li> Directed graphical models </li>
|
||||||
|
<li> Undirected graphical models </li>
|
||||||
|
<li> Inference in graphical models </li>
|
||||||
|
<li> Sampling in graphical models </li>
|
||||||
|
<li> Learning in graphical models </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing" target="_blank" rel="noreferrer">Models for chains and trees</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Hidden Markov models </li>
|
||||||
|
<li> Viterbi algorithm </li>
|
||||||
|
<li> Forward-backward algorithm </li>
|
||||||
|
<li> Belief propagation </li>
|
||||||
|
<li> Sum product algorithm </li>
|
||||||
|
<li> Extension to trees </li>
|
||||||
|
<li> Graphs with loops </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing" target="_blank" rel="noreferrer">Models for grids</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Markov random fields </li>
|
||||||
|
<li> MAP inference in binary pairwise MRFs </li>
|
||||||
|
<li> Graph cuts </li>
|
||||||
|
<li> Multi-label pairwise MRFs </li>
|
||||||
|
<li> Alpha-expansion algorithm </li>
|
||||||
|
<li> Conditional random fields </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
<TopLine>Machine learning</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing" target="_blank" rel="noreferrer">Learning and inference</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Discriminative models </li>
|
||||||
|
<li> Generative models </li>
|
||||||
|
<li> Example: regression </li>
|
||||||
|
<li> Example: classification </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing" target="_blank" rel="noreferrer">Regression models</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Linear regression </li>
|
||||||
|
<li> Bayesian linear regression </li>
|
||||||
|
<li> Non-linear regression </li>
|
||||||
|
<li> Bayesian non-linear regression </li>
|
||||||
|
<li> The kernel trick </li>
|
||||||
|
<li> Gaussian process regression </li>
|
||||||
|
<li> Sparse linear regression </li>
|
||||||
|
<li> Relevance vector regression </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing" target="_blank" rel="noreferrer">Classification models</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Logistic regression </li>
|
||||||
|
<li> Bayesian logistic regression </li>
|
||||||
|
<li> Non-linear logistic regression </li>
|
||||||
|
<li> Gaussian process classification </li>
|
||||||
|
<li> Relevance vector classification </li>
|
||||||
|
<li> Incremental fitting: boosting and trees </li>
|
||||||
|
<li> Multi-class logistic regression </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-2-few-shot-learning-and-meta-learning-i/" target="_blank" rel="noreferrer">Few-shot learning and meta-learning I</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Meta-learning framework </li>
|
||||||
|
<li> Approaches to meta-learning </li>
|
||||||
|
<li> Matching networks </li>
|
||||||
|
<li> Prototypical networks </li>
|
||||||
|
<li> Relation networks </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-3-few-shot-learning-and-meta-learning-ii/" target="_blank" rel="noreferrer">Few-shot learning and meta-learning II</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> MAML & Reptile </li>
|
||||||
|
<li> LSTM based meta-learning </li>
|
||||||
|
<li> Reinforcement learning based approaches</li>
|
||||||
|
<li> Memory augmented neural networks </li>
|
||||||
|
<li> SNAIL </li>
|
||||||
|
<li> Generative models </li>
|
||||||
|
<li> Data augmentation approaches </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
<TopLine>Natural language processing</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/" target="_blank" rel="noreferrer">Neural natural language generation I</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Encoder-decoder architecture </li>
|
||||||
|
<li> Maximum-likelihood training </li>
|
||||||
|
<li> Greedy search </li>
|
||||||
|
<li> Beam search </li>
|
||||||
|
<li> Diverse beam search </li>
|
||||||
|
<li> Top-k sampling </li>
|
||||||
|
<li> Nucleus sampling </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-7-neural-natural-language-generation-sequence-level-training/" target="_blank" rel="noreferrer">Neural natural language generation II</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Fine-tuning with reinforcement learning </li>
|
||||||
|
<li> Training from scratch with RL </li>
|
||||||
|
<li> RL vs. structured prediction </li>
|
||||||
|
<li> Minimum risk training </li>
|
||||||
|
<li> Scheduled sampling </li>
|
||||||
|
<li> Beam search optimization </li>
|
||||||
|
<li> SeaRNN </li>
|
||||||
|
<li> Reward-augmented maximum likelihood </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/" target="_blank" rel="noreferrer">Parsing I</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Parse trees </li>
|
||||||
|
<li> Context-free grammars </li>
|
||||||
|
<li> Chomsky normal form </li>
|
||||||
|
<li> CYK recognition algorithm </li>
|
||||||
|
<li> Worked example </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/" target="_blank" rel="noreferrer">Parsing II</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Weighted context-free grammars </li>
|
||||||
|
<li> Semirings </li>
|
||||||
|
<li> Inside algorithm </li>
|
||||||
|
<li> Inside weights </li>
|
||||||
|
<li> Weighted parsing </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/" target="_blank" rel="noreferrer">Parsing III</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Probabilistic context-free grammars </li>
|
||||||
|
<li> Parameter estimation (supervised) </li>
|
||||||
|
<li> Parameter estimation (unsupervised) </li>
|
||||||
|
<li> Viterbi training </li>
|
||||||
|
<li> Expectation maximization </li>
|
||||||
|
<li> Outside from inside </li>
|
||||||
|
<li> Interpretation of outside weights </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/understanding-xlnet/" target="_blank" rel="noreferrer">XLNet</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Language modeling </li>
|
||||||
|
<li> XLNet training objective </li>
|
||||||
|
<li> Permutations </li>
|
||||||
|
<li> Attention mask </li>
|
||||||
|
<li> Two stream self-attention </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<TopLine>Responsible AI</TopLine>
|
||||||
|
<MoreOuterList>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/" target="_blank" rel="noreferrer">Bias and fairness</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Sources of bias</li>
|
||||||
|
<li> Demographic Parity </li>
|
||||||
|
<li> Equality of odds</li>
|
||||||
|
<li> Equality of opportunity </li>
|
||||||
|
<li> Individual fairness</li>
|
||||||
|
<li> Bias mitigation</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/" target="_blank" rel="noreferrer">Explainability I</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Taxonomy of XAI approaches</li>
|
||||||
|
<li> Local post-hoc explanations </li>
|
||||||
|
<li> Individual conditional explanation</li>
|
||||||
|
<li> Counterfactual explanations</li>
|
||||||
|
<li> LIME & Anchors</li>
|
||||||
|
<li> Shapley additive explanations & SHAP</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/" target="_blank" rel="noreferrer">Explainability II</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Global feature importance</li>
|
||||||
|
<li> Partial dependence & ICE plots</li>
|
||||||
|
<li> Accumulated local effects</li>
|
||||||
|
<li> Aggregate SHAP values</li>
|
||||||
|
<li> Prototypes & criticisms</li>
|
||||||
|
<li> Surrogate / proxy models</li>
|
||||||
|
<li> Inherently interpretable models</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/" target="_blank" rel="noreferrer">Differential privacy I</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Early approaches to privacy </li>
|
||||||
|
<li> Fundamental law of information recovery </li>
|
||||||
|
<li> Differential privacy</li>
|
||||||
|
<li> Properties of differential privacy </li>
|
||||||
|
<li> The Laplace mechanism</li>
|
||||||
|
<li> Examples</li>
|
||||||
|
<li> Other mechanisms and definitions</li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/" target="_blank" rel="noreferrer">Differential privacy II</a>
|
||||||
|
<MoreInnerP>
|
||||||
|
<MoreInnerList>
|
||||||
|
<li> Differential privacy and matchine learning</li>
|
||||||
|
<li> DPSGD</li>
|
||||||
|
<li> PATE </li>
|
||||||
|
<li> Differentially private data generation</li>
|
||||||
|
<li> DPGAN</li>
|
||||||
|
<li> PateGAN </li>
|
||||||
|
</MoreInnerList>
|
||||||
|
</MoreInnerP>
|
||||||
|
</li>
|
||||||
|
</MoreOuterList>
|
||||||
|
</Column2>
|
||||||
|
</MoreRow2>
|
||||||
|
</MoreWrapper>
|
||||||
|
</MoreContainer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MoreSection
|
||||||
|
|
||||||
|
|
||||||
115
src/components/NavBar/NavbarElements.js
Executable file
@@ -0,0 +1,115 @@
|
|||||||
|
import { Link as LinkS } from 'react-scroll';
|
||||||
|
import { Link as LinkR } from 'react-router-dom';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
export const Nav = styled.nav`
|
||||||
|
background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')};
|
||||||
|
height: 100px;
|
||||||
|
margin-top: -100px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
@media screen and (max-width: 960px) {
|
||||||
|
transition: 0.8s all ease;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const NavbarContainer = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 24px;
|
||||||
|
max-width: 1100px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const NavLogo = styled(LinkR)`
|
||||||
|
color: #fff;
|
||||||
|
justify-self: flex-start;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const MobileIcon = styled.div`
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translate(-100%, 60%);
|
||||||
|
font-size: 1.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const NavMenu = styled.ul`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: -22px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const NavItem = styled.li`
|
||||||
|
height: 80px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const NavBtn = styled.nav`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const NavLinks = styled(LinkS)`
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0 1rem;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 3px solid #57c6d1
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const NavBtnLink = styled(LinkR)`
|
||||||
|
border-radius: 50px;
|
||||||
|
background: #01bf71;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 10px 22px;
|
||||||
|
color: #010606;
|
||||||
|
font-size: 16px;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
background: #fff;
|
||||||
|
color: #010606;
|
||||||
|
}
|
||||||
|
`;
|
||||||
59
src/components/NavBar/index.js
Executable file
@@ -0,0 +1,59 @@
|
|||||||
|
import React, {useState, useEffect} from 'react'
|
||||||
|
import {FaBars} from 'react-icons/fa'
|
||||||
|
import {IconContext} from 'react-icons/lib'
|
||||||
|
import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements'
|
||||||
|
import { animateScroll as scroll } from 'react-scroll'
|
||||||
|
|
||||||
|
|
||||||
|
const Navbar = ( {toggle} ) => {
|
||||||
|
const [scrollNav, setScrollNav] = useState(false)
|
||||||
|
|
||||||
|
const changeNav = () =>{
|
||||||
|
if (window.scrollY >= 80){
|
||||||
|
setScrollNav(true)
|
||||||
|
}else{
|
||||||
|
setScrollNav(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() =>{
|
||||||
|
window.addEventListener('scroll', changeNav)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const toggleHome = () => {
|
||||||
|
scroll.scrollToTop();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<IconContext.Provider value={{color: '#fff'}}>
|
||||||
|
<Nav scrollNav={scrollNav}>
|
||||||
|
<NavbarContainer>
|
||||||
|
<NavLogo to="/" onClick={toggleHome}>
|
||||||
|
<h1> Understanding Deep Learning </h1>
|
||||||
|
</NavLogo>
|
||||||
|
<MobileIcon onClick={toggle}>
|
||||||
|
<FaBars />
|
||||||
|
</MobileIcon>
|
||||||
|
<NavMenu>
|
||||||
|
<NavItem>
|
||||||
|
<NavLinks to="Notebooks" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Notebooks</NavLinks>
|
||||||
|
</NavItem>
|
||||||
|
<NavItem>
|
||||||
|
<NavLinks to="Instructors" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Instructors</NavLinks>
|
||||||
|
</NavItem>
|
||||||
|
<NavItem>
|
||||||
|
<NavLinks to="Media" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Media</NavLinks>
|
||||||
|
</NavItem>
|
||||||
|
<NavItem>
|
||||||
|
<NavLinks to="More" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>More</NavLinks>
|
||||||
|
</NavItem>
|
||||||
|
</NavMenu>
|
||||||
|
</NavbarContainer>
|
||||||
|
</Nav>
|
||||||
|
</IconContext.Provider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Navbar
|
||||||
105
src/components/Notebooks/NotebookElements.js
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
|
||||||
|
export const NotebookContainer = styled.div`
|
||||||
|
color: #fff;
|
||||||
|
/* background: #f9f9f9; */
|
||||||
|
background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NotebookWrapper = styled.div`
|
||||||
|
display: grid ;
|
||||||
|
z-index: 1;
|
||||||
|
// height: 1250px ;
|
||||||
|
width: 100% ;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NotebookRow = styled.div`
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(auto, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Column1 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col1;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Column2 = styled.div`
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
grid-area: col2;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TextWrapper = styled.div`
|
||||||
|
max-width: 540px ;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const TopLine = styled.p`
|
||||||
|
color: #57c6d1;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1.4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Heading= styled.h1`
|
||||||
|
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 600;
|
||||||
|
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px)
|
||||||
|
{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
export const Subtitle = styled.p`
|
||||||
|
max-width: 440px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
export const BtnWrap = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const ImgWrap = styled.div`
|
||||||
|
max-width: 555px;
|
||||||
|
height: 100%;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Img = styled.img`
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding-right: 0;
|
||||||
|
`;
|
||||||
220
src/components/Notebooks/index.js
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { ImgWrap, Img, NotebookContainer, NotebookWrapper, NotebookRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './NotebookElements'
|
||||||
|
|
||||||
|
// export const homeObjOne = {
|
||||||
|
// id: 'about',
|
||||||
|
// lightBg: false,
|
||||||
|
// lightText: true,
|
||||||
|
// lightTextDesc: true,
|
||||||
|
// topLine: 'Premium Bank',
|
||||||
|
// headline: 'Unlimited transactions with zero fees',
|
||||||
|
// description:
|
||||||
|
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
|
||||||
|
// buttonLabel: 'Get Started',
|
||||||
|
// imgStart: false,
|
||||||
|
// img: require('../../images/svg-1.svg').default,
|
||||||
|
// alt: 'Car',
|
||||||
|
// dark: true,
|
||||||
|
// primary: true,
|
||||||
|
// darkText: false
|
||||||
|
// };
|
||||||
|
|
||||||
|
import img from '../../images/coding.svg'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const NotebookSection = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<NotebookContainer lightBg={false} id='Notebooks'>
|
||||||
|
<NotebookWrapper>
|
||||||
|
<NotebookRow imgStart={true}>
|
||||||
|
<Column1>
|
||||||
|
<TextWrapper>
|
||||||
|
<TopLine>Coding exercises</TopLine>
|
||||||
|
<Heading lightText={true}>Python notebooks covering the whole text</Heading>
|
||||||
|
<Subtitle darkText={false}>Sixty eight python notebook exercises with missing code to fill in based on the text</Subtitle>
|
||||||
|
</TextWrapper>
|
||||||
|
</Column1>
|
||||||
|
<Column2>
|
||||||
|
<ImgWrap>
|
||||||
|
<Img src={img} alt='Car'/>
|
||||||
|
</ImgWrap>
|
||||||
|
</Column2>
|
||||||
|
</NotebookRow>
|
||||||
|
<NotebookRow>
|
||||||
|
<Column1>
|
||||||
|
<ul>
|
||||||
|
<li> Notebook 1.1 - Background mathematics: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap01/1_1_BackgroundMathematics.ipynb">ipynb/colab</a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 2.1 - Supervised learning: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap02/2_1_Supervised_Learning.ipynb">ipynb/colab</a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 3.1 - Shallow networks I: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_1_Shallow_Networks_I.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 3.2 - Shallow networks II: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_2_Shallow_Networks_II.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 3.3 - Shallow network regions: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_3_Shallow_Network_Regions.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 3.4 - Activation functions: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap03/3_4_Activation_Functions.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 4.1 - Composing networks: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_1_Composing_Networks.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 4.2 - Clipping functions: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_2_Clipping_functions.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 4.3 - Deep networks: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap04/4_3_Deep_Networks.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 5.1 - Least squares loss: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_1_Least_Squares_Loss.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 5.2 - Binary cross-entropy loss: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_2_Binary_Cross_Entropy_Loss.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 5.3 - Multiclass cross-entropy loss: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap05/5_3_Multiclass_Cross_entropy_Loss.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 6.1 - Line search: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_1_Line_Search.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 6.2 - Gradient descent: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_2_Gradient_Descent.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 6.3 - Stochastic gradient descent: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_3_Stochastic_Gradient_Descent.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 6.4 - Momentum: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_4_Momentum.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 6.5 - Adam: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap06/6_5_Adam.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 7.1 - Backpropagation in toy model: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_1_Backpropagation_in_Toy_Model.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 7.2 - Backpropagation: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_2_Backpropagation.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 7.3 - Initialization: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap07/7_3_Initialization.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 8.1 - MNIST-1D performance: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_1_MNIST_1D_Performance.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 8.2 - Bias-variance trade-off: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_2_Bias_Variance_Trade_Off.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 8.3 - Double descent: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_3_Double_Descent.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 8.4 - High-dimensional spaces: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap08/8_4_High_Dimensional_Spaces.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 9.1 - L2 regularization: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_1_L2_Regularization.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 9.2 - Implicit regularization: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_2_Implicit_Regularization.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 9.3 - Ensembling: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_3_Ensembling.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 9.4 - Bayesian approach: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_4_Bayesian_Approach.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 9.5 - Augmentation <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap09/9_5_Augmentation.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 10.1 - 1D convolution: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_1_1D_Convolution.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 10.2 - Convolution for MNIST-1D: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_2_Convolution_for_MNIST_1D.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 10.3 - 2D convolution: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_3_2D_Convolution.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 10.4 - Downsampling & upsampling: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_4_Downsampling_and_Upsampling.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 10.5 - Convolution for MNIST: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap10/10_5_Convolution_For_MNIST.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Column1>
|
||||||
|
<Column2>
|
||||||
|
<ul>
|
||||||
|
<li> Notebook 11.1 - Shattered gradients: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_1_Shattered_Gradients.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 11.2 - Residual networks: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_2_Residual_Networks.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 11.3 - Batch normalization: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap11/11_3_Batch_Normalization.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 12.1 - Self-attention: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_1_Self_Attention.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 12.2 - Multi-head self-attention: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_2_Multihead_Self_Attention.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 12.3 - Tokenization: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_3_Tokenization.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 12.4 - Decoding strategies: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap12/12_4_Decoding_Strategies.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 13.1 - Encoding graphs: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_1_Graph_Representation.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 13.2 - Graph classification : <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_2_Graph_Classification.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 13.3 - Neighborhood sampling: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_3_Neighborhood_Sampling.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 13.4 - Graph attention: <a
|
||||||
|
href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap13/13_4_Graph_Attention_Networks.ipynb">ipynb/colab </a>
|
||||||
|
</li>
|
||||||
|
<li> Notebook 15.1 - GAN toy example: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap15/15_1_GAN_Toy_Example.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 15.2 - Wasserstein distance: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap15/15_2_Wasserstein_Distance.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 16.1 - 1D normalizing flows: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_1_1D_Normalizing_Flows.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 16.2 - Autoregressive flows: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_2_Autoregressive_Flows.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 16.3 - Contraction mappings: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap16/16_3_Contraction_Mappings.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 17.1 - Latent variable models: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_1_Latent_Variable_Models.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 17.2 - Reparameterization trick: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_2_Reparameterization_Trick.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 17.3 - Importance sampling: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap17/17_3_Importance_Sampling.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 18.1 - Diffusion encoder: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_1_Diffusion_Encoder.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 18.2 - 1D diffusion model: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_2_1D_Diffusion_Model.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 18.3 - Reparameterized model: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_3_Reparameterized_Model.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 18.4 - Families of diffusion models: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap18/18_4_Families_of_Diffusion_Models.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 19.1 - Markov decision processes: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_1_Markov_Decision_Processes.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 19.2 - Dynamic programming: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_2_Dynamic_Programming.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 19.3 - Monte-Carlo methods: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_3_Monte_Carlo_Methods.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 19.4 - Temporal difference methods: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_4_Temporal_Difference_Methods.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 19.5 - Control variates: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap19/19_5_Control_Variates.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 20.1 - Random data: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_1_Random_Data.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 20.2 - Full-batch gradient descent: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_2_Full_Batch_Gradient_Descent.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 20.3 - Lottery tickets: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_3_Lottery_Tickets.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 20.4 - Adversarial attacks: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap20/20_4_Adversarial_Attacks.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 21.1 - Bias mitigation: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap21/21_1_Bias_Mitigation.ipynb">ipynb/colab </a></li>
|
||||||
|
<li> Notebook 21.2 - Explainability: <a href="https://github.com/udlbook/udlbook/blob/main/Notebooks/Chap21/21_2_Explainability.ipynb">ipynb/colab </a></li>
|
||||||
|
</ul>
|
||||||
|
</Column2>
|
||||||
|
</NotebookRow>
|
||||||
|
|
||||||
|
</NotebookWrapper>
|
||||||
|
</NotebookContainer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NotebookSection
|
||||||
11
src/components/ScrollToTop.js
Executable file
@@ -0,0 +1,11 @@
|
|||||||
|
import {useEffect} from 'react'
|
||||||
|
import { useLocation } from 'react-router-dom'
|
||||||
|
|
||||||
|
export default function ScrollToTop() {
|
||||||
|
const {pathname} = useLocation()
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo(0,0)
|
||||||
|
}, [pathname])
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
98
src/components/Sidebar/SidebarElements.js
Executable file
@@ -0,0 +1,98 @@
|
|||||||
|
import styled from 'styled-components'
|
||||||
|
import {Link as LinkS} from 'react-scroll'
|
||||||
|
import {Link as LinkR} from 'react-router-dom'
|
||||||
|
import {FaTimes} from 'react-icons/fa'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const SidebarContainer = styled.aside`
|
||||||
|
position:fixed ;
|
||||||
|
z-index: 999;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #0d0d0d;
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transition: 0.3s ease-in-out;
|
||||||
|
opacity: ${({ isOpen }) => (isOpen ? '100%' : '0')};
|
||||||
|
top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};
|
||||||
|
|
||||||
|
`
|
||||||
|
|
||||||
|
export const CloseIcon = styled(FaTimes)`
|
||||||
|
color: #fff ;
|
||||||
|
&:hover {
|
||||||
|
color: #01bf71;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const Icon = styled.div`
|
||||||
|
position: absolute;
|
||||||
|
top: 1.2rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SidebarWrapper = styled.div`
|
||||||
|
color: #ffffff;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SidebarMenu = styled.ul`
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: repeat(6,80px);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px){
|
||||||
|
grid-template-rows: repeat(6, 60px) ;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SidebarLink = styled(LinkS)`
|
||||||
|
display: flex ;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
list-style: none;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #01bf71;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SideBtnWrap = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const SidebarRoute = styled(LinkR)`
|
||||||
|
border-radius: 50px;
|
||||||
|
background: #01bf71;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 16px 46px;
|
||||||
|
color: #010606;
|
||||||
|
font-size: 16px;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
background: #fff;
|
||||||
|
color: #010606;
|
||||||
|
}
|
||||||
|
`
|
||||||
33
src/components/Sidebar/index.js
Executable file
@@ -0,0 +1,33 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements'
|
||||||
|
|
||||||
|
|
||||||
|
const Sidebar = ({isOpen, toggle}) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SidebarContainer isOpen={isOpen} onClick={toggle}>
|
||||||
|
<Icon onClick={toggle}>
|
||||||
|
<CloseIcon />
|
||||||
|
</Icon>
|
||||||
|
<SidebarWrapper>
|
||||||
|
<SidebarMenu >
|
||||||
|
<SidebarLink to="Notebooks" onClick={toggle}>
|
||||||
|
Notebooks
|
||||||
|
</SidebarLink>
|
||||||
|
<SidebarLink to="Instructors" onClick={toggle}>
|
||||||
|
Instructors
|
||||||
|
</SidebarLink>
|
||||||
|
<SidebarLink to="Media" onClick={toggle}>
|
||||||
|
Media
|
||||||
|
</SidebarLink>
|
||||||
|
<SidebarLink to="More" onClick={toggle}>
|
||||||
|
More
|
||||||
|
</SidebarLink>
|
||||||
|
</SidebarMenu>
|
||||||
|
</SidebarWrapper>
|
||||||
|
</SidebarContainer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Sidebar
|
||||||
BIN
src/images/F23.prince.learning.turquoise.jpg
Normal file
|
After Width: | Height: | Size: 282 KiB |
1495
src/images/coding.svg
Normal file
|
After Width: | Height: | Size: 96 KiB |
1908
src/images/instructor.svg
Normal file
|
After Width: | Height: | Size: 234 KiB |
2101
src/images/media.svg
Normal file
|
After Width: | Height: | Size: 138 KiB |
2921
src/images/more.svg
Normal file
|
After Width: | Height: | Size: 266 KiB |
39
src/images/square-x-twitter.svg
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
height="10"
|
||||||
|
width="8.75"
|
||||||
|
viewBox="0 0 448 512"
|
||||||
|
version="1.1"
|
||||||
|
id="svg914"
|
||||||
|
sodipodi:docname="square-x-twitter.svg"
|
||||||
|
inkscape:version="1.1.2 (b8e25be8, 2022-02-05)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs918" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview916"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="65.6"
|
||||||
|
inkscape:cx="3.8948171"
|
||||||
|
inkscape:cy="4.5426829"
|
||||||
|
inkscape:window-width="1296"
|
||||||
|
inkscape:window-height="906"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="38"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg914" />
|
||||||
|
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||||
|
<path
|
||||||
|
d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"
|
||||||
|
id="path912"
|
||||||
|
style="fill:#ffffff;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
11
src/index.js
Executable file
@@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
|
|
||||||
34
src/pages/index.js
Executable file
@@ -0,0 +1,34 @@
|
|||||||
|
import React, {useState} from 'react'
|
||||||
|
import Sidebar from '../components/Sidebar'
|
||||||
|
import Navbar from '../components/NavBar'
|
||||||
|
import HeroSection from '../components/HeroSection';
|
||||||
|
import NotebookSection from '../components/Notebooks'
|
||||||
|
import InstructorsSection from '../components/Instructors';
|
||||||
|
import Footer from '../components/Footer';
|
||||||
|
import MediaSection from '../components/Media';
|
||||||
|
import MoreSection from '../components/More';
|
||||||
|
|
||||||
|
const Home = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
setIsOpen(!isOpen)
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Sidebar isOpen={isOpen} toggle={toggle}/>
|
||||||
|
<Navbar toggle={toggle}/>
|
||||||
|
<HeroSection />
|
||||||
|
<NotebookSection/>
|
||||||
|
<InstructorsSection/>
|
||||||
|
<MediaSection/>
|
||||||
|
<MoreSection/>
|
||||||
|
<Footer/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home
|
||||||
|
|
||||||
|
|
||||||
14
src/pages/signin.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ScrollToTop from '../components/ScrollToTop';
|
||||||
|
import SignIn from '../components/SignIn';
|
||||||
|
|
||||||
|
const SigninPage = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ScrollToTop />
|
||||||
|
<SignIn />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SigninPage;
|
||||||