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

code cleanup

Browse Source
This commit is contained in:
Tom Heaton
2024-06-06 00:23:19 +01:00
parent 3cf0c4c418
commit 625d1e29bb
18 changed files with 69 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

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

2
src/App.jsx
View File

@@ -1,6 +1,6 @@
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages"; import Home from "./pages";
import "./styles/App.css";
function App() { function App() {
return ( return (

1
src/components/ButtonElement.jsx
View File

@@ -15,6 +15,7 @@ export const Button = styled(Link)`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:hover { &:hover {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
background: ${({ primary }) => (primary ? "#fff" : "#01BF71")}; background: ${({ primary }) => (primary ? "#fff" : "#01BF71")};

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

@@ -26,6 +26,7 @@ export const FooterLinksContainer = styled.div`
export const FooterLinksWrapper = styled.div` export const FooterLinksWrapper = styled.div`
display: flex; display: flex;
@media screen and (max-width: 820px) { @media screen and (max-width: 820px) {
flex-direction: column; flex-direction: column;
} }
@@ -105,6 +106,7 @@ export const SocialLogo = styled(Link)`
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: bold; font-weight: bold;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 20px; font-size: 20px;
} }

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

@@ -8,7 +8,6 @@ export const HeroContainer = styled.div`
padding: 0 0px; padding: 0 0px;
position: static; position: static;
z-index: 1; z-index: 1;
}
`; `;
export const HeroContent = styled.div` export const HeroContent = styled.div`
@@ -22,6 +21,7 @@ export const HeroContent = styled.div`
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
`; `;
export const HeroH1 = styled.h1` export const HeroH1 = styled.h1`
color: #fff; color: #fff;
font-size: 48px; font-size: 48px;
@@ -59,8 +59,8 @@ export const HeroBtnWrapper = styled.div`
align-items: center; align-items: center;
`; `;
export const HeroRow = styled.div` export const HeroRow = styled.div`
display: grid; display: grid;
grid-auto-columns: minmax(auto, 1fr); grid-auto-columns: minmax(auto, 1fr);
align-items: top; align-items: top;
grid-template-areas: 'col1 col2' }; grid-template-areas: 'col1 col2' };
@@ -74,17 +74,20 @@ export const HeroNewsItem = styled.div`
margin-left: 4px; margin-left: 4px;
color: #000000; color: #000000;
font-size: 16px; font-size: 16px;
// line-height: 16px; /* line-height: 16px; */
margin-bottom: 16px; margin-bottom: 16px;
display: flex; display: flex;
justify-content: start; justify-content: start;
`; `;
export const HeroNewsItemDate = styled.div` export const HeroNewsItemDate = styled.div`
width: 20%; width: 20%;
margin-right: 20px; margin-right: 20px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 12px; font-size: 12px;
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
font-size: 12px; font-size: 12px;
} }
@@ -130,6 +133,7 @@ export const TextWrapper = styled.div`
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
`; `;
export const HeroImgWrap = styled.div` export const HeroImgWrap = styled.div`
max-width: 555px; max-width: 555px;
height: 100%; height: 100%;
@@ -181,34 +185,6 @@ export const HeroLink = styled.a`
} }
`; `;
// color: #fff;
// text-decoration: none;
// padding: 0.1rem 0rem;
// height: 100%;
// cursor: pointer;
// position:relative ;
// &:before{
// position: absolute;
// margin: 0 auto;
// top: 100%;
// left: 0;
// width: 100%;
// height: 2px;
// background-color: #000;
// content: '';
// opacity: .3;
// -webkit-transform: scaleX(1);
// transition-property: opacity, -webkit-transform;
// transition-duration: .3s;
// }
// &:hover:before {
// opacity: 1;
// -webkit-transform: scaleX(1.05);
// }
// `;
export const UDLLink = styled.a` export const UDLLink = styled.a`
text-decoration: none; text-decoration: none;
color: #000; color: #000;
@@ -275,6 +251,7 @@ export const HeroCitationTitle = styled.div`
`; `;
export const HeroNewsBlock = styled.div``; export const HeroNewsBlock = styled.div``;
export const HeroCitationBlock = styled.div` export const HeroCitationBlock = styled.div`
font-size: 14px; font-size: 14px;
margin-bottom: 0px; margin-bottom: 0px;

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

@@ -23,12 +23,13 @@ import {
const HeroSection = () => { const HeroSection = () => {
const citation = ` const citation = `
@book{prince2023understanding, @book{prince2023understanding,
author = "Simon J.D. Prince", author = "Simon J.D. Prince",
title = "Understanding Deep Learning", title = "Understanding Deep Learning",
publisher = "The MIT Press", publisher = "The MIT Press",
year = 2023, year = 2023,
url = "http://udlbook.com"} url = "http://udlbook.com"
}
`; `;
return ( return (
@@ -38,7 +39,6 @@ const HeroSection = () => {
<HeroColumn1> <HeroColumn1>
<HeroNewsBlock> <HeroNewsBlock>
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle> <HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>03/12/24</HeroNewsItemDate> <HeroNewsItemDate>03/12/24</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>
@@ -46,7 +46,6 @@ const HeroSection = () => {
Book now available again. Book now available again.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>02/21/24</HeroNewsItemDate> <HeroNewsItemDate>02/21/24</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>
@@ -64,7 +63,6 @@ const HeroSection = () => {
printing available mid-March. printing available mid-March.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>01/29/24</HeroNewsItemDate> <HeroNewsItemDate>01/29/24</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>
@@ -77,7 +75,6 @@ const HeroSection = () => {
published. published.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/26/23</HeroNewsItemDate> <HeroNewsItemDate>12/26/23</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>
@@ -90,7 +87,6 @@ const HeroSection = () => {
discussing book. discussing book.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/19/23</HeroNewsItemDate> <HeroNewsItemDate>12/19/23</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>
@@ -101,7 +97,6 @@ const HeroSection = () => {
discussing book. discussing book.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/06/23</HeroNewsItemDate> <HeroNewsItemDate>12/06/23</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>
@@ -113,7 +108,6 @@ const HeroSection = () => {
discussing the book with Borealis AI. discussing the book with Borealis AI.
</HeroNewsItemContent> </HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/05/23</HeroNewsItemDate> <HeroNewsItemDate>12/05/23</HeroNewsItemDate>
<HeroNewsItemContent> <HeroNewsItemContent>

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

@@ -122,6 +122,7 @@ export const InstructorsContent = styled.div`
flex-direction: column; flex-direction: column;
align-items: left; align-items: left;
list-style-position: inside; list-style-position: inside;
@media screen and (max-width: 1050px) { @media screen and (max-width: 1050px) {
font-size: 12px; font-size: 12px;
} }

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

@@ -1,3 +1,4 @@
import img from "../../images/instructor.svg";
import { import {
Column1, Column1,
Column2, Column2,
@@ -15,26 +16,6 @@ import {
TopLine, TopLine,
} from "./InstructorsElements"; } from "./InstructorsElements";
// export const homeObjOne = {
// id: 'about',
// lightBg: false,
// lightText: true,
// lightTextDesc: true,
// topLine: 'Premium Bank',
// headline: 'Unlimited transactions with zero fees',
// description:
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
// buttonLabel: 'Get Started',
// imgStart: false,
// img: require('../../images/svg-1.svg').default,
// alt: 'Car',
// dark: true,
// primary: true,
// darkText: false
// };
import img from "../../images/instructor.svg";
const InstructorsSection = () => { const InstructorsSection = () => {
return ( return (
<> <>

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

@@ -120,6 +120,7 @@ export const MediaContent = styled.div`
flex-direction: column; flex-direction: column;
align-items: left; align-items: left;
list-style-position: inside; list-style-position: inside;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 14px; font-size: 14px;
} }
@@ -140,6 +141,7 @@ export const MediaRow2 = styled.div`
export const VideoFrame = styled.div` export const VideoFrame = styled.div`
width: 560px; width: 560px;
height: 315px; height: 315px;
@media screen and (max-width: 1050px) { @media screen and (max-width: 1050px) {
width: 280px; width: 280px;
height: 157px; height: 157px;

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

@@ -1,3 +1,4 @@
import img from "../../images/media.svg";
import { import {
Column1, Column1,
Column2, Column2,
@@ -16,26 +17,6 @@ import {
VideoFrame, VideoFrame,
} from "./MediaElements"; } from "./MediaElements";
// export const homeObjOne = {
// id: 'about',
// lightBg: false,
// lightText: true,
// lightTextDesc: true,
// topLine: 'Premium Bank',
// headline: 'Unlimited transactions with zero fees',
// description:
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
// buttonLabel: 'Get Started',
// imgStart: false,
// img: require('../../images/svg-1.svg').default,
// alt: 'Car',
// dark: true,
// primary: true,
// darkText: false
// };
import img from "../../images/media.svg";
const MediaSection = () => { const MediaSection = () => {
return ( return (
<> <>
@@ -69,7 +50,7 @@ const MediaSection = () => {
height="100%" height="100%"
src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&amp;controls=0" src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&amp;controls=0"
title="YouTube video player" title="YouTube video player"
frameborder="2" frameBorder="2"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen allowfullscreen
></iframe> ></iframe>
@@ -83,7 +64,7 @@ const MediaSection = () => {
height="100%" height="100%"
src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0" src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0"
title="YouTube video player" title="YouTube video player"
frameborder="2" frameBorder="2"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen allowfullscreen
></iframe> ></iframe>

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

@@ -13,7 +13,7 @@ export const MoreContainer = styled.div`
export const MoreWrapper = styled.div` export const MoreWrapper = styled.div`
display: grid; display: grid;
z-index: 1; z-index: 1;
// height: 1050px ; /* height: 1050px; */
width: 100%; width: 100%;
max-width: 1100px; max-width: 1100px;
margin-right: auto; margin-right: auto;
@@ -127,9 +127,10 @@ export const MoreContent = styled.div`
`; `;
export const MoreOuterList = styled.ul` export const MoreOuterList = styled.ul`
// list-style:none; /* list-style:none; */
list-style-position: inside; list-style-position: inside;
margin: 0; margin: 0;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 14px; font-size: 14px;
} }
@@ -137,6 +138,7 @@ export const MoreOuterList = styled.ul`
export const MoreInnerList = styled.ul` export const MoreInnerList = styled.ul`
list-style-position: inside; list-style-position: inside;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 12px; font-size: 12px;
} }

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

@@ -58,8 +58,8 @@ const MoreSection = () => {
<li> 2012 book published with CUP </li> <li> 2012 book published with CUP </li>
<li> Focused on probabilistic models </li> <li> Focused on probabilistic models </li>
<li> Pre-"deep learning" </li> <li> Pre-"deep learning" </li>
<li> Lots of ML content</li> <li> Lots of ML content </li>
<li> Individual chapters available below</li> <li> Individual chapters available below </li>
</MoreInnerList> </MoreInnerList>
</MoreInnerP> </MoreInnerP>
</li> </li>
@@ -77,12 +77,12 @@ const MoreSection = () => {
</MoreLink> </MoreLink>
<MoreInnerP> <MoreInnerP>
<MoreInnerList> <MoreInnerList>
<li> What is an LLM?</li> <li> What is an LLM? </li>
<li> Pretraining</li> <li> Pretraining </li>
<li> Instruction fine-tuning</li> <li> Instruction fine-tuning </li>
<li> Reinforcement learning from human feedback</li> <li>Reinforcement learning from human feedback </li>
<li> Notable LLMs</li> <li> Notable LLMs </li>
<li> LLMs without training from scratch</li> <li> LLMs without training from scratch </li>
</MoreInnerList> </MoreInnerList>
</MoreInnerP> </MoreInnerP>
</li> </li>

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

@@ -39,6 +39,7 @@ export const NavLogo = styled(LinkR)`
margin-left: 24px; margin-left: 24px;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 1rem; font-size: 1rem;
} }

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

@@ -1,7 +1,6 @@
import styled from "styled-components"; import styled from "styled-components";
export const NotebookContainer = styled.div`
export const NotebookContainer = styled.div`
color: #fff; color: #fff;
/* background: #f9f9f9; */ /* background: #f9f9f9; */
background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')}; background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
@@ -12,10 +11,10 @@ export const NotebookContainer = styled.div`
` `
export const NotebookWrapper = styled.div` export const NotebookWrapper = styled.div`
display: grid ; display: grid;
z-index: 1; z-index: 1;
// height: 1250px ; /* height: 1250px; */
width: 100% ; width: 100% ;
max-width: 1100px; max-width: 1100px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
@@ -23,8 +22,8 @@ export const NotebookWrapper = styled.div`
justify-content: center; justify-content: center;
` `
export const NotebookRow = styled.div` export const NotebookRow = styled.div`
display: grid; display: grid;
grid-auto-columns: minmax(auto, 1fr); grid-auto-columns: minmax(auto, 1fr);
align-items: center; align-items: center;
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)}; grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
@@ -34,10 +33,11 @@ export const NotebookRow = styled.div`
} }
` `
export const Column1 = styled.p` export const Column1 = styled.p`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col1; grid-area: col1;
@media screen and (max-width: 1050px) { @media screen and (max-width: 1050px) {
font-size: 12px; font-size: 12px;
} }
@@ -47,10 +47,11 @@ export const Column1 = styled.p`
} }
` `
export const Column2 = styled.p` export const Column2 = styled.p`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col2; grid-area: col2;
@media screen and (max-width: 1050px) { @media screen and (max-width: 1050px) {
font-size: 12px; font-size: 12px;
} }
@@ -61,12 +62,12 @@ export const Column2 = styled.p`
` `
export const TextWrapper = styled.div` export const TextWrapper = styled.div`
max-width: 540px ; max-width: 540px ;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
` `
export const TopLine = styled.p` export const TopLine = styled.p`
color: #57c6d1; color: #57c6d1;
font-size: 16px; font-size: 16px;
line-height: 16px; line-height: 16px;
@@ -76,22 +77,19 @@ export const TopLine = styled.p`
margin-bottom: 16px; margin-bottom: 16px;
` `
export const Heading= styled.h1` export const Heading= styled.h1`
margin-bottom: 24px; margin-bottom: 24px;
font-size: 48px; font-size: 48px;
line-height: 1.1; line-height: 1.1;
font-weight: 600; font-weight: 600;
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')}; color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
@media screen and (max-width: 480px) @media screen and (max-width: 480px) {
{
font-size: 32px; font-size: 32px;
} }
` `
export const Subtitle = styled.p`
export const Subtitle = styled.p`
max-width: 440px; max-width: 440px;
margin-bottom: 35px; margin-bottom: 35px;
font-size: 18px; font-size: 18px;
@@ -104,20 +102,19 @@ export const BtnWrap = styled.div`
justify-content: flex-start; justify-content: flex-start;
` `
export const ImgWrap = styled.div` export const ImgWrap = styled.div`
max-width: 555px; max-width: 555px;
height: 100%; height: 100%;
` `
export const Img = styled.img` export const Img = styled.img`
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
margin-right: 0; margin-right: 0;
margin-left: 10px; margin-left: 10px;
padding-right: 0; padding-right: 0;
`; `;
export const NBLink = styled.a` export const NBLink = styled.a`
text-decoration: none; text-decoration: none;
color: #57c6d1;; color: #57c6d1;;
@@ -143,5 +140,5 @@ export const NBLink = styled.a`
&:hover:before { &:hover:before {
opacity: 1; opacity: 1;
-webkit-transform: scaleX(1.05); -webkit-transform: scaleX(1.05);
} }
` `

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

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

1
src/components/ScrollToTop.jsx
View File

@@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom";
export default function ScrollToTop() { export default function ScrollToTop() {
const { pathname } = useLocation(); const { pathname } = useLocation();
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, [pathname]); }, [pathname]);

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

@@ -20,6 +20,7 @@ export const SidebarContainer = styled.aside`
export const CloseIcon = styled(FaTimes)` export const CloseIcon = styled(FaTimes)`
color: #fff; color: #fff;
&:hover { &:hover {
color: #01bf71; color: #01bf71;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;

0
src/App.css → src/styles/App.css
View File