Solve issues with new version

.eslintrc

@@ -1,3 +1,7 @@
 {
-  "extends": ["next", "next/core-web-vitals"]
-}
+  "extends": ["next", "next/core-web-vitals"],
+  "rules": {
+    // Other rules
+    "@next/next/no-img-element": "off"
+  }
+}

components/buttons.tsx

@@ -4,12 +4,12 @@ import Link from 'next/link'
 export default function Footer() {
     return (
         <section className={styles.section}>
-            <h2>Learn more</h2>
+            <h2>Or check out any of these other things</h2>
             <div>
                 <Link href="/about">About</Link>
                 <Link href="/contact">Contact</Link>
-                <a href="https://twitter.com/DubbelNull" target="_blank" rel="noreferrer">Twitter</a>
-                <a href="https://gitlab.com/dubbelnull" target="_blank" rel="noreferrer">GitLab</a>
+                {/* <a href="https://twitter.com/DubbelNull" target="_blank" rel="noreferrer">Twitter</a> */}
+                <a href="https://gitlab.com/dubbelnull" target="_blank" rel="noreferrer">Open Source</a>
                 <a href="https://discord.gg/976Xskh8Dd" target="_blank" rel="noreferrer">Discord</a>
                 <a href="https://status.dubbelnull.com" target="_blank" rel="noreferrer">Statuspage</a>
             </div>

components/elements/styledbutton.tsx

@@ -1,31 +1,63 @@
 export default function StyledButton(props: any) {
-    return (
-        <div>
-            <style jsx>{`
-                a {
-                    justify-content: center;
-                    text-align: center;
-                    font-family: "Red Hat Display";
-                    display: inline-flex;
-                    align-items: center;
-                    padding: 0.4em 1em;
-                    font-family: "Red Hat Display";
-                    font-weight: 500;
-                    font-size: 1.1em;
-                    border-radius: 8px;
-                    background-color: var(--background-color-dark);
-                    transition-duration: 0.2s;
-                    gap: var(--padding-sm);
-                    color: unset;
-                    text-decoration: unset;
-                } 
-                a:hover {
-                    background-color: var(--theme-color-500);
-                    text-decoration: none;
-                    transition-duration: 0.2s;
-                }
-            `}</style>
-            <a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
-        </div>
-    )
+    if(props.type == "highlight") {
+        return (
+            <div>
+                <style jsx>{`
+                    a {
+                        justify-content: center;
+                        text-align: center;
+                        font-family: "Red Hat Display";
+                        display: inline-flex;
+                        align-items: center;
+                        padding: 0.4em 1em;
+                        font-family: "Red Hat Display";
+                        font-weight: 500;
+                        font-size: 1.1em;
+                        border-radius: 8px;
+                        background-color: var(--theme-color);
+                        transition-duration: 0.2s;
+                        gap: var(--padding-sm);
+                        color: white;
+                        text-decoration: unset;
+                    }
+                    a:hover {
+                        background-color: var(--theme-color-500);
+                        text-decoration: none;
+                        transition-duration: 0.2s;
+                    }
+                `}</style>
+                <a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
+            </div>
+        )
+    } else {
+        return (
+            <div>
+                <style jsx>{`
+                    a {
+                        justify-content: center;
+                        text-align: center;
+                        font-family: "Red Hat Display";
+                        display: inline-flex;
+                        align-items: center;
+                        padding: 0.4em 1em;
+                        font-family: "Red Hat Display";
+                        font-weight: 500;
+                        font-size: 1.1em;
+                        border-radius: 8px;
+                        background-color: var(--background-color-dark);
+                        transition-duration: 0.2s;
+                        gap: var(--padding-sm);
+                        color: unset;
+                        text-decoration: unset;
+                    }
+                    a:hover {
+                        background-color: var(--theme-color-500);
+                        text-decoration: none;
+                        transition-duration: 0.2s;
+                    }
+                `}</style>
+                <a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
+            </div>
+        )
+    }
 }

components/menu.tsx

@@ -9,17 +9,15 @@ export default function Menu() {
         <menu className={styles.menu}>
             <div className="container">
                 <Link href="/">
-                    <a>
-                        <Image src={logo} alt="dubbelnull logo" />
-                        <h2>{process.env.NEXT_PUBLIC_NAME?.toUpperCase()}</h2>
-                    </a>
+                    <Image src={logo} alt="dubbelnull logo" style={{height: "2em", width: "2em"}} />
+                    <h2>{process.env.NEXT_PUBLIC_NAME?.toUpperCase()}</h2>
                 </Link>
 
                 <div>
-                    <Link href="/about">About</Link>
-                    <Link href="/showcase">Showcase</Link>
+                    <Link href="/about">🏢 About</Link>
+                    <Link href="/showcase">✨ Showcase</Link>
                     {/* <Link href="/services">Services</Link> */}
-                    <Link href="/contact">Contact</Link>
+                    <Link href="/contact">📮 Contact</Link>
                     <ThemeToggle />
                 </div>
             </div>

next-env.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,4 +1,3 @@
 module.exports = {
-  reactStrictMode: true,
-  target: 'serverless',
-}
+	reactStrictMode: true,
+};

package.json

@@ -15,15 +15,16 @@
     "@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",
+    "next": "^13.1.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
+    "@types/node": "^18.13.0",
     "@types/react": "17.0.13",
     "eslint": "7.30.0",
-    "eslint-config-next": "11.0.1",
+    "eslint-config-next": "^13.1.6",
     "typescript": "4.3.5"
   }
 }

