updates

components/menu.tsx

@@ -17,9 +17,8 @@ export default function Menu() {
 
                 <div>
                     <Link href="/about">About</Link>
-                    <div className={styles.disabled}><Link href="">Blog</Link></div>
+                    <Link href="/showcase">Showcase</Link>
-                    <div className={styles.disabled}><Link href="">Showcase</Link></div>
+                    <Link href="/services">Services</Link>
-                    <div className={styles.disabled}><Link href="">Services</Link></div>
                     <Link href="/contact">Contact</Link>
                     <ThemeToggle />
                 </div>

pages/about.tsx

@@ -66,7 +66,7 @@ export default function About() {
                                 <Image src={marco} alt="picture of marco van ginkel" />
                             </div>
                             <div>
-                                <h3>{"💼 Marco van Ginkel — "}<span className={styles.tag}>{"Client relations & communication"}</span></h3>
+                                <h3>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</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 "}
                                 </p>
@@ -77,7 +77,7 @@ export default function About() {
 
                         <div className={styles.aboutSection}>
                             <div>
-                                <h3>{"🐱‍💻 Pascal van Ginkel — "}<span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3>
+                                <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. "}
                                     {"I have a passion for everything tech and always dive into new technologies, but my favorite by far is webdevelopment. "}

pages/contact.tsx

@@ -29,18 +29,18 @@ export default function Contact() {
                         }
                     `}</style>
 
-                    <section style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "flex-start", flexDirection: "column", alignItems: "stretch"}}>
+                    <section style={{display: "flex", flexDirection: "column", alignItems: "center" }}>
-                        <h2>{"📬 Contact us"}</h2>
+                        <h2>{"📬 We typically respond within a few hours"}</h2>
-                        <StyledButton style={{backgroundColor: "var(--theme-color-500)"}} href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Shoot us an email</StyledButton>
+
-                        <StyledButton style={{backgroundColor: "var(--theme-color-500)"}} href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faDiscord}></FontAwesomeIcon> Message us on our Discord server</StyledButton>
+                        <div style={{display: "flex", gap: "var(--padding)", justifyContent: "center"}}>
-                        <StyledButton style={{backgroundColor: "var(--theme-color-500)"}} href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> Send a DM to our Twitter account</StyledButton>
+                            <StyledButton href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Shoot us an email</StyledButton>
-                        <StyledButton style={{backgroundColor: "var(--danger)"}}><FontAwesomeIcon icon={faPhoneSlash}></FontAwesomeIcon> We have no public phone number</StyledButton>
+                            <StyledButton href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faDiscord}></FontAwesomeIcon> Message us on Discord</StyledButton>
-                        <p>{"We typically respond within a few hours during business hours."}</p>
+                            <StyledButton href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton>
+                        </div>
                     </section>          
                     
                 </article>
             </section>
-
         </div>
     )
 }

pages/index.tsx

@@ -32,9 +32,9 @@ export default function Home() {
 
                 <article className={"content " + styles.indexanim}>
                     <h1 className={styles.description}>
-                        {"DubbelNull is a small IT development team from The Netherlands making and designing applications. "}
+                        {"DubbelNull is a small IT development team from The Netherlands. We make and design web-based applications of all kinds including; "}
-                        {"We create both back-end servers and front-end experiences, including mobile apps and PWA. "}
+                        {"back-end servers, front-end experiences, mobile apps, and PWA. "}
-                        {"So as long as it's based on web protocols, we can make it."}
+                        {"As long as it's based on web protocols, we can make it."}
                     </h1>
 
                     <hr />

pages/services.tsx

@@ -0,0 +1,18 @@
+import Head from 'next/head';
+import styles from '../styles/Services.module.css';
+
+export default function Services() {
+    return (
+        <div className={"page " + styles.services}>
+            <Head>
+                <title>{process.env.NEXT_PUBLIC_NAME} | Services</title>
+            </Head>
+
+            <section className="container">
+                <article className="content">    
+                    
+                </article>
+            </section>
+        </div>
+    )
+}

pages/showcase.tsx

@@ -0,0 +1,83 @@
+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}>
+            <Head>
+                <title>{process.env.NEXT_PUBLIC_NAME} | Showcase</title>
+            </Head>
+
+            <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>
+                    </section>
+
+                    <section className={styles.showcaseClient}>
+                        <div>
+                            <h3>🏘️ Larum Nidis</h3>
+                            <p>{`
+                                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>
+                        </div>
+                        <div>
+                            <Image src={larumNidis} />
+                        </div>
+                    </section>
+
+                    <section className={styles.showcaseClient}>
+                        <div>
+                            <h3>⛪ Life Centre Livingston</h3>
+                            <p>{`
+                                This site was made in 2018 with Wordpress for a local church and has many features like galleries, calendar, 
+                                blogging and file uploads.
+                            `}</p>
+                        </div>
+                        <div>
+                            <Image src={lifeCentreLivingston} />
+                        </div>
+                    </section>
+
+                    <section className={styles.showcaseClient}>
+                        <div>
+                            <h3>🐄 Breehoef</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.
+                            `}</p>
+                        </div>
+                        <div>
+                            <Image src={breehoef} />
+                        </div>
+                    </section>
+
+                    <hr/>
+
+                    <section>
+                        <h2>🏗️ Other experiences and projects</h2>
+                        <h5>{`
+                            In our every day lives we come across shortcomings or needs in technology, and sometimes we create our own solutions for them. 
+                            Sometimes we believe that these solutions could help more people and decide to release them publicly so that anyone can use them. 
+                            These applications also help us further showcase our quality and abilities to potential clients. 
+                            They are not ready for use yet, but you can still read more about them below. 
+                        `}</h5>
+
+                        {`Maker, Picto Designer, Flame, The Moonlit Den, UNIVERSE`}
+                    </section>
+                </article>
+            </section>
+        </div>
+    )
+}

styles/About.module.css

@@ -20,9 +20,9 @@
 }
 
 .tag {
-    font-size: 0.95rem;
+    font-size: 0.90rem;
-    color: var(--theme-color);
+    background-color: var(--theme-color);
-    background-color: var(--background-color-dark);
+    color: white;
     padding: 0.4em 0.8em;
     border-radius: var(--padding-xl);
     text-transform: lowercase;

styles/Showcase.module.css

@@ -0,0 +1,14 @@
+.showcaseClient {
+    display: grid;
+    grid-template-columns: 50% auto;
+    gap: var(--padding-lg);
+    justify-content: flex-start;
+}
+
+.showcaseClient img {
+    border-radius: var(--padding);
+}
+
+.showcaseClient h3 {
+    margin: unset;
+}