vite
This commit is contained in:
Tom Heaton
21
.eslintrc.cjs
Normal file
21
.eslintrc.cjs
Normal file
@@ -0,0 +1,21 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.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 },
|
||||
],
|
||||
},
|
||||
}
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -10,6 +10,7 @@
|
||||
|
||||
# production
|
||||
/build
|
||||
/dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
||||
19
index.html
Normal file
19
index.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Understanding Deep Learning</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
14654
package-lock.json
generated
Executable file → Normal file
14654
package-lock.json
generated
Executable file → Normal file
File diff suppressed because it is too large
Load Diff
45
package.json
45
package.json
@@ -5,46 +5,29 @@
|
||||
"homepage": "https://udlbook.github.io/udlbook",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@testing-library/jest-dom": "^5.15.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react": "^18.0.2",
|
||||
"react-dom": "^18.0.2",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-scroll": "^1.8.4",
|
||||
"styled-components": "^5.3.3",
|
||||
"url-loader": "^4.1.1",
|
||||
"web-vitals": "^1.1.2"
|
||||
"styled-components": "^5.3.3"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts --openssl-legacy-provider start",
|
||||
"build": "react-scripts --openssl-legacy-provider build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d build"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^6.1.1"
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"gh-pages": "^6.1.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap" rel="stylesheet">
|
||||
<title>Understanding Deep Learning</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@@ -1,23 +1,23 @@
|
||||
import styled from 'styled-components'
|
||||
import {Link} from 'react-scroll'
|
||||
|
||||
|
||||
export const Button= styled(Link)`
|
||||
border-radius: 50px;
|
||||
background: ${({primary}) => (primary ? '#01BF71' : '#010606')};
|
||||
white-space: nowrap;
|
||||
padding: ${({big}) => (big? ' 14px 48px': '12px 30px')};
|
||||
color: ${({dark}) => (dark ? '#010106': '#fff')};
|
||||
font-size: $${({fontBig}) => (fontBig ? '20px' : '16px')};
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: ${({primary}) => (primary ? '#fff' : '#01BF71')}
|
||||
}
|
||||
import styled from 'styled-components'
|
||||
import {Link} from 'react-scroll'
|
||||
|
||||
|
||||
export const Button= styled(Link)`
|
||||
border-radius: 50px;
|
||||
background: ${({primary}) => (primary ? '#01BF71' : '#010606')};
|
||||
white-space: nowrap;
|
||||
padding: ${({big}) => (big? ' 14px 48px': '12px 30px')};
|
||||
color: ${({dark}) => (dark ? '#010106': '#fff')};
|
||||
font-size: $${({fontBig}) => (fontBig ? '20px' : '16px')};
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: ${({primary}) => (primary ? '#fff' : '#01BF71')}
|
||||
}
|
||||
`
|
||||
@@ -1,142 +1,142 @@
|
||||
import styled from 'styled-components'
|
||||
import {Link} from 'react-router-dom'
|
||||
|
||||
export const FooterContainer = styled.footer`
|
||||
background-color: #101522;
|
||||
`
|
||||
|
||||
export const FooterWrap = styled.div`
|
||||
padding: 48x 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
`
|
||||
|
||||
export const FooterLinksContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
padding-top: 32px;
|
||||
}
|
||||
`
|
||||
|
||||
export const FooterLinksWrapper = styled.div`
|
||||
display: flex;
|
||||
@media screen and (max-width: 820px){
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
export const FooterLinkItems = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 16px;
|
||||
text-align: left;
|
||||
width: 160px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
|
||||
@media screen and (max-width: 420px){
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
||||
export const FooterLinkTitle = styled.h1`
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px ;
|
||||
`
|
||||
|
||||
export const FooterLink = styled(Link)`
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover{
|
||||
color: #01bf71;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
`
|
||||
|
||||
export const SocialMedia = styled.section`
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
export const SocialMediaWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 20px auto 0 auto ;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
export const SocialAttrWrap = styled.div`
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 10px auto 0 auto ;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
export const SocialLogo = styled(Link)`
|
||||
color: #fff;
|
||||
justify-self: start;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
`
|
||||
|
||||
export const WebsiteRights = styled.small`
|
||||
color: #fff ;
|
||||
margin-bottom: 8px ;
|
||||
`
|
||||
|
||||
export const SocialIcons = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
margin-bottom: 8px ;
|
||||
`
|
||||
|
||||
export const SocialIconLink = styled.a`
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
`
|
||||
|
||||
export const FooterImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
export const FooterImg = styled.img`
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
`;
|
||||
import styled from 'styled-components'
|
||||
import {Link} from 'react-router-dom'
|
||||
|
||||
export const FooterContainer = styled.footer`
|
||||
background-color: #101522;
|
||||
`
|
||||
|
||||
export const FooterWrap = styled.div`
|
||||
padding: 48x 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
`
|
||||
|
||||
export const FooterLinksContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
padding-top: 32px;
|
||||
}
|
||||
`
|
||||
|
||||
export const FooterLinksWrapper = styled.div`
|
||||
display: flex;
|
||||
@media screen and (max-width: 820px){
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
export const FooterLinkItems = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 16px;
|
||||
text-align: left;
|
||||
width: 160px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
|
||||
@media screen and (max-width: 420px){
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
||||
export const FooterLinkTitle = styled.h1`
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px ;
|
||||
`
|
||||
|
||||
export const FooterLink = styled(Link)`
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover{
|
||||
color: #01bf71;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
`
|
||||
|
||||
export const SocialMedia = styled.section`
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
export const SocialMediaWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 20px auto 0 auto ;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
export const SocialAttrWrap = styled.div`
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 10px auto 0 auto ;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
|
||||
export const SocialLogo = styled(Link)`
|
||||
color: #fff;
|
||||
justify-self: start;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
`
|
||||
|
||||
export const WebsiteRights = styled.small`
|
||||
color: #fff ;
|
||||
margin-bottom: 8px ;
|
||||
`
|
||||
|
||||
export const SocialIcons = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
margin-bottom: 8px ;
|
||||
`
|
||||
|
||||
export const SocialIconLink = styled.a`
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
`
|
||||
|
||||
export const FooterImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
export const FooterImg = styled.img`
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
`;
|
||||
@@ -1,42 +1,42 @@
|
||||
import React from 'react'
|
||||
import { FaLinkedin} from 'react-icons/fa'
|
||||
import { FooterContainer, FooterWrap, FooterImg } from './FooterElements'
|
||||
import { SocialMedia, SocialMediaWrap, SocialIcons, SocialIconLink, WebsiteRights, SocialLogo } from './FooterElements'
|
||||
import { animateScroll as scroll } from 'react-scroll'
|
||||
import twitterImg from '../../images/square-x-twitter.svg'
|
||||
|
||||
const Footer = () => {
|
||||
const toggleHome = () => {
|
||||
scroll.scrollToTop();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FooterContainer>
|
||||
<FooterWrap>
|
||||
<SocialMedia>
|
||||
<SocialMediaWrap>
|
||||
<SocialLogo to='/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>
|
||||
</WebsiteRights>
|
||||
<SocialIcons>
|
||||
<SocialIconLink href="https://twitter.com/SimonPrinceAI" target="_blank" aria-label="Twitter">
|
||||
<FooterImg src={twitterImg} alt="twitter"/>
|
||||
</SocialIconLink>
|
||||
<SocialIconLink href="https://www.linkedin.com/in/simon-prince-615bb9165/" target="_blank" aria-label="LinkedIn">
|
||||
<FaLinkedin/>
|
||||
</SocialIconLink>
|
||||
</SocialIcons>
|
||||
</SocialMediaWrap>
|
||||
</SocialMedia>
|
||||
</FooterWrap>
|
||||
</FooterContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
import React from 'react'
|
||||
import { FaLinkedin} from 'react-icons/fa'
|
||||
import { FooterContainer, FooterWrap, FooterImg } from './FooterElements'
|
||||
import { SocialMedia, SocialMediaWrap, SocialIcons, SocialIconLink, WebsiteRights, SocialLogo } from './FooterElements'
|
||||
import { animateScroll as scroll } from 'react-scroll'
|
||||
import twitterImg from '../../images/square-x-twitter.svg'
|
||||
|
||||
const Footer = () => {
|
||||
const toggleHome = () => {
|
||||
scroll.scrollToTop();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<FooterContainer>
|
||||
<FooterWrap>
|
||||
<SocialMedia>
|
||||
<SocialMediaWrap>
|
||||
<SocialLogo to='/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>
|
||||
</WebsiteRights>
|
||||
<SocialIcons>
|
||||
<SocialIconLink href="https://twitter.com/SimonPrinceAI" target="_blank" aria-label="Twitter">
|
||||
<FooterImg src={twitterImg} alt="twitter"/>
|
||||
</SocialIconLink>
|
||||
<SocialIconLink href="https://www.linkedin.com/in/simon-prince-615bb9165/" target="_blank" aria-label="LinkedIn">
|
||||
<FaLinkedin/>
|
||||
</SocialIconLink>
|
||||
</SocialIcons>
|
||||
</SocialMediaWrap>
|
||||
</SocialMedia>
|
||||
</FooterWrap>
|
||||
</FooterContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@@ -1,304 +1,304 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
export const HeroContainer = styled.div`
|
||||
background: #57c6d1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 0px;
|
||||
position: static;
|
||||
z-index: 1;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
|
||||
export const HeroContent = styled.div`
|
||||
z-index: 3;
|
||||
width: 100% ;
|
||||
max-width: 1100px;
|
||||
position: static;
|
||||
padding: 8px 24px;
|
||||
margin: 80px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center ;
|
||||
`
|
||||
export const HeroH1 = styled.h1`
|
||||
color: #fff;
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
export const HeroP = styled.p`
|
||||
margin-top: 24px;
|
||||
color: #fff;
|
||||
font-size: 24px ;
|
||||
text-align: center ;
|
||||
max-width: 600px ;
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
|
||||
export const HeroBtnWrapper = styled.div`
|
||||
margin-top: 32px ;
|
||||
display: flex;
|
||||
flex-direction: column ;
|
||||
align-items: center ;
|
||||
`
|
||||
|
||||
|
||||
export const HeroRow = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: top;
|
||||
grid-template-areas: 'col1 col2' };
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: 'col2' 'col1';
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
export const HeroNewsItem = styled.div`
|
||||
margin-left: 4px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
// line-height: 16px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
|
||||
`
|
||||
export const HeroNewsItemDate = styled.div`
|
||||
width: 20%;
|
||||
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%;
|
||||
color: #000000;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
|
||||
export const HeroColumn1 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
margin-left: 12px;
|
||||
margin-top: 60px;
|
||||
padding: 10px 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col1;
|
||||
align-items:left;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content: space-between;
|
||||
`
|
||||
|
||||
|
||||
export const HeroColumn2 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col2;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
flex-direction:column;
|
||||
`
|
||||
|
||||
export const TextWrapper = styled.div`
|
||||
max-width: 540px ;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
`
|
||||
export const HeroImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
export const Img = styled.img`
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
`;
|
||||
|
||||
export const HeroDownloadsImg = styled.img`
|
||||
margin-top: 5px;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 10px;
|
||||
`
|
||||
|
||||
export const HeroLink = styled.a`
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 0.6rem 0rem 0rem 0rem;
|
||||
cursor: pointer;
|
||||
position:relative ;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
content: '';
|
||||
opacity: .3;
|
||||
-webkit-transform: scaleX(1);
|
||||
transition-property: opacity, -webkit-transform;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`;
|
||||
|
||||
// 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;
|
||||
font-weight: 300;
|
||||
margin: 0 2px;
|
||||
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 HeroNewsTitle = styled.div`
|
||||
margin-left: 0px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
margin-bottom: 36px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
|
||||
export const HeroCitationTitle = styled.div`
|
||||
margin-left: 0px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
margin-top:36px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
export const HeroNewsBlock = styled.div`
|
||||
|
||||
`
|
||||
export const HeroCitationBlock = styled.div`
|
||||
font-size: 14px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
|
||||
`
|
||||
|
||||
|
||||
|
||||
|
||||
export const HeroFollowBlock = styled.div`
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
import styled from "styled-components";
|
||||
|
||||
export const HeroContainer = styled.div`
|
||||
background: #57c6d1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 0px;
|
||||
position: static;
|
||||
z-index: 1;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
|
||||
export const HeroContent = styled.div`
|
||||
z-index: 3;
|
||||
width: 100% ;
|
||||
max-width: 1100px;
|
||||
position: static;
|
||||
padding: 8px 24px;
|
||||
margin: 80px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center ;
|
||||
`
|
||||
export const HeroH1 = styled.h1`
|
||||
color: #fff;
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
export const HeroP = styled.p`
|
||||
margin-top: 24px;
|
||||
color: #fff;
|
||||
font-size: 24px ;
|
||||
text-align: center ;
|
||||
max-width: 600px ;
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
|
||||
export const HeroBtnWrapper = styled.div`
|
||||
margin-top: 32px ;
|
||||
display: flex;
|
||||
flex-direction: column ;
|
||||
align-items: center ;
|
||||
`
|
||||
|
||||
|
||||
export const HeroRow = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: top;
|
||||
grid-template-areas: 'col1 col2' };
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: 'col2' 'col1';
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
export const HeroNewsItem = styled.div`
|
||||
margin-left: 4px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
// line-height: 16px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
|
||||
`
|
||||
export const HeroNewsItemDate = styled.div`
|
||||
width: 20%;
|
||||
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%;
|
||||
color: #000000;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
|
||||
export const HeroColumn1 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
margin-left: 12px;
|
||||
margin-top: 60px;
|
||||
padding: 10px 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col1;
|
||||
align-items:left;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content: space-between;
|
||||
`
|
||||
|
||||
|
||||
export const HeroColumn2 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col2;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
flex-direction:column;
|
||||
`
|
||||
|
||||
export const TextWrapper = styled.div`
|
||||
max-width: 540px ;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
`
|
||||
export const HeroImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
export const Img = styled.img`
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
`;
|
||||
|
||||
export const HeroDownloadsImg = styled.img`
|
||||
margin-top: 5px;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 10px;
|
||||
`
|
||||
|
||||
export const HeroLink = styled.a`
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 0.6rem 0rem 0rem 0rem;
|
||||
cursor: pointer;
|
||||
position:relative ;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
content: '';
|
||||
opacity: .3;
|
||||
-webkit-transform: scaleX(1);
|
||||
transition-property: opacity, -webkit-transform;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`;
|
||||
|
||||
// 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;
|
||||
font-weight: 300;
|
||||
margin: 0 2px;
|
||||
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 HeroNewsTitle = styled.div`
|
||||
margin-left: 0px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
margin-bottom: 36px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
|
||||
export const HeroCitationTitle = styled.div`
|
||||
margin-left: 0px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
margin-top:36px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
export const HeroNewsBlock = styled.div`
|
||||
|
||||
`
|
||||
export const HeroCitationBlock = styled.div`
|
||||
font-size: 14px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
|
||||
`
|
||||
|
||||
|
||||
|
||||
|
||||
export const HeroFollowBlock = styled.div`
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
@@ -1,94 +1,94 @@
|
||||
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'
|
||||
|
||||
const HeroSection = () => {
|
||||
|
||||
|
||||
const citation = `
|
||||
@book{prince2023understanding,
|
||||
author = "Simon J.D. Prince",
|
||||
title = "Understanding Deep Learning",
|
||||
publisher = "The MIT Press",
|
||||
year = 2023,
|
||||
url = "http://udlbook.com"}
|
||||
`
|
||||
|
||||
return (
|
||||
<HeroContainer id="home">
|
||||
<HeroContent>
|
||||
<HeroRow>
|
||||
<HeroColumn1>
|
||||
<HeroNewsBlock>
|
||||
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>03/12/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>02/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>
|
||||
</HeroNewsItem>
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>02/15/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>01/29/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> New blog about <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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</HeroNewsItem>
|
||||
</HeroNewsBlock>
|
||||
<HeroCitationTitle>CITATION:</HeroCitationTitle>
|
||||
<HeroCitationBlock>
|
||||
<pre>
|
||||
<code>
|
||||
<React.Fragment>{citation}</React.Fragment>
|
||||
</code>
|
||||
</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.
|
||||
</HeroFollowBlock>
|
||||
</HeroColumn1>
|
||||
<HeroColumn2>
|
||||
<HeroImgWrap>
|
||||
<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>
|
||||
</HeroColumn2>
|
||||
</HeroRow>
|
||||
</HeroContent>
|
||||
</HeroContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeroSection
|
||||
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'
|
||||
|
||||
const HeroSection = () => {
|
||||
|
||||
|
||||
const citation = `
|
||||
@book{prince2023understanding,
|
||||
author = "Simon J.D. Prince",
|
||||
title = "Understanding Deep Learning",
|
||||
publisher = "The MIT Press",
|
||||
year = 2023,
|
||||
url = "http://udlbook.com"}
|
||||
`
|
||||
|
||||
return (
|
||||
<HeroContainer id="home">
|
||||
<HeroContent>
|
||||
<HeroRow>
|
||||
<HeroColumn1>
|
||||
<HeroNewsBlock>
|
||||
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>03/12/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>02/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>
|
||||
</HeroNewsItem>
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>02/15/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>01/29/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> New blog about <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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</HeroNewsItem>
|
||||
</HeroNewsBlock>
|
||||
<HeroCitationTitle>CITATION:</HeroCitationTitle>
|
||||
<HeroCitationBlock>
|
||||
<pre>
|
||||
<code>
|
||||
<React.Fragment>{citation}</React.Fragment>
|
||||
</code>
|
||||
</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.
|
||||
</HeroFollowBlock>
|
||||
</HeroColumn1>
|
||||
<HeroColumn2>
|
||||
<HeroImgWrap>
|
||||
<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>
|
||||
</HeroColumn2>
|
||||
</HeroRow>
|
||||
</HeroContent>
|
||||
</HeroContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeroSection
|
||||
@@ -1,119 +1,119 @@
|
||||
import { Link as LinkS } from 'react-scroll';
|
||||
import { Link as LinkR } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Nav = styled.nav`
|
||||
background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')};
|
||||
height: 100px;
|
||||
margin-top: -100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
transition: 0.8s all ease;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavbarContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
max-width: 1100px;
|
||||
`;
|
||||
|
||||
export const NavLogo = styled(LinkR)`
|
||||
color: #fff;
|
||||
justify-self: flex-start;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
export const MobileIcon = styled.div`
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(-100%, 60%);
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavMenu = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin-right: -22px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavItem = styled.li`
|
||||
height: 80px;
|
||||
`;
|
||||
|
||||
export const NavBtn = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavLinks = styled(LinkS)`
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: 0 1rem;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
border-bottom: 3px solid #57c6d1
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavBtnLink = styled(LinkR)`
|
||||
border-radius: 50px;
|
||||
background: #01bf71;
|
||||
white-space: nowrap;
|
||||
padding: 10px 22px;
|
||||
color: #010606;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: #fff;
|
||||
color: #010606;
|
||||
}
|
||||
`;
|
||||
import { Link as LinkS } from 'react-scroll';
|
||||
import { Link as LinkR } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Nav = styled.nav`
|
||||
background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')};
|
||||
height: 100px;
|
||||
margin-top: -100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
transition: 0.8s all ease;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavbarContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
max-width: 1100px;
|
||||
`;
|
||||
|
||||
export const NavLogo = styled(LinkR)`
|
||||
color: #fff;
|
||||
justify-self: flex-start;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
export const MobileIcon = styled.div`
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(-100%, 60%);
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavMenu = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin-right: -22px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavItem = styled.li`
|
||||
height: 80px;
|
||||
`;
|
||||
|
||||
export const NavBtn = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavLinks = styled(LinkS)`
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: 0 1rem;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
border-bottom: 3px solid #57c6d1
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavBtnLink = styled(LinkR)`
|
||||
border-radius: 50px;
|
||||
background: #01bf71;
|
||||
white-space: nowrap;
|
||||
padding: 10px 22px;
|
||||
color: #010606;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: #fff;
|
||||
color: #010606;
|
||||
}
|
||||
`;
|
||||
@@ -1,59 +1,59 @@
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import {FaBars} from 'react-icons/fa'
|
||||
import {IconContext} from 'react-icons/lib'
|
||||
import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements'
|
||||
import { animateScroll as scroll } from 'react-scroll'
|
||||
|
||||
|
||||
const Navbar = ( {toggle} ) => {
|
||||
const [scrollNav, setScrollNav] = useState(false)
|
||||
|
||||
const changeNav = () =>{
|
||||
if (window.scrollY >= 80){
|
||||
setScrollNav(true)
|
||||
}else{
|
||||
setScrollNav(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() =>{
|
||||
window.addEventListener('scroll', changeNav)
|
||||
}, [])
|
||||
|
||||
const toggleHome = () => {
|
||||
scroll.scrollToTop();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconContext.Provider value={{color: '#fff'}}>
|
||||
<Nav scrollNav={scrollNav}>
|
||||
<NavbarContainer>
|
||||
<NavLogo to="/udlbook/" onClick={toggleHome}>
|
||||
<h1> Understanding Deep Learning </h1>
|
||||
</NavLogo>
|
||||
<MobileIcon onClick={toggle}>
|
||||
<FaBars />
|
||||
</MobileIcon>
|
||||
<NavMenu>
|
||||
<NavItem>
|
||||
<NavLinks to="Notebooks" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Notebooks</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="Instructors" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Instructors</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="Media" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Media</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="More" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>More</NavLinks>
|
||||
</NavItem>
|
||||
</NavMenu>
|
||||
</NavbarContainer>
|
||||
</Nav>
|
||||
</IconContext.Provider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import {FaBars} from 'react-icons/fa'
|
||||
import {IconContext} from 'react-icons/lib'
|
||||
import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements'
|
||||
import { animateScroll as scroll } from 'react-scroll'
|
||||
|
||||
|
||||
const Navbar = ( {toggle} ) => {
|
||||
const [scrollNav, setScrollNav] = useState(false)
|
||||
|
||||
const changeNav = () =>{
|
||||
if (window.scrollY >= 80){
|
||||
setScrollNav(true)
|
||||
}else{
|
||||
setScrollNav(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() =>{
|
||||
window.addEventListener('scroll', changeNav)
|
||||
}, [])
|
||||
|
||||
const toggleHome = () => {
|
||||
scroll.scrollToTop();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconContext.Provider value={{color: '#fff'}}>
|
||||
<Nav scrollNav={scrollNav}>
|
||||
<NavbarContainer>
|
||||
<NavLogo to="/udlbook/" onClick={toggleHome}>
|
||||
<h1> Understanding Deep Learning </h1>
|
||||
</NavLogo>
|
||||
<MobileIcon onClick={toggle}>
|
||||
<FaBars />
|
||||
</MobileIcon>
|
||||
<NavMenu>
|
||||
<NavItem>
|
||||
<NavLinks to="Notebooks" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Notebooks</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="Instructors" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Instructors</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="Media" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Media</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="More" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>More</NavLinks>
|
||||
</NavItem>
|
||||
</NavMenu>
|
||||
</NavbarContainer>
|
||||
</Nav>
|
||||
</IconContext.Provider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
@@ -1,11 +1,11 @@
|
||||
import {useEffect} from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const {pathname} = useLocation()
|
||||
useEffect(() => {
|
||||
window.scrollTo(0,0)
|
||||
}, [pathname])
|
||||
|
||||
return null;
|
||||
}
|
||||
import {useEffect} from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const {pathname} = useLocation()
|
||||
useEffect(() => {
|
||||
window.scrollTo(0,0)
|
||||
}, [pathname])
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -1,98 +1,98 @@
|
||||
import styled from 'styled-components'
|
||||
import {Link as LinkS} from 'react-scroll'
|
||||
import {Link as LinkR} from 'react-router-dom'
|
||||
import {FaTimes} from 'react-icons/fa'
|
||||
|
||||
|
||||
|
||||
export const SidebarContainer = styled.aside`
|
||||
position:fixed ;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0d0d0d;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: 0.3s ease-in-out;
|
||||
opacity: ${({ isOpen }) => (isOpen ? '100%' : '0')};
|
||||
top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};
|
||||
|
||||
`
|
||||
|
||||
export const CloseIcon = styled(FaTimes)`
|
||||
color: #fff ;
|
||||
&:hover {
|
||||
color: #01bf71;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
`
|
||||
|
||||
export const Icon = styled.div`
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
right: 1.5rem;
|
||||
background: transparent;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
`
|
||||
|
||||
export const SidebarWrapper = styled.div`
|
||||
color: #ffffff;
|
||||
`
|
||||
|
||||
export const SidebarMenu = styled.ul`
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(6,80px);
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: 480px){
|
||||
grid-template-rows: repeat(6, 60px) ;
|
||||
}
|
||||
`
|
||||
|
||||
export const SidebarLink = styled(LinkS)`
|
||||
display: flex ;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #01bf71;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
`
|
||||
|
||||
export const SideBtnWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
export const SidebarRoute = styled(LinkR)`
|
||||
border-radius: 50px;
|
||||
background: #01bf71;
|
||||
white-space: nowrap;
|
||||
padding: 16px 46px;
|
||||
color: #010606;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: #fff;
|
||||
color: #010606;
|
||||
}
|
||||
import styled from 'styled-components'
|
||||
import {Link as LinkS} from 'react-scroll'
|
||||
import {Link as LinkR} from 'react-router-dom'
|
||||
import {FaTimes} from 'react-icons/fa'
|
||||
|
||||
|
||||
|
||||
export const SidebarContainer = styled.aside`
|
||||
position:fixed ;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0d0d0d;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: 0.3s ease-in-out;
|
||||
opacity: ${({ isOpen }) => (isOpen ? '100%' : '0')};
|
||||
top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};
|
||||
|
||||
`
|
||||
|
||||
export const CloseIcon = styled(FaTimes)`
|
||||
color: #fff ;
|
||||
&:hover {
|
||||
color: #01bf71;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
`
|
||||
|
||||
export const Icon = styled.div`
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
right: 1.5rem;
|
||||
background: transparent;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
`
|
||||
|
||||
export const SidebarWrapper = styled.div`
|
||||
color: #ffffff;
|
||||
`
|
||||
|
||||
export const SidebarMenu = styled.ul`
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(6,80px);
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: 480px){
|
||||
grid-template-rows: repeat(6, 60px) ;
|
||||
}
|
||||
`
|
||||
|
||||
export const SidebarLink = styled(LinkS)`
|
||||
display: flex ;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
list-style: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #01bf71;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
`
|
||||
|
||||
export const SideBtnWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
export const SidebarRoute = styled(LinkR)`
|
||||
border-radius: 50px;
|
||||
background: #01bf71;
|
||||
white-space: nowrap;
|
||||
padding: 16px 46px;
|
||||
color: #010606;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: #fff;
|
||||
color: #010606;
|
||||
}
|
||||
`
|
||||
@@ -1,33 +1,33 @@
|
||||
import React from 'react'
|
||||
import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements'
|
||||
|
||||
|
||||
const Sidebar = ({isOpen, toggle}) => {
|
||||
return (
|
||||
<>
|
||||
<SidebarContainer isOpen={isOpen} onClick={toggle}>
|
||||
<Icon onClick={toggle}>
|
||||
<CloseIcon />
|
||||
</Icon>
|
||||
<SidebarWrapper>
|
||||
<SidebarMenu >
|
||||
<SidebarLink to="Notebooks" onClick={toggle}>
|
||||
Notebooks
|
||||
</SidebarLink>
|
||||
<SidebarLink to="Instructors" onClick={toggle}>
|
||||
Instructors
|
||||
</SidebarLink>
|
||||
<SidebarLink to="Media" onClick={toggle}>
|
||||
Media
|
||||
</SidebarLink>
|
||||
<SidebarLink to="More" onClick={toggle}>
|
||||
More
|
||||
</SidebarLink>
|
||||
</SidebarMenu>
|
||||
</SidebarWrapper>
|
||||
</SidebarContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
import React from 'react'
|
||||
import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements'
|
||||
|
||||
|
||||
const Sidebar = ({isOpen, toggle}) => {
|
||||
return (
|
||||
<>
|
||||
<SidebarContainer isOpen={isOpen} onClick={toggle}>
|
||||
<Icon onClick={toggle}>
|
||||
<CloseIcon />
|
||||
</Icon>
|
||||
<SidebarWrapper>
|
||||
<SidebarMenu >
|
||||
<SidebarLink to="Notebooks" onClick={toggle}>
|
||||
Notebooks
|
||||
</SidebarLink>
|
||||
<SidebarLink to="Instructors" onClick={toggle}>
|
||||
Instructors
|
||||
</SidebarLink>
|
||||
<SidebarLink to="Media" onClick={toggle}>
|
||||
Media
|
||||
</SidebarLink>
|
||||
<SidebarLink to="More" onClick={toggle}>
|
||||
More
|
||||
</SidebarLink>
|
||||
</SidebarMenu>
|
||||
</SidebarWrapper>
|
||||
</SidebarContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
@@ -2,10 +2,9 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
</React.StrictMode>
|
||||
)
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
import React, {useState} from 'react'
|
||||
import Sidebar from '../components/Sidebar'
|
||||
import Navbar from '../components/NavBar'
|
||||
import HeroSection from '../components/HeroSection';
|
||||
import NotebookSection from '../components/Notebooks'
|
||||
import InstructorsSection from '../components/Instructors';
|
||||
import Footer from '../components/Footer';
|
||||
import MediaSection from '../components/Media';
|
||||
import MoreSection from '../components/More';
|
||||
|
||||
const Home = () => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
const toggle = () => {
|
||||
setIsOpen(!isOpen)
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sidebar isOpen={isOpen} toggle={toggle}/>
|
||||
<Navbar toggle={toggle}/>
|
||||
<HeroSection />
|
||||
<NotebookSection/>
|
||||
<InstructorsSection/>
|
||||
<MediaSection/>
|
||||
<MoreSection/>
|
||||
<Footer/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default Home
|
||||
|
||||
import React, {useState} from 'react'
|
||||
import Sidebar from '../components/Sidebar'
|
||||
import Navbar from '../components/NavBar'
|
||||
import HeroSection from '../components/HeroSection';
|
||||
import NotebookSection from '../components/Notebooks'
|
||||
import InstructorsSection from '../components/Instructors';
|
||||
import Footer from '../components/Footer';
|
||||
import MediaSection from '../components/Media';
|
||||
import MoreSection from '../components/More';
|
||||
|
||||
const Home = () => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
const toggle = () => {
|
||||
setIsOpen(!isOpen)
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sidebar isOpen={isOpen} toggle={toggle}/>
|
||||
<Navbar toggle={toggle}/>
|
||||
<HeroSection />
|
||||
<NotebookSection/>
|
||||
<InstructorsSection/>
|
||||
<MediaSection/>
|
||||
<MoreSection/>
|
||||
<Footer/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default Home
|
||||
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
import ScrollToTop from '../components/ScrollToTop';
|
||||
import SignIn from '../components/SignIn';
|
||||
|
||||
const SigninPage = () => {
|
||||
return (
|
||||
<>
|
||||
<ScrollToTop />
|
||||
<SignIn />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SigninPage;
|
||||
import React from 'react'
|
||||
import ScrollToTop from '../components/ScrollToTop';
|
||||
import SignIn from '../components/SignIn';
|
||||
|
||||
const SigninPage = () => {
|
||||
return (
|
||||
<>
|
||||
<ScrollToTop />
|
||||
<SignIn />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SigninPage;
|
||||
13
vite.config.js
Normal file
13
vite.config.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3000,
|
||||
},
|
||||
preview: {
|
||||
port: 3000,
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user