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

formatting

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

25
.eslintrc.cjs
View File

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

7
.prettierignore Normal file
View File

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

4
.prettierrc.cjs
View File

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

2
index.html
View File

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

6
src/App.css
View File

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

12
src/App.jsx
View File

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

19
src/components/ButtonElement.jsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10
src/components/ScrollToTop.jsx
View File

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

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

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

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

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

13
src/index.jsx
View File

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

42
src/pages/index.jsx
View File

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

9
src/pages/signin.jsx
View File

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

10
vite.config.js
View File

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