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

Merge pull request #198 from tomheaton/cleanup

Browse Source 
website code cleanup
This commit is contained in:
udlbook
2024-06-17 16:15:54 -04:00
committed by GitHub
parent 1cf21ea61a e4191beb79
commit 55dbe7e0c4
35 changed files with 6997 additions and 24140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.editorconfig Normal file
View File

@@ -0,0 +1,10 @@
root = true
[*.{js,jsx,ts,tsx,md,mdx,json,cjs,mjs,css}]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100

35
.eslintrc.cjs
View File

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

13
.gitignore vendored
View File

@@ -9,15 +9,22 @@
/coverage /coverage
# production # production
/build /dist
# misc # ENV
.DS_Store
.env.local .env.local
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
# debug
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
# IDE
.idea
.vscode
# macOS
.DS_Store

7
.prettierignore Normal file
View File

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

14
.prettierrc.cjs Normal file
View File

@@ -0,0 +1,14 @@
/** @type {import("prettier").Config} */
const prettierConfig = {
trailingComma: "all",
tabWidth: 4,
useTabs: false,
semi: true,
singleQuote: false,
bracketSpacing: true,
printWidth: 100,
endOfLine: "lf",
plugins: [require.resolve("prettier-plugin-organize-imports")],
};
module.exports = prettierConfig;

692
LICENSE.txt → LICENSE
View File

