some fixes!!

components/footer.tsx

@@ -8,8 +8,7 @@ export default function Footer() {
     return (
         <footer className={styles.footer}>
             <div className="container">
-                <p>Copyright © 2021 DubbelNull vof <br/> Kvk 81343493 -- The Netherlands</p>
+                <p>Copyright © 2021 DubbelNull vof<br/>Kvk 81343493 -- The Netherlands</p>
-                <p>Website built with NextJS & Netlify<br/>Dutch language option coming soon</p>
             </div>
         </footer>
     )

components/menu.tsx

@@ -18,7 +18,7 @@ export default function Menu() {
                 <div>
                     <Link href="/about">About</Link>
                     <Link href="/showcase">Showcase</Link>
-                    <Link href="/services">Services</Link>
+                    {/* <Link href="/services">Services</Link> */}
                     <Link href="/contact">Contact</Link>
                     <ThemeToggle />
                 </div>

pages/_app.tsx

@@ -8,7 +8,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css';
 import { config } from '@fortawesome/fontawesome-svg-core';
 config.autoAddCss = false; /* eslint-disable import/first */
 
-function MyApp({ Component, pageProps }: AppProps) {
+function App({ Component, pageProps }: AppProps) {
   return (
     <SiteLayout>
       <Menu />
@@ -17,4 +17,4 @@ function MyApp({ Component, pageProps }: AppProps) {
     </SiteLayout>
   )
 }
-export default MyApp
+export default App

pages/about.tsx

@@ -1,12 +1,7 @@
 import Head from 'next/head';
-import Image from 'next/image';
 import styles from '../styles/About.module.css';
 import Link from 'next/link';
 import StyledButton from '../components/elements/styledbutton';
-import SmallStyledButton from '../components/elements/smallstyledbutton';
-
-import pascal from '../public/img/mid.png'
-import marco from '../public/img/marco.png'
 
 export default function About() {
     return (
@@ -43,12 +38,11 @@ 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>#laravel</StyledButton>
                             <StyledButton>#express</StyledButton>
-                            <StyledButton>#nextjs</StyledButton>
                             <StyledButton>#tailwindcss</StyledButton>
-                            <StyledButton>#livewire</StyledButton>
+                            <StyledButton>#svelte</StyledButton>
-                            <StyledButton>#reactjs</StyledButton>
                             <StyledButton>#typescript</StyledButton>
                             <StyledButton>#nestjs</StyledButton>
                             <StyledButton>#php</StyledButton>
@@ -63,12 +57,15 @@ export default function About() {
 
                         <div className={styles.aboutSectionReverse}>
                             <div>
-                                <Image src={marco} alt="picture of marco van ginkel" />
+                                <img src="/img/mid.png" alt="picture of pascal" />
                             </div>
                             <div>
-                                <h3>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</span></h3>
+                                <h3>{"💻 Pascal van Ginkel"} <span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3>
                                 <p>
-                                    {"lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet lorem ipsum sodor amar amalet "}
+                                    {"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>
@@ -77,16 +74,13 @@ export default function About() {
 
                         <div className={styles.aboutSection}>
                             <div>
-                                <h3>{"🐱‍💻 Pascal van Ginkel"} <span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3>
+                                <h3>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</span></h3>
                                 <p>
-                                    {"Hello, I'm Pascal. The person behind the majority of development at DubbelNull. "}
+                                    {"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."}
-                                    {"I have a passion for everything tech and always dive into new technologies, but my favorite by far is webdevelopment. "}
-                                    {"I started making my own things nearly 6 years ago and have gotten a lot of experience with a wide range of concepts and technologies since then. "}
-                                    {"I am also following a Software Engineering major at the Saxion University of Applied Sciences currently. "}
                                 </p>
                             </div>
                             <div>
-                                <Image src={pascal} alt="picture of mid" />
+                                <img src="/img/marco.png" alt="picture of marco" />
                             </div>
                         </div>
 

pages/contact.tsx

@@ -25,17 +25,16 @@ export default function Contact() {
                             display: grid;
                             grid-auto-flow: row;
                             grid-template-columns: auto auto;
-                            gap: var(--padding-lg);
                         }
                     `}</style>
 
                     <section style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
-                        <h2>{"📬 We typically respond within a few hours"}</h2>
+                        <h2 style={{padding: "0 0 var(--padding-lg) 0", margin: "unset"}}>{"📬 We typically respond within a few hours"}</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://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton>
+                            <StyledButton href="https://twitter.com/DubbelNull" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton>
                         </div>
                     </section>
 

pages/index.tsx

@@ -46,7 +46,7 @@ export default function Home() {
                                 <h3>Crystal clear sense</h3>
                                 <p>
                                     {"We understand the struggle of long meetings only to still have misunderstandings. "}
-                                    {"We are straight to the point and will "} <Link href="/services">inform you of your options</Link> {" upfront."}
+                                    {"We are straight to the point and will inform you of your options upfront."}
                                 </p>
                             </div>
                         </div>
@@ -111,9 +111,7 @@ export default function Home() {
                         <h2>See what our customers say</h2>
 
                         <div className={styles.quote}>
-                            <div>
+                            <img src="/img/trick.png"/>
-                                <FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
-                            </div>
                             <div>
                                 <p>
                                     <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />

pages/showcase.tsx

@@ -1,11 +1,6 @@
 import Head from 'next/head';
-import Image from 'next/image';
 import styles from '../styles/Showcase.module.css';
 
-import larumNidis from "../public/img/larumnidis.png";
-import lifeCentreLivingston from "../public/img/lifecentrelivingston.png";
-import breehoef from "../public/img/breehoef.jpg";
-
 export default function Showcase() {
     return (
         <div className={"page " + styles.showcase}>
@@ -32,7 +27,7 @@ export default function Showcase() {
                             `}</p>
                         </div>
                         <div>
-                            <Image src={larumNidis} />
+                            <img src="/img/larumnidis.png" />
                         </div>
                     </section>
 
@@ -45,7 +40,7 @@ export default function Showcase() {
                             `}</p>
                         </div>
                         <div>
-                            <Image src={lifeCentreLivingston} />
+                            <img src="/img/lifecentrelivingston.png" />
                         </div>
                     </section>
 
@@ -59,11 +54,11 @@ export default function Showcase() {
                             `}</p>
                         </div>
                         <div>
-                            <Image src={breehoef} />
+                            <img src="/img/breehoef.jpg" />
                         </div>
                     </section>
 
-                    <hr/>
+                    {/* <hr/>
 
                     <section>
                         <h2>🏗️ Other experiences and projects</h2>
@@ -75,7 +70,7 @@ export default function Showcase() {
                         `}</h5>
 
                         {`Maker, Picto Designer, Flame, The Moonlit Den, UNIVERSE`}
-                    </section>
+                    </section> */}
                 </article>
             </section>
         </div>

styles/Index.module.css

@@ -61,8 +61,13 @@
 
 .quote {
     display: flex;
-    gap: var(--padding-lg);
+    gap: var(--padding);
     align-items: flex-start;
+    width: 100%;
+}
+
+.quote > img {
+    width: 100%;
 }
 
 .quote p {
@@ -111,10 +116,6 @@
         grid-template-columns: auto;
     }
 
-    .quote {
-        flex-direction: column;
-    }
-
     .banner {
         padding: var(--padding);
     }

styles/components/Footer.module.css

@@ -5,11 +5,11 @@
 .footer > div {
     padding: 0 10px;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
 }
 
-.footer > div > *:last-child {
+.footer > div > * {
-    text-align: right;
+    text-align: center;
 }
 
 .footer * {

styles/globals.css

@@ -54,6 +54,10 @@ body {
   scroll-behavior: smooth;
 }
 
+img {
+  max-width: 100%;
+}
+
 p, b, i {
   font-size: 1rem;
 }