DubbelNull
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve site

Browse Source
main
Midnight 3 years ago
parent 19e0e205b5
commit 530a95dac8
11 changed files with 164 additions and 62 deletions
Show Stats Download Patch File Download Diff File

6
components/buttons.tsx
Unescape View File

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

90
components/elements/styledbutton.tsx
Unescape View File

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

6
pages/about.tsx
Unescape View File

@ -57,10 +57,10 @@ export default function About() {
<div className={styles.aboutSectionReverse}> <div className={styles.aboutSectionReverse}>
<div> <div>
<img src="/img/mid.png" alt="picture of pascal" /> <img src="/img/pascal.jpg" alt="picture of pascal" />
</div> </div>
<div> <div>
<h3>{"💻 Pascal van Ginkel"} <span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3> <h3 className={styles.tagspan}>{"💻 Pascal van Ginkel"} <span className={styles.tag}>{"Full-stack webdeveloper"}</span></h3>
<p> <p>
{"Hello, I'm Pascal. The person behind the majority of development at DubbelNull. "}<br/> {"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 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/>
@ -74,7 +74,7 @@ export default function About() {
<div className={styles.aboutSection}> <div className={styles.aboutSection}>
<div> <div>
<h3>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</span></h3> <h3 className={styles.tagspan}>{"💼 Marco van Ginkel"} <span className={styles.tag}>{"Client relations & communication"}</span></h3>
<p> <p>
{"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."} {"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."}
</p> </p>

12
pages/contact.tsx
Unescape View File

@ -28,14 +28,16 @@ export default function Contact() {
} }
`}</style> `}</style>
<section style={{display: "flex", flexDirection: "column", alignItems: "center" }}> <section style={{display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--padding)", padding: "var(--padding)" }}>
<h2 style={{padding: "0 0 var(--padding-lg) 0", margin: "unset"}}>{"📬 We typically respond within a few hours"}</h2> <h2 style={{margin: "unset"}}>{"📬 We typically respond within a few hours"}</h2>
<div style={{display: "flex", gap: "var(--padding)", justifyContent: "center"}}> <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 type="highlight" href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Send 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={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> {/* <StyledButton href="https://twitter.com/DubbelNull" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton> */}
</div> </div>
<p>We can assist you in both the English and Dutch language.</p>
</section> </section>
</article> </article>

27
pages/index.tsx
Unescape View File

@ -1,6 +1,4 @@
import Head from 'next/head' import Head from 'next/head'
import Link from 'next/link';
import Image from 'next/image'
import styles from '../styles/Index.module.css' import styles from '../styles/Index.module.css'
import Buttons from '../components/buttons' 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 { faStream } from '@fortawesome/free-solid-svg-icons'
import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons' import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
import { faQuoteRight } from '@fortawesome/free-solid-svg-icons' import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'
import StyledButton from '../components/elements/styledbutton'
import logo from '../public/img/logoblue.png'
import trick from '../public/img/trick.png'
export default function Home() { export default function Home() {
return ( return (
@ -108,9 +104,20 @@ export default function Home() {
<hr /> <hr />
<section> <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"/> <img src="/img/trick.png"/>
<div> <div>
<p> <p>
@ -128,7 +135,7 @@ export default function Home() {
<br/> <br/>
{/* <div className={styles.quote}> <div className={styles.quote}>
<div> <div>
<p> <p>
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} /> <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
@ -155,11 +162,11 @@ export default function Home() {
</div> */} </div> */}
</section> </section>
<hr/> {/* <hr/>
<section> <section>
<Buttons /> <Buttons />
</section> </section> */}
</article> </article>
</section> </section>
</div> </div>

40
pages/showcase.tsx
Unescape View File

@ -1,6 +1,16 @@
import Head from 'next/head'; import Head from 'next/head';
import styles from '../styles/Showcase.module.css'; 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() { export default function Showcase() {
return ( return (
<div className={"page " + styles.showcase}> <div className={"page " + styles.showcase}>
@ -11,11 +21,12 @@ export default function Showcase() {
<section className="container"> <section className="container">
<article className="content"> <article className="content">
<section> <section>
<h2>⭐ Highlighted clients</h2> <h2 className={"mt-reset"}>⭐ Highlighted clients</h2>
<h5>{` <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. Take a look at some of our happy past clients and the websites we built for them.
`}</h5> `}
</h5>
</section> </section>
<section className={styles.showcaseClient}> <section className={styles.showcaseClient}>
@ -25,6 +36,7 @@ export default function Showcase() {
This site was built with Wordpress in 2019 for a Dutch client. 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. It is designed to mostly be a one-pager design, but can be extended to have more pages with ease.
`}</p> `}</p>
<p>🌍 Visit <a href="https://larumnidis.nl/" target="_blank">laurmnidis.nl</a></p>
</div> </div>
<div> <div>
<img src="/img/larumnidis.png" /> <img src="/img/larumnidis.png" />
@ -38,6 +50,7 @@ export default function Showcase() {
This site was made in 2018 with Wordpress for a local church and has many features like galleries, calendar, This site was made in 2018 with Wordpress for a local church and has many features like galleries, calendar,
blogging and file uploads. blogging and file uploads.
`}</p> `}</p>
<p>🌍 Visit <a href="https://lifecentrelivingston.com/" target="_blank">lifecentrelivingston.com</a></p>
</div> </div>
<div> <div>
<img src="/img/lifecentrelivingston.png" /> <img src="/img/lifecentrelivingston.png" />
@ -46,15 +59,18 @@ export default function Showcase() {
<section className={styles.showcaseClient}> <section className={styles.showcaseClient}>
<div> <div>
<h3>🐄 Breehoef</h3> <h3>🦊 Trick The Fox</h3>
<p>{` <p>
A Dutch care farm contacted us in 2019 to update their website's content. <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
Along the way we ended up rebuilding the site with HTML5 to keep supporting new browsers while {" The site is amazing, the work that went into it is incredible. "}
retaining the old-school feeling that they loved and wanted to keep. {" The look and small details make it so amazing. "}
`}</p> {" 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">trickthefox.com</a></p>
</div> </div>
<div> <div>
<img src="/img/breehoef.jpg" /> <img src="/img/trickthefox.png" />
</div> </div>
</section> </section>

BIN
public/img/pascal.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 MiB

BIN
public/img/trickthefox.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

23
styles/About.module.css
Unescape View File

@ -27,3 +27,26 @@
border-radius: var(--padding-xl); border-radius: var(--padding-xl);
text-transform: lowercase; text-transform: lowercase;
} }
.tagspan {
display: flex;
gap: var(--padding-sm);
}
/* 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;
}
}

9
styles/Showcase.module.css
Unescape View File

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

13
styles/globals.css
Unescape View File

@ -124,6 +124,19 @@ hr {
animation-duration: 0.5s; animation-duration: 0.5s;
} }
.text-center {
text-align: center;
}
.my-5 {
margin-top: 2em;
margin-bottom: 2em;
}
.mt-reset {
margin-top: unset;
}
@keyframes contentanim { @keyframes contentanim {
0% { 0% {
margin-top: var(--padding-xxl); margin-top: var(--padding-xxl);

Write Preview
Loading…
Cancel
Save