@@ -1,346 +1,346 @@
Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International Public License International Public License
By exercising the Licensed Rights (defined below), You accept and agree By exercising the Licensed Rights (defined below), You accept and agree
to be bound by the terms and conditions of this Creative Commons to be bound by the terms and conditions of this Creative Commons
Attribution-NonCommercial-NoDerivatives 4.0 International Public Attribution-NonCommercial-NoDerivatives 4.0 International Public
License ("Public License"). To the extent this Public License may be License ("Public License"). To the extent this Public License may be
interpreted as a contract, You are granted the Licensed Rights in interpreted as a contract, You are granted the Licensed Rights in
consideration of Your acceptance of these terms and conditions, and the consideration of Your acceptance of these terms and conditions, and the
Licensor grants You such rights in consideration of benefits the Licensor grants You such rights in consideration of benefits the
Licensor receives from making the Licensed Material available under Licensor receives from making the Licensed Material available under
these terms and conditions. these terms and conditions.
Section 1 -- Definitions. Section 1 -- Definitions.
a. Adapted Material means material subject to Copyright and Similar a. Adapted Material means material subject to Copyright and Similar
Rights that is derived from or based upon the Licensed Material Rights that is derived from or based upon the Licensed Material
and in which the Licensed Material is translated, altered, and in which the Licensed Material is translated, altered,
arranged, transformed, or otherwise modified in a manner requiring arranged, transformed, or otherwise modified in a manner requiring
permission under the Copyright and Similar Rights held by the permission under the Copyright and Similar Rights held by the
Licensor. For purposes of this Public License, where the Licensed Licensor. For purposes of this Public License, where the Licensed
Material is a musical work, performance, or sound recording, Material is a musical work, performance, or sound recording,
Adapted Material is always produced where the Licensed Material is Adapted Material is always produced where the Licensed Material is
synched in timed relation with a moving image. synched in timed relation with a moving image.
b. Copyright and Similar Rights means copyright and/or similar rights b. Copyright and Similar Rights means copyright and/or similar rights
closely related to copyright including, without limitation, closely related to copyright including, without limitation,
performance, broadcast, sound recording, and Sui Generis Database performance, broadcast, sound recording, and Sui Generis Database
Rights, without regard to how the rights are labeled or Rights, without regard to how the rights are labeled or
categorized. For purposes of this Public License, the rights categorized. For purposes of this Public License, the rights
specified in Section 2(b)(1)-(2) are not Copyright and Similar specified in Section 2(b)(1)-(2) are not Copyright and Similar
Rights. Rights.
c. Effective Technological Measures means those measures that, in the c. Effective Technological Measures means those measures that, in the
absence of proper authority, may not be circumvented under laws absence of proper authority, may not be circumvented under laws
fulfilling obligations under Article 11 of the WIPO Copyright fulfilling obligations under Article 11 of the WIPO Copyright
Treaty adopted on December 20, 1996, and/or similar international Treaty adopted on December 20, 1996, and/or similar international
agreements. agreements.
d. Exceptions and Limitations means fair use, fair dealing, and/or d. Exceptions and Limitations means fair use, fair dealing, and/or
any other exception or limitation to Copyright and Similar Rights any other exception or limitation to Copyright and Similar Rights
that applies to Your use of the Licensed Material. that applies to Your use of the Licensed Material.
e. Licensed Material means the artistic or literary work, database, e. Licensed Material means the artistic or literary work, database,
or other material to which the Licensor applied this Public or other material to which the Licensor applied this Public
License. License.
f. Licensed Rights means the rights granted to You subject to the f. Licensed Rights means the rights granted to You subject to the
terms and conditions of this Public License, which are limited to terms and conditions of this Public License, which are limited to
all Copyright and Similar Rights that apply to Your use of the all Copyright and Similar Rights that apply to Your use of the
Licensed Material and that the Licensor has authority to license. Licensed Material and that the Licensor has authority to license.
g. Licensor means the individual(s) or entity(ies) granting rights g. Licensor means the individual(s) or entity(ies) granting rights
under this Public License. under this Public License.
h. NonCommercial means not primarily intended for or directed towards h. NonCommercial means not primarily intended for or directed towards
commercial advantage or monetary compensation. For purposes of commercial advantage or monetary compensation. For purposes of
this Public License, the exchange of the Licensed Material for this Public License, the exchange of the Licensed Material for
other material subject to Copyright and Similar Rights by digital other material subject to Copyright and Similar Rights by digital
file-sharing or similar means is NonCommercial provided there is file-sharing or similar means is NonCommercial provided there is
no payment of monetary compensation in connection with the no payment of monetary compensation in connection with the
exchange. exchange.
i. Share means to provide material to the public by any means or i. Share means to provide material to the public by any means or
process that requires permission under the Licensed Rights, such process that requires permission under the Licensed Rights, such
as reproduction, public display, public performance, distribution, as reproduction, public display, public performance, distribution,
dissemination, communication, or importation, and to make material dissemination, communication, or importation, and to make material
available to the public including in ways that members of the available to the public including in ways that members of the
public may access the material from a place and at a time public may access the material from a place and at a time
individually chosen by them. individually chosen by them.
j. Sui Generis Database Rights means rights other than copyright j. Sui Generis Database Rights means rights other than copyright
resulting from Directive 96/9/EC of the European Parliament and of resulting from Directive 96/9/EC of the European Parliament and of
the Council of 11 March 1996 on the legal protection of databases, the Council of 11 March 1996 on the legal protection of databases,
as amended and/or succeeded, as well as other essentially as amended and/or succeeded, as well as other essentially
equivalent rights anywhere in the world. equivalent rights anywhere in the world.
k. You means the individual or entity exercising the Licensed Rights k. You means the individual or entity exercising the Licensed Rights
under this Public License. Your has a corresponding meaning. under this Public License. Your has a corresponding meaning.
Section 2 -- Scope. Section 2 -- Scope.
a. License grant. a. License grant.
1. Subject to the terms and conditions of this Public License, 1. Subject to the terms and conditions of this Public License,
the Licensor hereby grants You a worldwide, royalty-free, the Licensor hereby grants You a worldwide, royalty-free,
non-sublicensable, non-exclusive, irrevocable license to non-sublicensable, non-exclusive, irrevocable license to
exercise the Licensed Rights in the Licensed Material to: exercise the Licensed Rights in the Licensed Material to:
a. reproduce and Share the Licensed Material, in whole or a. reproduce and Share the Licensed Material, in whole or
in part, for NonCommercial purposes only; and in part, for NonCommercial purposes only; and
b. produce and reproduce, but not Share, Adapted Material b. produce and reproduce, but not Share, Adapted Material
for NonCommercial purposes only. for NonCommercial purposes only.
2. Exceptions and Limitations. For the avoidance of doubt, where 2. Exceptions and Limitations. For the avoidance of doubt, where
Exceptions and Limitations apply to Your use, this Public Exceptions and Limitations apply to Your use, this Public
License does not apply, and You do not need to comply with License does not apply, and You do not need to comply with
its terms and conditions. its terms and conditions.
3. Term. The term of this Public License is specified in Section 3. Term. The term of this Public License is specified in Section
6(a). 6(a).
4. Media and formats; technical modifications allowed. The 4. Media and formats; technical modifications allowed. The
Licensor authorizes You to exercise the Licensed Rights in Licensor authorizes You to exercise the Licensed Rights in
all media and formats whether now known or hereafter created, all media and formats whether now known or hereafter created,
and to make technical modifications necessary to do so. The and to make technical modifications necessary to do so. The
Licensor waives and/or agrees not to assert any right or Licensor waives and/or agrees not to assert any right or
authority to forbid You from making technical modifications authority to forbid You from making technical modifications
necessary to exercise the Licensed Rights, including necessary to exercise the Licensed Rights, including
technical modifications necessary to circumvent Effective technical modifications necessary to circumvent Effective
Technological Measures. For purposes of this Public License, Technological Measures. For purposes of this Public License,
simply making modifications authorized by this Section 2(a) simply making modifications authorized by this Section 2(a)
(4) never produces Adapted Material. (4) never produces Adapted Material.
5. Downstream recipients. 5. Downstream recipients.
a. Offer from the Licensor -- Licensed Material. Every a. Offer from the Licensor -- Licensed Material. Every
recipient of the Licensed Material automatically recipient of the Licensed Material automatically
receives an offer from the Licensor to exercise the receives an offer from the Licensor to exercise the
Licensed Rights under the terms and conditions of this Licensed Rights under the terms and conditions of this
Public License. Public License.
b. No downstream restrictions. You may not offer or impose b. No downstream restrictions. You may not offer or impose
any additional or different terms or conditions on, or any additional or different terms or conditions on, or
apply any Effective Technological Measures to, the apply any Effective Technological Measures to, the
Licensed Material if doing so restricts exercise of the Licensed Material if doing so restricts exercise of the
Licensed Rights by any recipient of the Licensed Licensed Rights by any recipient of the Licensed
Material. Material.
6. No endorsement. Nothing in this Public License constitutes or 6. No endorsement. Nothing in this Public License constitutes or
may be construed as permission to assert or imply that You may be construed as permission to assert or imply that You
are, or that Your use of the Licensed Material is, connected are, or that Your use of the Licensed Material is, connected
with, or sponsored, endorsed, or granted official status by, with, or sponsored, endorsed, or granted official status by,
the Licensor or others designated to receive attribution as the Licensor or others designated to receive attribution as
provided in Section 3(a)(1)(A)(i). provided in Section 3(a)(1)(A)(i).
b. Other rights. b. Other rights.
1. Moral rights, such as the right of integrity, are not 1. Moral rights, such as the right of integrity, are not
licensed under this Public License, nor are publicity, licensed under this Public License, nor are publicity,
privacy, and/or other similar personality rights; however, to privacy, and/or other similar personality rights; however, to
the extent possible, the Licensor waives and/or agrees not to the extent possible, the Licensor waives and/or agrees not to
assert any such rights held by the Licensor to the limited assert any such rights held by the Licensor to the limited
extent necessary to allow You to exercise the Licensed extent necessary to allow You to exercise the Licensed
Rights, but not otherwise. Rights, but not otherwise.
2. Patent and trademark rights are not licensed under this 2. Patent and trademark rights are not licensed under this
Public License. Public License.
3. To the extent possible, the Licensor waives any right to 3. To the extent possible, the Licensor waives any right to
collect royalties from You for the exercise of the Licensed collect royalties from You for the exercise of the Licensed
Rights, whether directly or through a collecting society Rights, whether directly or through a collecting society
under any voluntary or waivable statutory or compulsory under any voluntary or waivable statutory or compulsory
licensing scheme. In all other cases the Licensor expressly licensing scheme. In all other cases the Licensor expressly
reserves any right to collect such royalties, including when reserves any right to collect such royalties, including when
the Licensed Material is used other than for NonCommercial the Licensed Material is used other than for NonCommercial
purposes. purposes.
Section 3 -- License Conditions. Section 3 -- License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the Your exercise of the Licensed Rights is expressly made subject to the
following conditions. following conditions.
a. Attribution. a. Attribution.
1. If You Share the Licensed Material, You must: 1. If You Share the Licensed Material, You must:
a. retain the following if it is supplied by the Licensor a. retain the following if it is supplied by the Licensor
with the Licensed Material: with the Licensed Material:
i. identification of the creator(s) of the Licensed i. identification of the creator(s) of the Licensed
Material and any others designated to receive Material and any others designated to receive
attribution, in any reasonable manner requested by attribution, in any reasonable manner requested by
the Licensor (including by pseudonym if the Licensor (including by pseudonym if
designated); designated);
ii. a copyright notice; ii. a copyright notice;
iii. a notice that refers to this Public License; iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of iv. a notice that refers to the disclaimer of
warranties; warranties;
v. a URI or hyperlink to the Licensed Material to the v. a URI or hyperlink to the Licensed Material to the
extent reasonably practicable; extent reasonably practicable;
b. indicate if You modified the Licensed Material and b. indicate if You modified the Licensed Material and
retain an indication of any previous modifications; and retain an indication of any previous modifications; and
c. indicate the Licensed Material is licensed under this c. indicate the Licensed Material is licensed under this
Public License, and include the text of, or the URI or Public License, and include the text of, or the URI or
hyperlink to, this Public License. hyperlink to, this Public License.
For the avoidance of doubt, You do not have permission under For the avoidance of doubt, You do not have permission under
this Public License to Share Adapted Material. this Public License to Share Adapted Material.
2. You may satisfy the conditions in Section 3(a)(1) in any 2. You may satisfy the conditions in Section 3(a)(1) in any
reasonable manner based on the medium, means, and context in reasonable manner based on the medium, means, and context in
which You Share the Licensed Material. For example, it may be which You Share the Licensed Material. For example, it may be
reasonable to satisfy the conditions by providing a URI or reasonable to satisfy the conditions by providing a URI or
hyperlink to a resource that includes the required hyperlink to a resource that includes the required
information. information.
3. If requested by the Licensor, You must remove any of the 3. If requested by the Licensor, You must remove any of the
information required by Section 3(a)(1)(A) to the extent information required by Section 3(a)(1)(A) to the extent
reasonably practicable. reasonably practicable.
Section 4 -- Sui Generis Database Rights. Section 4 -- Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that Where the Licensed Rights include Sui Generis Database Rights that
apply to Your use of the Licensed Material: apply to Your use of the Licensed Material:
a. for the avoidance of doubt, Section 2(a)(1) grants You the right a. for the avoidance of doubt, Section 2(a)(1) grants You the right
to extract, reuse, reproduce, and Share all or a substantial to extract, reuse, reproduce, and Share all or a substantial
portion of the contents of the database for NonCommercial purposes portion of the contents of the database for NonCommercial purposes
only and provided You do not Share Adapted Material; only and provided You do not Share Adapted Material;
b. if You include all or a substantial portion of the database b. if You include all or a substantial portion of the database
contents in a database in which You have Sui Generis Database contents in a database in which You have Sui Generis Database
Rights, then the database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database
Rights (but not its individual contents) is Adapted Material; and Rights (but not its individual contents) is Adapted Material; and
c. You must comply with the conditions in Section 3(a) if You Share c. You must comply with the conditions in Section 3(a) if You Share
all or a substantial portion of the contents of the database. all or a substantial portion of the contents of the database.
For the avoidance of doubt, this Section 4 supplements and does not For the avoidance of doubt, this Section 4 supplements and does not
replace Your obligations under this Public License where the Licensed replace Your obligations under this Public License where the Licensed
Rights include other Copyright and Similar Rights. Rights include other Copyright and Similar Rights.
Section 5 -- Disclaimer of Warranties and Limitation of Liability. Section 5 -- Disclaimer of Warranties and Limitation of Liability.
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
c. The disclaimer of warranties and limitation of liability provided c. The disclaimer of warranties and limitation of liability provided
above shall be interpreted in a manner that, to the extent above shall be interpreted in a manner that, to the extent
possible, most closely approximates an absolute disclaimer and possible, most closely approximates an absolute disclaimer and
waiver of all liability. waiver of all liability.
Section 6 -- Term and Termination. Section 6 -- Term and Termination.
a. This Public License applies for the term of the Copyright and a. This Public License applies for the term of the Copyright and
Similar Rights licensed here. However, if You fail to comply with Similar Rights licensed here. However, if You fail to comply with
this Public License, then Your rights under this Public License this Public License, then Your rights under this Public License
terminate automatically. terminate automatically.
b. Where Your right to use the Licensed Material has terminated under b. Where Your right to use the Licensed Material has terminated under
Section 6(a), it reinstates: Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided 1. automatically as of the date the violation is cured, provided
it is cured within 30 days of Your discovery of the it is cured within 30 days of Your discovery of the
violation; or violation; or
2. upon express reinstatement by the Licensor. 2. upon express reinstatement by the Licensor.
For the avoidance of doubt, this Section 6(b) does not affect any For the avoidance of doubt, this Section 6(b) does not affect any
right the Licensor may have to seek remedies for Your violations right the Licensor may have to seek remedies for Your violations
of this Public License. of this Public License.
c. For the avoidance of doubt, the Licensor may also offer the c. For the avoidance of doubt, the Licensor may also offer the
Licensed Material under separate terms or conditions or stop Licensed Material under separate terms or conditions or stop
distributing the Licensed Material at any time; however, doing so distributing the Licensed Material at any time; however, doing so
will not terminate this Public License. will not terminate this Public License.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
License. License.
Section 7 -- Other Terms and Conditions. Section 7 -- Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different a. The Licensor shall not be bound by any additional or different
terms or conditions communicated by You unless expressly agreed. terms or conditions communicated by You unless expressly agreed.
b. Any arrangements, understandings, or agreements regarding the b. Any arrangements, understandings, or agreements regarding the
Licensed Material not stated herein are separate from and Licensed Material not stated herein are separate from and
independent of the terms and conditions of this Public License. independent of the terms and conditions of this Public License.
Section 8 -- Interpretation. Section 8 -- Interpretation.
a. For the avoidance of doubt, this Public License does not, and a. For the avoidance of doubt, this Public License does not, and
shall not be interpreted to, reduce, limit, restrict, or impose shall not be interpreted to, reduce, limit, restrict, or impose
conditions on any use of the Licensed Material that could lawfully conditions on any use of the Licensed Material that could lawfully
be made without permission under this Public License. be made without permission under this Public License.
b. To the extent possible, if any provision of this Public License is b. To the extent possible, if any provision of this Public License is
deemed unenforceable, it shall be automatically reformed to the deemed unenforceable, it shall be automatically reformed to the
minimum extent necessary to make it enforceable. If the provision minimum extent necessary to make it enforceable. If the provision
cannot be reformed, it shall be severed from this Public License cannot be reformed, it shall be severed from this Public License
without affecting the enforceability of the remaining terms and without affecting the enforceability of the remaining terms and
conditions. conditions.
c. No term or condition of this Public License will be waived and no c. No term or condition of this Public License will be waived and no
failure to comply consented to unless expressly agreed to by the failure to comply consented to unless expressly agreed to by the
Licensor. Licensor.
d. Nothing in this Public License constitutes or may be interpreted d. Nothing in this Public License constitutes or may be interpreted
as a limitation upon, or waiver of, any privileges and immunities as a limitation upon, or waiver of, any privileges and immunities
that apply to the Licensor or You, including from the legal that apply to the Licensor or You, including from the legal
processes of any jurisdiction or authority. processes of any jurisdiction or authority.
======================================================================= =======================================================================
Creative Commons is not a party to its public Creative Commons is not a party to its public
licenses. Notwithstanding, Creative Commons may elect to apply one of licenses. Notwithstanding, Creative Commons may elect to apply one of
its public licenses to material it publishes and in those instances its public licenses to material it publishes and in those instances
will be considered the “Licensor.” The text of the Creative Commons will be considered the “Licensor.” The text of the Creative Commons
public licenses is dedicated to the public domain under the CC0 Public public licenses is dedicated to the public domain under the CC0 Public
Domain Dedication. Except for the limited purpose of indicating that Domain Dedication. Except for the limited purpose of indicating that
material is shared under a Creative Commons public license or as material is shared under a Creative Commons public license or as
otherwise permitted by the Creative Commons policies published at otherwise permitted by the Creative Commons policies published at
creativecommons.org/policies, Creative Commons does not authorize the creativecommons.org/policies, Creative Commons does not authorize the
use of the trademark "Creative Commons" or any other trademark or logo use of the trademark "Creative Commons" or any other trademark or logo
of Creative Commons without its prior written consent including, of Creative Commons without its prior written consent including,
without limitation, in connection with any unauthorized modifications without limitation, in connection with any unauthorized modifications
to any of its public licenses or any other arrangements, to any of its public licenses or any other arrangements,
understandings, or agreements concerning use of licensed material. For understandings, or agreements concerning use of licensed material. For
the avoidance of doubt, this paragraph does not form part of the the avoidance of doubt, this paragraph does not form part of the
public licenses. public licenses.
Creative Commons may be contacted at creativecommons.org. Creative Commons may be contacted at creativecommons.org.

