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() {
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://twitter.com/DubbelNull" target="_blank" rel="noreferrer">Twitter</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>
</div>
</section>

90
components/elements/styledbutton.tsx
Unescape View File

@ -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: 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>
)
} 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>
<img src="/img/mid.png" alt="picture of pascal" />
<img src="/img/pascal.jpg" alt="picture of pascal" />
</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>
{"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/>
@ -74,7 +74,7 @@ export default function About() {
<div className={styles.aboutSection}>
<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>
{"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."}
</p>

12
pages/contact.tsx
Unescape View File

@ -28,14 +28,16 @@ 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"}}>{"📬 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://twitter.com/DubbelNull" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</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://twitter.com/DubbelNull" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> DM us on Twitter</StyledButton> */}
</div>
<p>We can assist you in both the English and Dutch language.</p>
</section>
</article>

27
pages/index.tsx
Unescape View File

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

40
pages/showcase.tsx
Unescape View File

@ -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,6 +36,7 @@ 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">laurmnidis.nl</a></p>
</div>
<div>
<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,
blogging and file uploads.
`}</p>
<p>🌍 Visit <a href="https://lifecentrelivingston.com/" target="_blank">lifecentrelivingston.com</a></p>
</div>
<div>
<img src="/img/lifecentrelivingston.png" />
@ -46,15 +59,18 @@ export default function Showcase() {
<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>
<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">trickthefox.com</a></p>
</div>
<div>
<img src="/img/breehoef.jpg" />
<img src="/img/trickthefox.png" />
</div>
</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

@ -26,4 +26,27 @@
padding: 0.4em 0.8em;
border-radius: var(--padding-xl);
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

@ -11,4 +11,13 @@
.showcaseClient h3 {
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;
}
.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);

Write Preview
Loading…
Cancel
Save