new improvements and additions

main
Midnight 3 years ago
parent 3b16ca9ddf
commit f29ee3dc8e

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

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

@ -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 (
<div className={"page " + styles.about}>
@ -16,18 +19,26 @@ export default function Index() {
<article className="content">
<section>
<h2>About DubbelNull</h2>
<p>
{"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."}
</p>
<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"}}>
<h2>We utilize the newest tech</h2>
<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>
@ -43,36 +54,40 @@ export default function Index() {
<StyledButton>#php</StyledButton>
</div>
<br/>
<h3>and are always learning new stuff</h3>
<div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "center"}}>
<SmallStyledButton>#threejs</SmallStyledButton>
<SmallStyledButton>#prisma2</SmallStyledButton>
<SmallStyledButton>#vue</SmallStyledButton>
<SmallStyledButton>#nosql</SmallStyledButton>
</div>
<h3>and we're always eager to learn new stuff!</h3>
</section>
<hr/>
<section>
<div>
<h3>Marco van Ginkel Client relations and communication</h3>
<p>
{"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 "}
</p>
<div className={styles.aboutSectionReverse}>
<div>
<Image src={marco} />
</div>
<div>
<h3>💼 Marco van Ginkel <span className={styles.tag}>Client relations & communication</span></h3>
<p>
{"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 "}
</p>
</div>
</div>
<br/>
<div>
<h3>Pascal van Ginkel Full-stack webdeveloper</h3>
<p>
{"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. "}
</p>
<div className={styles.aboutSection}>
<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. "}
{"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. "}
</p>
</div>
<div>
<Image src={pascal} />
</div>
</div>
</section>

@ -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 (
<div className={"page " + styles.index}>
<Head>
<title>{process.env.NEXT_PUBLIC_NAME} | Home</title>
<title>{process.env.NEXT_PUBLIC_NAME} | {process.env.NEXT_PUBLIC_MOTTO}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
@ -33,7 +34,7 @@ export default function Home() {
<h1 className={styles.description}>
{"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."}
</h1>
<hr />
@ -45,7 +46,7 @@ export default function Home() {
<h3>Crystal clear sense</h3>
<p>
{"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 "} <Link href="/services">inform you of your options</Link> {" upfront."}
</p>
</div>
</div>
@ -111,7 +112,7 @@ export default function Home() {
<div className={styles.quote}>
<div>
<Image src={trick} />
<FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
</div>
<div>
<p>
@ -129,23 +130,31 @@ export default function Home() {
<br/>
{/* <div className={styles.quote}>
<div className={styles.quote}>
<div>
<p>
<FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
{" 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. "}
<FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
</p>
<br/>
<i> Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
<i> Melvyn & Merete @ <a href="https://lifecentrelivingston.com" target="_blank" rel="noreferrer">lifecentrelivingston.com</a></i>
</div>
<div>
<Image src={trick} />
<FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
</div>
</div> */}
</div>
</section>
<hr/>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 409 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 KiB

@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

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

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

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

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

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

Loading…
Cancel
Save