34
README.md Normal file
View File

@@ -0,0 +1,34 @@
# Understanding Deep Learning
Understanding Deep Learning - Simon J.D. Prince
## Website
```shell
# Install dependencies
npm install
# Run the website in development mode
npm dev
# Build the website
npm build
# Preview the built website
npm preview
# Format the code
npm run format
# Lint the code
npm run lint
# Clean the repository
npm run clean
# Prepare to deploy the website
npm run predeploy
# Deploy the website
npm run deploy
```

34
index.html
View File

@@ -1,19 +1,19 @@
<!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
href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap" href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<title>Understanding Deep Learning</title> <title>Understanding Deep Learning</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/index.jsx"></script> <script type="module" src="/src/index.jsx"></script>
</body> </body>
</html> </html>

27035
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

65
package.json
View File

@@ -1,33 +1,36 @@
{ {
"name": "react-website-smooth-scroll", "name": "udlbook-website",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"homepage": "https://udlbook.github.io/udlbook", "homepage": "https://udlbook.github.io/udlbook",
"dependencies": { "scripts": {
"@fortawesome/fontawesome-svg-core": "^6.5.1", "dev": "vite",
"react": "^18.0.2", "build": "vite build",
"react-dom": "^18.0.2", "preview": "vite preview",
"react-icons": "^5.0.1", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"react-router-dom": "^6.0.2", "predeploy": "npm run build",
"react-scripts": "4.0.3", "deploy": "gh-pages -d dist",
"react-scroll": "^1.8.4", "clean": "rm -rf node_modules dist",
"styled-components": "^5.3.3" "format": "prettier --write ."
}, },
"scripts": { "dependencies": {
"dev": "vite", "@fortawesome/fontawesome-svg-core": "^6.5.2",
"build": "vite build", "react": "^18.3.1",
"preview": "vite preview", "react-dom": "^18.3.1",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "react-icons": "^5.2.1",
"predeploy": "npm run build", "react-router-dom": "^6.23.1",
"deploy": "gh-pages -d build" "react-scroll": "^1.8.4",
}, "styled-components": "^6.1.11"
"devDependencies": { },
"@vitejs/plugin-react-swc": "^3.5.0", "devDependencies": {
"gh-pages": "^6.1.1", "@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1", "eslint-plugin-react": "^7.34.2",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-react-refresh": "^0.4.7",
"vite": "^5.2.0" "gh-pages": "^6.1.1",
} "prettier": "^3.3.1",
"prettier-plugin-organize-imports": "^3.2.4",
"vite": "^5.2.12"
}
} }

