udlbook
10
.editorconfig
Normal file
10
.editorconfig
Normal 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
|
||||
@@ -1,21 +1,18 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['build', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react/jsx-no-target-blank': 'off',
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:react/jsx-runtime",
|
||||
"plugin:react-hooks/recommended",
|
||||
],
|
||||
},
|
||||
}
|
||||
ignorePatterns: ["build", ".eslintrc.cjs"],
|
||||
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
|
||||
settings: { react: { version: "18.2" } },
|
||||
plugins: ["react-refresh"],
|
||||
rules: {
|
||||
"react/jsx-no-target-blank": "off",
|
||||
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
|
||||
},
|
||||
};
|
||||
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@@ -9,15 +9,22 @@
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
/dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
# ENV
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# IDE
|
||||
.idea
|
||||
.vscode
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
|
||||
7
.prettierignore
Normal file
7
.prettierignore
Normal file
@@ -0,0 +1,7 @@
|
||||
# ignore these directories when formatting the repo
|
||||
Blogs
|
||||
CM20315
|
||||
CM20315_2023
|
||||
Notebooks
|
||||
PDFFigures
|
||||
Slides
|
||||
14
.prettierrc.cjs
Normal file
14
.prettierrc.cjs
Normal 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;
|
||||
@@ -1,346 +1,346 @@
|
||||
Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
|
||||
International Public License
|
||||
|
||||
By exercising the Licensed Rights (defined below), You accept and agree
|
||||
to be bound by the terms and conditions of this Creative Commons
|
||||
Attribution-NonCommercial-NoDerivatives 4.0 International Public
|
||||
License ("Public License"). To the extent this Public License may be
|
||||
interpreted as a contract, You are granted the Licensed Rights in
|
||||
consideration of Your acceptance of these terms and conditions, and the
|
||||
Licensor grants You such rights in consideration of benefits the
|
||||
Licensor receives from making the Licensed Material available under
|
||||
these terms and conditions.
|
||||
|
||||
|
||||
Section 1 -- Definitions.
|
||||
|
||||
a. Adapted Material means material subject to Copyright and Similar
|
||||
Rights that is derived from or based upon the Licensed Material
|
||||
and in which the Licensed Material is translated, altered,
|
||||
arranged, transformed, or otherwise modified in a manner requiring
|
||||
permission under the Copyright and Similar Rights held by the
|
||||
Licensor. For purposes of this Public License, where the Licensed
|
||||
Material is a musical work, performance, or sound recording,
|
||||
Adapted Material is always produced where the Licensed Material is
|
||||
synched in timed relation with a moving image.
|
||||
|
||||
b. Copyright and Similar Rights means copyright and/or similar rights
|
||||
closely related to copyright including, without limitation,
|
||||
performance, broadcast, sound recording, and Sui Generis Database
|
||||
Rights, without regard to how the rights are labeled or
|
||||
categorized. For purposes of this Public License, the rights
|
||||
specified in Section 2(b)(1)-(2) are not Copyright and Similar
|
||||
Rights.
|
||||
|
||||
c. Effective Technological Measures means those measures that, in the
|
||||
absence of proper authority, may not be circumvented under laws
|
||||
fulfilling obligations under Article 11 of the WIPO Copyright
|
||||
Treaty adopted on December 20, 1996, and/or similar international
|
||||
agreements.
|
||||
|
||||
d. Exceptions and Limitations means fair use, fair dealing, and/or
|
||||
any other exception or limitation to Copyright and Similar Rights
|
||||
that applies to Your use of the Licensed Material.
|
||||
|
||||
e. Licensed Material means the artistic or literary work, database,
|
||||
or other material to which the Licensor applied this Public
|
||||
License.
|
||||
|
||||
f. Licensed Rights means the rights granted to You subject to the
|
||||
terms and conditions of this Public License, which are limited to
|
||||
all Copyright and Similar Rights that apply to Your use of the
|
||||
Licensed Material and that the Licensor has authority to license.
|
||||
|
||||
g. Licensor means the individual(s) or entity(ies) granting rights
|
||||
under this Public License.
|
||||
|
||||
h. NonCommercial means not primarily intended for or directed towards
|
||||
commercial advantage or monetary compensation. For purposes of
|
||||
this Public License, the exchange of the Licensed Material for
|
||||
other material subject to Copyright and Similar Rights by digital
|
||||
file-sharing or similar means is NonCommercial provided there is
|
||||
no payment of monetary compensation in connection with the
|
||||
exchange.
|
||||
|
||||
i. Share means to provide material to the public by any means or
|
||||
process that requires permission under the Licensed Rights, such
|
||||
as reproduction, public display, public performance, distribution,
|
||||
dissemination, communication, or importation, and to make material
|
||||
available to the public including in ways that members of the
|
||||
public may access the material from a place and at a time
|
||||
individually chosen by them.
|
||||
|
||||
j. Sui Generis Database Rights means rights other than copyright
|
||||
resulting from Directive 96/9/EC of the European Parliament and of
|
||||
the Council of 11 March 1996 on the legal protection of databases,
|
||||
as amended and/or succeeded, as well as other essentially
|
||||
equivalent rights anywhere in the world.
|
||||
|
||||
k. You means the individual or entity exercising the Licensed Rights
|
||||
under this Public License. Your has a corresponding meaning.
|
||||
|
||||
|
||||
Section 2 -- Scope.
|
||||
|
||||
a. License grant.
|
||||
|
||||
1. Subject to the terms and conditions of this Public License,
|
||||
the Licensor hereby grants You a worldwide, royalty-free,
|
||||
non-sublicensable, non-exclusive, irrevocable license to
|
||||
exercise the Licensed Rights in the Licensed Material to:
|
||||
|
||||
a. reproduce and Share the Licensed Material, in whole or
|
||||
in part, for NonCommercial purposes only; and
|
||||
|
||||
b. produce and reproduce, but not Share, Adapted Material
|
||||
for NonCommercial purposes only.
|
||||
|
||||
2. Exceptions and Limitations. For the avoidance of doubt, where
|
||||
Exceptions and Limitations apply to Your use, this Public
|
||||
License does not apply, and You do not need to comply with
|
||||
its terms and conditions.
|
||||
|
||||
3. Term. The term of this Public License is specified in Section
|
||||
6(a).
|
||||
|
||||
4. Media and formats; technical modifications allowed. The
|
||||
Licensor authorizes You to exercise the Licensed Rights in
|
||||
all media and formats whether now known or hereafter created,
|
||||
and to make technical modifications necessary to do so. The
|
||||
Licensor waives and/or agrees not to assert any right or
|
||||
authority to forbid You from making technical modifications
|
||||
necessary to exercise the Licensed Rights, including
|
||||
technical modifications necessary to circumvent Effective
|
||||
Technological Measures. For purposes of this Public License,
|
||||
simply making modifications authorized by this Section 2(a)
|
||||
(4) never produces Adapted Material.
|
||||
|
||||
5. Downstream recipients.
|
||||
|
||||
a. Offer from the Licensor -- Licensed Material. Every
|
||||
recipient of the Licensed Material automatically
|
||||
receives an offer from the Licensor to exercise the
|
||||
Licensed Rights under the terms and conditions of this
|
||||
Public License.
|
||||
|
||||
b. No downstream restrictions. You may not offer or impose
|
||||
any additional or different terms or conditions on, or
|
||||
apply any Effective Technological Measures to, the
|
||||
Licensed Material if doing so restricts exercise of the
|
||||
Licensed Rights by any recipient of the Licensed
|
||||
Material.
|
||||
|
||||
6. No endorsement. Nothing in this Public License constitutes or
|
||||
may be construed as permission to assert or imply that You
|
||||
are, or that Your use of the Licensed Material is, connected
|
||||
with, or sponsored, endorsed, or granted official status by,
|
||||
the Licensor or others designated to receive attribution as
|
||||
provided in Section 3(a)(1)(A)(i).
|
||||
|
||||
b. Other rights.
|
||||
|
||||
1. Moral rights, such as the right of integrity, are not
|
||||
licensed under this Public License, nor are publicity,
|
||||
privacy, and/or other similar personality rights; however, to
|
||||
the extent possible, the Licensor waives and/or agrees not to
|
||||
assert any such rights held by the Licensor to the limited
|
||||
extent necessary to allow You to exercise the Licensed
|
||||
Rights, but not otherwise.
|
||||
|
||||
2. Patent and trademark rights are not licensed under this
|
||||
Public License.
|
||||
|
||||
3. To the extent possible, the Licensor waives any right to
|
||||
collect royalties from You for the exercise of the Licensed
|
||||
Rights, whether directly or through a collecting society
|
||||
under any voluntary or waivable statutory or compulsory
|
||||
licensing scheme. In all other cases the Licensor expressly
|
||||
reserves any right to collect such royalties, including when
|
||||
the Licensed Material is used other than for NonCommercial
|
||||
purposes.
|
||||
|
||||
|
||||
Section 3 -- License Conditions.
|
||||
|
||||
Your exercise of the Licensed Rights is expressly made subject to the
|
||||
following conditions.
|
||||
|
||||
a. Attribution.
|
||||
|
||||
1. If You Share the Licensed Material, You must:
|
||||
|
||||
a. retain the following if it is supplied by the Licensor
|
||||
with the Licensed Material:
|
||||
|
||||
i. identification of the creator(s) of the Licensed
|
||||
Material and any others designated to receive
|
||||
attribution, in any reasonable manner requested by
|
||||
the Licensor (including by pseudonym if
|
||||
designated);
|
||||
|
||||
ii. a copyright notice;
|
||||
|
||||
iii. a notice that refers to this Public License;
|
||||
|
||||
iv. a notice that refers to the disclaimer of
|
||||
warranties;
|
||||
|
||||
v. a URI or hyperlink to the Licensed Material to the
|
||||
extent reasonably practicable;
|
||||
|
||||
b. indicate if You modified the Licensed Material and
|
||||
retain an indication of any previous modifications; and
|
||||
|
||||
c. indicate the Licensed Material is licensed under this
|
||||
Public License, and include the text of, or the URI or
|
||||
hyperlink to, this Public License.
|
||||
|
||||
For the avoidance of doubt, You do not have permission under
|
||||
this Public License to Share Adapted Material.
|
||||
|
||||
2. You may satisfy the conditions in Section 3(a)(1) in any
|
||||
reasonable manner based on the medium, means, and context in
|
||||
which You Share the Licensed Material. For example, it may be
|
||||
reasonable to satisfy the conditions by providing a URI or
|
||||
hyperlink to a resource that includes the required
|
||||
information.
|
||||
|
||||
3. If requested by the Licensor, You must remove any of the
|
||||
information required by Section 3(a)(1)(A) to the extent
|
||||
reasonably practicable.
|
||||
|
||||
|
||||
Section 4 -- Sui Generis Database Rights.
|
||||
|
||||
Where the Licensed Rights include Sui Generis Database Rights that
|
||||
apply to Your use of the Licensed Material:
|
||||
|
||||
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
|
||||
to extract, reuse, reproduce, and Share all or a substantial
|
||||
portion of the contents of the database for NonCommercial purposes
|
||||
only and provided You do not Share Adapted Material;
|
||||
|
||||
b. if You include all or a substantial portion of the database
|
||||
contents in a 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
|
||||
|
||||
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.
|
||||
|
||||
For the avoidance of doubt, this Section 4 supplements and does not
|
||||
replace Your obligations under this Public License where the Licensed
|
||||
Rights include other Copyright and Similar Rights.
|
||||
|
||||
|
||||
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
|
||||
|
||||
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
|
||||
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
|
||||
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
|
||||
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
|
||||
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
|
||||
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
|
||||
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
|
||||
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
|
||||
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
|
||||
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
|
||||
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
|
||||
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
|
||||
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
|
||||
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
|
||||
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
|
||||
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
|
||||
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
|
||||
|
||||
c. The disclaimer of warranties and limitation of liability provided
|
||||
above shall be interpreted in a manner that, to the extent
|
||||
possible, most closely approximates an absolute disclaimer and
|
||||
waiver of all liability.
|
||||
|
||||
|
||||
Section 6 -- Term and Termination.
|
||||
|
||||
a. This Public License applies for the term of the Copyright and
|
||||
Similar Rights licensed here. However, if You fail to comply with
|
||||
this Public License, then Your rights under this Public License
|
||||
terminate automatically.
|
||||
|
||||
b. Where Your right to use the Licensed Material has terminated under
|
||||
Section 6(a), it reinstates:
|
||||
|
||||
1. automatically as of the date the violation is cured, provided
|
||||
it is cured within 30 days of Your discovery of the
|
||||
violation; or
|
||||
|
||||
2. upon express reinstatement by the Licensor.
|
||||
|
||||
For the avoidance of doubt, this Section 6(b) does not affect any
|
||||
right the Licensor may have to seek remedies for Your violations
|
||||
of this Public License.
|
||||
|
||||
c. For the avoidance of doubt, the Licensor may also offer the
|
||||
Licensed Material under separate terms or conditions or stop
|
||||
distributing the Licensed Material at any time; however, doing so
|
||||
will not terminate this Public License.
|
||||
|
||||
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
|
||||
License.
|
||||
|
||||
|
||||
Section 7 -- Other Terms and Conditions.
|
||||
|
||||
a. The Licensor shall not be bound by any additional or different
|
||||
terms or conditions communicated by You unless expressly agreed.
|
||||
|
||||
b. Any arrangements, understandings, or agreements regarding the
|
||||
Licensed Material not stated herein are separate from and
|
||||
independent of the terms and conditions of this Public License.
|
||||
|
||||
|
||||
Section 8 -- Interpretation.
|
||||
|
||||
a. For the avoidance of doubt, this Public License does not, and
|
||||
shall not be interpreted to, reduce, limit, restrict, or impose
|
||||
conditions on any use of the Licensed Material that could lawfully
|
||||
be made without permission under this Public License.
|
||||
|
||||
b. To the extent possible, if any provision of this Public License is
|
||||
deemed unenforceable, it shall be automatically reformed to the
|
||||
minimum extent necessary to make it enforceable. If the provision
|
||||
cannot be reformed, it shall be severed from this Public License
|
||||
without affecting the enforceability of the remaining terms and
|
||||
conditions.
|
||||
|
||||
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
|
||||
Licensor.
|
||||
|
||||
d. Nothing in this Public License constitutes or may be interpreted
|
||||
as a limitation upon, or waiver of, any privileges and immunities
|
||||
that apply to the Licensor or You, including from the legal
|
||||
processes of any jurisdiction or authority.
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons is not a party to its public
|
||||
licenses. Notwithstanding, Creative Commons may elect to apply one of
|
||||
its public licenses to material it publishes and in those instances
|
||||
will be considered the “Licensor.” The text of the Creative Commons
|
||||
public licenses is dedicated to the public domain under the CC0 Public
|
||||
Domain Dedication. Except for the limited purpose of indicating that
|
||||
material is shared under a Creative Commons public license or as
|
||||
otherwise permitted by the Creative Commons policies published at
|
||||
creativecommons.org/policies, Creative Commons does not authorize the
|
||||
use of the trademark "Creative Commons" or any other trademark or logo
|
||||
of Creative Commons without its prior written consent including,
|
||||
without limitation, in connection with any unauthorized modifications
|
||||
to any of its public licenses or any other arrangements,
|
||||
understandings, or agreements concerning use of licensed material. For
|
||||
the avoidance of doubt, this paragraph does not form part of the
|
||||
public licenses.
|
||||
|
||||
Creative Commons may be contacted at creativecommons.org.
|
||||
Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
|
||||
International Public License
|
||||
|
||||
By exercising the Licensed Rights (defined below), You accept and agree
|
||||
to be bound by the terms and conditions of this Creative Commons
|
||||
Attribution-NonCommercial-NoDerivatives 4.0 International Public
|
||||
License ("Public License"). To the extent this Public License may be
|
||||
interpreted as a contract, You are granted the Licensed Rights in
|
||||
consideration of Your acceptance of these terms and conditions, and the
|
||||
Licensor grants You such rights in consideration of benefits the
|
||||
Licensor receives from making the Licensed Material available under
|
||||
these terms and conditions.
|
||||
|
||||
|
||||
Section 1 -- Definitions.
|
||||
|
||||
a. Adapted Material means material subject to Copyright and Similar
|
||||
Rights that is derived from or based upon the Licensed Material
|
||||
and in which the Licensed Material is translated, altered,
|
||||
arranged, transformed, or otherwise modified in a manner requiring
|
||||
permission under the Copyright and Similar Rights held by the
|
||||
Licensor. For purposes of this Public License, where the Licensed
|
||||
Material is a musical work, performance, or sound recording,
|
||||
Adapted Material is always produced where the Licensed Material is
|
||||
synched in timed relation with a moving image.
|
||||
|
||||
b. Copyright and Similar Rights means copyright and/or similar rights
|
||||
closely related to copyright including, without limitation,
|
||||
performance, broadcast, sound recording, and Sui Generis Database
|
||||
Rights, without regard to how the rights are labeled or
|
||||
categorized. For purposes of this Public License, the rights
|
||||
specified in Section 2(b)(1)-(2) are not Copyright and Similar
|
||||
Rights.
|
||||
|
||||
c. Effective Technological Measures means those measures that, in the
|
||||
absence of proper authority, may not be circumvented under laws
|
||||
fulfilling obligations under Article 11 of the WIPO Copyright
|
||||
Treaty adopted on December 20, 1996, and/or similar international
|
||||
agreements.
|
||||
|
||||
d. Exceptions and Limitations means fair use, fair dealing, and/or
|
||||
any other exception or limitation to Copyright and Similar Rights
|
||||
that applies to Your use of the Licensed Material.
|
||||
|
||||
e. Licensed Material means the artistic or literary work, database,
|
||||
or other material to which the Licensor applied this Public
|
||||
License.
|
||||
|
||||
f. Licensed Rights means the rights granted to You subject to the
|
||||
terms and conditions of this Public License, which are limited to
|
||||
all Copyright and Similar Rights that apply to Your use of the
|
||||
Licensed Material and that the Licensor has authority to license.
|
||||
|
||||
g. Licensor means the individual(s) or entity(ies) granting rights
|
||||
under this Public License.
|
||||
|
||||
h. NonCommercial means not primarily intended for or directed towards
|
||||
commercial advantage or monetary compensation. For purposes of
|
||||
this Public License, the exchange of the Licensed Material for
|
||||
other material subject to Copyright and Similar Rights by digital
|
||||
file-sharing or similar means is NonCommercial provided there is
|
||||
no payment of monetary compensation in connection with the
|
||||
exchange.
|
||||
|
||||
i. Share means to provide material to the public by any means or
|
||||
process that requires permission under the Licensed Rights, such
|
||||
as reproduction, public display, public performance, distribution,
|
||||
dissemination, communication, or importation, and to make material
|
||||
available to the public including in ways that members of the
|
||||
public may access the material from a place and at a time
|
||||
individually chosen by them.
|
||||
|
||||
j. Sui Generis Database Rights means rights other than copyright
|
||||
resulting from Directive 96/9/EC of the European Parliament and of
|
||||
the Council of 11 March 1996 on the legal protection of databases,
|
||||
as amended and/or succeeded, as well as other essentially
|
||||
equivalent rights anywhere in the world.
|
||||
|
||||
k. You means the individual or entity exercising the Licensed Rights
|
||||
under this Public License. Your has a corresponding meaning.
|
||||
|
||||
|
||||
Section 2 -- Scope.
|
||||
|
||||
a. License grant.
|
||||
|
||||
1. Subject to the terms and conditions of this Public License,
|
||||
the Licensor hereby grants You a worldwide, royalty-free,
|
||||
non-sublicensable, non-exclusive, irrevocable license to
|
||||
exercise the Licensed Rights in the Licensed Material to:
|
||||
|
||||
a. reproduce and Share the Licensed Material, in whole or
|
||||
in part, for NonCommercial purposes only; and
|
||||
|
||||
b. produce and reproduce, but not Share, Adapted Material
|
||||
for NonCommercial purposes only.
|
||||
|
||||
2. Exceptions and Limitations. For the avoidance of doubt, where
|
||||
Exceptions and Limitations apply to Your use, this Public
|
||||
License does not apply, and You do not need to comply with
|
||||
its terms and conditions.
|
||||
|
||||
3. Term. The term of this Public License is specified in Section
|
||||
6(a).
|
||||
|
||||
4. Media and formats; technical modifications allowed. The
|
||||
Licensor authorizes You to exercise the Licensed Rights in
|
||||
all media and formats whether now known or hereafter created,
|
||||
and to make technical modifications necessary to do so. The
|
||||
Licensor waives and/or agrees not to assert any right or
|
||||
authority to forbid You from making technical modifications
|
||||
necessary to exercise the Licensed Rights, including
|
||||
technical modifications necessary to circumvent Effective
|
||||
Technological Measures. For purposes of this Public License,
|
||||
simply making modifications authorized by this Section 2(a)
|
||||
(4) never produces Adapted Material.
|
||||
|
||||
5. Downstream recipients.
|
||||
|
||||
a. Offer from the Licensor -- Licensed Material. Every
|
||||
recipient of the Licensed Material automatically
|
||||
receives an offer from the Licensor to exercise the
|
||||
Licensed Rights under the terms and conditions of this
|
||||
Public License.
|
||||
|
||||
b. No downstream restrictions. You may not offer or impose
|
||||
any additional or different terms or conditions on, or
|
||||
apply any Effective Technological Measures to, the
|
||||
Licensed Material if doing so restricts exercise of the
|
||||
Licensed Rights by any recipient of the Licensed
|
||||
Material.
|
||||
|
||||
6. No endorsement. Nothing in this Public License constitutes or
|
||||
may be construed as permission to assert or imply that You
|
||||
are, or that Your use of the Licensed Material is, connected
|
||||
with, or sponsored, endorsed, or granted official status by,
|
||||
the Licensor or others designated to receive attribution as
|
||||
provided in Section 3(a)(1)(A)(i).
|
||||
|
||||
b. Other rights.
|
||||
|
||||
1. Moral rights, such as the right of integrity, are not
|
||||
licensed under this Public License, nor are publicity,
|
||||
privacy, and/or other similar personality rights; however, to
|
||||
the extent possible, the Licensor waives and/or agrees not to
|
||||
assert any such rights held by the Licensor to the limited
|
||||
extent necessary to allow You to exercise the Licensed
|
||||
Rights, but not otherwise.
|
||||
|
||||
2. Patent and trademark rights are not licensed under this
|
||||
Public License.
|
||||
|
||||
3. To the extent possible, the Licensor waives any right to
|
||||
collect royalties from You for the exercise of the Licensed
|
||||
Rights, whether directly or through a collecting society
|
||||
under any voluntary or waivable statutory or compulsory
|
||||
licensing scheme. In all other cases the Licensor expressly
|
||||
reserves any right to collect such royalties, including when
|
||||
the Licensed Material is used other than for NonCommercial
|
||||
purposes.
|
||||
|
||||
|
||||
Section 3 -- License Conditions.
|
||||
|
||||
Your exercise of the Licensed Rights is expressly made subject to the
|
||||
following conditions.
|
||||
|
||||
a. Attribution.
|
||||
|
||||
1. If You Share the Licensed Material, You must:
|
||||
|
||||
a. retain the following if it is supplied by the Licensor
|
||||
with the Licensed Material:
|
||||
|
||||
i. identification of the creator(s) of the Licensed
|
||||
Material and any others designated to receive
|
||||
attribution, in any reasonable manner requested by
|
||||
the Licensor (including by pseudonym if
|
||||
designated);
|
||||
|
||||
ii. a copyright notice;
|
||||
|
||||
iii. a notice that refers to this Public License;
|
||||
|
||||
iv. a notice that refers to the disclaimer of
|
||||
warranties;
|
||||
|
||||
v. a URI or hyperlink to the Licensed Material to the
|
||||
extent reasonably practicable;
|
||||
|
||||
b. indicate if You modified the Licensed Material and
|
||||
retain an indication of any previous modifications; and
|
||||
|
||||
c. indicate the Licensed Material is licensed under this
|
||||
Public License, and include the text of, or the URI or
|
||||
hyperlink to, this Public License.
|
||||
|
||||
For the avoidance of doubt, You do not have permission under
|
||||
this Public License to Share Adapted Material.
|
||||
|
||||
2. You may satisfy the conditions in Section 3(a)(1) in any
|
||||
reasonable manner based on the medium, means, and context in
|
||||
which You Share the Licensed Material. For example, it may be
|
||||
reasonable to satisfy the conditions by providing a URI or
|
||||
hyperlink to a resource that includes the required
|
||||
information.
|
||||
|
||||
3. If requested by the Licensor, You must remove any of the
|
||||
information required by Section 3(a)(1)(A) to the extent
|
||||
reasonably practicable.
|
||||
|
||||
|
||||
Section 4 -- Sui Generis Database Rights.
|
||||
|
||||
Where the Licensed Rights include Sui Generis Database Rights that
|
||||
apply to Your use of the Licensed Material:
|
||||
|
||||
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
|
||||
to extract, reuse, reproduce, and Share all or a substantial
|
||||
portion of the contents of the database for NonCommercial purposes
|
||||
only and provided You do not Share Adapted Material;
|
||||
|
||||
b. if You include all or a substantial portion of the database
|
||||
contents in a 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
|
||||
|
||||
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.
|
||||
|
||||
For the avoidance of doubt, this Section 4 supplements and does not
|
||||
replace Your obligations under this Public License where the Licensed
|
||||
Rights include other Copyright and Similar Rights.
|
||||
|
||||
|
||||
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
|
||||
|
||||
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
|
||||
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
|
||||
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
|
||||
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
|
||||
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
|
||||
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
||||
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
|
||||
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
|
||||
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
|
||||
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
|
||||
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
|
||||
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
|
||||
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
|
||||
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
|
||||
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
|
||||
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
|
||||
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
|
||||
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
|
||||
|
||||
c. The disclaimer of warranties and limitation of liability provided
|
||||
above shall be interpreted in a manner that, to the extent
|
||||
possible, most closely approximates an absolute disclaimer and
|
||||
waiver of all liability.
|
||||
|
||||
|
||||
Section 6 -- Term and Termination.
|
||||
|
||||
a. This Public License applies for the term of the Copyright and
|
||||
Similar Rights licensed here. However, if You fail to comply with
|
||||
this Public License, then Your rights under this Public License
|
||||
terminate automatically.
|
||||
|
||||
b. Where Your right to use the Licensed Material has terminated under
|
||||
Section 6(a), it reinstates:
|
||||
|
||||
1. automatically as of the date the violation is cured, provided
|
||||
it is cured within 30 days of Your discovery of the
|
||||
violation; or
|
||||
|
||||
2. upon express reinstatement by the Licensor.
|
||||
|
||||
For the avoidance of doubt, this Section 6(b) does not affect any
|
||||
right the Licensor may have to seek remedies for Your violations
|
||||
of this Public License.
|
||||
|
||||
c. For the avoidance of doubt, the Licensor may also offer the
|
||||
Licensed Material under separate terms or conditions or stop
|
||||
distributing the Licensed Material at any time; however, doing so
|
||||
will not terminate this Public License.
|
||||
|
||||
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
|
||||
License.
|
||||
|
||||
|
||||
Section 7 -- Other Terms and Conditions.
|
||||
|
||||
a. The Licensor shall not be bound by any additional or different
|
||||
terms or conditions communicated by You unless expressly agreed.
|
||||
|
||||
b. Any arrangements, understandings, or agreements regarding the
|
||||
Licensed Material not stated herein are separate from and
|
||||
independent of the terms and conditions of this Public License.
|
||||
|
||||
|
||||
Section 8 -- Interpretation.
|
||||
|
||||
a. For the avoidance of doubt, this Public License does not, and
|
||||
shall not be interpreted to, reduce, limit, restrict, or impose
|
||||
conditions on any use of the Licensed Material that could lawfully
|
||||
be made without permission under this Public License.
|
||||
|
||||
b. To the extent possible, if any provision of this Public License is
|
||||
deemed unenforceable, it shall be automatically reformed to the
|
||||
minimum extent necessary to make it enforceable. If the provision
|
||||
cannot be reformed, it shall be severed from this Public License
|
||||
without affecting the enforceability of the remaining terms and
|
||||
conditions.
|
||||
|
||||
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
|
||||
Licensor.
|
||||
|
||||
d. Nothing in this Public License constitutes or may be interpreted
|
||||
as a limitation upon, or waiver of, any privileges and immunities
|
||||
that apply to the Licensor or You, including from the legal
|
||||
processes of any jurisdiction or authority.
|
||||
|
||||
=======================================================================
|
||||
|
||||
Creative Commons is not a party to its public
|
||||
licenses. Notwithstanding, Creative Commons may elect to apply one of
|
||||
its public licenses to material it publishes and in those instances
|
||||
will be considered the “Licensor.” The text of the Creative Commons
|
||||
public licenses is dedicated to the public domain under the CC0 Public
|
||||
Domain Dedication. Except for the limited purpose of indicating that
|
||||
material is shared under a Creative Commons public license or as
|
||||
otherwise permitted by the Creative Commons policies published at
|
||||
creativecommons.org/policies, Creative Commons does not authorize the
|
||||
use of the trademark "Creative Commons" or any other trademark or logo
|
||||
of Creative Commons without its prior written consent including,
|
||||
without limitation, in connection with any unauthorized modifications
|
||||
to any of its public licenses or any other arrangements,
|
||||
understandings, or agreements concerning use of licensed material. For
|
||||
the avoidance of doubt, this paragraph does not form part of the
|
||||
public licenses.
|
||||
|
||||
Creative Commons may be contacted at creativecommons.org.
|
||||
34
README.md
Normal file
34
README.md
Normal 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
34
index.html
@@ -1,19 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Understanding Deep Learning</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<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.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Understanding Deep Learning</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
27035
package-lock.json
generated
27035
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
65
package.json
65
package.json
@@ -1,33 +1,36 @@
|
||||
{
|
||||
"name": "react-website-smooth-scroll",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "https://udlbook.github.io/udlbook",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"react": "^18.0.2",
|
||||
"react-dom": "^18.0.2",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-router-dom": "^6.0.2",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-scroll": "^1.8.4",
|
||||
"styled-components": "^5.3.3"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"gh-pages": "^6.1.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
"name": "udlbook-website",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "https://udlbook.github.io/udlbook",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d dist",
|
||||
"clean": "rm -rf node_modules dist",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.2.1",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"react-scroll": "^1.8.4",
|
||||
"styled-components": "^6.1.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-react-refresh": "^0.4.7",
|
||||
"gh-pages": "^6.1.1",
|
||||
"prettier": "^3.3.1",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
"vite": "^5.2.12"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0 ;
|
||||
font-family: 'Encode Sans Expanded', sans-serif;
|
||||
}
|
||||
27
src/App.jsx
27
src/App.jsx
@@ -1,19 +1,12 @@
|
||||
import './App.css';
|
||||
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
|
||||
import Home from './pages';
|
||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||
import Home from "./pages";
|
||||
|
||||
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route exact path="/udlbook/" element ={<Home/>} />
|
||||
</Routes>
|
||||
|
||||
</Router>
|
||||
);
|
||||
export default function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route exact path="/udlbook/" element={<Home />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import styled from 'styled-components'
|
||||
import {Link} from 'react-scroll'
|
||||
import { Link } from "react-scroll";
|
||||
import styled from "styled-components";
|
||||
|
||||
|
||||
export const Button= styled(Link)`
|
||||
export const Button = styled(Link)`
|
||||
border-radius: 50px;
|
||||
background: ${({primary}) => (primary ? '#01BF71' : '#010606')};
|
||||
background: ${({ primary }) => (primary ? "#01BF71" : "#010606")};
|
||||
white-space: nowrap;
|
||||
padding: ${({big}) => (big? ' 14px 48px': '12px 30px')};
|
||||
color: ${({dark}) => (dark ? '#010106': '#fff')};
|
||||
font-size: $${({fontBig}) => (fontBig ? '20px' : '16px')};
|
||||
padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
|
||||
color: ${({ dark }) => (dark ? "#010106" : "#fff")};
|
||||
font-size: $ ${({ fontBig }) => (fontBig ? "20px" : "16px")};
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -16,8 +15,9 @@ export const Button= styled(Link)`
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: ${({primary}) => (primary ? '#fff' : '#01BF71')}
|
||||
background: ${({ primary }) => (primary ? "#fff" : "#01BF71")};
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
@@ -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;
|
||||
`
|
||||
`;
|
||||
|
||||
export const FooterWrap = styled.div`
|
||||
export const FooterWrap = styled.div`
|
||||
padding: 48x 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -13,25 +13,26 @@ export const FooterWrap = styled.div`
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
`
|
||||
`;
|
||||
|
||||
export const FooterLinksContainer = styled.div`
|
||||
export const FooterLinksContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
@media screen and (max-width: 820px) {
|
||||
padding-top: 32px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const FooterLinksWrapper = styled.div`
|
||||
export const FooterLinksWrapper = styled.div`
|
||||
display: flex;
|
||||
@media screen and (max-width: 820px){
|
||||
|
||||
@media screen and (max-width: 820px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const FooterLinkItems = styled.div`
|
||||
export const FooterLinkItems = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -41,17 +42,17 @@ export const FooterLinkItems = styled.div`
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
|
||||
@media screen and (max-width: 420px){
|
||||
@media screen and (max-width: 420px) {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const FooterLinkTitle = styled.h1`
|
||||
export const FooterLinkTitle = styled.h1`
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px ;
|
||||
`
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
export const FooterLink = styled(Link)`
|
||||
color: #ffffff;
|
||||
@@ -59,43 +60,43 @@ export const FooterLink = styled(Link)`
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
color: #01bf71;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const SocialMedia = styled.section`
|
||||
export const SocialMedia = styled.section`
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
`
|
||||
`;
|
||||
|
||||
export const SocialMediaWrap = styled.div`
|
||||
export const SocialMediaWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 20px auto 0 auto ;
|
||||
max-width: 1100px;
|
||||
margin: 20px auto 0 auto;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
@media screen and (max-width: 820px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const SocialAttrWrap = styled.div`
|
||||
export const SocialAttrWrap = styled.div`
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1100px;
|
||||
margin: 10px auto 0 auto ;
|
||||
max-width: 1100px;
|
||||
margin: 10px auto 0 auto;
|
||||
|
||||
@media screen and (max-width: 820px){
|
||||
@media screen and (max-width: 820px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const SocialLogo = styled(Link)`
|
||||
export const SocialLogo = styled(Link)`
|
||||
color: #fff;
|
||||
justify-self: start;
|
||||
cursor: pointer;
|
||||
@@ -105,38 +106,39 @@ export const SocialLogo = styled(Link)`
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const WebsiteRights = styled.small`
|
||||
color: #fff ;
|
||||
margin-bottom: 8px ;
|
||||
`
|
||||
export const WebsiteRights = styled.small`
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
export const SocialIcons = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
margin-bottom: 8px ;
|
||||
`
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
export const SocialIconLink = styled.a`
|
||||
export const SocialIconLink = styled.a`
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
`
|
||||
`;
|
||||
|
||||
export const FooterImgWrap = styled.div`
|
||||
export const FooterImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
`;
|
||||
|
||||
export const FooterImg = styled.img`
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
`;
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
import React from 'react'
|
||||
import { FaLinkedin} from 'react-icons/fa'
|
||||
import { FooterContainer, FooterWrap, FooterImg } from './FooterElements'
|
||||
import { SocialMedia, SocialMediaWrap, SocialIcons, SocialIconLink, WebsiteRights, SocialLogo } from './FooterElements'
|
||||
import { animateScroll as scroll } from 'react-scroll'
|
||||
import twitterImg from '../../images/square-x-twitter.svg'
|
||||
import { FaLinkedin } from "react-icons/fa";
|
||||
import { animateScroll as scroll } from "react-scroll";
|
||||
import twitterImg from "../../images/square-x-twitter.svg";
|
||||
import {
|
||||
FooterContainer,
|
||||
FooterImg,
|
||||
FooterWrap,
|
||||
SocialIconLink,
|
||||
SocialIcons,
|
||||
SocialLogo,
|
||||
SocialMedia,
|
||||
SocialMediaWrap,
|
||||
WebsiteRights,
|
||||
} from "./FooterElements";
|
||||
|
||||
const Footer = () => {
|
||||
export default function Footer() {
|
||||
const toggleHome = () => {
|
||||
scroll.scrollToTop();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -16,27 +24,50 @@ const Footer = () => {
|
||||
<FooterWrap>
|
||||
<SocialMedia>
|
||||
<SocialMediaWrap>
|
||||
<SocialLogo to='/udlbook/' onClick={toggleHome}>
|
||||
<SocialLogo to="/udlbook/" onClick={toggleHome}>
|
||||
Understanding Deep Learning
|
||||
</SocialLogo>
|
||||
<WebsiteRights>©{new Date().getFullYear()} Simon J.D. Prince</WebsiteRights>
|
||||
<WebsiteRights>
|
||||
Images by StorySet on FreePik: <a href="https://www.freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933"> [1] </a> <a href="https://www.freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c">[2]</a> <a href="https://www.freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153"> [3]</a> <a href="https://www.freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649"> [4]</a>
|
||||
©{new Date().getFullYear()} Simon J.D. Prince
|
||||
</WebsiteRights>
|
||||
<WebsiteRights>
|
||||
Images by StorySet on FreePik:{" "}
|
||||
<a href="https://www.freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933">
|
||||
{" "}
|
||||
[1]{" "}
|
||||
</a>{" "}
|
||||
<a href="https://www.freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c">
|
||||
[2]
|
||||
</a>{" "}
|
||||
<a href="https://www.freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153">
|
||||
{" "}
|
||||
[3]
|
||||
</a>{" "}
|
||||
<a href="https://www.freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649">
|
||||
{" "}
|
||||
[4]
|
||||
</a>
|
||||
</WebsiteRights>
|
||||
<SocialIcons>
|
||||
<SocialIconLink href="https://twitter.com/SimonPrinceAI" target="_blank" aria-label="Twitter">
|
||||
<FooterImg src={twitterImg} alt="twitter"/>
|
||||
<SocialIconLink
|
||||
href="https://twitter.com/SimonPrinceAI"
|
||||
target="_blank"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<FooterImg src={twitterImg} alt="twitter" />
|
||||
</SocialIconLink>
|
||||
<SocialIconLink href="https://www.linkedin.com/in/simon-prince-615bb9165/" target="_blank" aria-label="LinkedIn">
|
||||
<FaLinkedin/>
|
||||
<SocialIconLink
|
||||
href="https://www.linkedin.com/in/simon-prince-615bb9165/"
|
||||
target="_blank"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<FaLinkedin />
|
||||
</SocialIconLink>
|
||||
</SocialIcons>
|
||||
</SocialMediaWrap>
|
||||
</SocialMedia>
|
||||
</FooterWrap>
|
||||
</FooterContainer>
|
||||
</FooterWrap>
|
||||
</FooterContainer>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer
|
||||
|
||||
@@ -8,23 +8,21 @@ export const HeroContainer = styled.div`
|
||||
padding: 0 0px;
|
||||
position: static;
|
||||
z-index: 1;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
|
||||
|
||||
export const HeroContent = styled.div`
|
||||
z-index: 3;
|
||||
width: 100% ;
|
||||
export const HeroContent = styled.div`
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
position: static;
|
||||
padding: 8px 24px;
|
||||
margin: 80px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center ;
|
||||
`
|
||||
export const HeroH1 = styled.h1`
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const HeroH1 = styled.h1`
|
||||
color: #fff;
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
@@ -36,17 +34,15 @@ export const HeroH1 = styled.h1`
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
`
|
||||
|
||||
export const HeroP = styled.p`
|
||||
export const HeroP = styled.p`
|
||||
margin-top: 24px;
|
||||
color: #fff;
|
||||
font-size: 24px ;
|
||||
text-align: center ;
|
||||
max-width: 600px ;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
@@ -54,18 +50,17 @@ export const HeroP = styled.p`
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const HeroBtnWrapper = styled.div`
|
||||
margin-top: 32px ;
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
flex-direction: column ;
|
||||
align-items: center ;
|
||||
`
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
|
||||
export const HeroRow = styled.div`
|
||||
display: grid;
|
||||
export const HeroRow = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: top;
|
||||
grid-template-areas: 'col1 col2' };
|
||||
@@ -73,32 +68,33 @@ export const HeroRow = styled.div`
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: 'col2' 'col1';
|
||||
}
|
||||
`
|
||||
|
||||
`;
|
||||
|
||||
export const HeroNewsItem = styled.div`
|
||||
margin-left: 4px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
// line-height: 16px;
|
||||
/* line-height: 16px; */
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
`;
|
||||
|
||||
`
|
||||
export const HeroNewsItemDate = styled.div`
|
||||
width: 20%;
|
||||
margin-right: 20px ;
|
||||
margin-right: 20px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const HeroNewsItemContent = styled.div`
|
||||
width: 80%;
|
||||
width: 80%;
|
||||
color: #000000;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@@ -108,49 +104,47 @@ export const HeroNewsItemContent = styled.div`
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
|
||||
|
||||
export const HeroColumn1 = styled.div`
|
||||
export const HeroColumn1 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
margin-left: 12px;
|
||||
margin-top: 60px;
|
||||
padding: 10px 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col1;
|
||||
align-items:left;
|
||||
align-items: left;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
`
|
||||
`;
|
||||
|
||||
|
||||
export const HeroColumn2 = styled.div`
|
||||
export const HeroColumn2 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col2;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
flex-direction:column;
|
||||
`
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const TextWrapper = styled.div`
|
||||
max-width: 540px ;
|
||||
max-width: 540px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
`
|
||||
export const HeroImgWrap = styled.div`
|
||||
`;
|
||||
|
||||
export const HeroImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
`;
|
||||
|
||||
export const Img = styled.img`
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
`;
|
||||
|
||||
export const HeroDownloadsImg = styled.img`
|
||||
@@ -159,63 +153,37 @@ export const HeroDownloadsImg = styled.img`
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
margin-bottom: 10px;
|
||||
`
|
||||
|
||||
export const HeroLink = styled.a`
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 0.6rem 0rem 0rem 0rem;
|
||||
cursor: pointer;
|
||||
position:relative ;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
content: '';
|
||||
opacity: .3;
|
||||
-webkit-transform: scaleX(1);
|
||||
transition-property: opacity, -webkit-transform;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`;
|
||||
|
||||
// color: #fff;
|
||||
// text-decoration: none;
|
||||
// padding: 0.1rem 0rem;
|
||||
// height: 100%;
|
||||
// cursor: pointer;
|
||||
// position:relative ;
|
||||
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: #000;
|
||||
// content: '';
|
||||
// opacity: .3;
|
||||
// -webkit-transform: scaleX(1);
|
||||
// transition-property: opacity, -webkit-transform;
|
||||
// transition-duration: .3s;
|
||||
// }
|
||||
&:before {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
content: "";
|
||||
opacity: 0.3;
|
||||
-webkit-transform: scaleX(1);
|
||||
transition-property:
|
||||
opacity,
|
||||
-webkit-transform;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
// &:hover:before {
|
||||
// opacity: 1;
|
||||
// -webkit-transform: scaleX(1.05);
|
||||
// }
|
||||
// `;
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`;
|
||||
|
||||
export const UDLLink = styled.a`
|
||||
text-decoration: none;
|
||||
@@ -224,7 +192,7 @@ export const UDLLink = styled.a`
|
||||
margin: 0 2px;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
&:before {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
top: 100%;
|
||||
@@ -232,29 +200,28 @@ export const UDLLink = styled.a`
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #000;
|
||||
content: '';
|
||||
opacity: .3;
|
||||
content: "";
|
||||
opacity: 0.3;
|
||||
-webkit-transform: scaleX(1);
|
||||
transition-property: opacity, -webkit-transform;
|
||||
transition-duration: .3s;
|
||||
transition-property:
|
||||
opacity,
|
||||
-webkit-transform;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
||||
|
||||
export const HeroNewsTitle = styled.div`
|
||||
export const HeroNewsTitle = styled.div`
|
||||
margin-left: 0px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
margin-bottom: 36px;
|
||||
margin-bottom: 36px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
@@ -263,16 +230,16 @@ export const HeroNewsTitle = styled.div`
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const HeroCitationTitle = styled.div`
|
||||
export const HeroCitationTitle = styled.div`
|
||||
margin-left: 0px;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
margin-top:36px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 36px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
@@ -281,24 +248,18 @@ export const HeroCitationTitle = styled.div`
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const HeroNewsBlock = styled.div``;
|
||||
|
||||
export const HeroNewsBlock = styled.div`
|
||||
|
||||
`
|
||||
export const HeroCitationBlock = styled.div`
|
||||
font-size: 14px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
|
||||
`
|
||||
|
||||
|
||||
|
||||
`;
|
||||
|
||||
export const HeroFollowBlock = styled.div`
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,19 +1,36 @@
|
||||
import React from 'react'
|
||||
import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent, UDLLink} from './HeroElements'
|
||||
import img from '../../images/F23.prince.learning.turquoise.jpg'
|
||||
|
||||
const HeroSection = () => {
|
||||
|
||||
import img from "../../images/F23.prince.learning.turquoise.jpg";
|
||||
import {
|
||||
HeroCitationBlock,
|
||||
HeroCitationTitle,
|
||||
HeroColumn1,
|
||||
HeroColumn2,
|
||||
HeroContainer,
|
||||
HeroContent,
|
||||
HeroDownloadsImg,
|
||||
HeroFollowBlock,
|
||||
HeroImgWrap,
|
||||
HeroLink,
|
||||
HeroNewsBlock,
|
||||
HeroNewsItem,
|
||||
HeroNewsItemContent,
|
||||
HeroNewsItemDate,
|
||||
HeroNewsTitle,
|
||||
HeroRow,
|
||||
Img,
|
||||
UDLLink,
|
||||
} from "./HeroElements";
|
||||
|
||||
export default function HeroSection() {
|
||||
const citation = `
|
||||
@book{prince2023understanding,
|
||||
author = "Simon J.D. Prince",
|
||||
title = "Understanding Deep Learning",
|
||||
publisher = "The MIT Press",
|
||||
year = 2023,
|
||||
url = "http://udlbook.com"}
|
||||
`
|
||||
|
||||
@book{prince2023understanding,
|
||||
author = "Simon J.D. Prince",
|
||||
title = "Understanding Deep Learning",
|
||||
publisher = "The MIT Press",
|
||||
year = 2023,
|
||||
url = "http://udlbook.com"
|
||||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<HeroContainer id="home">
|
||||
<HeroContent>
|
||||
@@ -21,84 +38,166 @@ const HeroSection = () => {
|
||||
<HeroColumn1>
|
||||
<HeroNewsBlock>
|
||||
<HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
|
||||
|
||||
<HeroNewsItem>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</HeroNewsItem> */}
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>02/21/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent>New blog about the <UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">Neural Tangent Kernel</UDLLink>.</HeroNewsItemContent>
|
||||
<HeroNewsItemContent>
|
||||
New blog about the{" "}
|
||||
<UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">
|
||||
Neural Tangent Kernel
|
||||
</UDLLink>
|
||||
.
|
||||
</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
{/* <HeroNewsItem>
|
||||
<HeroNewsItemDate>02/15/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent>
|
||||
{" "}
|
||||
First printing of book has sold out in most places. Second
|
||||
printing available mid-March.
|
||||
</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
<HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
|
||||
</HeroNewsItem> */}
|
||||
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>01/29/24</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> New blog about <UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </UDLLink> published.</HeroNewsItemContent>
|
||||
<HeroNewsItemContent>
|
||||
{" "}
|
||||
New blog about{" "}
|
||||
<UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/">
|
||||
{" "}
|
||||
gradient flow{" "}
|
||||
</UDLLink>{" "}
|
||||
published.
|
||||
</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>12/26/23</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> Machine Learning Street Talk <UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </UDLLink> discussing book.</HeroNewsItemContent>
|
||||
<HeroNewsItemContent>
|
||||
{" "}
|
||||
Machine Learning Street Talk{" "}
|
||||
<UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww">
|
||||
{" "}
|
||||
podcast{" "}
|
||||
</UDLLink>{" "}
|
||||
discussing book.
|
||||
</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>12/19/23</HeroNewsItemDate>
|
||||
<HeroNewsItemContent>Deeper Insights <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</UDLLink> discussing book.</HeroNewsItemContent>
|
||||
<HeroNewsItemContent>
|
||||
Deeper Insights{" "}
|
||||
<UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">
|
||||
podcast
|
||||
</UDLLink>{" "}
|
||||
discussing book.
|
||||
</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
|
||||
<HeroNewsItem>
|
||||
<HeroNewsItemDate>12/06/23</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> <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>
|
||||
<HeroNewsItemDate>12/05/23</HeroNewsItemDate>
|
||||
<HeroNewsItemContent> Book released by <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</UDLLink>.</HeroNewsItemContent>
|
||||
<HeroNewsItemContent>
|
||||
{" "}
|
||||
Book released by{" "}
|
||||
<UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
|
||||
The MIT Press
|
||||
</UDLLink>
|
||||
.
|
||||
</HeroNewsItemContent>
|
||||
</HeroNewsItem>
|
||||
</HeroNewsBlock>
|
||||
<HeroCitationTitle>CITATION:</HeroCitationTitle>
|
||||
<HeroCitationBlock>
|
||||
<pre>
|
||||
<code>
|
||||
<React.Fragment>{citation}</React.Fragment>
|
||||
<>{citation}</>
|
||||
</code>
|
||||
</pre>
|
||||
</HeroCitationBlock>
|
||||
<HeroFollowBlock>
|
||||
Follow me on <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or <UDLLink
|
||||
href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</UDLLink> for updates.
|
||||
Follow me on{" "}
|
||||
<UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or{" "}
|
||||
<UDLLink href="https://www.linkedin.com/in/simon-prince-615bb9165/">
|
||||
LinkedIn
|
||||
</UDLLink>{" "}
|
||||
for updates.
|
||||
</HeroFollowBlock>
|
||||
</HeroColumn1>
|
||||
<HeroColumn2>
|
||||
<HeroImgWrap>
|
||||
<Img src={img} alt="book cover"/>
|
||||
<Img src={img} alt="book cover" />
|
||||
</HeroImgWrap>
|
||||
<HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">Download full pdf (27 May 2024)</HeroLink>
|
||||
<HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/>
|
||||
<HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">Buy the book</HeroLink>
|
||||
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">Answers to selected questions</HeroLink>
|
||||
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Errata</HeroLink>
|
||||
<HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">
|
||||
Download full pdf (27 May 2024)
|
||||
</HeroLink>
|
||||
<HeroDownloadsImg
|
||||
src="https://img.shields.io/github/downloads/udlbook/udlbook/total"
|
||||
alt="download stats shield"
|
||||
/>
|
||||
<HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
|
||||
Buy the book
|
||||
</HeroLink>
|
||||
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">
|
||||
Answers to selected questions
|
||||
</HeroLink>
|
||||
<HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">
|
||||
Errata
|
||||
</HeroLink>
|
||||
</HeroColumn2>
|
||||
</HeroRow>
|
||||
</HeroContent>
|
||||
</HeroContainer>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroSection
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
|
||||
export const InstructorsContainer = styled.div`
|
||||
export const InstructorsContainer = styled.div`
|
||||
color: #fff;
|
||||
/* background: #f9f9f9; */
|
||||
background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
|
||||
background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 100px 0;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const InstructorsWrapper = styled.div`
|
||||
display: grid ;
|
||||
display: grid;
|
||||
z-index: 1;
|
||||
width: 100% ;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 0 24px;
|
||||
justify-content: center;
|
||||
`
|
||||
`;
|
||||
|
||||
export const InstructorsRow = styled.div`
|
||||
display: grid;
|
||||
export const InstructorsRow = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: center;
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-template-areas: ${({ imgStart }) =>
|
||||
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const InstructorsRow2 = styled.div`
|
||||
display: grid;
|
||||
export const InstructorsRow2 = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: top;
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-template-areas: ${({ imgStart }) =>
|
||||
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
|
||||
export const Column1 = styled.div`
|
||||
export const Column1 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col1;
|
||||
`
|
||||
`;
|
||||
|
||||
export const Column2 = styled.div`
|
||||
export const Column2 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col2;
|
||||
`
|
||||
`;
|
||||
|
||||
export const TextWrapper = styled.div`
|
||||
max-width: 540px ;
|
||||
max-width: 540px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
`
|
||||
`;
|
||||
|
||||
export const TopLine = styled.p`
|
||||
export const TopLine = styled.p`
|
||||
color: #773c23;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
@@ -71,62 +71,58 @@ export const TopLine = styled.p`
|
||||
letter-spacing: 1.4px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
`
|
||||
|
||||
export const Heading= styled.h1`
|
||||
`;
|
||||
|
||||
export const Heading = styled.h1`
|
||||
margin-bottom: 24px;
|
||||
font-size: 48px;
|
||||
line-height: 1.1;
|
||||
font-weight: 600;
|
||||
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
|
||||
|
||||
@media screen and (max-width: 480px)
|
||||
{
|
||||
color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
|
||||
export const Subtitle = styled.p`
|
||||
export const Subtitle = styled.p`
|
||||
max-width: 440px;
|
||||
margin-bottom: 35px;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
|
||||
|
||||
`
|
||||
color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
|
||||
`;
|
||||
|
||||
export const BtnWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
`
|
||||
|
||||
export const ImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
export const Img = styled.img`
|
||||
width: 100%;
|
||||
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`
|
||||
z-index: 3;
|
||||
width: 100% ;
|
||||
export const Img = styled.img`
|
||||
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;
|
||||
position: static;
|
||||
padding: 8px 0px;
|
||||
margin: 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left ;
|
||||
align-items: left;
|
||||
list-style-position: inside;
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -134,7 +130,7 @@ export const InstructorsContent = styled.div`
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const InstructorsLink = styled.a`
|
||||
text-decoration: none;
|
||||
@@ -143,7 +139,7 @@ export const InstructorsLink = styled.a`
|
||||
margin: 0 2px;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
&:before {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
top: 100%;
|
||||
@@ -151,15 +147,17 @@ export const InstructorsLink = styled.a`
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #555;
|
||||
content: '';
|
||||
opacity: .3;
|
||||
content: "";
|
||||
opacity: 0.3;
|
||||
-webkit-transform: scaleX(1);
|
||||
transition-property: opacity, -webkit-transform;
|
||||
transition-duration: .3s;
|
||||
transition-property:
|
||||
opacity,
|
||||
-webkit-transform;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,178 +1,500 @@
|
||||
import React from 'react'
|
||||
import { ImgWrap, Img, InstructorsLink, InstructorsContainer, InstructorsContent, InstructorsRow2, InstructorsWrapper, InstructorsRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './InstructorsElements'
|
||||
import img from "../../images/instructor.svg";
|
||||
import {
|
||||
Column1,
|
||||
Column2,
|
||||
Heading,
|
||||
Img,
|
||||
ImgWrap,
|
||||
InstructorsContainer,
|
||||
InstructorsContent,
|
||||
InstructorsLink,
|
||||
InstructorsRow,
|
||||
InstructorsRow2,
|
||||
InstructorsWrapper,
|
||||
Subtitle,
|
||||
TextWrapper,
|
||||
TopLine,
|
||||
} from "./InstructorsElements";
|
||||
|
||||
// export const homeObjOne = {
|
||||
// id: 'about',
|
||||
// lightBg: false,
|
||||
// lightText: true,
|
||||
// lightTextDesc: true,
|
||||
// topLine: 'Premium Bank',
|
||||
// headline: 'Unlimited transactions with zero fees',
|
||||
// description:
|
||||
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
|
||||
// buttonLabel: 'Get Started',
|
||||
// imgStart: false,
|
||||
// img: require('../../images/svg-1.svg').default,
|
||||
// alt: 'Car',
|
||||
// dark: true,
|
||||
// primary: true,
|
||||
// darkText: false
|
||||
// };
|
||||
|
||||
import img from '../../images/instructor.svg'
|
||||
|
||||
|
||||
|
||||
const InstructorsSection = () => {
|
||||
export default function InstructorsSection() {
|
||||
return (
|
||||
<>
|
||||
<InstructorsContainer lightBg={true} id='Instructors'>
|
||||
<InstructorsContainer lightBg={true} id="Instructors">
|
||||
<InstructorsWrapper>
|
||||
<InstructorsRow imgStart={false}>
|
||||
<Column1>
|
||||
<TextWrapper>
|
||||
<TopLine>Instructors</TopLine>
|
||||
<Heading lightText={false}>Resources for instructors</Heading>
|
||||
<Subtitle darkText={true}>All the figures in vector and image formats, full slides for first twelve chapters, instructor answer booklet</Subtitle>
|
||||
<Subtitle darkText={true}>
|
||||
All the figures in vector and image formats, full slides for
|
||||
first twelve chapters, instructor answer booklet
|
||||
</Subtitle>
|
||||
</TextWrapper>
|
||||
</Column1>
|
||||
<Column2>
|
||||
<ImgWrap>
|
||||
<Img src={img} alt='Car'/>
|
||||
<Img src={img} alt="Car" />
|
||||
</ImgWrap>
|
||||
</Column2>
|
||||
</InstructorsRow>
|
||||
<InstructorsRow2>
|
||||
<Column1>
|
||||
<TopLine>Register</TopLine>
|
||||
<InstructorsLink href="https://mitpress.ublish.com/request?cri=15055">Register</InstructorsLink> with MIT Press for answer booklet.
|
||||
<InstructorsContent>
|
||||
|
||||
</InstructorsContent>
|
||||
|
||||
<InstructorsLink href="https://mitpress.ublish.com/request?cri=15055">
|
||||
Register
|
||||
</InstructorsLink>{" "}
|
||||
with MIT Press for answer booklet.
|
||||
<InstructorsContent></InstructorsContent>
|
||||
<TopLine>Full slides</TopLine>
|
||||
<InstructorsContent>
|
||||
Slides for 20 lecture undergraduate deep learning course:
|
||||
</InstructorsContent>
|
||||
<InstructorsContent>
|
||||
<ol>
|
||||
<li>Introduction <InstructorsLink href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">PPTX</InstructorsLink></li>
|
||||
<li>Supervised Learning <InstructorsLink href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">PPTX</InstructorsLink></li>
|
||||
<li>Shallow Neural Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">PPTX</InstructorsLink></li>
|
||||
<li>Deep Neural Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">PPTX</InstructorsLink></li>
|
||||
<li>Loss Functions <InstructorsLink href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">PPTX</InstructorsLink></li>
|
||||
<li>Fitting Models <InstructorsLink href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">PPTX</InstructorsLink></li>
|
||||
<li>Computing Gradients <InstructorsLink href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">PPTX</InstructorsLink></li>
|
||||
<li>Initialization <InstructorsLink href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">PPTX</InstructorsLink></li>
|
||||
<li>Performance <InstructorsLink href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">PPTX</InstructorsLink></li>
|
||||
<li>Regularization <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">PPTX</InstructorsLink></li>
|
||||
<li>Convolutional Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">PPTX</InstructorsLink></li>
|
||||
<li>Image Generation <InstructorsLink href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">PPTX</InstructorsLink></li>
|
||||
<li>Transformers and LLMs <InstructorsLink href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">PPTX</InstructorsLink></li>
|
||||
<li>
|
||||
Introduction{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Supervised Learning{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Shallow Neural Networks{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Deep Neural Networks{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Loss Functions{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Fitting Models{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Computing Gradients{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Initialization{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Performance{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Regularization{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Convolutional Networks{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Image Generation{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
Transformers and LLMs{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
</ol>
|
||||
</InstructorsContent>
|
||||
</InstructorsContent>
|
||||
</Column1>
|
||||
<Column2>
|
||||
<TopLine>Figures</TopLine>
|
||||
<InstructorsContent>
|
||||
<ol>
|
||||
<li> Introduction: <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap1PDF.zip">PDF</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1udnl5pUOAc8DcAQ7HQwyzP9pwL95ynnv"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1IjTqIUvWCJc71b5vEJYte-Dwujcp7rvG/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX </InstructorsLink></li>
|
||||
<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> Supervised learning: <InstructorsLink
|
||||
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">PDF</InstructorsLink> / <InstructorsLink
|
||||
href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
|
||||
<li> Shallow neural networks: <InstructorsLink
|
||||
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">PDF</InstructorsLink> / <InstructorsLink
|
||||
href="https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
|
||||
<li> Deep neural networks: <InstructorsLink
|
||||
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">PDF</InstructorsLink> / <InstructorsLink
|
||||
href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa"> SVG</InstructorsLink>
|
||||
/
|
||||
<InstructorsLink href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
|
||||
<li> Loss functions: <InstructorsLink
|
||||
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">PDF
|
||||
</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ">
|
||||
SVG
|
||||
</InstructorsLink> / <InstructorsLink
|
||||
href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
|
||||
<li> Training models: <InstructorsLink
|
||||
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">PDF
|
||||
</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK">
|
||||
SVG
|
||||
</InstructorsLink> / <InstructorsLink
|
||||
href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
|
||||
<li> Gradients and initialization: <InstructorsLink
|
||||
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">PDF</InstructorsLink> / <InstructorsLink
|
||||
href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
|
||||
<li> Measuring performance: <InstructorsLink
|
||||
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">PDF</InstructorsLink> / <InstructorsLink
|
||||
href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
|
||||
<li> Regularization: <InstructorsLink
|
||||
href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">PDF
|
||||
</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
|
||||
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>
|
||||
<InstructorsLink href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">Instructions</InstructorsLink> for editing equations in figures.
|
||||
|
||||
<InstructorsContent>
|
||||
|
||||
<li>
|
||||
{" "}
|
||||
Supervised learning:{" "}
|
||||
<InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">
|
||||
PDF
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla">
|
||||
{" "}
|
||||
SVG
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Shallow neural networks:{" "}
|
||||
<InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">
|
||||
PDF
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI">
|
||||
{" "}
|
||||
SVG
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Deep neural networks:{" "}
|
||||
<InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">
|
||||
PDF
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa">
|
||||
{" "}
|
||||
SVG
|
||||
</InstructorsLink>
|
||||
/
|
||||
<InstructorsLink href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Loss functions:{" "}
|
||||
<InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">
|
||||
PDF
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ">
|
||||
SVG
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Training models:{" "}
|
||||
<InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">
|
||||
PDF
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK">
|
||||
SVG
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Gradients and initialization:{" "}
|
||||
<InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">
|
||||
PDF
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs">
|
||||
{" "}
|
||||
SVG
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Measuring performance:{" "}
|
||||
<InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">
|
||||
PDF
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx">
|
||||
{" "}
|
||||
SVG
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
|
||||
PPTX
|
||||
</InstructorsLink>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Regularization:{" "}
|
||||
<InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">
|
||||
PDF
|
||||
</InstructorsLink>{" "}
|
||||
/{" "}
|
||||
<InstructorsLink href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
|
||||
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>
|
||||
<InstructorsLink href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">
|
||||
Instructions
|
||||
</InstructorsLink>{" "}
|
||||
for editing equations in figures.
|
||||
<InstructorsContent></InstructorsContent>
|
||||
</Column2>
|
||||
</InstructorsRow2>
|
||||
|
||||
</InstructorsWrapper>
|
||||
</InstructorsContainer>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default InstructorsSection
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
|
||||
export const MediaContainer = styled.div`
|
||||
export const MediaContainer = styled.div`
|
||||
color: #fff;
|
||||
/* background: #f9f9f9; */
|
||||
background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
|
||||
background: ${({ lightBg }) => (lightBg ? "#f9f9f9" : "#010606")};
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 100px 0;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const MediaWrapper = styled.div`
|
||||
display: grid ;
|
||||
display: grid;
|
||||
z-index: 1;
|
||||
width: 100% ;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 0 24px;
|
||||
justify-content: center;
|
||||
`
|
||||
`;
|
||||
|
||||
export const MediaRow = styled.div`
|
||||
display: grid;
|
||||
export const MediaRow = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: center;
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-template-areas: ${({ imgStart }) =>
|
||||
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const Column1 = styled.div`
|
||||
export const Column1 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col1;
|
||||
`
|
||||
`;
|
||||
|
||||
export const Column2 = styled.div`
|
||||
export const Column2 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col2;
|
||||
`
|
||||
`;
|
||||
|
||||
export const TextWrapper = styled.div`
|
||||
max-width: 540px ;
|
||||
max-width: 540px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
`
|
||||
`;
|
||||
|
||||
export const TopLine = styled.p`
|
||||
export const TopLine = styled.p`
|
||||
color: #57c6d1;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
@@ -59,100 +59,94 @@ export const TopLine = styled.p`
|
||||
letter-spacing: 1.4px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
`
|
||||
|
||||
export const Heading= styled.h1`
|
||||
`;
|
||||
|
||||
export const Heading = styled.h1`
|
||||
margin-bottom: 24px;
|
||||
font-size: 48px;
|
||||
line-height: 1.1;
|
||||
font-weight: 600;
|
||||
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
|
||||
|
||||
@media screen and (max-width: 480px)
|
||||
{
|
||||
color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
|
||||
export const Subtitle = styled.p`
|
||||
export const Subtitle = styled.p`
|
||||
max-width: 440px;
|
||||
margin-bottom: 35px;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
|
||||
|
||||
`
|
||||
color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
|
||||
`;
|
||||
|
||||
export const BtnWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
`
|
||||
|
||||
export const ImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
export const Img = styled.img`
|
||||
width: 100%;
|
||||
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`
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const MediaContent = styled.div`
|
||||
z-index: 3;
|
||||
width: 100% ;
|
||||
export const MediaContent = styled.div`
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
position: static;
|
||||
padding: 8px 0px;
|
||||
margin: 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left ;
|
||||
align-items: left;
|
||||
list-style-position: inside;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
`
|
||||
|
||||
export const MediaRow2 = styled.div`
|
||||
display: grid;
|
||||
export const MediaRow2 = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: top;
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-template-areas: ${({ imgStart }) =>
|
||||
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const VideoFrame = styled.div`
|
||||
width: 560px;
|
||||
height: 315px;
|
||||
|
||||
export const VideoFrame=styled.div`
|
||||
width: 560px ;
|
||||
height: 315px ;
|
||||
@media screen and (max-width: 1050px) {
|
||||
width: 280px ;
|
||||
height: 157px ;
|
||||
width: 280px;
|
||||
height: 157px;
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
|
||||
`;
|
||||
|
||||
export const MediaLink = styled.a`
|
||||
text-decoration: none;
|
||||
@@ -161,23 +155,25 @@ export const MediaLink = styled.a`
|
||||
margin: 0 2px;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
&:before {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #57c6d1;;
|
||||
content: '';
|
||||
opacity: .3;
|
||||
background-color: #57c6d1;
|
||||
content: "";
|
||||
opacity: 0.3;
|
||||
-webkit-transform: scaleX(1);
|
||||
transition-property: opacity, -webkit-transform;
|
||||
transition-duration: .3s;
|
||||
transition-property:
|
||||
opacity,
|
||||
-webkit-transform;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,44 +1,43 @@
|
||||
import React from 'react'
|
||||
import { ImgWrap, Img, MediaLink, MediaContainer, MediaContent, MediaWrapper, VideoFrame, MediaRow, MediaRow2, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './MediaElements'
|
||||
import img from "../../images/media.svg";
|
||||
import {
|
||||
Column1,
|
||||
Column2,
|
||||
Heading,
|
||||
Img,
|
||||
ImgWrap,
|
||||
MediaContainer,
|
||||
MediaContent,
|
||||
MediaLink,
|
||||
MediaRow,
|
||||
MediaRow2,
|
||||
MediaWrapper,
|
||||
Subtitle,
|
||||
TextWrapper,
|
||||
TopLine,
|
||||
VideoFrame,
|
||||
} from "./MediaElements";
|
||||
|
||||
// export const homeObjOne = {
|
||||
// id: 'about',
|
||||
// lightBg: false,
|
||||
// lightText: true,
|
||||
// lightTextDesc: true,
|
||||
// topLine: 'Premium Bank',
|
||||
// headline: 'Unlimited transactions with zero fees',
|
||||
// description:
|
||||
// 'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
|
||||
// buttonLabel: 'Get Started',
|
||||
// imgStart: false,
|
||||
// img: require('../../images/svg-1.svg').default,
|
||||
// alt: 'Car',
|
||||
// dark: true,
|
||||
// primary: true,
|
||||
// darkText: false
|
||||
// };
|
||||
|
||||
import img from '../../images/media.svg'
|
||||
|
||||
|
||||
|
||||
const MediaSection = () => {
|
||||
export default function MediaSection() {
|
||||
return (
|
||||
<>
|
||||
<MediaContainer lightBg={false} id='Media'>
|
||||
<MediaContainer lightBg={false} id="Media">
|
||||
<MediaWrapper>
|
||||
<MediaRow imgStart={true}>
|
||||
<Column1>
|
||||
<TextWrapper>
|
||||
<TopLine>Media</TopLine>
|
||||
<Heading lightText={true}> Reviews, videos, podcasts, interviews</Heading>
|
||||
<Subtitle darkText={false}>Various resources connected to the book</Subtitle>
|
||||
<Heading lightText={true}>
|
||||
{" "}
|
||||
Reviews, videos, podcasts, interviews
|
||||
</Heading>
|
||||
<Subtitle darkText={false}>
|
||||
Various resources connected to the book
|
||||
</Subtitle>
|
||||
</TextWrapper>
|
||||
</Column1>
|
||||
<Column2>
|
||||
<ImgWrap>
|
||||
<Img src={img} alt='Car'/>
|
||||
<Img src={img} alt="Car" />
|
||||
</ImgWrap>
|
||||
</Column2>
|
||||
</MediaRow>
|
||||
@@ -46,16 +45,29 @@ const MediaSection = () => {
|
||||
<Column1>
|
||||
Machine learning street talk podcast
|
||||
<VideoFrame>
|
||||
<iframe width="100%" height="100%"
|
||||
src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&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/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&controls=0"
|
||||
title="YouTube video player"
|
||||
frameBorder="2"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</VideoFrame>
|
||||
</Column1>
|
||||
<Column2>
|
||||
Deeper insights podcast
|
||||
Deeper insights podcast
|
||||
<VideoFrame>
|
||||
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&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&controls=0"
|
||||
title="YouTube video player"
|
||||
frameBorder="2"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</VideoFrame>
|
||||
</Column2>
|
||||
</MediaRow>
|
||||
@@ -64,10 +76,59 @@ const MediaSection = () => {
|
||||
<TopLine>Reviews</TopLine>
|
||||
<MediaContent>
|
||||
<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> 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>
|
||||
{" "}
|
||||
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>
|
||||
{" "}
|
||||
Amazon{" "}
|
||||
<MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
|
||||
reviews
|
||||
</MediaLink>
|
||||
</li>
|
||||
<li>
|
||||
Goodreads{" "}
|
||||
<MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
|
||||
reviews{" "}
|
||||
</MediaLink>
|
||||
</li>
|
||||
<li>
|
||||
Book{" "}
|
||||
<MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
|
||||
review
|
||||
</MediaLink>{" "}
|
||||
by Vishal V.
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
Amazon{" "}
|
||||
<MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
|
||||
reviews
|
||||
</MediaLink>
|
||||
</li>
|
||||
<li>
|
||||
Goodreads{" "}
|
||||
<MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
|
||||
reviews{" "}
|
||||
</MediaLink>
|
||||
</li>
|
||||
<li>
|
||||
Book{" "}
|
||||
<MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
|
||||
review
|
||||
</MediaLink>{" "}
|
||||
by Vishal V.
|
||||
</li>
|
||||
</ul>
|
||||
</MediaContent>
|
||||
</Column1>
|
||||
@@ -75,17 +136,24 @@ const MediaSection = () => {
|
||||
<TopLine>Interviews</TopLine>
|
||||
<MediaContent>
|
||||
<ul>
|
||||
<li>Borealis AI <MediaLink href="https://www.borealisai.com/news/understanding-deep-learning/">interview</MediaLink></li>
|
||||
<li>Shepherd ML book <MediaLink href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">recommendations</MediaLink></li>
|
||||
<li>
|
||||
Borealis AI{" "}
|
||||
<MediaLink href="https://www.borealisai.com/news/understanding-deep-learning/">
|
||||
interview
|
||||
</MediaLink>
|
||||
</li>
|
||||
<li>
|
||||
Shepherd ML book{" "}
|
||||
<MediaLink href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">
|
||||
recommendations
|
||||
</MediaLink>
|
||||
</li>
|
||||
</ul>
|
||||
</MediaContent>
|
||||
</Column2>
|
||||
</MediaRow2>
|
||||
|
||||
</MediaWrapper>
|
||||
</MediaContainer>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default MediaSection
|
||||
|
||||
@@ -1,70 +1,70 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
|
||||
export const MoreContainer = styled.div`
|
||||
export const MoreContainer = styled.div`
|
||||
color: #fff;
|
||||
/* background: #f9f9f9; */
|
||||
background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
|
||||
background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 100px 0;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const MoreWrapper = styled.div`
|
||||
display: grid ;
|
||||
display: grid;
|
||||
z-index: 1;
|
||||
// height: 1050px ;
|
||||
width: 100% ;
|
||||
/* height: 1050px; */
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 0 24px;
|
||||
justify-content: center;
|
||||
`
|
||||
`;
|
||||
|
||||
export const MoreRow = styled.div`
|
||||
display: grid;
|
||||
export const MoreRow = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: center;
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-template-areas: ${({ imgStart }) =>
|
||||
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const MoreRow2 = styled.div`
|
||||
display: grid;
|
||||
export const MoreRow2 = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: top;
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-template-areas: ${({ imgStart }) =>
|
||||
imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
|
||||
export const Column1 = styled.div`
|
||||
export const Column1 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col1;
|
||||
`
|
||||
`;
|
||||
|
||||
export const Column2 = styled.div`
|
||||
export const Column2 = styled.div`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col2;
|
||||
`
|
||||
`;
|
||||
|
||||
export const TextWrapper = styled.div`
|
||||
max-width: 540px ;
|
||||
max-width: 540px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
`
|
||||
`;
|
||||
|
||||
export const TopLine = styled.p`
|
||||
export const TopLine = styled.p`
|
||||
color: #773c23;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
@@ -72,91 +72,85 @@ export const TopLine = styled.p`
|
||||
letter-spacing: 1.4px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 16px ;
|
||||
`
|
||||
|
||||
export const Heading= styled.h1`
|
||||
margin-top: 16px;
|
||||
`;
|
||||
|
||||
export const Heading = styled.h1`
|
||||
margin-bottom: 24px;
|
||||
font-size: 48px;
|
||||
line-height: 1.1;
|
||||
font-weight: 600;
|
||||
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
|
||||
|
||||
@media screen and (max-width: 480px)
|
||||
{
|
||||
color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
|
||||
export const Subtitle = styled.p`
|
||||
export const Subtitle = styled.p`
|
||||
max-width: 440px;
|
||||
margin-bottom: 35px;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
|
||||
|
||||
`
|
||||
color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
|
||||
`;
|
||||
|
||||
export const BtnWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
`
|
||||
|
||||
export const ImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
export const Img = styled.img`
|
||||
width: 100%;
|
||||
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`
|
||||
z-index: 3;
|
||||
width: 100% ;
|
||||
export const Img = styled.img`
|
||||
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;
|
||||
position: static;
|
||||
padding: 8px 0px;
|
||||
margin: 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left ;
|
||||
align-items: left;
|
||||
list-style-position: inside;
|
||||
`
|
||||
`;
|
||||
|
||||
export const MoreOuterList = styled.ul`
|
||||
// list-style:none;
|
||||
/* list-style:none; */
|
||||
list-style-position: inside;
|
||||
margin:0;
|
||||
margin: 0;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
`
|
||||
`;
|
||||
|
||||
export const MoreInnerList = styled.ul`
|
||||
list-style-position: inside;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
`
|
||||
`;
|
||||
|
||||
export const MoreInnerP = styled.p`
|
||||
padding-left: 18px;
|
||||
padding-bottom: 10px ;
|
||||
padding-top: 3px ;
|
||||
font-size:14px;
|
||||
color: #fff
|
||||
`
|
||||
|
||||
padding-bottom: 10px;
|
||||
padding-top: 3px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
`;
|
||||
|
||||
export const MoreLink = styled.a`
|
||||
text-decoration: none;
|
||||
@@ -165,7 +159,7 @@ export const MoreLink = styled.a`
|
||||
margin: 0 2px;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
&:before {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
top: 100%;
|
||||
@@ -173,15 +167,17 @@ export const MoreLink = styled.a`
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #555;
|
||||
content: '';
|
||||
opacity: .3;
|
||||
content: "";
|
||||
opacity: 0.3;
|
||||
-webkit-transform: scaleX(1);
|
||||
transition-property: opacity, -webkit-transform;
|
||||
transition-duration: .3s;
|
||||
transition-property:
|
||||
opacity,
|
||||
-webkit-transform;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`
|
||||
}
|
||||
`;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,119 +1,119 @@
|
||||
import { Link as LinkS } from 'react-scroll';
|
||||
import { Link as LinkR } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import { Link as LinkR } from "react-router-dom";
|
||||
import { Link as LinkS } from "react-scroll";
|
||||
import styled from "styled-components";
|
||||
|
||||
export const Nav = styled.nav`
|
||||
background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')};
|
||||
height: 100px;
|
||||
margin-top: -100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: ${({ scrollNav }) => (scrollNav ? "#000" : "transparent")};
|
||||
height: 100px;
|
||||
margin-top: -100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
transition: 0.8s all ease;
|
||||
}
|
||||
@media screen and (max-width: 960px) {
|
||||
transition: 0.8s all ease;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavbarContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
max-width: 1100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
max-width: 1100px;
|
||||
`;
|
||||
|
||||
export const NavLogo = styled(LinkR)`
|
||||
color: #fff;
|
||||
justify-self: flex-start;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
color: #fff;
|
||||
justify-self: flex-start;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const MobileIcon = styled.div`
|
||||
display: none;
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(-100%, 60%);
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(-100%, 60%);
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavMenu = styled.ul`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin-right: -22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin-right: -22px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavItem = styled.li`
|
||||
height: 80px;
|
||||
height: 80px;
|
||||
`;
|
||||
|
||||
export const NavBtn = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavLinks = styled(LinkS)`
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: 0 1rem;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: 0 1rem;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
border-bottom: 3px solid #57c6d1
|
||||
}
|
||||
&.active {
|
||||
border-bottom: 3px solid #57c6d1;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NavBtnLink = styled(LinkR)`
|
||||
border-radius: 50px;
|
||||
background: #01bf71;
|
||||
white-space: nowrap;
|
||||
padding: 10px 22px;
|
||||
color: #010606;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: #fff;
|
||||
border-radius: 50px;
|
||||
background: #01bf71;
|
||||
white-space: nowrap;
|
||||
padding: 10px 22px;
|
||||
color: #010606;
|
||||
}
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: #fff;
|
||||
color: #010606;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,59 +1,108 @@
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import {FaBars} from 'react-icons/fa'
|
||||
import {IconContext} from 'react-icons/lib'
|
||||
import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements'
|
||||
import { animateScroll as scroll } from 'react-scroll'
|
||||
import { useEffect, useState } from "react";
|
||||
import { FaBars } from "react-icons/fa";
|
||||
import { IconContext } from "react-icons/lib";
|
||||
import { animateScroll as scroll } from "react-scroll";
|
||||
import {
|
||||
MobileIcon,
|
||||
Nav,
|
||||
NavbarContainer,
|
||||
NavItem,
|
||||
NavLinks,
|
||||
NavLogo,
|
||||
NavMenu,
|
||||
} from "./NavbarElements";
|
||||
|
||||
export default function NavBar({ toggle }) {
|
||||
const [scrollNav, setScrollNav] = useState(false);
|
||||
|
||||
const Navbar = ( {toggle} ) => {
|
||||
const [scrollNav, setScrollNav] = useState(false)
|
||||
useEffect(() => {
|
||||
const changeNav = () => {
|
||||
if (window.scrollY >= 80) {
|
||||
setScrollNav(true);
|
||||
} else {
|
||||
setScrollNav(false);
|
||||
}
|
||||
};
|
||||
|
||||
const changeNav = () =>{
|
||||
if (window.scrollY >= 80){
|
||||
setScrollNav(true)
|
||||
}else{
|
||||
setScrollNav(false)
|
||||
}
|
||||
}
|
||||
window.addEventListener("scroll", changeNav);
|
||||
|
||||
useEffect(() =>{
|
||||
window.addEventListener('scroll', changeNav)
|
||||
}, [])
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeNav);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const toggleHome = () => {
|
||||
scroll.scrollToTop();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconContext.Provider value={{color: '#fff'}}>
|
||||
<Nav scrollNav={scrollNav}>
|
||||
<NavbarContainer>
|
||||
<NavLogo to="/udlbook/" onClick={toggleHome}>
|
||||
<h1> Understanding Deep Learning </h1>
|
||||
</NavLogo>
|
||||
<MobileIcon onClick={toggle}>
|
||||
<FaBars />
|
||||
</MobileIcon>
|
||||
<NavMenu>
|
||||
<NavItem>
|
||||
<NavLinks to="Notebooks" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Notebooks</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="Instructors" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Instructors</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="Media" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Media</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks to="More" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>More</NavLinks>
|
||||
</NavItem>
|
||||
</NavMenu>
|
||||
</NavbarContainer>
|
||||
</Nav>
|
||||
</IconContext.Provider>
|
||||
<IconContext.Provider value={{ color: "#fff" }}>
|
||||
<Nav scrollNav={scrollNav}>
|
||||
<NavbarContainer>
|
||||
<NavLogo to="/udlbook/" onClick={toggleHome}>
|
||||
<h1> Understanding Deep Learning </h1>
|
||||
</NavLogo>
|
||||
<MobileIcon onClick={toggle}>
|
||||
<FaBars />
|
||||
</MobileIcon>
|
||||
<NavMenu>
|
||||
<NavItem>
|
||||
<NavLinks
|
||||
to="Notebooks"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
spy={true}
|
||||
exact="true"
|
||||
offset={-80}
|
||||
activeClass="active"
|
||||
>
|
||||
Notebooks
|
||||
</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks
|
||||
to="Instructors"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
spy={true}
|
||||
exact="true"
|
||||
offset={-80}
|
||||
activeClass="active"
|
||||
>
|
||||
Instructors
|
||||
</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks
|
||||
to="Media"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
spy={true}
|
||||
exact="true"
|
||||
offset={-80}
|
||||
activeClass="active"
|
||||
>
|
||||
Media
|
||||
</NavLinks>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLinks
|
||||
to="More"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
spy={true}
|
||||
exact="true"
|
||||
offset={-80}
|
||||
activeClass="active"
|
||||
>
|
||||
More
|
||||
</NavLinks>
|
||||
</NavItem>
|
||||
</NavMenu>
|
||||
</NavbarContainer>
|
||||
</Nav>
|
||||
</IconContext.Provider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
|
||||
export const NotebookContainer = styled.div`
|
||||
export const NotebookContainer = styled.div`
|
||||
color: #fff;
|
||||
/* background: #f9f9f9; */
|
||||
background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
|
||||
@@ -12,10 +11,10 @@ export const NotebookContainer = styled.div`
|
||||
`
|
||||
|
||||
export const NotebookWrapper = styled.div`
|
||||
display: grid ;
|
||||
display: grid;
|
||||
z-index: 1;
|
||||
// height: 1250px ;
|
||||
width: 100% ;
|
||||
/* height: 1250px; */
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@@ -23,8 +22,8 @@ export const NotebookWrapper = styled.div`
|
||||
justify-content: center;
|
||||
`
|
||||
|
||||
export const NotebookRow = styled.div`
|
||||
display: grid;
|
||||
export const NotebookRow = styled.div`
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(auto, 1fr);
|
||||
align-items: center;
|
||||
grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
|
||||
@@ -34,10 +33,11 @@ export const NotebookRow = styled.div`
|
||||
}
|
||||
`
|
||||
|
||||
export const Column1 = styled.p`
|
||||
export const Column1 = styled.p`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col1;
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -47,10 +47,11 @@ export const Column1 = styled.p`
|
||||
}
|
||||
`
|
||||
|
||||
export const Column2 = styled.p`
|
||||
export const Column2 = styled.p`
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
grid-area: col2;
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -61,12 +62,12 @@ export const Column2 = styled.p`
|
||||
`
|
||||
|
||||
export const TextWrapper = styled.div`
|
||||
max-width: 540px ;
|
||||
max-width: 540px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
`
|
||||
|
||||
export const TopLine = styled.p`
|
||||
export const TopLine = styled.p`
|
||||
color: #57c6d1;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
@@ -76,22 +77,19 @@ export const TopLine = styled.p`
|
||||
margin-bottom: 16px;
|
||||
`
|
||||
|
||||
export const Heading= styled.h1`
|
||||
|
||||
export const Heading= styled.h1`
|
||||
margin-bottom: 24px;
|
||||
font-size: 48px;
|
||||
line-height: 1.1;
|
||||
font-weight: 600;
|
||||
color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
|
||||
|
||||
@media screen and (max-width: 480px)
|
||||
{
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
export const Subtitle = styled.p`
|
||||
export const Subtitle = styled.p`
|
||||
max-width: 440px;
|
||||
margin-bottom: 35px;
|
||||
font-size: 18px;
|
||||
@@ -104,20 +102,19 @@ export const BtnWrap = styled.div`
|
||||
justify-content: flex-start;
|
||||
`
|
||||
|
||||
export const ImgWrap = styled.div`
|
||||
export const ImgWrap = styled.div`
|
||||
max-width: 555px;
|
||||
height: 100%;
|
||||
`
|
||||
|
||||
export const Img = styled.img`
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
padding-right: 0;
|
||||
`;
|
||||
|
||||
|
||||
export const NBLink = styled.a`
|
||||
text-decoration: none;
|
||||
color: #57c6d1;;
|
||||
@@ -143,5 +140,5 @@ export const NBLink = styled.a`
|
||||
&:hover:before {
|
||||
opacity: 1;
|
||||
-webkit-transform: scaleX(1.05);
|
||||
}
|
||||
`
|
||||
}
|
||||
`
|
||||
|
||||
@@ -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 { Column1, Column2, Heading, Img, ImgWrap, NBLink, NotebookContainer, NotebookRow, NotebookWrapper, Subtitle, TextWrapper, TopLine } from './NotebookElements'
|
||||
|
||||
|
||||
|
||||
const NotebookSection = () => {
|
||||
export default function NotebookSection() {
|
||||
return (
|
||||
<>
|
||||
<NotebookContainer lightBg={false} id='Notebooks'>
|
||||
@@ -210,11 +188,8 @@ const NotebookSection = () => {
|
||||
</ul>
|
||||
</Column2>
|
||||
</NotebookRow>
|
||||
|
||||
</NotebookWrapper>
|
||||
</NotebookContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotebookSection
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import {useEffect} from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const {pathname} = useLocation()
|
||||
const { pathname } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0,0)
|
||||
}, [pathname])
|
||||
window.scrollTo(0, 0, { behavior: "smooth" });
|
||||
}, [pathname]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import styled from 'styled-components'
|
||||
import {Link as LinkS} from 'react-scroll'
|
||||
import {Link as LinkR} from 'react-router-dom'
|
||||
import {FaTimes} from 'react-icons/fa'
|
||||
|
||||
|
||||
import { FaTimes } from "react-icons/fa";
|
||||
import { Link as LinkR } from "react-router-dom";
|
||||
import { Link as LinkS } from "react-scroll";
|
||||
import styled from "styled-components";
|
||||
|
||||
export const SidebarContainer = styled.aside`
|
||||
position:fixed ;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -16,18 +14,18 @@ export const SidebarContainer = styled.aside`
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: 0.3s ease-in-out;
|
||||
opacity: ${({ isOpen }) => (isOpen ? '100%' : '0')};
|
||||
top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};
|
||||
|
||||
`
|
||||
opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")};
|
||||
top: ${({ isOpen }) => (isOpen ? "0" : "-100%")};
|
||||
`;
|
||||
|
||||
export const CloseIcon = styled(FaTimes)`
|
||||
color: #fff ;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #01bf71;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const Icon = styled.div`
|
||||
position: absolute;
|
||||
@@ -37,25 +35,25 @@ export const Icon = styled.div`
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
`
|
||||
`;
|
||||
|
||||
export const SidebarWrapper = styled.div`
|
||||
color: #ffffff;
|
||||
`
|
||||
`;
|
||||
|
||||
export const SidebarMenu = styled.ul`
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(6,80px);
|
||||
grid-template-rows: repeat(6, 80px);
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width: 480px){
|
||||
grid-template-rows: repeat(6, 60px) ;
|
||||
@media screen and (max-width: 480px) {
|
||||
grid-template-rows: repeat(6, 60px);
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const SidebarLink = styled(LinkS)`
|
||||
display: flex ;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
@@ -70,14 +68,14 @@ export const SidebarLink = styled(LinkS)`
|
||||
color: #01bf71;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const SideBtnWrap = styled.div`
|
||||
export const SideBtnWrap = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`
|
||||
`;
|
||||
|
||||
export const SidebarRoute = styled(LinkR)`
|
||||
export const SidebarRoute = styled(LinkR)`
|
||||
border-radius: 50px;
|
||||
background: #01bf71;
|
||||
white-space: nowrap;
|
||||
@@ -95,4 +93,4 @@ export const SidebarRoute = styled(LinkR)`
|
||||
background: #fff;
|
||||
color: #010606;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
@@ -1,33 +1,36 @@
|
||||
import React from 'react'
|
||||
import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements'
|
||||
import {
|
||||
CloseIcon,
|
||||
Icon,
|
||||
SidebarContainer,
|
||||
SidebarLink,
|
||||
SidebarMenu,
|
||||
SidebarWrapper,
|
||||
} from "./SidebarElements";
|
||||
|
||||
|
||||
const Sidebar = ({isOpen, toggle}) => {
|
||||
export default function Sidebar({ isOpen, toggle }) {
|
||||
return (
|
||||
<>
|
||||
<SidebarContainer isOpen={isOpen} onClick={toggle}>
|
||||
<Icon onClick={toggle}>
|
||||
<CloseIcon />
|
||||
</Icon>
|
||||
<SidebarWrapper>
|
||||
<SidebarMenu >
|
||||
<SidebarLink to="Notebooks" onClick={toggle}>
|
||||
Notebooks
|
||||
</SidebarLink>
|
||||
<SidebarLink to="Instructors" onClick={toggle}>
|
||||
Instructors
|
||||
</SidebarLink>
|
||||
<SidebarLink to="Media" onClick={toggle}>
|
||||
Media
|
||||
</SidebarLink>
|
||||
<SidebarLink to="More" onClick={toggle}>
|
||||
More
|
||||
</SidebarLink>
|
||||
</SidebarMenu>
|
||||
</SidebarWrapper>
|
||||
</SidebarContainer>
|
||||
<SidebarContainer isOpen={isOpen} onClick={toggle}>
|
||||
<Icon onClick={toggle}>
|
||||
<CloseIcon />
|
||||
</Icon>
|
||||
<SidebarWrapper>
|
||||
<SidebarMenu>
|
||||
<SidebarLink to="Notebooks" onClick={toggle}>
|
||||
Notebooks
|
||||
</SidebarLink>
|
||||
<SidebarLink to="Instructors" onClick={toggle}>
|
||||
Instructors
|
||||
</SidebarLink>
|
||||
<SidebarLink to="Media" onClick={toggle}>
|
||||
Media
|
||||
</SidebarLink>
|
||||
<SidebarLink to="More" onClick={toggle}>
|
||||
More
|
||||
</SidebarLink>
|
||||
</SidebarMenu>
|
||||
</SidebarWrapper>
|
||||
</SidebarContainer>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
)
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./App";
|
||||
import "./styles/globals.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
|
||||
@@ -1,34 +1,30 @@
|
||||
import React, {useState} from 'react'
|
||||
import Sidebar from '../components/Sidebar'
|
||||
import Navbar from '../components/NavBar'
|
||||
import HeroSection from '../components/HeroSection';
|
||||
import NotebookSection from '../components/Notebooks'
|
||||
import InstructorsSection from '../components/Instructors';
|
||||
import Footer from '../components/Footer';
|
||||
import MediaSection from '../components/Media';
|
||||
import MoreSection from '../components/More';
|
||||
import { useState } from "react";
|
||||
import Footer from "../components/Footer";
|
||||
import HeroSection from "../components/HeroSection";
|
||||
import InstructorsSection from "../components/Instructors";
|
||||
import MediaSection from "../components/Media";
|
||||
import MoreSection from "../components/More";
|
||||
import Navbar from "../components/NavBar";
|
||||
import NotebookSection from "../components/Notebooks";
|
||||
import Sidebar from "../components/Sidebar";
|
||||
|
||||
const Home = () => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
export default function Home() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const toggle = () => {
|
||||
setIsOpen(!isOpen)
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
<Sidebar isOpen={isOpen} toggle={toggle}/>
|
||||
<Navbar toggle={toggle}/>
|
||||
<Sidebar isOpen={isOpen} toggle={toggle} />
|
||||
<Navbar toggle={toggle} />
|
||||
<HeroSection />
|
||||
<NotebookSection/>
|
||||
<InstructorsSection/>
|
||||
<MediaSection/>
|
||||
<MoreSection/>
|
||||
<Footer/>
|
||||
<NotebookSection />
|
||||
<InstructorsSection />
|
||||
<MediaSection />
|
||||
<MoreSection />
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default Home
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
import React from 'react'
|
||||
import ScrollToTop from '../components/ScrollToTop';
|
||||
import SignIn from '../components/SignIn';
|
||||
import ScrollToTop from "../components/ScrollToTop";
|
||||
import SignIn from "../components/SignIn";
|
||||
|
||||
const SigninPage = () => {
|
||||
export default function SigninPage() {
|
||||
return (
|
||||
<>
|
||||
<ScrollToTop />
|
||||
<SignIn />
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default SigninPage;
|
||||
|
||||
6
src/styles/globals.css
Executable file
6
src/styles/globals.css
Executable file
@@ -0,0 +1,6 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Encode Sans Expanded", sans-serif;
|
||||
}
|
||||
@@ -1,16 +1,14 @@
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
import { defineConfig } from 'vite'
|
||||
import react from "@vitejs/plugin-react-swc";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3000,
|
||||
},
|
||||
preview: {
|
||||
port: 3000,
|
||||
},
|
||||
build: {
|
||||
outDir: 'build',
|
||||
}
|
||||
})
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3000,
|
||||
},
|
||||
preview: {
|
||||
port: 3000,
|
||||
},
|
||||
base: "/udlbook",
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user