aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAndrew Lee <alee14498@protonmail.com>2021-02-10 15:56:33 +0000
committerAndrew Lee <alee14498@protonmail.com>2021-02-10 15:56:33 +0000
commitc3f7033bb4669f8e3a684906f118a709a8f7456c (patch)
tree579b80bbfcbfd2d2354f19274faa6bc86413b10d
parent681d96bf3da378a57ecb1fc3d8f00f13a1dd65e4 (diff)
downloadlawrence-hill-c3f7033bb4669f8e3a684906f118a709a8f7456c.tar.gz
lawrence-hill-c3f7033bb4669f8e3a684906f118a709a8f7456c.tar.bz2
lawrence-hill-c3f7033bb4669f8e3a684906f118a709a8f7456c.zip
New pages
-rw-r--r--pages/career.js28
-rw-r--r--pages/childhood-adulthood.js28
-rw-r--r--pages/index.js24
-rw-r--r--styles/Home.module.css11
-rw-r--r--styles/Page.module.css118
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;
+ }
+}