6
src/App.css
View File

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

27
src/App.jsx
View File

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

20
src/components/ButtonElement.jsx
View File

@@ -1,14 +1,13 @@
import styled from 'styled-components' import { Link } from "react-scroll";
import {Link} from 'react-scroll' import styled from "styled-components";
export const Button = styled(Link)`
export const Button= styled(Link)`
border-radius: 50px; border-radius: 50px;
background: ${({primary}) => (primary ? '#01BF71' : '#010606')}; background: ${({ primary }) => (primary ? "#01BF71" : "#010606")};
white-space: nowrap; white-space: nowrap;
padding: ${({big}) => (big? ' 14px 48px': '12px 30px')}; padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
color: ${({dark}) => (dark ? '#010106': '#fff')}; color: ${({ dark }) => (dark ? "#010106" : "#fff")};
font-size: $${({fontBig}) => (fontBig ? '20px' : '16px')}; font-size: $ ${({ fontBig }) => (fontBig ? "20px" : "16px")};
outline: none; outline: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
@@ -16,8 +15,9 @@ 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")};
} }
` `;

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

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

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

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

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

@@ -8,23 +8,21 @@ 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`
z-index: 3;
export const HeroContent = styled.div` width: 100%;
z-index: 3;
width: 100% ;
max-width: 1100px; max-width: 1100px;
position: static; position: static;
padding: 8px 24px; padding: 8px 24px;
margin: 80px 0px; margin: 80px 0px;
display: flex; display: flex;
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;
text-align: center; text-align: center;
@@ -36,17 +34,15 @@ export const HeroH1 = styled.h1`
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
font-size: 32px; font-size: 32px;
} }
`;
` export const HeroP = styled.p`
export const HeroP = styled.p`
margin-top: 24px; margin-top: 24px;
color: #fff; color: #fff;
font-size: 24px ; font-size: 24px;
text-align: center ; text-align: center;
max-width: 600px ; max-width: 600px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 24px; font-size: 24px;
} }
@@ -54,18 +50,17 @@ export const HeroP = styled.p`
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
font-size: 18px; font-size: 18px;
} }
` `;
export const HeroBtnWrapper = styled.div` export const HeroBtnWrapper = styled.div`
margin-top: 32px ; margin-top: 32px;
display: flex; display: flex;
flex-direction: column ; flex-direction: column;
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' };
@@ -73,32 +68,33 @@ export const HeroRow = styled.div`
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
grid-template-areas: 'col2' 'col1'; grid-template-areas: 'col2' 'col1';
} }
` `;
export const HeroNewsItem = styled.div` 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;
} }
` `;
export const HeroNewsItemContent = styled.div` export const HeroNewsItemContent = styled.div`
width: 80%; width: 80%;
color: #000000; color: #000000;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@@ -108,49 +104,47 @@ export const HeroNewsItemContent = styled.div`
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
font-size: 12px; font-size: 12px;
} }
` `;
export const HeroColumn1 = styled.div`
export const HeroColumn1 = styled.div`
margin-bottom: 15px; margin-bottom: 15px;
margin-left: 12px; margin-left: 12px;
margin-top: 60px; margin-top: 60px;
padding: 10px 15px; padding: 10px 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col1; grid-area: col1;
align-items:left; align-items: left;
display: flex; display: flex;
flex-direction:column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
` `;
export const HeroColumn2 = styled.div`
export const HeroColumn2 = styled.div`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col2; grid-area: col2;
display: flex; display: flex;
align-items:center; align-items: center;
flex-direction:column; flex-direction: column;
` `;
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 HeroImgWrap = styled.div`
export const HeroImgWrap = 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 HeroDownloadsImg = styled.img` export const HeroDownloadsImg = styled.img`
@@ -159,63 +153,37 @@ export const HeroDownloadsImg = styled.img`
margin-left: 0; margin-left: 0;
padding-right: 0; padding-right: 0;
margin-bottom: 10px; 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; export const HeroLink = styled.a`
// text-decoration: none; color: #fff;
// padding: 0.1rem 0rem; text-decoration: none;
// height: 100%; padding: 0.6rem 0rem 0rem 0rem;
// cursor: pointer; cursor: pointer;
// position:relative ; position: relative;
// &:before{ &:before {
// position: absolute; position: absolute;
// margin: 0 auto; margin: 0 auto;
// top: 100%; top: 100%;
// left: 0; left: 0;
// width: 100%; width: 100%;
// height: 2px; height: 2px;
// background-color: #000; background-color: #fff;
// content: ''; content: "";
// opacity: .3; opacity: 0.3;
// -webkit-transform: scaleX(1); -webkit-transform: scaleX(1);
// transition-property: opacity, -webkit-transform; transition-property:
// transition-duration: .3s; opacity,
// } -webkit-transform;
transition-duration: 0.3s;
}
// &:hover:before { &:hover:before {
// opacity: 1; opacity: 1;
// -webkit-transform: scaleX(1.05); -webkit-transform: scaleX(1.05);
// } }
// `; `;
export const UDLLink = styled.a` export const UDLLink = styled.a`
text-decoration: none; text-decoration: none;
@@ -224,7 +192,7 @@ export const UDLLink = styled.a`
margin: 0 2px; margin: 0 2px;
position: relative; position: relative;
&:before{ &:before {
position: absolute; position: absolute;
margin: 0 auto; margin: 0 auto;
top: 100%; top: 100%;
@@ -232,29 +200,28 @@ export const UDLLink = styled.a`
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: #000; background-color: #000;
content: ''; content: "";
opacity: .3; opacity: 0.3;
-webkit-transform: scaleX(1); -webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform; transition-property:
transition-duration: .3s; opacity,
-webkit-transform;
transition-duration: 0.3s;
} }
&:hover:before { &:hover:before {
opacity: 1; opacity: 1;
-webkit-transform: scaleX(1.05); -webkit-transform: scaleX(1.05);
} }
` `;
export const HeroNewsTitle = styled.div`
export const HeroNewsTitle = styled.div`
margin-left: 0px; margin-left: 0px;
color: #000000; color: #000000;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
line-height: 16px; line-height: 16px;
margin-bottom: 36px; margin-bottom: 36px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 24px; font-size: 24px;
@@ -263,16 +230,16 @@ export const HeroNewsTitle = styled.div`
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
font-size: 18px; font-size: 18px;
} }
` `;
export const HeroCitationTitle = styled.div` export const HeroCitationTitle = styled.div`
margin-left: 0px; margin-left: 0px;
color: #000000; color: #000000;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
line-height: 16px; line-height: 16px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top:36px; margin-top: 36px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 24px; font-size: 24px;
@@ -281,24 +248,18 @@ export const HeroCitationTitle = styled.div`
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
font-size: 18px; font-size: 18px;
} }
` `;
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;
margin-top: 0px; margin-top: 0px;
`;
`
export const HeroFollowBlock = styled.div` export const HeroFollowBlock = styled.div`
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 14px; font-size: 14px;
} }
` `;

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

@@ -1,19 +1,36 @@
import React from 'react' import img from "../../images/F23.prince.learning.turquoise.jpg";
import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent, UDLLink} from './HeroElements' import {
import img from '../../images/F23.prince.learning.turquoise.jpg' HeroCitationBlock,
HeroCitationTitle,
const HeroSection = () => { HeroColumn1,
HeroColumn2,
HeroContainer,
HeroContent,
HeroDownloadsImg,
HeroFollowBlock,
HeroImgWrap,
HeroLink,
HeroNewsBlock,
HeroNewsItem,
HeroNewsItemContent,
HeroNewsItemDate,
HeroNewsTitle,
HeroRow,
Img,
UDLLink,
} from "./HeroElements";
export default function 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 (
<HeroContainer id="home"> <HeroContainer id="home">
<HeroContent> <HeroContent>
@@ -21,84 +38,166 @@ const HeroSection = () => {
<HeroColumn1> <HeroColumn1>
<HeroNewsBlock> <HeroNewsBlock>
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle> <HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>05/22/24</HeroNewsItemDate> <HeroNewsItemDate>05/22/24</HeroNewsItemDate>
<HeroNewsItemContent> New <UDLLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/"> blog </UDLLink> about the applications of the neural tangent kernel.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
New{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/">
{" "}
blog{" "}
</UDLLink>{" "}
about the applications of the neural tangent kernel.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>05/10/24</HeroNewsItemDate> <HeroNewsItemDate>05/10/24</HeroNewsItemDate>
<HeroNewsItemContent> Positive <UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">review</UDLLink> in Nature Machine Intelligence.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
Positive{" "}
<UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">
review
</UDLLink>{" "}
in Nature Machine Intelligence.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
{/* <HeroNewsItem> {/* <HeroNewsItem>
<HeroNewsItemDate>03/12/24</HeroNewsItemDate> <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>
<HeroNewsItemContent> Book now available again.</HeroNewsItemContent> <HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
</HeroNewsItem> */} </HeroNewsItem> */}
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>02/21/24</HeroNewsItemDate> <HeroNewsItemDate>02/21/24</HeroNewsItemDate>
<HeroNewsItemContent>New blog about the <UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">Neural Tangent Kernel</UDLLink>.</HeroNewsItemContent> <HeroNewsItemContent>
New blog about the{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">
Neural Tangent Kernel
</UDLLink>
.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
{/* <HeroNewsItem> {/* <HeroNewsItem>
<HeroNewsItemDate>02/15/24</HeroNewsItemDate> <HeroNewsItemDate>02/15/24</HeroNewsItemDate>
<HeroNewsItemContent>
{" "}
First printing of book has sold out in most places. Second
printing available mid-March.
</HeroNewsItemContent>
</HeroNewsItem>
<HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent> <HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
</HeroNewsItem> */} </HeroNewsItem> */}
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>01/29/24</HeroNewsItemDate> <HeroNewsItemDate>01/29/24</HeroNewsItemDate>
<HeroNewsItemContent> New blog about <UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </UDLLink> published.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
New blog about{" "}
<UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/">
{" "}
gradient flow{" "}
</UDLLink>{" "}
published.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/26/23</HeroNewsItemDate> <HeroNewsItemDate>12/26/23</HeroNewsItemDate>
<HeroNewsItemContent> Machine Learning Street Talk <UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </UDLLink> discussing book.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
Machine Learning Street Talk{" "}
<UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww">
{" "}
podcast{" "}
</UDLLink>{" "}
discussing book.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/19/23</HeroNewsItemDate> <HeroNewsItemDate>12/19/23</HeroNewsItemDate>
<HeroNewsItemContent>Deeper Insights <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</UDLLink> discussing book.</HeroNewsItemContent> <HeroNewsItemContent>
Deeper Insights{" "}
<UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">
podcast
</UDLLink>{" "}
discussing book.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/06/23</HeroNewsItemDate> <HeroNewsItemDate>12/06/23</HeroNewsItemDate>
<HeroNewsItemContent> <UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">Interview</UDLLink> with Borealis AI.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
<UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">
Interview
</UDLLink>{" "}
with Borealis AI.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
<HeroNewsItem> <HeroNewsItem>
<HeroNewsItemDate>12/05/23</HeroNewsItemDate> <HeroNewsItemDate>12/05/23</HeroNewsItemDate>
<HeroNewsItemContent> Book released by <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</UDLLink>.</HeroNewsItemContent> <HeroNewsItemContent>
{" "}
Book released by{" "}
<UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
The MIT Press
</UDLLink>
.
</HeroNewsItemContent>
</HeroNewsItem> </HeroNewsItem>
</HeroNewsBlock> </HeroNewsBlock>
<HeroCitationTitle>CITATION:</HeroCitationTitle> <HeroCitationTitle>CITATION:</HeroCitationTitle>
<HeroCitationBlock> <HeroCitationBlock>
<pre> <pre>
<code> <code>
<React.Fragment>{citation}</React.Fragment> <>{citation}</>
</code> </code>
</pre> </pre>
</HeroCitationBlock> </HeroCitationBlock>
<HeroFollowBlock> <HeroFollowBlock>
Follow me on <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or <UDLLink Follow me on{" "}
href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</UDLLink> for updates. <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or{" "}
<UDLLink href="https://www.linkedin.com/in/simon-prince-615bb9165/">
LinkedIn
</UDLLink>{" "}
for updates.
</HeroFollowBlock> </HeroFollowBlock>
</HeroColumn1> </HeroColumn1>
<HeroColumn2> <HeroColumn2>
<HeroImgWrap> <HeroImgWrap>
<Img src={img} alt="book cover"/> <Img src={img} alt="book cover" />
</HeroImgWrap> </HeroImgWrap>
<HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">Download full pdf (27 May 2024)</HeroLink> <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">
<HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/> Download full pdf (27 May 2024)
<HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">Buy the book</HeroLink> </HeroLink>
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">Answers to selected questions</HeroLink> <HeroDownloadsImg
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Errata</HeroLink> 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> </HeroColumn2>
</HeroRow> </HeroRow>
</HeroContent> </HeroContent>
</HeroContainer> </HeroContainer>
) );
} }
export default HeroSection

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

@@ -1,69 +1,69 @@
import styled from "styled-components"; import styled from "styled-components";
export const InstructorsContainer = styled.div`
export const InstructorsContainer = styled.div`
color: #fff; color: #fff;
/* background: #f9f9f9; */ /* background: #f9f9f9; */
background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')}; background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
padding: 100px 0; padding: 100px 0;
} }
` `;
export const InstructorsWrapper = styled.div` export const InstructorsWrapper = styled.div`
display: grid ; display: grid;
z-index: 1; z-index: 1;
width: 100% ; width: 100%;
max-width: 1100px; max-width: 1100px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding: 0 24px; padding: 0 24px;
justify-content: center; justify-content: center;
` `;
export const InstructorsRow = styled.div` export const InstructorsRow = 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'`)};
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)}; grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
} }
` `;
export const InstructorsRow2 = styled.div` export const InstructorsRow2 = 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: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)}; grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)}; grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
} }
` `;
export const Column1 = styled.div`
export const Column1 = styled.div`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col1; grid-area: col1;
` `;
export const Column2 = styled.div` export const Column2 = styled.div`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col2; grid-area: col2;
` `;
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: #773c23; color: #773c23;
font-size: 16px; font-size: 16px;
line-height: 16px; line-height: 16px;
@@ -71,62 +71,58 @@ export const TopLine = styled.p`
letter-spacing: 1.4px; letter-spacing: 1.4px;
text-transform: uppercase; text-transform: uppercase;
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;
line-height: 24px; line-height: 24px;
color: ${({darkText})=> (darkText ? '#010606' : '#fff')}; color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
`;
`
export const BtnWrap = styled.div` export const BtnWrap = styled.div`
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
`
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`
export const Img = styled.img`
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`; `;
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`;
export const InstructorsContent = styled.div` export const Img = styled.img`
z-index: 3; width: 100%;
width: 100% ; margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;
export const InstructorsContent = styled.div`
z-index: 3;
width: 100%;
max-width: 1100px; max-width: 1100px;
position: static; position: static;
padding: 8px 0px; padding: 8px 0px;
margin: 10px 0px; margin: 10px 0px;
display: flex; display: flex;
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;
} }
@@ -134,7 +130,7 @@ export const InstructorsContent = styled.div`
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
font-size: 10px; font-size: 10px;
} }
` `;
export const InstructorsLink = styled.a` export const InstructorsLink = styled.a`
text-decoration: none; text-decoration: none;
@@ -143,7 +139,7 @@ export const InstructorsLink = styled.a`
margin: 0 2px; margin: 0 2px;
position: relative; position: relative;
&:before{ &:before {
position: absolute; position: absolute;
margin: 0 auto; margin: 0 auto;
top: 100%; top: 100%;
@@ -151,15 +147,17 @@ export const InstructorsLink = styled.a`
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: #555; background-color: #555;
content: ''; content: "";
opacity: .3; opacity: 0.3;
-webkit-transform: scaleX(1); -webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform; transition-property:
transition-duration: .3s; opacity,
-webkit-transform;
transition-duration: 0.3s;
} }
&:hover:before { &:hover:before {
opacity: 1; opacity: 1;
-webkit-transform: scaleX(1.05); -webkit-transform: scaleX(1.05);
} }
` `;

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

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

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

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

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

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

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

