setup gh-pages
This commit is contained in:
Simon Prince
6
src/App.css
Executable file
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
BIN
src/images/F23.prince.learning.turquoise.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
1495
src/images/coding.svg
Normal file
1495
src/images/coding.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 96 KiB |
1908
src/images/instructor.svg
Normal file
1908
src/images/instructor.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 234 KiB |
2101
src/images/media.svg
Normal file
2101
src/images/media.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 138 KiB |
2921
src/images/more.svg
Normal file
2921
src/images/more.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 266 KiB |
39
src/images/square-x-twitter.svg
Normal file
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
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
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
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;
|
||||
Reference in New Issue
Block a user