diff --git a/components/elements/smallstyledbutton.tsx b/components/elements/smallstyledbutton.tsx index b06e776..8834c51 100644 --- a/components/elements/smallstyledbutton.tsx +++ b/components/elements/smallstyledbutton.tsx @@ -13,7 +13,6 @@ export default function StyledButton(props: any) { font-weight: 500; font-size: 1em; border-radius: 8px; - cursor: default; transition-duration: 0.2s; } a:hover { diff --git a/components/elements/styledbutton.tsx b/components/elements/styledbutton.tsx index b776a20..d1074cd 100644 --- a/components/elements/styledbutton.tsx +++ b/components/elements/styledbutton.tsx @@ -14,7 +14,6 @@ export default function StyledButton(props: any) { font-size: 1.1em; border-radius: 8px; background-color: var(--background-color-dark); - cursor: default; transition-duration: 0.2s; } a:hover { diff --git a/pages/about.tsx b/pages/about.tsx index a485b7f..dc391c4 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -5,6 +5,9 @@ import Link from 'next/link'; import StyledButton from '../components/elements/styledbutton'; import SmallStyledButton from '../components/elements/smallstyledbutton'; +import pascal from '../public/img/mid.png' +import marco from '../public/img/marco.png' + export default function Index() { return (
@@ -16,18 +19,26 @@ export default function Index() {
-

About DubbelNull

-

- {"We are a new and small family business from The Netherlands developing and designing web applications for clients. "} - {"We specialize in TALL stack but also make use of applications like Wordpress. "} - {"We are service focused, meaning that if a client needs something we don't explicitly offer we can always work something out."} -

+

ℹī¸ About DubbelNull

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

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

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

+ {"For more information on exactly what kind of projects we handle, feel free to visit our "} Services {" page. "} +
-
-

We utilize the newest tech

+
+

We 💖 the newest tech

#wordpress @@ -43,36 +54,40 @@ export default function Index() { #php
-
- -

and are always learning new stuff

- -
- #threejs - #prisma2 - #vue - #nosql -
+

and we're always eager to learn new stuff!

-
-

Marco van Ginkel — Client relations and communication

-

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

+
+
+ +
+
+

đŸ’ŧ Marco van Ginkel — Client relations & communication

+

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

+

-
-

Pascal van Ginkel — Full-stack webdeveloper

-

- {"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. I started making my own things nearly 6 years ago and have gotten a lot of experience with a wide range of concepts and technologies since then. I am also following a Software Engineering major at the Saxion University of Applied Sciences currently. "} -

+
+
+

🐱‍đŸ’ģ Pascal van Ginkel — Full-stack webdeveloper

+

+ {"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. "} + {"I started making my own things nearly 6 years ago and have gotten a lot of experience with a wide range of concepts and technologies since then. "} + {"I am also following a Software Engineering major at the Saxion University of Applied Sciences currently. "} +

+
+
+ +
diff --git a/pages/index.tsx b/pages/index.tsx index d0a9287..eea140f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,5 @@ 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' @@ -20,7 +21,7 @@ export default function Home() { return (
- {process.env.NEXT_PUBLIC_NAME} | Home + {process.env.NEXT_PUBLIC_NAME} | {process.env.NEXT_PUBLIC_MOTTO} @@ -33,7 +34,7 @@ export default function Home() {

{"DubbelNull is a small IT development team from The Netherlands making and designing applications. "} {"We create both back-end servers and front-end experiences, including mobile apps and PWA. "} - {"Whatever it is you need, if it's based on web protocols, we can make it for you."} + {"So as long as it's based on web protocols, we can make it."}

@@ -45,7 +46,7 @@ export default function Home() {

Crystal clear sense

{"We understand the struggle of long meetings only to still have misunderstandings. "} - {"We are straight to the point and will inform you of your options upfront."} + {"We are straight to the point and will "} inform you of your options {" upfront."}

@@ -111,7 +112,7 @@ export default function Home() {
- +

@@ -129,23 +130,31 @@ export default function Home() {
- {/*

+

- {" The site is amazing, the work that went into this is incredible. "} - {" The look and small details make it so amazing. "} - {" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "} - {" They were always there to answer any questions I had and were happy to change the things I wanted. "} + {" Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "} + {"Lorem ipsum sodor dolor amalet. "}


- — Trick @ trickthefox.com + — Melvyn & Merete @ lifecentrelivingston.com
- +
-
*/} +
diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/img/marco.png b/public/img/marco.png new file mode 100644 index 0000000..acefaf2 Binary files /dev/null and b/public/img/marco.png differ diff --git a/public/img/mid.png b/public/img/mid.png new file mode 100644 index 0000000..2999907 Binary files /dev/null and b/public/img/mid.png differ diff --git a/public/img/pascal.png b/public/img/pascal.png new file mode 100644 index 0000000..10f7195 Binary files /dev/null and b/public/img/pascal.png differ diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index fbf0e25..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/styles/About.module.css b/styles/About.module.css index e69de29..259cb3c 100644 --- a/styles/About.module.css +++ b/styles/About.module.css @@ -0,0 +1,29 @@ +.aboutSection { + display: grid; + grid-auto-flow: row; + width: 100%; + grid-template-columns: 70% auto; + gap: var(--padding-lg); +} + +.aboutSectionReverse { + display: grid; + grid-auto-flow: row; + width: 100%; + grid-template-columns: auto 70%; + gap: var(--padding-lg); +} + + +.aboutSection img, .aboutSectionReverse img { + border-radius: var(--padding-sm); +} + +.tag { + font-size: 0.95rem; + color: var(--theme-color); + background-color: var(--background-color-dark); + padding: 0.4em 0.8em; + border-radius: var(--padding-xl); + text-transform: lowercase; +} \ No newline at end of file diff --git a/styles/Index.module.css b/styles/Index.module.css index c4aeca2..3c1e710 100644 --- a/styles/Index.module.css +++ b/styles/Index.module.css @@ -14,7 +14,7 @@ } .banner h1 { - margin-top: -7rem; + margin-top: -6.5rem; font-size: 3em; font-weight: 500; } @@ -62,7 +62,7 @@ .quote { display: flex; gap: var(--padding-lg); - align-items: start; + align-items: flex-start; } .quote p { diff --git a/styles/components/Buttons.module.css b/styles/components/Buttons.module.css index 5e56d5c..2d5e217 100644 --- a/styles/components/Buttons.module.css +++ b/styles/components/Buttons.module.css @@ -18,6 +18,7 @@ font-size: 1.1em; border-radius: 8px; background-color: var(--background-color-dark); + border: unset; } .section div { @@ -30,6 +31,7 @@ .section a:hover { background-color: var(--theme-color-500); text-decoration: none; + border: unset; } diff --git a/styles/components/Menu.module.css b/styles/components/Menu.module.css index 8ce7d31..f6d59a9 100644 --- a/styles/components/Menu.module.css +++ b/styles/components/Menu.module.css @@ -4,6 +4,7 @@ margin: unset; width: 100%; background-color: var(--background-color); + z-index: 10; } .menu > div { @@ -44,6 +45,7 @@ font-weight: 500; font-size: 0.9em; border-radius: 8px; + border: unset; } .menu .disabled a { @@ -53,6 +55,7 @@ .menu a:hover { background-color: var(--theme-color-dilluted); text-decoration: none; + border: unset; } .menu .disabled { diff --git a/styles/globals.css b/styles/globals.css index 91788af..807432b 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -4,6 +4,7 @@ --padding: 20px; --padding-lg: 50px; --padding-xl: 100px; + --padding-xxl: 200px; } body, body[data-theme="light"] { @@ -49,19 +50,33 @@ body { font-size: 1.1rem; background-color: var(--background-color-body); color: var(--text-color); + scroll-behavior: smooth; } -h1, h2, h3, h4, h5 { +p, b, i { + font-size: 1rem; +} + +h1, h2, h3, h4 { font-family: 'Red Hat Display'; } -a { +h5, h6 { + font-weight: normal; +} + +h5 { + font-size: 1.05rem; +} + +a:not([class]) { color: inherit; text-decoration: none; + border-bottom: 1px dashed currentColor; } -a:hover { - text-decoration: underline; +a:not([class]):hover { + border-bottom: 1px solid currentColor; } * { @@ -106,7 +121,7 @@ hr { @keyframes contentanim { 0% { - margin-top: 10rem; + margin-top: var(--padding-xxl); opacity: 0; }