website/pages/about.tsx

import Head from 'next/head';
import styles from '../styles/About.module.css';
import Link from 'next/link';
import StyledButton from '../components/elements/styledbutton';

export default function About() {
    return (
        <div className={"page " + styles.about}>
            <Head>
                <title>{process.env.NEXT_PUBLIC_NAME} | About</title>
            </Head>

            <section className="container">
                <article className="content">

                    <section>
                        <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. "}
                            <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. "}
                            <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>
                    </section>

                    <hr/>

                    <section style={{textAlign: "center"}} id="technologies">
                        <h2>{"We 💖 the newest tech"}</h2>

                        <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>#tailwindcss</StyledButton>
                            <StyledButton>#svelte</StyledButton>
                            <StyledButton>#typescript</StyledButton>
                            <StyledButton>#nestjs</StyledButton>
                            <StyledButton>#php</StyledButton>
                        </div>

                        <h3>{"and we're always eager to learn new stuff!"}</h3>
                    </section>

                    <hr/>

                    <section>

                        <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>

                        <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>

                    </section>

                </article>
            </section>

        </div>
    )
}