diff --git a/src/components/Contact.module.scss b/src/components/Contact.module.scss index 8692b59..59d6779 100644 --- a/src/components/Contact.module.scss +++ b/src/components/Contact.module.scss @@ -5,13 +5,6 @@ padding-top: 4rem; } -.input, -.textarea { - border-color: var(--borders); - color: var(--foreground); - background-color: var(--secondary); -} - .textarea { resize: none; height: 10rem; diff --git a/src/components/Navbar.module.scss b/src/components/Navbar.module.scss index ac1d62a..6c804bb 100644 --- a/src/components/Navbar.module.scss +++ b/src/components/Navbar.module.scss @@ -10,6 +10,15 @@ width: 100%; } +.select { + border-color: var(--borders); + color: var(--foreground); + background-color: var(--secondary); + + width: 7.5rem; + margin-bottom: 0; +} + .header { font-size: 1.75rem; } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index fd3a74f..7657393 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -21,6 +21,11 @@ const Navbar: FC = () => {
Portfolio
+ + {t('nav.projects')} @@ -42,6 +47,8 @@ const Navbar: FC = () => { export const getStaticProps: GetStaticProps = async ({ locale }) => { const { default: lngDict = {} } = await import(`../locales/${locale}.json`); + console.log(lngDict); + return { props: { lngDict }, }; diff --git a/src/components/PageBuilder.module.scss b/src/components/PageBuilder.module.scss new file mode 100644 index 0000000..cac70a3 --- /dev/null +++ b/src/components/PageBuilder.module.scss @@ -0,0 +1,21 @@ +.body { + height: 100vh; + + display: flex; + justify-content: center; + align-items: center; + + text-align: center; +} + +.header { + font-size: 5rem; +} + +.subtitle { + font-size: 3rem; +} + +.link { + margin-top: 1.5rem; +} diff --git a/src/components/PageBuilder.tsx b/src/components/PageBuilder.tsx new file mode 100644 index 0000000..5ebf2a2 --- /dev/null +++ b/src/components/PageBuilder.tsx @@ -0,0 +1,20 @@ +import Link from 'next/link'; + +import { FC } from 'react'; + +import styles from './PageBuilder.module.scss'; + +const PageBuilder: FC<{ header: string; subtitle: string }> = ({ header, subtitle, children }) => ( +
+
+ {children} +
{header}
+
{subtitle}
+ + Go back + +
+
+); + +export default PageBuilder; diff --git a/src/components/Project.module.scss b/src/components/Project.module.scss index 7e216fb..8143998 100644 --- a/src/components/Project.module.scss +++ b/src/components/Project.module.scss @@ -4,8 +4,8 @@ padding: 5rem 0; } -.title { - font-size: 4rem; +.description { + margin-bottom: 2rem; } .right { diff --git a/src/components/Project.tsx b/src/components/Project.tsx index 2c01937..e2fb67f 100644 --- a/src/components/Project.tsx +++ b/src/components/Project.tsx @@ -16,10 +16,9 @@ const Project: FC = ({ name, description, buttons, cover, righ
-
{name}
- {description} -
-
+

{name}

+
{description}
+ {buttons.map((button, i) => ( {button.text} diff --git a/src/pages/404.tsx b/src/pages/404.tsx index dd70e98..dedcddc 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,22 +1,16 @@ -import Link from 'next/link'; - import { FC } from 'react'; import Page from '@components/Page'; import Layout from '@components/Layout'; +import PageBuilder from '@components/PageBuilder'; const NotFound: FC = () => ( -
-
-
Not found
-
This page either doesn't exist or has been deleted
- - Go back - -
-
+
); diff --git a/src/pages/Home.module.scss b/src/pages/home.module.scss similarity index 70% rename from src/pages/Home.module.scss rename to src/pages/home.module.scss index ee9c6f3..b40dd5c 100644 --- a/src/pages/Home.module.scss +++ b/src/pages/home.module.scss @@ -12,23 +12,14 @@ .profile { margin: auto; margin-bottom: 3rem; - display: block; -} - -.title { - font-size: 4rem; - display: block; } .subtitle { margin-top: 2rem; margin-bottom: 4rem; - display: block; - font-size: 2rem; } -.header { - font-size: 4rem; +.projectsHeader { text-align: center; margin-bottom: 3rem; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 0db69d6..5fdaad2 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,7 +10,7 @@ import Page from '@components/Page'; import Project from '@components/Project'; import projects from '@config/projects.json'; -import styles from './Home.module.scss'; +import styles from './home.module.scss'; const Home: NextPage = () => { const { t } = useI18n(); @@ -20,12 +20,12 @@ const Home: NextPage = () => {
- +
- +
- Guus van Meerveld - {t('pages.home.subtitle')} +

Guus van Meerveld

+

{t('pages.home.subtitle')}

{t('pages.home.projects.button')} @@ -35,9 +35,9 @@ const Home: NextPage = () => {
-
- Projects -
+

+ {t('nav.projects')} +

{projects.map((project, i) => { const props = { ...project, right: (i + 1) % 2 == 0 }; diff --git a/src/pages/Shifts.module.scss b/src/pages/shifts.module.scss similarity index 100% rename from src/pages/Shifts.module.scss rename to src/pages/shifts.module.scss diff --git a/src/pages/shifts.tsx b/src/pages/shifts.tsx index 1fbe39f..8c88857 100644 --- a/src/pages/shifts.tsx +++ b/src/pages/shifts.tsx @@ -14,7 +14,7 @@ import Page from '@components/Page'; import Shift from '@models/shifts'; -import styles from './Shifts.module.scss'; +import styles from './shifts.module.scss'; interface APIResponse { updated: Date; diff --git a/src/pages/thanks.module.scss b/src/pages/thanks.module.scss new file mode 100644 index 0000000..69cf8b3 --- /dev/null +++ b/src/pages/thanks.module.scss @@ -0,0 +1,3 @@ +.icon { + font-size: 10rem; +} diff --git a/src/pages/thanks.tsx b/src/pages/thanks.tsx index be07537..00b83d4 100644 --- a/src/pages/thanks.tsx +++ b/src/pages/thanks.tsx @@ -1,26 +1,21 @@ import { NextPage } from 'next'; -import Link from 'next/link'; import Page from '@components/Page'; import Layout from '@components/Layout'; +import PageBuilder from '@components/PageBuilder'; + +import styles from './thanks.module.scss'; const Thanks: NextPage = () => ( -
- + ); diff --git a/src/styles/global/body.scss b/src/styles/global/body.scss new file mode 100644 index 0000000..8302b1c --- /dev/null +++ b/src/styles/global/body.scss @@ -0,0 +1,7 @@ +body { + margin: 0; + background-color: var(--background); + color: var(--foreground); + + font-family: 'Raleway'; +} diff --git a/src/styles/global/button.scss b/src/styles/global/button.scss new file mode 100644 index 0000000..bacdf3a --- /dev/null +++ b/src/styles/global/button.scss @@ -0,0 +1,4 @@ +.button { + background-color: var(--primary); + border-color: var(--primary); +} diff --git a/src/styles/global/input.scss b/src/styles/global/input.scss new file mode 100644 index 0000000..d1c88e4 --- /dev/null +++ b/src/styles/global/input.scss @@ -0,0 +1,7 @@ +input, +textarea, +select { + &:focus { + border-color: var(--primary); + } +} diff --git a/src/styles/global/link.scss b/src/styles/global/link.scss new file mode 100644 index 0000000..4e9b8d9 --- /dev/null +++ b/src/styles/global/link.scss @@ -0,0 +1,3 @@ +a { + color: var(--primary); +} diff --git a/src/styles/global/table.scss b/src/styles/global/table.scss new file mode 100644 index 0000000..a78035f --- /dev/null +++ b/src/styles/global/table.scss @@ -0,0 +1,4 @@ +td, +th { + border-color: var(--borders); +} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index fdb6fe7..d4c81b1 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -16,35 +16,10 @@ --secondary: #1c1c1c; --borders: #3c3838; --foreground: rgb(236, 235, 235); - - td, - th { - border-color: var(--borders); - } -} - -body { - margin: 0; - background-color: var(--background); - color: var(--foreground); - - font-family: 'Raleway'; -} - -a { - color: var(--primary); -} - -.button { - background-color: var(--primary); - border-color: var(--primary); -} - -input:focus, -textarea:focus, -select:focus, -input[type='email']:focus { - border-color: var(--primary); } -@import 'page.scss'; +@import './global/body.scss'; +@import './global/link.scss'; +@import './global/input.scss'; +@import './global/table.scss'; +@import './global/button.scss'; diff --git a/src/styles/page.scss b/src/styles/page.scss deleted file mode 100644 index 75329b2..0000000 --- a/src/styles/page.scss +++ /dev/null @@ -1,25 +0,0 @@ -.page { - height: 100vh; - - display: flex; - justify-content: center; - align-items: center; - - text-align: center; - - .icon { - font-size: 10rem; - } - - .header { - font-size: 5rem; - } - - .subtitle { - font-size: 3rem; - } - - .link { - margin-top: 1.5rem; - } -}