diff --git a/assets/banner.jpg b/assets/banner.jpg new file mode 100644 index 0000000..d13b4ae Binary files /dev/null and b/assets/banner.jpg differ diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..1bd1d66 --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/nav_toggle.svg b/assets/nav_toggle.svg new file mode 100644 index 0000000..048a68d --- /dev/null +++ b/assets/nav_toggle.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/project_placeholder.svg b/assets/project_placeholder.svg new file mode 100644 index 0000000..aa0ca99 --- /dev/null +++ b/assets/project_placeholder.svg @@ -0,0 +1,2 @@ + + 300×300 diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..e7be7fd Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2eeaf8b --- /dev/null +++ b/index.html @@ -0,0 +1,174 @@ + + + + + + + + + + Maik de Kruif (maikka39) + + + +
+
+ +
+
+
+
+

Maik de Kruif

+ maikka39 +
+
+ + +
+
⌄
+
+
+
+
+

About me

+

Hey there, my name is Maik de Kruif, I create websites, bots and other kinds of software. At the moment, I'm still studying computer science at Avans University of Applied Sciences. I am also a big fan of open-source software, which is why you'll find many of my projects on Github. And last but not least, I love playing around with cyber-security related stuff.

+
+
+
+
+

WatchTogether

+

WatchTogether is a way to watch YouTube videos together with others. Originally designed for watching Meme Review episodes with friends, WatchTogether can also be used to watch any YouTube video. Github

+
+
+
+

SuperBot

+

A bot for the popular chat platform Discord. With this bot you can moderate your server, play music, get statistics for your favorite games and have fun with some other little perks. Github: click here.

+
+
+
+

Toy Neural Network

+

This is a very basic Python Neural Network library based on the one built by Daniel Shiffman in this playlist but translated and improved in Python Check it out on Github!

+
+ +
+
+

InvoiceGenerator

+

Using InvoiceGenerator you can easily fill in word templates with the correct prices and comments. This project was commissioned by Pennings akoestisch afbouwen. Source: Github

+
+
+
+

CTF

+

In my spare time i'm often busy playing CTFs. This is a game mode in which several attackers (hackers) must steal a flag, saved on an (purposefully) insecure server and submit is to the organizer. More info.

+
+
+
+
+
+

Get in Touch!

+

Do you have a question? Contact me at info@maik.dev