pages/about.tsx

@@ -17,14 +17,10 @@ export default function About() {
                         <h2>{"ℹ️ About DubbelNull"}</h2>
                         <h5>
                             {"We are a new and small IT business from The Netherlands developing and designing all sorts of applications for clients. "}
-                            {"In January of 2021 DubbelNull was founded by Marco and their son Pascal as a result from their passion for IT. "}
+                            {"In January of 2021 DubbelNull was founded by father and son Marco and Pascal as a result of their passion for IT. "}
                             <br/><br/>
-                            {"We get our motivation from seeing clients succeed thanks to the products we craft for them. "}
-                            {"And in an effort to service those clients we keep expanding our set of skills and learning together. "}
-                            <br/><br/>
-                            {"Currently we specialize PHP and NodeJS based webdevelopment stacks including templaters like ReactJS and Blade, "}
-                            {"but we also use pre-made platforms like WordPress and MyBB. "}
-                            {"What tool we use depends entirely on what we feel is right for your budget and project. "}
+                            {"Currently we specialize PHP and NodeJS based webdevelopment stacks like: Wordpress, NestJS, SvelteKit, Laravel and more."}
+                            {"What tool we use depends entirely on what we feel is right for your budget and project, and adapting to other ones is never out of the question."}
                             <br/><br/>
                             {"For more information on exactly what kind of projects we handle, feel free to visit our "} <Link href="/services">Services</Link> {" page. "}
                         </h5>
@@ -37,51 +33,37 @@ export default function About() {
 
                         <div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "center"}}>
                             <StyledButton>#wordpress</StyledButton>
-                            <StyledButton>#graphql</StyledButton>
-                            <StyledButton>#websockets</StyledButton>
+                            <StyledButton>#realtime</StyledButton>
                             <StyledButton>#laravel</StyledButton>
-                            <StyledButton>#express</StyledButton>
+                            <StyledButton>#mybb</StyledButton>
                             <StyledButton>#tailwindcss</StyledButton>
                             <StyledButton>#svelte</StyledButton>
                             <StyledButton>#typescript</StyledButton>
                             <StyledButton>#nestjs</StyledButton>
+                            <StyledButton>#scalable</StyledButton>
                             <StyledButton>#php</StyledButton>