@@ -1,70 +1,70 @@
import styled from "styled-components"; import styled from "styled-components";
export const MoreContainer = styled.div`
export const MoreContainer = styled.div`
color: #fff; color: #fff;
/* background: #f9f9f9; */ /* background: #f9f9f9; */
background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')}; background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
padding: 100px 0; padding: 100px 0;
} }
` `;
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;
margin-left: auto; margin-left: auto;
padding: 0 24px; padding: 0 24px;
justify-content: center; justify-content: center;
` `;
export const MoreRow = styled.div` export const MoreRow = 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'`)};
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)}; grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
} }
` `;
export const MoreRow2 = styled.div` export const MoreRow2 = 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: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)}; grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)}; grid-template-areas: ${({ imgStart }) =>
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
} }
` `;
export const Column1 = styled.div`
export const Column1 = styled.div`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col1; grid-area: col1;
` `;
export const Column2 = styled.div` export const Column2 = styled.div`
margin-bottom: 15px; margin-bottom: 15px;
padding: 0 15px; padding: 0 15px;
grid-area: col2; grid-area: col2;
` `;
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: #773c23; color: #773c23;
font-size: 16px; font-size: 16px;
line-height: 16px; line-height: 16px;
@@ -72,91 +72,85 @@ export const TopLine = styled.p`
letter-spacing: 1.4px; letter-spacing: 1.4px;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 12px; margin-bottom: 12px;
margin-top: 16px ; margin-top: 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;
line-height: 24px; line-height: 24px;
color: ${({darkText})=> (darkText ? '#010606' : '#fff')}; color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
`;
`
export const BtnWrap = styled.div` export const BtnWrap = styled.div`
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
`
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`
export const Img = styled.img`
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`; `;
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`;
export const MoreContent = styled.div` export const Img = styled.img`
z-index: 3; width: 100%;
width: 100% ; margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;
export const MoreContent = styled.div`
z-index: 3;
width: 100%;
max-width: 1100px; max-width: 1100px;
position: static; position: static;
padding: 8px 0px; padding: 8px 0px;
margin: 10px 0px; margin: 10px 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: left ; align-items: left;
list-style-position: inside; list-style-position: inside;
` `;
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;
} }
`;
`
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;
} }
`;
`
export const MoreInnerP = styled.p` export const MoreInnerP = styled.p`
padding-left: 18px; padding-left: 18px;
padding-bottom: 10px ; padding-bottom: 10px;
padding-top: 3px ; padding-top: 3px;
font-size:14px; font-size: 14px;
color: #fff color: #fff;
` `;
export const MoreLink = styled.a` export const MoreLink = styled.a`
text-decoration: none; text-decoration: none;
@@ -165,7 +159,7 @@ export const MoreLink = styled.a`
margin: 0 2px; margin: 0 2px;
position: relative; position: relative;
&:before{ &:before {
position: absolute; position: absolute;
margin: 0 auto; margin: 0 auto;
top: 100%; top: 100%;
@@ -173,15 +167,17 @@ export const MoreLink = styled.a`
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: #555; background-color: #555;
content: ''; content: "";
opacity: .3; opacity: 0.3;
-webkit-transform: scaleX(1); -webkit-transform: scaleX(1);
transition-property: opacity, -webkit-transform; transition-property:
transition-duration: .3s; opacity,
-webkit-transform;
transition-duration: 0.3s;
} }
&:hover:before { &:hover:before {
opacity: 1; opacity: 1;
-webkit-transform: scaleX(1.05); -webkit-transform: scaleX(1.05);
} }
` `;

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

File diff suppressed because it is too large Load Diff

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

@@ -1,119 +1,119 @@
import { Link as LinkS } from 'react-scroll'; import { Link as LinkR } from "react-router-dom";
import { Link as LinkR } from 'react-router-dom'; import { Link as LinkS } from "react-scroll";
import styled from 'styled-components'; import styled from "styled-components";
export const Nav = styled.nav` export const Nav = styled.nav`
background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')}; background: ${({ scrollNav }) => (scrollNav ? "#000" : "transparent")};
height: 100px; height: 100px;
margin-top: -100px; margin-top: -100px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1rem; font-size: 1rem;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {
transition: 0.8s all ease; transition: 0.8s all ease;
} }
`; `;
export const NavbarContainer = styled.div` export const NavbarContainer = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 100px; height: 100px;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
padding: 0 24px; padding: 0 24px;
max-width: 1100px; max-width: 1100px;
`; `;
export const NavLogo = styled(LinkR)` export const NavLogo = styled(LinkR)`
color: #fff; color: #fff;
justify-self: flex-start; justify-self: flex-start;
cursor: pointer; cursor: pointer;
font-size: 1.5rem; font-size: 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 24px; margin-left: 24px;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
@media screen and (max-width: 768px) {
font-size: 1.0rem;
}
@media screen and (max-width: 768px) {
font-size: 1rem;
}
`; `;
export const MobileIcon = styled.div` export const MobileIcon = styled.div`
display: none; display: none;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
transform: translate(-100%, 60%); transform: translate(-100%, 60%);
font-size: 1.8rem; font-size: 1.8rem;
cursor: pointer; cursor: pointer;
} }
`; `;
export const NavMenu = styled.ul` export const NavMenu = styled.ul`
display: flex; display: flex;
align-items: center; align-items: center;
list-style: none; list-style: none;
text-align: center; text-align: center;
margin-right: -22px; margin-right: -22px;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
display: none; display: none;
} }
`; `;
export const NavItem = styled.li` export const NavItem = styled.li`
height: 80px; height: 80px;
`; `;
export const NavBtn = styled.nav` export const NavBtn = styled.nav`
display: flex; display: flex;
align-items: center; align-items: center;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
display: none; display: none;
} }
`; `;
export const NavLinks = styled(LinkS)` export const NavLinks = styled(LinkS)`
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
padding: 0 1rem; padding: 0 1rem;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
&.active { &.active {
border-bottom: 3px solid #57c6d1 border-bottom: 3px solid #57c6d1;
} }
`; `;
export const NavBtnLink = styled(LinkR)` export const NavBtnLink = styled(LinkR)`
border-radius: 50px; border-radius: 50px;
background: #01bf71; background: #01bf71;
white-space: nowrap; white-space: nowrap;
padding: 10px 22px; 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; 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;
}
`; `;

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

