diff --git a/components/buttons.tsx b/components/buttons.tsx index 20c77a2..6d71f40 100644 --- a/components/buttons.tsx +++ b/components/buttons.tsx @@ -4,13 +4,13 @@ import Link from 'next/link' export default function Footer() { return (
-

Learn more

+

Or check out any of these other things

About Contact - Twitter + {/* Twitter */} GitLab - Discord + {/* Discord */} Statuspage
diff --git a/components/elements/styledbutton.tsx b/components/elements/styledbutton.tsx index fc4375f..e499ea5 100644 --- a/components/elements/styledbutton.tsx +++ b/components/elements/styledbutton.tsx @@ -1,31 +1,63 @@ export default function StyledButton(props: any) { - return ( -
- - {props.children} -
- ) + if(props.type == "highlight") { + return ( +
+ + {props.children} +
+ ) + } else { + return ( +
+ + {props.children} +
+ ) + } } \ No newline at end of file diff --git a/pages/about.tsx b/pages/about.tsx index 7bfdff6..ce26c3c 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -57,10 +57,10 @@ export default function About() {
- picture of pascal + picture of pascal
-

{"💻 Pascal van Ginkel"} {"Full-stack webdeveloper"}

+

{"💻 Pascal van Ginkel"} {"Full-stack webdeveloper"}

{"Hello, I'm Pascal. The person behind the majority of development at DubbelNull. "}
{"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."}

@@ -74,7 +74,7 @@ export default function About() {

-

{"💼 Marco van Ginkel"} {"Client relations & communication"}

+

{"💼 Marco van Ginkel"} {"Client relations & communication"}

{"Hello, I'm Marco. I do client relations and financial administration at DubbelNull."}

diff --git a/pages/contact.tsx b/pages/contact.tsx index eb53012..94c57a7 100644 --- a/pages/contact.tsx +++ b/pages/contact.tsx @@ -28,14 +28,16 @@ export default function Contact() { } `} -
-

{"📬 We typically respond within a few hours"}

+
+

{"📬 We typically respond within a few hours"}

- Shoot us an email - Message us on Discord - DM us on Twitter + Send us an email + {/* Message us on Discord */} + {/* DM us on Twitter */}
+ +

We can assist you in both the English and Dutch language.

diff --git a/pages/index.tsx b/pages/index.tsx index 2e55efe..8218c4d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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() {
-

See what our customers say

+

See what some of our customers think

-
+
+ Visit the Showcase page +
+ +
+ + + + + + + {/*

@@ -128,7 +135,7 @@ export default function Home() {
- {/*

+

@@ -155,11 +162,11 @@ export default function Home() {

*/}
-
+ {/*
-
+
*/}
diff --git a/pages/showcase.tsx b/pages/showcase.tsx index c0ef398..c967e28 100644 --- a/pages/showcase.tsx +++ b/pages/showcase.tsx @@ -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 (
@@ -11,11 +21,12 @@ export default function Showcase() {
-

⭐ Highlighted clients

-
{` - 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. - `}
+

⭐ Highlighted clients

+
+ {` + Take a look at some of our happy past clients and the websites we built for them. + `} +
@@ -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. `}

+

🌍 Visit laurmnidis.nl

@@ -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. `}

+

🌍 Visit lifecentrelivingston.com

@@ -46,15 +59,18 @@ export default function Showcase() {
-

🐄 Breehoef

-

{` - 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. - `}

+

🦊 Trick The Fox

+

+ + {" 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. "} + +

+

🌍 Visit trickthefox.com

- +
diff --git a/public/img/pascal.jpg b/public/img/pascal.jpg new file mode 100644 index 0000000..01164bb Binary files /dev/null and b/public/img/pascal.jpg differ diff --git a/public/img/trickthefox.png b/public/img/trickthefox.png new file mode 100644 index 0000000..def3c7f Binary files /dev/null and b/public/img/trickthefox.png differ diff --git a/styles/About.module.css b/styles/About.module.css index f7eb353..572dcb8 100644 --- a/styles/About.module.css +++ b/styles/About.module.css @@ -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; + } } \ No newline at end of file diff --git a/styles/Showcase.module.css b/styles/Showcase.module.css index 72b275e..2c6413f 100644 --- a/styles/Showcase.module.css +++ b/styles/Showcase.module.css @@ -11,4 +11,13 @@ .showcaseClient h3 { margin: unset; +} + + +/* mobile */ +@media(max-aspect-ratio: 5/4) { + .showcaseClient { + grid-template-columns: 100%; + gap: 0; + } } \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 5602992..ef84478 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -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);