+
+
+ +
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d477e77 --- /dev/null +++ b/styles.css @@ -0,0 +1,715 @@ +html, +body { + margin: 0; + padding: 0; +} + +body { + font-family: 'Roboto', sans-serif; + background: #060612; + + overflow-x: hidden; +} + +@media screen and (max-width: 480px) { + + body, + input, + select, + textarea { + font-size: 12pt; + } +} + +@media screen and (max-width: 480px) { + + html, + body { + min-width: 320px; + } +} + +@media screen and (max-width: 736px) { + + body, + input, + select, + textarea { + font-size: 12pt; + } +} + +/* +@media screen and (max-width: 736px) { + + html, + body { + overflow-x: hidden; + } +} +*/ + +@media screen and (max-width: 980px) { + + body, + input, + select, + textarea { + font-size: 12pt; + } +} + +@media screen and (max-width: 1280px) { + + body, + input, + select, + textarea { + font-size: 11.5pt; + } +} + +@media screen and (max-width: 1680px) { + + body, + input, + select, + textarea { + font-size: 13pt; + } +} + +.parallax::after { + /* Display and position the pseudo-element */ + content: " "; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + /* Move the pseudo-element back away from the camera, + * then scale it back up to fill the viewport. + * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */ + transform: translateZ(-1px) scale(1.5); +} + +.hidden { + display: none !important; +} + +.content { + display: grid; + grid-template-rows: auto; + grid-column-gap: 0; + grid-row-gap: 0; + + grid-template-columns: 1fr 1fr 1fr; + grid-template-areas: + "nav nav nav" + "header header header" + "projects projects projects" + "contact contact contact" + "footer footer footer"; + + overflow-x: hidden; + overflow-y: auto; + perspective: 2px; + height: 100vh; + scroll-behavior: smooth; +} + +@media only screen and (max-width: 980px) { + .content { + grid-template-columns: 1fr 1fr; + grid-template-areas: + "nav nav" + "header header" + "projects projects" + "contact contact" + "footer footer"; + } +} + +@media only screen and (max-width: 736px) { + .content { + grid-template-columns: 1fr; + grid-template-areas: + "nav" + "header" + "projects" + "contact" + "footer"; + } +} + +.content > * { + background: white; +} + +.content > nav { + grid-area: nav; + position: absolute; + background: transparent; + color: #ffffff; + width: 100%; + height: 3.5em; + line-height: 3.5em; + z-index: 10; + user-select: none; +} + +.content > nav > .mobile_menu { + position: absolute; + width: 100vw; + height: calc(100vh - 3.5em); + z-index: 100; + top: 3.5em; + left: 0; + background-color: #060612; +} + +.content > nav > .mobile_menu > .container { + position: relative; +} + +.content > nav > .mobile_menu > .container > .list {} + +.content > nav > .mobile_menu > .container > .list > .item { + display: block; + background-color: #1a1233; + width: 100%; + text-decoration: none; + font-weight: 900; + color: #ffffff; + line-height: 4em; + font-size: 1.25em; + padding-left: 1em; + position: relative; + cursor: pointer; +} + +.content > nav > .mobile_menu > .container > .list > .active { + background: #480070; +} + +.content > nav > .mobile_menu > .container > .list > .language > .subitem { + display: block; + width: 100%; + text-decoration: none; + color: #ffffff; + background-color: #9535fc; + position: absolute; + left: 0; + padding-left: 3em; +} + +.content > nav > .mobile_menu > .container > .list > .item > .subitem:nth-child(2n) { + margin-top: 4em; +} + +.content > nav > .nav_toggle { + position: absolute; + top: 0; + left: 0; + background-color: #9535fc; + width: 3.5em; + height: 3.5em; + cursor: pointer; + display: none; +} + +.content > nav > .nav_toggle > .button_container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-53%, -46%); + margin: 0; + text-decoration: none; + color: #aa5bff; + font-weight: 900; + font-size: 2em; +} + +.content > nav > .logo { + text-decoration: none; + color: #ffffff; + margin-left: 1.5em; +} + +.content > nav > .list { + cursor: default; + user-select: none; + float: right; + margin-right: 1em; +} + +.content > nav > .list > .item { + display: inline-block; + padding: 0 1em; + text-decoration: none; + color: #ffffff; + position: relative; + cursor: pointer; +} + +.content > nav > .list > .item > .subitem { + display: block; + padding: 0 1em; + right: 0; + text-decoration: none; + color: #ffffff; + background: #1a1233; + position: absolute; +} + +.content > nav > .list > .item > .subitem:nth-child(2n) { + margin-top: 4em; +} + +.content > nav > .list > .active { + color: #9535fc; +} + +@media only screen and (max-width: 736px) { + .content > nav { + background: rgba(6, 6, 18, 0.95); + user-select: none; + } + + .content > nav > .logo { + margin: 0; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%) + } + + .content > nav > .list { + display: none; + } + + .content > nav > .nav_toggle { + display: block; + } +} + +.content > header { + grid-area: header; + min-height: 100vh; + box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25); + background: rgba(6, 6, 18, 0.95); +} + +.content > header { + min-height: 35em; + height: 100vh; + position: relative; + + + display: flex; + justify-content: center; + align-items: center; +} + +.content > header::after { + background-size: cover; + background-image: url("assets/banner.jpg"); + z-index: -1; +} + +.content > header > .container > .text { + display: inline-block; +} + +.content > header > .container > .text > .container { + display: flex; + flex-direction: column; + justify-content: center; +} + +.content > header > .container > .text > .container > h1 { + font-size: 2.5em; + line-height: 1.5em; + color: #ffffff; + margin: 0; + padding: 0; +} + +.content > header > .container > .text > .container > span { + font-size: 1.25em; + line-height: 1.75em; + text-align: right; + color: #ffffff; +} + +.content > header > .container > .logo { + user-select: none; +} + +.content > header > .container > .logo > img { + width: 18em; + height: 18em; + margin-left: 3em; + display: inline-block; + vertical-align: middle; + position: relative; +} + +.content > header > .container > .filler { + display: block; + height: 2em; +} + +.content > header > .scroll_arrow { + position: absolute; + bottom: 1.25em; + z-index: 8; + user-select: none; +} + +.content > header > .scroll_arrow > a { + text-decoration: none; + color: #ffffff; + font-size: 4em; + padding: 1em 1em 0.25em 1em; +} + +@media only screen and (max-width: 980px) { + .content > header > .container > .logo > img { + margin: 0; + display: block; + margin: 0 auto; + } + + .content > header > .container > .text { + display: block; + } + + .content > header > .container > .text > .container > span, + .content > header > .container > .text > .container > h1 { + text-align: center; + } +} + +@media only screen and (max-width: 736px) { + .content > header > .container > .text > .container > h1 { + font-size: 1.5em; + } + + .content > header > .container > .text > .container > span { + font-size: 1em; + } + + .content > header > .container > .logo > img { + width: 9em; + height: 9em; + } +} + +.content > .projects { + grid-area: projects; + background-color: #060612; + text-align: center; + color: #ffffff; + width: 100%; + margin-bottom: 1.25em; +} + +.content > .projects > .container { + margin: 1em 2em; + display: grid; + grid-template-rows: auto; + grid-column-gap: 0; + grid-row-gap: 0; + + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-areas: + "description description description description description description" + "watchtogether watchtogether superbot superbot toyneuralnet toyneuralnet" + ". invoicegenerator invoicegenerator ctf ctf ." +} + +.content > .projects > .container > .description { + grid-area: description; + margin: 1em auto; + width: 85%; + max-width: 78em; +} + +.content > .projects > .container > .description > h1 { + font-size: 2em; +} + +.content > .projects > .container > .description > hr { + width: 60%; + margin: 1em auto 1em; + border-color: #9535fc; + border-width: .1em; +} + +.content > .projects > .container > .project { + display: block; + margin: .75em auto; + width: 80%; + /* background-color: white;*/ +} + +.content > .projects > .container > .project > .icon { + background-color: #1a1233; + height: 6em; + width: 6em; + position: relative; + border-radius: 100%; + margin: auto; + user-select: none; +} + +.content > .projects > .container > .project > .icon > img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 2.25em; + width: 2.25em; +} + +.content > .projects > .container > .project > h1 { + font-size: 1.35em; + line-height: 1.5em; +} + +.content > .projects > .container > .project > p {} + +.content > .projects p { + font-size: 1.25em; + line-height: 1.75em; +} + +.content > .projects p > a { + text-decoration: underline; + color: #9535fc; +} + +.content > .projects > .container > .watchtogether { + grid-area: watchtogether; +} + +.content > .projects > .container > .superbot { + grid-area: superbot; +} + +.content > .projects > .container > .toyneuralnet { + grid-area: toyneuralnet; +} + +.content > .projects > .container > .invoicegenerator { + grid-area: invoicegenerator; +} + +.content > .projects > .container > .ctf { + grid-area: ctf; +} + +@media only screen and (max-width: 980px) { + .content > .projects > .container { + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-areas: + "description description description description" + "watchtogether watchtogether superbot superbot" + "toyneuralnet toyneuralnet invoicegenerator invoicegenerator" + ". ctf ctf ." + } +} + +@media only screen and (max-width: 736px) { + .content > .projects > .container { + grid-template-columns: 1fr; + grid-template-areas: + "description" + "watchtogether" + "superbot" + "toyneuralnet" + "invoicegenerator" + "ctf" + } + + .content > .projects > .container > .description > h1 { + font-size: 1.5em; + } + + .content > .projects p { + font-size: 1em; + } + + .content > .projects > .container > .project > h1 { + font-size: 1.2em; + } +} + +.content > .contact { + grid-area: contact; + background-color: #9535fc; + text-align: center; + color: #ffffff; +} + +.content > .contact > .container { + margin: 9em auto; + width: 70%; +} + +.content > .contact > .container > h1 { + font-size: 2em; + line-height: 1.5em; + /* letter-spacing: -0.025em;*/ +} + +.content > .contact > .container > p { + font-size: 1.25em; + line-height: 1.75em; + margin-top: -0.75em; +} + +.content > .contact > .container > p > a { + color: #ffffff; + /* text-decoration: none;*/ +} + +@media only screen and (max-width: 980px) { + .content > .contact > .container { + margin: 7em auto; + } +} + +@media only screen and (max-width: 736px) { + .content > .contact > .container { + margin: 6.75em auto; + } + + .content > .contact > .container > h1 { + font-size: 1.5em; + } + + .content > .contact > .container > p { + font-size: 1em; + } +} + +.content > footer { + grid-area: footer; + background-color: #060612; + color: #ffffff; +} + +.content > footer > .container { + margin: 8em auto 0; + padding-bottom: 7em; + width: 80%; + position: relative; +} + +.content > footer > .container > .social { + user-select: none; + margin: 1.75em auto; + width: 80%; + text-align: center +} + +.content > footer > .container > .social > a { + color: #9535fc; + margin: .25em; +} + +.content > footer > .container > .social > a > svg { + fill: #9535fc; + width: 2.5em; + height: 2.5em; + margin: 0 0.25em; +} + +.content > footer > .container > .social > a > svg:hover { + -moz-transform: scale(1.1); + -webkit-transform: scale(1.1); + tansform: scale(1.1); +} + +.content > footer > .container > .copyright { + user-select: none; + margin: 1em auto; + text-align: center +} + +.content > footer > .container > .copyright > p { + display: inline-block; + user-select: text; + margin: 0; + line-height: 1.75em; + font-size: 1.1em; +} + +.content > footer > .container > .copyright > span { + user-select: none; + margin: 0 1.25em; +} + +.content > footer > .container > .scroll_up { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0; + z-index: 8; + user-select: none; +} + +.content > footer > .container > .scroll_up > a { + text-decoration: none; + color: #ffffff; + font-size: 4em; + padding: .25em 1.25em 0.25em 1.25em; +} + +@media only screen and (max-width: 1680px) { + .content > footer > .container > .copyright > .second_span { + display: none; + } + + .content > footer > .container > .copyright > .trademarks { + display: block; + } +} + +@media only screen and (max-width: 980px) { + .content > footer > .container { + margin: 7em auto 0; + padding-bottom: 6em; + } + + .content > footer > .container > .social > a > svg { + width: 2.25em; + height: 2.25em; + } + + .content > footer > .container > .copyright > span { + display: none; + } + + .content > footer > .container > .copyright > p { + display: block; + } +} + +@media only screen and (max-width: 736px) { + .content > footer > .container > .social > a > svg { + width: 1.75em; + height: 1.75em; + } + + .content > footer > .container > .social > a > svg:hover { + transform: none; + } + + .content > footer > .container > .copyright > p { + font-size: 0.9em; + } +}