@@ -1,59 +1,108 @@
import React, {useState, useEffect} from 'react' import { useEffect, useState } from "react";
import {FaBars} from 'react-icons/fa' import { FaBars } from "react-icons/fa";
import {IconContext} from 'react-icons/lib' import { IconContext } from "react-icons/lib";
import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements' import { animateScroll as scroll } from "react-scroll";
import { animateScroll as scroll } from 'react-scroll' import {
MobileIcon,
Nav,
NavbarContainer,
NavItem,
NavLinks,
NavLogo,
NavMenu,
} from "./NavbarElements";
export default function NavBar({ toggle }) {
const [scrollNav, setScrollNav] = useState(false);
const Navbar = ( {toggle} ) => { useEffect(() => {
const [scrollNav, setScrollNav] = useState(false) const changeNav = () => {
if (window.scrollY >= 80) {
setScrollNav(true);
} else {
setScrollNav(false);
}
};
const changeNav = () =>{ window.addEventListener("scroll", changeNav);
if (window.scrollY >= 80){
setScrollNav(true)
}else{
setScrollNav(false)
}
}
useEffect(() =>{ return () => {
window.addEventListener('scroll', changeNav) window.removeEventListener("scroll", changeNav);
}, []) };
}, []);
const toggleHome = () => { const toggleHome = () => {
scroll.scrollToTop(); scroll.scrollToTop();
} };
return ( return (
<> <>
<IconContext.Provider value={{color: '#fff'}}> <IconContext.Provider value={{ color: "#fff" }}>
<Nav scrollNav={scrollNav}> <Nav scrollNav={scrollNav}>
<NavbarContainer> <NavbarContainer>
<NavLogo to="/udlbook/" onClick={toggleHome}> <NavLogo to="/udlbook/" onClick={toggleHome}>
<h1> Understanding Deep Learning </h1> <h1> Understanding Deep Learning </h1>
</NavLogo> </NavLogo>
<MobileIcon onClick={toggle}> <MobileIcon onClick={toggle}>
<FaBars /> <FaBars />
</MobileIcon> </MobileIcon>
<NavMenu> <NavMenu>
<NavItem> <NavItem>
<NavLinks to="Notebooks" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Notebooks</NavLinks> <NavLinks
</NavItem> to="Notebooks"
<NavItem> smooth={true}
<NavLinks to="Instructors" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Instructors</NavLinks> duration={500}
</NavItem> spy={true}
<NavItem> exact="true"
<NavLinks to="Media" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Media</NavLinks> offset={-80}
</NavItem> activeClass="active"
<NavItem> >
<NavLinks to="More" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>More</NavLinks> Notebooks
</NavItem> </NavLinks>
</NavMenu> </NavItem>
</NavbarContainer> <NavItem>
</Nav> <NavLinks
</IconContext.Provider> 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

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);
} }
` `

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

@@ -1,29 +1,7 @@
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'
export default function NotebookSection() {
const NotebookSection = () => {
return ( return (
<> <>
<NotebookContainer lightBg={false} id='Notebooks'> <NotebookContainer lightBg={false} id='Notebooks'>
@@ -210,11 +188,8 @@ const NotebookSection = () => {
</ul> </ul>
</Column2> </Column2>
</NotebookRow> </NotebookRow>
</NotebookWrapper> </NotebookWrapper>
</NotebookContainer> </NotebookContainer>
</> </>
) )
} }
export default NotebookSection

11
src/components/ScrollToTop.jsx
View File

@@ -1,11 +1,12 @@
import {useEffect} from 'react' import { useEffect } from "react";
import { useLocation } from 'react-router-dom' 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, { behavior: "smooth" });
}, [pathname]) }, [pathname]);
return null; return null;
} }

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

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

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

