beginning of index page

3 years ago · 569e5c14ba
parent 8d8493ae2d
commit 569e5c14ba
65 changed files with 5666 additions and 327 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,3 @@
 {
  "extends": ["next", "next/core-web-vitals"]
 }
--- a/README.md
+++ b/README.md
@ -12,9 +12,9 @@ yarn dev
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.tsx`.
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
--- a/components/footer.tsx
+++ b/components/footer.tsx
@ -0,0 +1,15 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import styles from '../styles/components/Footer.module.css';
 import Link from 'next/link';
 import logo from "../public/img/logoblue.png";
 export default function Footer() {
    return (
        <footer className={styles.footer}>
            <div className="container">
                <p>© 2021 DubbelNull vof — Kvk nr. 81343493</p>
            </div>
        </footer>
    )
 }
--- a/components/menu.tsx
+++ b/components/menu.tsx
@ -0,0 +1,36 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import styles from '../styles/components/Menu.module.css';
 import Link from 'next/link';
 import logo from "../public/img/logoblue.png";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faMugHot } from '@fortawesome/free-solid-svg-icons'
 export default function Menu() {
    return (
        <menu className={styles.menu}>
            <div className="container">
                <a href="/">
                    <Image src={logo} />
                    <h2>{process.env.NEXT_PUBLIC_NAME?.toUpperCase()}</h2>
                </a>
                <div>
                    <Link href="">About</Link>
                    <Link href="">Blog</Link>
                    <Link href="">Showcase</Link>
                    <Link href="">Services</Link>
                    <Link href="">Contact</Link>
                </div>
                {/* <div>
                    <Link href="/about">About</Link>
                    <Link href="/about">Blog</Link>
                    <Link href="/about">Showcase</Link>
                    <Link href="/about">Services</Link>
                    <Link href="/about">Contact</Link>
                </div> */}
            </div>
        </menu>
    )
 }
--- a/layouts/global.tsx
+++ b/layouts/global.tsx
@ -0,0 +1,27 @@
 import Head from 'next/head'
 export default function GlobalLayout(props: any) {
    return (
        <div>
            <Head>
                <title>owo</title>
                <link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png" />
                <link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png" />
                <link rel="icon" type="image/png" sizes="194x194" href="/img/favicons/favicon-194x194.png" />
                <link rel="icon" type="image/png" sizes="192x192" href="/img/favicons/android-chrome-192x192.png" />
                <link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png" />
                <link rel="manifest" href="/img/favicons/site.webmanifest" />
                <link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#2563eb" />
                <link rel="shortcut icon" href="/img/favicons/favicon.ico" />
                <meta name="apple-mobile-web-app-title" content="DubbelNull" />
                <meta name="application-name" content="DubbelNull" />
                <meta name="msapplication-TileColor" content="#2d89ef" />
                <meta name="msapplication-config" content="/img/favicons/browserconfig.xml" />
                <meta name="theme-color" content="#000000" />
            </Head>
            {props.children}
        </div>
    )
 }
--- a/next-env.d.ts
+++ b/next-env.d.ts
@ -0,0 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,3 @@
 module.exports = {
  reactStrictMode: true,
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,11 +5,23 @@
  "scripts": {
    "dev": "next dev",
    "build": "next build",
-    "start": "next start"
+    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
-    "next": "10.1.3",
+    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/react": "17.0.13",
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
 }
--- a/pages/_app.js
+++ b/pages/_app.js
@ -1,7 +0,0 @@
 import '../styles/globals.css'
 function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
 }
 export default MyApp
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -0,0 +1,16 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 import SiteLayout from '../layouts/global'
 import Menu from '../components/menu'
 import Footer from '../components/footer'
 function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SiteLayout>
      <Menu />
      <Component {...pageProps}></Component>
      <Footer />
    </SiteLayout>
  )
 }
 export default MyApp
--- a/pages/api/hello.js
+++ b/pages/api/hello.js
@ -1,5 +0,0 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 export default (req, res) => {
  res.status(200).json({ name: 'John Doe' })
 }
--- a/pages/api/hello.ts
+++ b/pages/api/hello.ts
@ -0,0 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type { NextApiRequest, NextApiResponse } from 'next'
 type Data = {
  name: string
 }
 export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
 ) {
  res.status(200).json({ name: 'John Doe' })
 }
--- a/pages/home.tsx
+++ b/pages/home.tsx
@ -1,4 +1,5 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import styles from '../styles/Home.module.css'
 export default function Home() {
@ -6,6 +7,7 @@ export default function Home() {
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
@ -21,12 +23,12 @@ export default function Home() {
        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
+            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>
          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
+            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>
@ -34,7 +36,7 @@ export default function Home() {
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
-            <h3>Examples &rarr;</h3>
+            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>
@ -42,7 +44,7 @@ export default function Home() {
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
-            <h3>Deploy &rarr;</h3>
+            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
@ -57,7 +59,9 @@ export default function Home() {
          rel="noopener noreferrer"
        >
          Powered by{' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
+          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -0,0 +1,27 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import styles from '../styles/Index.module.css'
 export default function Home() {
    return (
        <div className="page">
            <Head>
                <title>{process.env.NEXT_PUBLIC_NAME}</title>
                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
            </Head>
            <section className="container">
                <section className={styles.banner}>
                    <h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
                </section>
                <article className={"content " + styles.indexanim}>
                    <h1 className={styles.description}>
                        DubbelNull is a small 2-man startup from The Netherlands developing and designing web applications. 
                        We make all kinds of things with a range of technologies like Laravel, NextJS and Wordpress.
                    </h1>
                </article>
            </section>
        </div>
    )
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/img/banner.png
+++ b/public/img/banner.png
--- a/public/img/favicons/README.md
+++ b/public/img/favicons/README.md
@ -0,0 +1,27 @@
 # Your Favicon Package
 This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)
 ## Install instructions
 To install this package:
 Extract this package in <code>&lt;web site&gt;/images/</code>. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/images/favicon.ico</code>.
 Insert the following code in the `head` section of your pages:
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="194x194" href="/images/favicon-194x194.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/images/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    <link rel="manifest" href="/images/site.webmanifest">
    <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#2563eb">
    <link rel="shortcut icon" href="/images/favicon.ico">
    <meta name="apple-mobile-web-app-title" content="DubbelNull">
    <meta name="application-name" content="DubbelNull">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="msapplication-config" content="/images/browserconfig.xml">
    <meta name="theme-color" content="#000000">
 *Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)
--- a/public/img/favicons/android-chrome-144x144.png
+++ b/public/img/favicons/android-chrome-144x144.png
--- a/public/img/favicons/android-chrome-192x192.png
+++ b/public/img/favicons/android-chrome-192x192.png
--- a/public/img/favicons/android-chrome-256x256.png
+++ b/public/img/favicons/android-chrome-256x256.png
--- a/public/img/favicons/android-chrome-36x36.png
+++ b/public/img/favicons/android-chrome-36x36.png
--- a/public/img/favicons/android-chrome-384x384.png
+++ b/public/img/favicons/android-chrome-384x384.png
--- a/public/img/favicons/android-chrome-48x48.png
+++ b/public/img/favicons/android-chrome-48x48.png
--- a/public/img/favicons/android-chrome-512x512.png
+++ b/public/img/favicons/android-chrome-512x512.png
--- a/public/img/favicons/android-chrome-72x72.png
+++ b/public/img/favicons/android-chrome-72x72.png
--- a/public/img/favicons/android-chrome-96x96.png
+++ b/public/img/favicons/android-chrome-96x96.png
--- a/public/img/favicons/apple-touch-icon-114x114-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-114x114-precomposed.png
--- a/public/img/favicons/apple-touch-icon-114x114.png
+++ b/public/img/favicons/apple-touch-icon-114x114.png
--- a/public/img/favicons/apple-touch-icon-120x120-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-120x120-precomposed.png
--- a/public/img/favicons/apple-touch-icon-120x120.png
+++ b/public/img/favicons/apple-touch-icon-120x120.png
--- a/public/img/favicons/apple-touch-icon-144x144-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-144x144-precomposed.png
--- a/public/img/favicons/apple-touch-icon-144x144.png
+++ b/public/img/favicons/apple-touch-icon-144x144.png
--- a/public/img/favicons/apple-touch-icon-152x152-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-152x152-precomposed.png
--- a/public/img/favicons/apple-touch-icon-152x152.png
+++ b/public/img/favicons/apple-touch-icon-152x152.png
--- a/public/img/favicons/apple-touch-icon-180x180-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-180x180-precomposed.png
--- a/public/img/favicons/apple-touch-icon-180x180.png
+++ b/public/img/favicons/apple-touch-icon-180x180.png
--- a/public/img/favicons/apple-touch-icon-57x57-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-57x57-precomposed.png
--- a/public/img/favicons/apple-touch-icon-57x57.png
+++ b/public/img/favicons/apple-touch-icon-57x57.png
--- a/public/img/favicons/apple-touch-icon-60x60-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-60x60-precomposed.png
--- a/public/img/favicons/apple-touch-icon-60x60.png
+++ b/public/img/favicons/apple-touch-icon-60x60.png
--- a/public/img/favicons/apple-touch-icon-72x72-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-72x72-precomposed.png
--- a/public/img/favicons/apple-touch-icon-72x72.png
+++ b/public/img/favicons/apple-touch-icon-72x72.png
--- a/public/img/favicons/apple-touch-icon-76x76-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-76x76-precomposed.png
--- a/public/img/favicons/apple-touch-icon-76x76.png
+++ b/public/img/favicons/apple-touch-icon-76x76.png
--- a/public/img/favicons/apple-touch-icon-precomposed.png
+++ b/public/img/favicons/apple-touch-icon-precomposed.png
--- a/public/img/favicons/apple-touch-icon.png
+++ b/public/img/favicons/apple-touch-icon.png
--- a/public/img/favicons/browserconfig.xml
+++ b/public/img/favicons/browserconfig.xml
@ -0,0 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/images/mstile-150x150.png"/>
            <TileColor>#2d89ef</TileColor>
        </tile>
    </msapplication>
 </browserconfig>
--- a/public/img/favicons/favicon-16x16.png
+++ b/public/img/favicons/favicon-16x16.png
--- a/public/img/favicons/favicon-194x194.png
+++ b/public/img/favicons/favicon-194x194.png
--- a/public/img/favicons/favicon-32x32.png
+++ b/public/img/favicons/favicon-32x32.png
--- a/public/img/favicons/favicon.ico
+++ b/public/img/favicons/favicon.ico
--- a/public/img/favicons/html_code.html
+++ b/public/img/favicons/html_code.html
@ -0,0 +1,13 @@
 <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="194x194" href="/images/favicon-194x194.png">
 <link rel="icon" type="image/png" sizes="192x192" href="/images/android-chrome-192x192.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
 <link rel="manifest" href="/images/site.webmanifest">
 <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#2563eb">
 <link rel="shortcut icon" href="/images/favicon.ico">
 <meta name="apple-mobile-web-app-title" content="DubbelNull">
 <meta name="application-name" content="DubbelNull">
 <meta name="msapplication-TileColor" content="#2d89ef">
 <meta name="msapplication-config" content="/images/browserconfig.xml">
 <meta name="theme-color" content="#000000">
--- a/public/img/favicons/mstile-150x150.png
+++ b/public/img/favicons/mstile-150x150.png
--- a/public/img/favicons/safari-pinned-tab.svg
+++ b/public/img/favicons/safari-pinned-tab.svg
@ -0,0 +1,69 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
 preserveAspectRatio="xMidYMid meet">
 <metadata>
 Created by potrace 1.11, written by Peter Selinger 2001-2013
 </metadata>
 <g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
 <path d="M1730 8364 c0 -8 35 -41 110 -104 29 -25 62 -54 74 -65 12 -11 55
 -49 96 -85 41 -36 80 -69 86 -75 6 -5 35 -30 64 -55 29 -25 65 -56 80 -70 15
 -14 46 -41 69 -60 23 -19 59 -51 80 -70 22 -19 58 -51 82 -70 23 -19 49 -42
 58 -51 16 -16 63 -57 170 -149 29 -25 65 -56 80 -70 15 -14 51 -45 80 -70 55
 -46 66 -56 143 -125 24 -22 67 -59 94 -82 28 -23 64 -55 80 -70 17 -15 52 -46
 78 -68 27 -22 61 -51 76 -65 15 -14 37 -32 49 -40 11 -8 24 -23 27 -32 3 -10
 9 -16 13 -14 4 3 27 -14 52 -37 25 -23 67 -60 93 -82 26 -22 62 -53 80 -70 18
 -16 54 -48 80 -70 26 -21 58 -48 70 -60 12 -11 51 -45 85 -75 35 -30 73 -64
 86 -75 12 -11 46 -40 75 -65 28 -25 62 -54 75 -65 23 -21 53 -47 149 -129 31
 -28 70 -61 85 -75 66 -61 103 -92 126 -107 13 -9 27 -24 30 -35 4 -10 12 -19
 19 -19 7 0 28 -15 48 -32 19 -18 59 -53 88 -78 29 -25 65 -56 80 -70 15 -14
 51 -45 80 -70 29 -25 64 -56 79 -70 15 -14 46 -41 69 -60 24 -19 55 -46 71
 -60 15 -14 55 -50 90 -80 35 -30 73 -64 86 -75 12 -11 43 -38 69 -60 26 -22
 61 -53 80 -70 18 -16 55 -48 81 -70 26 -22 59 -52 73 -67 14 -16 29 -28 32
 -28 4 0 25 -17 46 -37 22 -21 61 -56 87 -78 27 -22 61 -51 76 -65 15 -14 49
 -43 75 -65 26 -22 63 -53 81 -70 56 -51 109 -98 165 -145 29 -25 64 -55 77
 -68 13 -13 27 -21 31 -18 5 3 9 3827 3 3884 -1 9 -454 12 -2231 12 -1227 0
 -2230 -3 -2230 -6z"/>
 <path d="M8539 7178 c-1 -2 -2 -1057 -3 -2345 -1 -1771 1 -2343 10 -2343 6 0
 24 17 40 38 16 20 33 42 39 48 17 18 67 83 122 158 29 39 57 76 63 83 5 7 10
 17 10 23 0 5 5 10 10 10 6 0 10 7 10 15 0 8 5 15 10 15 6 0 10 4 10 10 0 5 8
 19 18 30 9 11 17 25 17 30 0 4 10 20 22 34 13 14 20 26 17 26 -3 0 4 12 15 26
 12 15 21 32 21 39 0 6 9 22 20 35 11 13 20 27 20 32 0 4 11 26 25 48 14 22 22
 40 19 40 -4 0 1 9 11 20 10 11 14 20 10 20 -4 0 0 9 10 20 10 11 15 20 12 20
 -4 0 2 16 13 35 11 20 20 42 20 50 0 8 4 15 10 15 5 0 9 3 8 8 -1 4 4 21 11
 37 7 17 12 32 12 35 0 3 7 15 15 28 8 12 12 22 9 22 -3 0 0 10 7 23 6 12 13
 31 15 41 2 11 8 25 14 33 6 7 8 13 4 13 -4 0 -2 7 5 15 7 8 9 15 5 15 -4 0 -2
 7 5 15 7 8 10 15 6 15 -4 0 0 13 9 30 8 16 15 32 15 35 0 3 0 6 1 8 2 6 9 34
 13 52 2 11 5 21 6 23 2 1 4 7 5 12 1 6 3 11 5 13 1 1 4 11 6 22 8 34 12 50 14
 50 1 0 4 11 6 25 7 42 12 65 14 65 1 0 3 9 5 20 2 11 6 31 10 45 3 14 8 39 10
 55 3 17 7 41 11 55 5 25 7 36 19 120 22 155 28 258 28 505 -1 291 -6 359 -57
 655 -5 30 -13 66 -21 100 -4 14 -8 34 -10 45 -2 11 -7 31 -10 45 -3 14 -8 32
 -10 40 -2 8 -4 15 -5 15 -2 0 -9 25 -16 60 -3 17 -8 37 -11 45 -4 8 -7 17 -7
 20 -1 3 -5 11 -9 18 -5 6 -6 12 -2 12 3 0 -1 13 -10 30 -8 16 -15 32 -15 35 0
 8 -4 23 -13 48 -8 19 -13 37 -17 52 -1 6 -7 19 -13 30 -6 11 -12 23 -13 28 -1
 4 -3 9 -4 12 -1 3 -3 9 -4 14 0 5 -4 13 -8 17 -5 4 -8 15 -8 25 0 10 -7 25
 -16 33 -8 9 -12 16 -8 16 3 0 1 7 -6 15 -7 8 -9 15 -5 15 5 0 1 8 -8 18 -8 9
 -15 19 -14 22 4 11 -167 336 -189 361 -8 8 -14 21 -14 27 0 7 -4 12 -10 12 -5
 0 -10 4 -10 9 0 11 -77 129 -97 149 -7 7 -13 17 -13 21 0 4 -8 16 -17 27 -10
 10 -31 38 -46 61 -16 23 -35 44 -43 47 -8 3 -14 10 -14 16 0 9 -9 21 -54 73
 -10 12 -25 32 -33 45 -13 19 -30 28 -34 20z"/>
 <path d="M1719 5233 c-6 -34 -4 -3920 2 -3928 11 -15 4454 -14 4454 1 0 6 -16
 24 -35 40 -19 16 -42 36 -50 44 -9 8 -42 37 -73 64 -32 28 -70 61 -86 75 -30
 29 -87 78 -178 158 -33 29 -73 65 -89 80 -16 16 -54 48 -83 73 -29 25 -65 56
 -80 70 -15 14 -53 48 -85 75 -32 28 -72 64 -90 80 -18 17 -61 55 -95 85 -35
 30 -73 64 -86 75 -12 11 -38 34 -57 50 -98 85 -165 144 -204 181 -24 23 -44
 40 -44 38 0 -2 -8 4 -18 14 -52 50 -126 114 -148 128 -13 9 -21 20 -18 25 3 5
 -1 9 -8 9 -7 0 -34 19 -59 43 -82 75 -145 131 -195 174 -28 23 -64 55 -81 70
 -41 39 -109 99 -177 158 -32 28 -70 61 -85 75 -15 14 -53 48 -85 75 -32 28
 -72 64 -90 80 -17 17 -56 50 -85 75 -29 25 -65 56 -80 70 -45 41 -113 102
 -175 155 -32 28 -68 59 -80 70 -50 45 -133 119 -167 148 -115 101 -153 135
 -177 157 -15 14 -56 50 -91 80 -35 30 -74 64 -85 75 -12 11 -50 44 -84 74 -34
 29 -74 65 -90 80 -15 14 -52 46 -81 71 -29 25 -67 59 -85 75 -32 30 -83 74
 -170 150 -26 22 -61 54 -80 70 -68 62 -180 161 -260 230 -32 28 -73 64 -91 80
 -18 17 -58 53 -90 80 -31 28 -67 59 -79 70 -13 11 -39 35 -59 53 -38 33 -46
 37 -48 25z"/>
 </g>
 </svg>
--- a/public/img/favicons/site.webmanifest
+++ b/public/img/favicons/site.webmanifest
@ -0,0 +1,54 @@
 {
    "name": "DubbelNull",
    "short_name": "DubbelNull",
    "icons": [
        {
            "src": "/images/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "/images/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "/images/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/images/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/images/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/images/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/images/android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/images/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/images/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#000000",
    "background_color": "#000000",
    "display": "standalone"
 }
--- a/public/img/logoblue.png
+++ b/public/img/logoblue.png
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@ -5,6 +5,7 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
 }
 .main {
@ -25,14 +26,11 @@
  align-items: center;
 }
 .footer img {
  margin-left: 0.5rem;
 }
 .footer a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
 }
 .title a {
@ -82,7 +80,6 @@
 .card {
  margin: 1rem;
  flex-basis: 45%;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
@ -90,6 +87,7 @@
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  width: 45%;
 }
 .card:hover,
@ -99,7 +97,7 @@
  border-color: #0070f3;
 }
-.card h3 {
+.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
 }
@ -112,6 +110,7 @@
 .logo {
  height: 1em;
  margin-left: 0.5rem;
 }
@media (max-width: 600px) {
--- a/styles/Index.module.css
+++ b/styles/Index.module.css
@ -0,0 +1,45 @@
 /* layout */
 .banner {
    background-image: url('/img/banner.png');
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .banner h1 {
    margin-top: -5rem;
    font-size: 3em;
    font-weight: 500;
 }
 /* page properties */
 .description {
    font-weight: normal;
    text-align: center;
    width: 75%;
    margin: auto;
 }
 /* animation */
 .indexanim {
    -webkit-animation-name: indexanim;
    animation-name: indexanim;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    margin-top: -10rem;
 }
@keyframes indexanim {
    0% {
        margin-top: 0;
        opacity: 0;
    }
    100% {
        margin-top: -10rem;
        opacity: 100;
    }
 }
--- a/styles/components/Footer.module.css
+++ b/styles/components/Footer.module.css
@ -0,0 +1,8 @@
 .footer {
    padding: var(--padding-large) 0;
 }
 .footer > div {
    display: flex;
    justify-content: center;
 }
--- a/styles/components/Menu.module.css
+++ b/styles/components/Menu.module.css
@ -0,0 +1,57 @@
 /* menu layout */
 .menu {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    margin: unset;
    width: 100%;
 }
 .menu > div {
    display: flex;
    justify-content: space-between;
 }
 .menu > div * {
    margin: unset;
 }
 .menu img {
    width: 2em;
 }
 .menu > div > *:first-child {
    display: inline-flex;
    gap: 0.5em;
 }
 .menu > div > *:first-child h2 {
    font-weight: 900;
 }
 .menu > div > *:last-child {
    display: inline-flex;
    gap: 1em;
 }
 /* menu items */
 .menu a {
    font-family: "Red Hat Display";
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.5em;
    font-family: "Red Hat Display";
    font-weight: 500;
    font-size: 0.9em;
    border-radius: 8px;
 }
 .menu > div > *:last-child a {
    cursor: no-drop;
 }
 .menu a:hover {
    background-color: rgba(36, 99, 235, 0.1);
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -1,9 +1,16 @@
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
 html,
 body {
  padding: 0;
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Red Hat Text';
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-size: 1.1em;
 }
 h1, h2, h3, h4, h5 {
  font-family: 'Red Hat Display';
 }
 a {
@ -14,3 +21,35 @@ a {
 * {
  box-sizing: border-box;
 }
 hr {
  width: 100%;
  color: rgba(0,0,0,0.1);
 }
 /* variables */
 :root {
  --padding-large: 50px;
 }
 /* layout */
 .page {
  background-color: #fff;
 }
 .container {
  max-width: 1000px;
  margin: auto;
 }
 .content {
  border-radius: 1em;
  background-color: #F3F4F6;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: var(--padding-large);
 }
--- a/styles/layouts/Global.module.css
+++ b/styles/layouts/Global.module.css
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,19 @@
 {
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
 }
--- a/yarn.lock
+++ b/yarn.lock