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

2
src/App.jsx
View File

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

1
src/components/ButtonElement.jsx
View File

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

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

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

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

@@ -8,7 +8,6 @@ export const HeroContainer = styled.div`
padding: 0 0px;
position: static;
z-index: 1;
}
`;
export const HeroContent = styled.div`
@@ -22,6 +21,7 @@ export const HeroContent = styled.div`
flex-direction: column;
align-items: center;
`;
export const HeroH1 = styled.h1`
color: #fff;
font-size: 48px;
@@ -59,8 +59,8 @@ export const HeroBtnWrapper = styled.div`
align-items: center;
`;
export const HeroRow = styled.div`
display: grid;
export const HeroRow = styled.div`
display: grid;
grid-auto-columns: minmax(auto, 1fr);
align-items: top;
grid-template-areas: 'col1 col2' };
@@ -74,17 +74,20 @@ export const HeroNewsItem = styled.div`
margin-left: 4px;
color: #000000;
font-size: 16px;
// line-height: 16px;
/* line-height: 16px; */
margin-bottom: 16px;
display: flex;
justify-content: start;
`;
export const HeroNewsItemDate = styled.div`
width: 20%;
margin-right: 20px;
@media screen and (max-width: 768px) {
font-size: 12px;
}
@media screen and (max-width: 480px) {
font-size: 12px;
}
@@ -130,6 +133,7 @@ export const TextWrapper = styled.div`
padding-top: 0;
padding-bottom: 0;
`;
export const HeroImgWrap = styled.div`
max-width: 555px;
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`
text-decoration: none;
color: #000;
@@ -275,6 +251,7 @@ export const HeroCitationTitle = styled.div`
`;
export const HeroNewsBlock = styled.div``;
export const HeroCitationBlock = styled.div`
font-size: 14px;
margin-bottom: 0px;

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

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

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

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

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

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

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

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

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

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

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

@@ -13,7 +13,7 @@ export const MoreContainer = styled.div`
export const MoreWrapper = styled.div`
display: grid;
z-index: 1;
// height: 1050px ;
/* height: 1050px; */
width: 100%;
max-width: 1100px;
margin-right: auto;
@@ -127,9 +127,10 @@ export const MoreContent = styled.div`
`;
export const MoreOuterList = styled.ul`
// list-style:none;
/* list-style:none; */
list-style-position: inside;
margin: 0;
@media screen and (max-width: 768px) {
font-size: 14px;
}
@@ -137,6 +138,7 @@ export const MoreOuterList = styled.ul`
export const MoreInnerList = styled.ul`
list-style-position: inside;
@media screen and (max-width: 768px) {
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> Focused on probabilistic models </li>
<li> Pre-"deep learning" </li>
<li> Lots of ML content</li>
<li> Individual chapters available below</li>
<li> Lots of ML content </li>
<li> Individual chapters available below </li>
</MoreInnerList>
</MoreInnerP>
</li>
@@ -77,12 +77,12 @@ const MoreSection = () => {
</MoreLink>
<MoreInnerP>
<MoreInnerList>
<li> What is an LLM?</li>
<li> Pretraining</li>
<li> Instruction fine-tuning</li>
<li> Reinforcement learning from human feedback</li>
<li> Notable LLMs</li>
<li> LLMs without training from scratch</li>
<li> What is an LLM? </li>
<li> Pretraining </li>
<li> Instruction fine-tuning </li>
<li>Reinforcement learning from human feedback </li>
<li> Notable LLMs </li>
<li> LLMs without training from scratch </li>
</MoreInnerList>
</MoreInnerP>
</li>

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

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

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

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

1
src/components/ScrollToTop.jsx
View File

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

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

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

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