@@ -1,33 +1,36 @@
import React from 'react' import {
import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements' CloseIcon,
Icon,
SidebarContainer,
SidebarLink,
SidebarMenu,
SidebarWrapper,
} from "./SidebarElements";
export default function Sidebar({ isOpen, toggle }) {
const Sidebar = ({isOpen, toggle}) => {
return ( return (
<> <>
<SidebarContainer isOpen={isOpen} onClick={toggle}> <SidebarContainer isOpen={isOpen} onClick={toggle}>
<Icon onClick={toggle}> <Icon onClick={toggle}>
<CloseIcon /> <CloseIcon />
</Icon> </Icon>
<SidebarWrapper> <SidebarWrapper>
<SidebarMenu > <SidebarMenu>
<SidebarLink to="Notebooks" onClick={toggle}> <SidebarLink to="Notebooks" onClick={toggle}>
Notebooks Notebooks
</SidebarLink> </SidebarLink>
<SidebarLink to="Instructors" onClick={toggle}> <SidebarLink to="Instructors" onClick={toggle}>
Instructors Instructors
</SidebarLink> </SidebarLink>
<SidebarLink to="Media" onClick={toggle}> <SidebarLink to="Media" onClick={toggle}>
Media Media
</SidebarLink> </SidebarLink>
<SidebarLink to="More" onClick={toggle}> <SidebarLink to="More" onClick={toggle}>
More More
</SidebarLink> </SidebarLink>
</SidebarMenu> </SidebarMenu>
</SidebarWrapper> </SidebarWrapper>
</SidebarContainer> </SidebarContainer>
</> </>
) );
} }
export default Sidebar

18
src/index.jsx
View File

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

48
src/pages/index.jsx
View File

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

11
src/pages/signin.jsx
View File

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

6
src/styles/globals.css Executable file
View File

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

24
vite.config.js
View File

@@ -1,16 +1,14 @@
import react from '@vitejs/plugin-react-swc' import react from "@vitejs/plugin-react-swc";
import { defineConfig } from 'vite' import { defineConfig } from "vite";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
server: { server: {
port: 3000, port: 3000,
}, },
preview: { preview: {
port: 3000, port: 3000,
}, },
build: { base: "/udlbook",
outDir: 'build', });
}
})