-
{t('nav.projects')}
+
{t('projects')}
-
{t('nav.contact')}
+
{t('contact')}
-
{t('nav.github')}
+
{t('github')}
diff --git a/src/components/PageBuilder.tsx b/src/components/PageBuilder.tsx
index 5ebf2a2..551d7d7 100644
--- a/src/components/PageBuilder.tsx
+++ b/src/components/PageBuilder.tsx
@@ -4,14 +4,19 @@ import { FC } from 'react';
import styles from './PageBuilder.module.scss';
-const PageBuilder: FC<{ header: string; subtitle: string }> = ({ header, subtitle, children }) => (
+const PageBuilder: FC<{ header: string; subtitle: string; button: string }> = ({
+ header,
+ subtitle,
+ button,
+ children,
+}) => (
diff --git a/src/components/Spinner.module.scss b/src/components/Spinner.module.scss
deleted file mode 100644
index 97294c4..0000000
--- a/src/components/Spinner.module.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import '../styles/colors.scss';
-
-.lds {
- display: inline-block;
- position: relative;
- width: 80px;
- height: 80px;
-
- div {
- box-sizing: border-box;
- display: block;
- position: absolute;
- width: 64px;
- height: 64px;
- margin: 8px;
- border: 8px solid $text;
- border-radius: 50%;
- animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
- border-color: $text transparent transparent transparent;
-
- &:nth-child(1) {
- animation-delay: -0.45s;
- }
-
- &:nth-child(2) {
- animation-delay: -0.3s;
- }
-
- &:nth-child(3) {
- animation-delay: -0.15s;
- }
- }
-}
-
-@keyframes lds-ring {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
deleted file mode 100644
index 16aa59a..0000000
--- a/src/components/Spinner.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FC } from 'react';
-
-import styles from './Spinner.module.scss';
-
-const Spinner: FC = () => (
-
-);
-
-export default Spinner;
diff --git a/src/locales.ts b/src/locales.ts
deleted file mode 100644
index 3ce709d..0000000
--- a/src/locales.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { GetStaticProps } from 'next';
-
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
- const { default: lngDict = {} } = await import(`./locales/${locale}.json`);
-
- return {
- props: { lngDict },
- };
-};
diff --git a/src/locales/en.json b/src/locales/en.json
deleted file mode 100644
index 348f504..0000000
--- a/src/locales/en.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "pages": {
- "home": {
- "title": "Home",
- "description": "A simple portfolio website to display my projects.",
- "subtitle": "Hi, I am a full stack web developer",
- "projects": {
- "button": "Check out my projects"
- }
- }
- },
- "nav": {
- "projects": "Projects",
- "contact": "Contact",
- "github": "Source code"
- }
-}
\ No newline at end of file
diff --git a/src/locales/nl.json b/src/locales/nl.json
deleted file mode 100644
index a10b3e3..0000000
--- a/src/locales/nl.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "pages": {
- "home": {
- "title": "Thuis",
- "description": "Een simpele portfolio website om mijn projecten te bekijken.",
- "subtitle": "Hoi, Ik ben een full stack web developer",
- "projects": {
- "button": "Bekijk mijn projecten"
- }
- }
- },
- "nav": {
- "projects": "Projecten",
- "contact": "Contact",
- "github": "Bron code"
- }
-}
\ No newline at end of file
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 1d9c9f4..616a7a3 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,20 +1,29 @@
-import { FC } from 'react';
+import { GetStaticProps, NextPage } from 'next';
+import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Page from '@components/Page';
import Layout from '@components/Layout';
import PageBuilder from '@components/PageBuilder';
-export { getStaticProps } from '../locales';
+const NotFound: NextPage = () => {
+ const { t } = useTranslation('404');
-const NotFound: FC = () => (
-
-
-
-
-
-);
+ return (
+
+
+
+
+
+ );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+ return {
+ props: {
+ ...(await serverSideTranslations(locale, ['404', 'nav'])),
+ },
+ };
+};
export default NotFound;
diff --git a/src/pages/home.module.scss b/src/pages/Index.module.scss
similarity index 100%
rename from src/pages/home.module.scss
rename to src/pages/Index.module.scss
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index c0a9961..df58c22 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,28 +1,21 @@
import { ThemeProvider } from 'next-themes';
-import { I18nProvider } from 'next-localization';
-import { useRouter } from 'next/router';
-
import type { AppProps } from 'next/app';
+import { appWithTranslation } from 'next-i18next';
+
import 'milligram';
-import '@styles/raleway.css';
-import '@styles/roboto.css';
+import '@styles/montserrat.css';
import '@styles/globals.scss';
const App = ({ Component, pageProps }: AppProps): JSX.Element => {
- const router = useRouter();
- const { lngDict, ...rest } = pageProps;
-
return (
-
-
-
-
-
+
+
+
);
};
-export default App;
+export default appWithTranslation(App);
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
deleted file mode 100644
index 9f0ac63..0000000
--- a/src/pages/_document.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Document, {
- Html,
- Head,
- Main,
- NextScript,
- DocumentInitialProps,
- DocumentContext,
-} from 'next/document';
-
-export default class AppDocument extends Document {
- static async getInitialProps(ctx: DocumentContext): Promise
{
- const initialProps = await Document.getInitialProps(ctx);
- return { ...initialProps };
- }
-
- render(): JSX.Element {
- return (
-
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/pages/contact.module.scss b/src/pages/contact.module.scss
deleted file mode 100644
index 59d6779..0000000
--- a/src/pages/contact.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.header {
- font-size: 4rem;
- text-align: center;
- margin-bottom: 3rem;
- padding-top: 4rem;
-}
-
-.textarea {
- resize: none;
- height: 10rem;
-}
-
-.submit {
- margin-top: 1.5rem;
-}
-
-.contact {
- height: 100vh;
-
- padding-top: 10rem;
-}
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
deleted file mode 100644
index 99be245..0000000
--- a/src/pages/contact.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { NextPage } from 'next';
-import { useTheme } from 'next-themes';
-
-import ReCAPTCHA from 'react-google-recaptcha';
-
-import Page from '@components/Page';
-import Layout from '@components/Layout';
-
-export { getStaticProps } from '../locales';
-
-import styles from './contact.module.scss';
-
-const formURL = 'https://forms.guusvanmeerveld.dev/portfolio';
-
-const Contact: NextPage = () => {
- const { theme } = useTheme();
-
- return (
-
-
-
-
-
- );
-};
-
-export default Contact;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5fdaad2..4c852ff 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,22 +1,23 @@
import { GetStaticProps, NextPage } from 'next';
-import { useI18n } from 'next-localization';
-
import Image from 'next/image';
+import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+
import Layout from '@components/Layout';
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 './Index.module.scss';
const Home: NextPage = () => {
- const { t } = useI18n();
+ const { t } = useTranslation('home');
return (
-
+