+                            <StyledButton>#vercel</StyledButton>
                         </div>
 
-                        <h3>{"and we're always eager to learn new stuff!"}</h3>
+                        <h3>{"and we're very flexible with using other options"}</h3>
                     </section>
 
                     <hr/>
 
-                    <section>
+                    <section style={{display: "flex", gap: "50px"}}>
 
-                        <div className={styles.aboutSectionReverse}>
-                            <div>
-                                <img src="/img/mid.png" alt="picture of pascal" />
-                            </div>
-                            <div>
-                                <h3>{"💻 Pascal van Ginkel"} <span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3>
-                                <p>
-                                    {"Hello, I'm Pascal. The person behind the majority of development at DubbelNull. "}<br/>
-                                    {"I am a versatile full-stack software engineer. I know my way around many languages and work with a variety of frameworks/libraries like Laravel, NestJS, React and Svelte."} <br/><br/>
-                                    {"I started making my own things over half a decade ago and have gotten a lot of experience with a wide range of concepts and technologies since then."}<br/>
-                                    {"I am currently studying Software Engineering at the Saxion University of Applied Sciences and specialize in web related development. "}
-                                </p>
-                            </div>
+                        <div>
+                            <h3 className={styles.tagspan}>{"💻 Pascal van Ginkel"} <span><span className={styles.tag}>{"Full-stack webdeveloper"}</span></span></h3>
+                            <p>
+                                {"Hello, I'm Pascal. I am a software engineer and in charge of development at DubbelNull. "}
+                            </p>
                         </div>
 
-                        <br/>
-
-                        <div className={styles.aboutSection}>
-                            <div>
-                                <h3>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</span></h3>
-                                <p>
-                                    {"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."}
-                                </p>
-                            </div>
-                            <div>
-                                <img src="/img/marco.png" alt="picture of marco" />
-                            </div>
+                        <div>
+                            <h3 className={styles.tagspan}>{"💼 Marco van Ginkel"} <span><span className={styles.tag}>{"Client relations & communication"}</span></span></h3>
+                            <p>
+                                {"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."}
+                            </p>
                         </div>
 
                     </section>

pages/contact.tsx

