diff options
| author | Ashelyn Rose <git@tempest.dev> | 2023-05-08 02:17:40 -0600 |
|---|---|---|
| committer | Ashelyn Rose <git@tempest.dev> | 2023-05-08 02:17:40 -0600 |
| commit | 880cfbeb74546056feab63ed6e92a10c0dbaf2c3 (patch) | |
| tree | 33c7429bd5b1b968d74c74a4b7fbf0aa072111f7 /app | |
| parent | 885d95d889633e312567d891831d74d9e120e5b8 (diff) | |
New layout, uses nextjs
Diffstat (limited to 'app')
| -rw-r--r-- | app/Footer.tsx | 9 | ||||
| -rw-r--r-- | app/Header.tsx | 43 | ||||
| -rw-r--r-- | app/about/page.tsx | 12 | ||||
| -rw-r--r-- | app/layout.tsx | 23 | ||||
| -rw-r--r-- | app/not-found.tsx | 23 | ||||
| -rw-r--r-- | app/page.tsx | 47 |
6 files changed, 157 insertions, 0 deletions
diff --git a/app/Footer.tsx b/app/Footer.tsx new file mode 100644 index 0000000..49089b4 --- /dev/null +++ b/app/Footer.tsx @@ -0,0 +1,9 @@ +export default function Footer() { + return ( + <footer> + <span>Website by Ashelyn Rose</span> + <a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a> + <a href="/pay-transparency">Pay Transparency</a> + </footer> + ) +} diff --git a/app/Header.tsx b/app/Header.tsx new file mode 100644 index 0000000..b5749ba --- /dev/null +++ b/app/Header.tsx @@ -0,0 +1,43 @@ +'use client' + +import React from 'react' +import Image from 'next/image' + +import { usePathname } from 'next/navigation' + +import header from '~/images/aurora-1197753.jpg' + +export default function Title() { + const pathname = usePathname() + + const isHomepage = pathname === '/' + + return ( + <header className={isHomepage ? 'homepage' : undefined}> + {isHomepage + ? <h1 className="siteTitle">tempest.dev</h1> + : <a href="/" className="siteTitle">tempest.dev</a> + } + <nav> + <a href="/system">system</a> + <a href="/posts">posts</a> + <a href="/contact">contact</a> + </nav> + <div className="headerBackground"> + <Image + src={header} + alt="" + role="presentation" + fill={true} + sizes={` + (max-width: 2560) 100vw, + (max-width: 1920) 100vw, + (max-width: 1280) 100vw, + (max-width: 800) 100vw, + (max-width: 600) 100vw, + `} + /> + </div> + </header> + ) +} diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..dd04ccc --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,12 @@ +export default function About() { + return ( + <> + <h1 className="pageTitle"> + About + </h1> + <main className="mainColumn"> + <p>Maybe we say some things about ourselves?</p> + </main> + </> + ) +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..3d25c44 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,23 @@ +import React, { ReactNode } from 'react'; + +import 'victormono' +import '~/styles/layout.css' +import '~/styles/text.css' + +import Header from './Header' +import Footer from './Footer' + +export default function SiteLayout({ children }: { children: ReactNode }) { + return ( + <html> + <head> + <title>tempest.dev</title> + </head> + <body> + <Header /> + {children} + <Footer /> + </body> + </html> + ) +} diff --git a/app/not-found.tsx b/app/not-found.tsx new file mode 100644 index 0000000..44753b0 --- /dev/null +++ b/app/not-found.tsx @@ -0,0 +1,23 @@ +export default function NotFound() { + return ( + <> + <h1 className="pageTitle">Not Found (404)</h1> + <main className="mainColumn"> + <aside className="infobar"> + <strong>Error: </strong> + Unable to find the requested resource + </aside> + + <p> + Feel free to start again from the <a href="/">home page</a>, or + check our <a href="/posts">list of posts</a> + </p> + + <p> + If you feel like something should have been here, and want to shout + at me about it, please <a href="/contact">contact Rose</a> + </p> + </main> + </> + ) +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..49d887c --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,47 @@ +import React from 'react'; + +import styles from '~/styles/index.module.css' + +export default function Index() { + return ( + <main className="mainColumn"> + <p> + Hi, we're tempest! And we also go by ashe. We're a median plural + system of three members, but most of the time you'll probably see us + operating as one + </p> + + <p>We like coding, VR, and making CG art</p> + + <h2>At a glance</h2> + <div className={styles.glance}> + <span className={styles.label}>Names:</span> + <span>ashe or ashelyn</span> + + <span className={styles.label}>Pronouns:</span> + <span>they/them</span> + + <span className={styles.label}>Cohort:</span> + <span>millenial</span> + + <span className={styles.label}>Poly:</span> + <span>yes</span> + + <span className={styles.label}>Partners:</span> + <span>three</span> + + <span className={styles.label}>Children:</span> + <span>two</span> + + <span className={styles.label}>Capitalize name:</span> + <span>not unless we're at work</span> + </div> + + <p> + <em>Note:</em> This is the information for our system in aggregate, + for individual info see <a href="/system">system</a> + </p> + + </main> + ) +} |