diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2021-02-10 15:56:33 +0000 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2021-02-10 15:56:33 +0000 |
| commit | c3f7033bb4669f8e3a684906f118a709a8f7456c (patch) | |
| tree | 579b80bbfcbfd2d2354f19274faa6bc86413b10d | |
| parent | 681d96bf3da378a57ecb1fc3d8f00f13a1dd65e4 (diff) | |
| download | lawrence-hill-c3f7033bb4669f8e3a684906f118a709a8f7456c.tar.gz lawrence-hill-c3f7033bb4669f8e3a684906f118a709a8f7456c.tar.bz2 lawrence-hill-c3f7033bb4669f8e3a684906f118a709a8f7456c.zip | |
New pages
| -rw-r--r-- | pages/career.js | 28 | ||||
| -rw-r--r-- | pages/childhood-adulthood.js | 28 | ||||
| -rw-r--r-- | pages/index.js | 24 | ||||
| -rw-r--r-- | styles/Home.module.css | 11 | ||||
| -rw-r--r-- | styles/Page.module.css | 118 |
5 files changed, 197 insertions, 12 deletions
diff --git a/pages/career.js b/pages/career.js new file mode 100644 index 0000000..66b4c38 --- /dev/null +++ b/pages/career.js @@ -0,0 +1,28 @@ +import Head from 'next/head' +import styles from '../styles/Page.module.css' +import Link from 'next/link' +import Button from '@material-ui/core/Button' + +export default function Career() { + return ( + <div className={styles.container}> + <Head> + <title>Lawrence Hill Project</title> + <link rel="icon" href="/favicon.ico" /> + </Head> + <main className={styles.main}> + <Link href="/"> + <Button variant="contained" color="primary">Back to home</Button> + </Link> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </main> + + <footer className={styles.footer}> + <p> + Powered by{' '} + Next.JS & Netlify. {' '} + <a href="https://alee14.me" target="_blank">Website by Andrew Lee</a></p> + </footer> + </div> + ) +} diff --git a/pages/childhood-adulthood.js b/pages/childhood-adulthood.js new file mode 100644 index 0000000..b0cb0c8 --- /dev/null +++ b/pages/childhood-adulthood.js @@ -0,0 +1,28 @@ +import Head from 'next/head' +import styles from '../styles/Page.module.css' +import Link from 'next/link' +import Button from '@material-ui/core/Button' + +export default function ChildhoodAdulthood() { + return ( + <div className={styles.container}> + <Head> + <title>Lawrence Hill Project</title> + <link rel="icon" href="/favicon.ico" /> + </Head> + <main className={styles.main}> + <Link href="/"> + <Button variant="contained" color="primary">Back to home</Button> + </Link> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </main> + + <footer className={styles.footer}> + <p> + Powered by{' '} + Next.JS & Netlify. {' '} + <a href="https://alee14.me" target="_blank">Website by Andrew Lee</a></p> + </footer> + </div> + ) +} diff --git a/pages/index.js b/pages/index.js index 02a173d..0e13c27 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,7 @@ import Head from 'next/head' import styles from '../styles/Home.module.css' import Button from '@material-ui/core/Button'; +import Link from 'next/link' export default function Home() { return ( @@ -10,21 +11,26 @@ export default function Home() { <link rel="icon" href="/favicon.ico" /> </Head> <main className={styles.main}> - <h1>Welcome to Andrew's Lawrence Hill Project!</h1> + <div className={styles.titlelawrence}> + <h1>Welcome to Lawrence Hill website!</h1> + <h2>Made by Andrew Lee in Next.JS</h2> + </div> <img src="https://www.uoguelph.ca/arts/sites/default/files/styles/large/public/Lawrence-Hill-380.jpg?itok=JdSI90NJ" height="30%" width="30%"/> <br/> - <Button variant="contained" color="primary">Hello world</Button> + <Link href="/childhood-adulthood"> + <Button variant="contained" color="primary">Childhood and young adulthood</Button> + </Link> + <br/> + <Link href="/career"> + <Button variant="contained" color="primary">Career</Button> + </Link> </main> <footer className={styles.footer}> - <a - href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > + <p> Powered by{' '} - Next.JS, Netlify & alee14.me - </a> + Next.JS & Netlify. {' '} + <a href="https://alee14.me" target="_blank">Website by Andrew Lee</a></p> </footer> </div> ) diff --git a/styles/Home.module.css b/styles/Home.module.css index 42e7e60..a2c5476 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -47,9 +47,14 @@ } .title { - margin: 0; - line-height: 1.15; - font-size: 4rem; + margin: 10px; + text-align: center; +} + +.titlelawrence +{ + margin: 5px; + text-align: center; } .title, diff --git a/styles/Page.module.css b/styles/Page.module.css new file mode 100644 index 0000000..1121b96 --- /dev/null +++ b/styles/Page.module.css @@ -0,0 +1,118 @@ +.container { + min-height: 100vh; + padding: 0 0.5rem; + display: flex; + flex-direction: column; +} + +.main { + padding: 5rem 0; + flex: 1; + display: flex; + flex-direction: column; +} + +.footer { + width: 100%; + height: 100px; + border-top: 1px solid #eaeaea; + display: flex; + justify-content: center; + align-items: center; +} + +.footer img { + margin-left: 0.5rem; +} + +.footer a { + display: flex; + justify-content: center; + align-items: center; +} + +.title a { + color: #0070f3; + text-decoration: none; +} + +.title a:hover, +.title a:focus, +.title a:active { + text-decoration: underline; +} + +.title { + margin: 0; + line-height: 1.15; + font-size: 4rem; +} + +.title, +.description { + text-align: center; +} + +.description { + line-height: 1.5; + font-size: 1.5rem; +} + +.code { + background: #fafafa; + border-radius: 5px; + padding: 0.75rem; + font-size: 1.1rem; + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Courier New, monospace; +} + +.grid { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + max-width: 800px; + margin-top: 3rem; +} + +.card { + margin: 1rem; + flex-basis: 45%; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; +} + +.card:hover, +.card:focus, +.card:active { + color: #0070f3; + border-color: #0070f3; +} + +.card h3 { + margin: 0 0 1rem 0; + font-size: 1.5rem; +} + +.card p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; +} + +.logo { + height: 1em; +} + +@media (max-width: 600px) { + .grid { + width: 100%; + flex-direction: column; + } +} |