@@ -28,14 +28,17 @@ export default function Contact() {
                         }
                     `}</style>
 
-                    <section style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
-                        <h2 style={{padding: "0 0 var(--padding-lg) 0", margin: "unset"}}>{"📬 We typically respond within a few hours"}</h2>
+                    <section style={{display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--padding)", padding: "var(--padding)" }}>
+                        <h2 style={{margin: "unset"}}>{"📬 Want a quote for your project or have a question?"}</h2>
 
-                        <div style={{display: "flex", gap: "var(--padding)", justifyContent: "center"}}>
-                            <StyledButton href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Shoot us an email</StyledButton>
-                            <StyledButton href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faDiscord}></FontAwesomeIcon> Message us on Discord</StyledButton>
-                            <StyledButton href="https://twitter.com/DubbelNull" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton>
+                        <div style={{display: "flex", gap: "var(--padding)", justifyContent: "center", alignItems: "center"}}>
+                            <StyledButton type="highlight" href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Send us an email</StyledButton>
+                            or
+                            <StyledButton type="highlight" href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faDiscord}></FontAwesomeIcon> Message us on Discord</StyledButton>
+                            {/* <StyledButton href="https://twitter.com/DubbelNull" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton> */}
                         </div>
+
+                        <p>We typically respond within a day. We can assist you in both English and Dutch.</p>
                     </section>
 
                 </article>

pages/index.tsx

@@ -1,6 +1,4 @@
 import Head from 'next/head'
-import Link from 'next/link';
-import Image from 'next/image'
 import styles from '../styles/Index.module.css'
 import Buttons from '../components/buttons'
 
@@ -13,9 +11,7 @@ import { faForward } from '@fortawesome/free-solid-svg-icons'
 import { faStream } from '@fortawesome/free-solid-svg-icons'
 import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
 import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
-
-import logo from '../public/img/logoblue.png'
-import trick from '../public/img/trick.png'
+import StyledButton from '../components/elements/styledbutton'
 
 export default function Home() {
     return (
@@ -108,9 +104,20 @@ export default function Home() {
                     <hr />
 
                     <section>
-                        <h2>See what our customers say</h2>
+                        <h2 className={"mt-reset"}>See what some of our customers think</h2>
 
-                        <div className={styles.quote}>
+                        <div className={"text-center"}>
+                            <StyledButton type="highlight" href="/showcase">Visit the Showcase page</StyledButton>
+                        </div>
+
+                        <div className={"my-5"}/>
+
+                        <Buttons />
+
+
+
+
+                        {/* <div className={styles.quote}>
                             <img src="/img/trick.png"/>
                             <div>
                                 <p>
@@ -128,7 +135,7 @@ export default function Home() {
 
                         <br/>
 
-                        {/* <div className={styles.quote}>
+                        <div className={styles.quote}>
                             <div>
                                 <p>
                                     <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
@@ -155,11 +162,11 @@ export default function Home() {
                         </div> */}
                     </section>
 
-                    <hr/>
+                    {/* <hr/>
 
                     <section>
                         <Buttons />
-                    </section>
+                    </section> */}
                 </article>
             </section>
         </div>

pages/showcase.tsx

@@ -1,6 +1,16 @@
 import Head from 'next/head';
 import styles from '../styles/Showcase.module.css';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTractor } from '@fortawesome/free-solid-svg-icons'
+import { faBatteryFull } from '@fortawesome/free-solid-svg-icons'
+import { faHandshake } from '@fortawesome/free-solid-svg-icons'
+import { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons'
+import { faForward } from '@fortawesome/free-solid-svg-icons'
+import { faStream } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
+
 export default function Showcase() {
     return (
         <div className={"page " + styles.showcase}>
@@ -11,11 +21,12 @@ export default function Showcase() {
             <section className="container">
                 <article className="content">
                     <section>
-                        <h2>⭐ Highlighted clients</h2>
-                        <h5>{`
-                            Take a look at some of our happy past clients and the projects we made for them.
-                            Websites made before 2021 listed here were made before DubbelNull was founded by our Webdeveloper Pascal.
-                        `}</h5>
+                        <h2 className={"mt-reset"}>⭐ Highlighted clients</h2>
+                        <h5>
+                            {`
+                                Take a look at some of our happy past clients and the websites we built for them.
+                            `}
+                        </h5>
                     </section>
 
                     <section className={styles.showcaseClient}>
@@ -25,12 +36,28 @@ export default function Showcase() {
                                 This site was built with Wordpress in 2019 for a Dutch client.
                                 It is designed to mostly be a one-pager design, but can be extended to have more pages with ease.
                             `}</p>
+                            <p>🌍 Visit <a href="https://larumnidis.nl/" target="_blank" rel="noreferrer">laurmnidis.nl</a></p>
                         </div>
                         <div>
                             <img src="/img/larumnidis.png" />
                         </div>
                     </section>
 
+                    <section className={styles.showcaseClient}>
+                        <div>
+                            <h3>😎 Invesvpo</h3>
+                            <p>
+                                <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
+                                {" Even though I had no idea of how I wanted my website to look, I think it turned out looking good. All I gave them to work with was a moodboard, but they kept in touch with me to make sure it was perfect. "}
+                                <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
+                            </p>
+                            <p>🌍 Visit <a href="https://invesvpo.com/" target="_blank" rel="noreferrer">invesvpo.com</a></p>
+                        </div>
+                        <div>
+                            <img src="/img/invesvpo.png" />
+                        </div>
+                    </section>
+
                     <section className={styles.showcaseClient}>
                         <div>
                             <h3>⛪ Life Centre Livingston</h3>
@@ -38,6 +65,7 @@ export default function Showcase() {
                                 This site was made in 2018 with Wordpress for a local church and has many features like galleries, calendar,
                                 blogging and file uploads.
                             `}</p>
+                            <p>🌍 Visit <a href="https://lifecentrelivingston.com/" target="_blank" rel="noreferrer">lifecentrelivingston.com</a></p>
                         </div>
                         <div>
                             <img src="/img/lifecentrelivingston.png" />
@@ -46,18 +74,35 @@ export default function Showcase() {
 
                     <section className={styles.showcaseClient}>
                         <div>
-                            <h3>🐄 Breehoef</h3>
+                            <h3>📸 Danny Fiers</h3>
                             <p>{`
-                                A Dutch care farm contacted us in 2019 to update their website's content.
-                                Along the way we ended up rebuilding the site with HTML5 to keep supporting new browsers while
-                                retaining the old-school feeling that they loved and wanted to keep.
+                                This site was made for a client in 2022 and is a portfolio for a starting photography business.
+                                It was made with Wordpress and has a gallery with the ability to upload private customer albums and lock them behind passwords for his clients to review before purchasing.
                             `}</p>
+                            <p>🌍 Visit <a href="https://dannyfiers.nl/" target="_blank" rel="noreferrer">dannyfiers.nl</a></p>
                         </div>
                         <div>
-                            <img src="/img/breehoef.jpg" />
+                            <img src="/img/dannyfiers.png" />
                         </div>
                     </section>
 
+                    {/* <section className={styles.showcaseClient}>
+                        <div>
+                            <h3>🦊 Trick The Fox</h3>
+                            <p>
+                                <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
+                                {" The site is amazing, the work that went into it is incredible. "}
+                                {" The look and small details make it so amazing. "}
+                                {" They were always there to answer any questions I had and were happy to change the things I wanted. "}
+                                <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
+                            </p>
+                            <p>🌍 Visit <a href="https://trickthefox.com/" target="_blank" rel="noreferrer">trickthefox.com</a></p>
+                        </div>
+                        <div>
+                            <img src="/img/trickthefox.png" />
+                        </div>
+                    </section> */}
+
                     {/* <hr/>
 
                     <section>

styles/About.module.css

@@ -20,10 +20,35 @@
 }
 
 .tag {
-    font-size: 0.90rem;
+    font-size: 0.8rem;
     background-color: var(--theme-color);
     color: white;
-    padding: 0.4em 0.8em;
+    padding: 0.2em 1em;
     border-radius: var(--padding-xl);
     text-transform: lowercase;
+}
+
+.tagspan {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: var(--padding-xs);
+}
+
+
+/* mobile */
+@media(max-aspect-ratio: 5/4) {
+    .aboutSection {
+        grid-template-columns: 100% 0%;
+        gap: 0;
+    }
+
+    .aboutSectionReverse {
+        grid-template-columns: 0% 100%;
+        gap: 0;
+    }
+
+    .tagspan {
+        display: grid;
+    }
 }

styles/Showcase.module.css

@@ -11,4 +11,13 @@
 
 .showcaseClient h3 {
     margin: unset;
+}
+
+
+/* mobile */
+@media(max-aspect-ratio: 5/4) {
+    .showcaseClient {
+        grid-template-columns: 100%;
+        gap: 0;
+    }
 }

styles/globals.css

@@ -1,3 +1,6 @@
+@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');
+
 /* variables */
 :root {
   /* paddings */
@@ -39,10 +42,6 @@ body, body[data-theme="dark"] {
 }
 
 
-/* html */
-@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;
@@ -124,6 +123,19 @@ hr {
   animation-duration: 0.5s;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.my-5 {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.mt-reset {
+  margin-top: unset;
+}
+
 @keyframes contentanim {
   0% {
       margin-top: var(--padding-xxl);