Maik de Kruif
5 years ago
parent
b744773bd0
commit
3635b51965
7 changed files with 999 additions and 0 deletions
|
After Width: | Height: | Size: 445 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 968 B |
|
After Width: | Height: | Size: 326 B |
|
After Width: | Height: | Size: 7.0 KiB |
@ -0,0 +1,174 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en" dir="ltr"> |
||||
|
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
||||
<link rel="stylesheet" href="styles.css"> |
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> |
||||
<link rel="icon" href="favicon.ico" type="image/x-icon" /> |
||||
<title>Maik de Kruif (maikka39)</title> |
||||
</head> |
||||
|
||||
<body> |
||||
<div class="content"> |
||||
<div id="top"></div> |
||||
<nav> |
||||
<div id="mobile_menu" class="mobile_menu dropdown-content dropbtn hidden"> |
||||
<div class="container"> |
||||
<div class="list"> |
||||
<a class="item active" href="#">Home</a> |
||||
<a class="item" href="#contact">Contact</a> |
||||
<div class="item language dropbtn" onclick="select_language(this)">Language |
||||
<a class="subitem dropdown-content hidden" href="/">English</a> |
||||
<a class="subitem dropdown-content hidden" href="/nl/">Nederlands</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div href="#nav_toggle" class="nav_toggle dropbtn" onclick="toggle_mobile_menu()"> |
||||
<div class="button_container dropbtn"><span id="open_mobile_nav" class="dropbtn">☰</span><span id="close_mobile_nav" class="dropbtn hidden">🞫</span></div> |
||||
</div> |
||||
<a class="logo" href="/">maik.dev</a> |
||||
<div class="list"> |
||||
<a class="item active" href="#">Home</a> |
||||
<a class="item" href="#contact">Contact</a> |
||||
<div class="item language dropbtn" onclick="select_language(this)">Language |
||||
<a class="subitem dropdown-content hidden" href="/">English</a> |
||||
<a class="subitem dropdown-content hidden" href="/nl/">Nederlands</a> |
||||
</div> |
||||
</div> |
||||
</nav> |
||||
<header class="parallax"> |
||||
<div class="container"> |
||||
<div class="text"> |
||||
<div class="container"> |
||||
<h1>Maik de Kruif</h1> |
||||
<span>maikka39</span> |
||||
</div> |
||||
</div> |
||||
<span class="logo"> |
||||
<img src="assets/logo.svg"> |
||||
</span> |
||||
<span class="filler"></span> |
||||
</div> |
||||
<div class="scroll_arrow"><a href="#aboutme">⌄</a></div> |
||||
</header> |
||||
<div class="projects"> |
||||
<div id="aboutme" class="container"> |
||||
<div class="description"> |
||||
<h1>About me</h1> |
||||
<p>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 <a href="https://github.com/maikka39">Github</a>. And last but not least, I love playing around with cyber-security related stuff.</p> |
||||
<hr> |
||||
</div> |
||||
<div class="project watchtogether"> |
||||
<div class="icon"><img src="assets/project_placeholder.svg" alt=""></div> |
||||
<h1>WatchTogether</h1> |
||||
<p>WatchTogether is a way to watch YouTube videos together with others. Originally designed for watching <a href="https://www.youtube.com/playlist?list=PLYH8WvNV1YEn_iiBMZiZ2aWugQfN1qVfM">Meme Review</a> episodes with friends, WatchTogether can also be used to watch any YouTube video. <a href="https://github.com/maikka39/WatchTogether">Github</a></p> |
||||
</div> |
||||
<div class="project superbot"> |
||||
<div class="icon"><img src="assets/project_placeholder.svg" alt=""></div> |
||||
<h1>SuperBot</h1> |
||||
<p>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 <a href="">here</a>.</p> |
||||
</div> |
||||
<div class="project toyneuralnet"> |
||||
<div class="icon"><img src="assets/project_placeholder.svg" alt=""></div> |
||||
<h1>Toy Neural Network</h1> |
||||
<p>This is a very basic Python Neural Network library based on the one built by <a href="https://shiffman.net/">Daniel Shiffman</a> in <a href="https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aCibgK1PTWWu9by6XFdCfh">this</a> playlist but translated and improved in Python Check it out on <a href="https://github.com/maikka39/Toy-Neural-Network-Py">Github</a>!</p> |
||||
</div> |
||||
<!-- |
||||
<div class="project magistra"> |
||||
<div class="icon"><img src="assets/project_placeholder.svg" alt=""></div> |
||||
<h1>Magistra</h1> |
||||
<p>A client-side Android application for the Dutch school-management system Magister. It’s based on material design, uses secure SSL connections, and is of course entirely free. <a href="https://github.com/maikka39/Magistra">Github</a></p> |
||||
</div> |
||||
--> |
||||
<div class="project invoicegenerator"> |
||||
<div class="icon"><img src="assets/project_placeholder.svg" alt=""></div> |
||||
<h1>InvoiceGenerator</h1> |
||||
<p>Using InvoiceGenerator you can easily fill in word templates with the correct prices and comments. This project was commissioned by <a href="http://www.akoestischafbouwen.nl/">Pennings akoestisch afbouwen</a>. Source: <a href="https://github.com/maikka39/InvoiceGenerator">Github</a></p> |
||||
</div> |
||||
<div class="project ctf"> |
||||
<div class="icon"><img src="assets/project_placeholder.svg" alt=""></div> |
||||
<h1>CTF</h1> |
||||
<p>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. <a href="https://medium.com/@DRX_Sicher/ctf-explained-6c7d4417305e">More info</a>.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="contact"> |
||||
<div id="contact" class="container"> |
||||
<h1>Get in Touch!</h1> |
||||
<p>Do you have a question? Contact me at <a href="mailto:info@maik.dev">info@maik.dev</a></p> |
||||
</div> |
||||
</div> |
||||
<footer> |
||||
<div class="container"> |
||||
<div class="social"> |
||||
<a href="https://twitter.com/maik_dev"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
||||
<title>Twitter</title> |
||||
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" /> |
||||
</svg></a> |
||||
<a href="https://plus.google.com/u/0/+maikka39"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
||||
<title>Google+</title> |
||||
<path d="M7.635 10.909v2.619h4.335c-.173 1.125-1.31 3.295-4.331 3.295-2.604 0-4.731-2.16-4.731-4.823 0-2.662 2.122-4.822 4.728-4.822 1.485 0 2.479.633 3.045 1.178l2.073-1.994c-1.33-1.245-3.056-1.995-5.115-1.995C3.412 4.365 0 7.785 0 12s3.414 7.635 7.635 7.635c4.41 0 7.332-3.098 7.332-7.461 0-.501-.054-.885-.12-1.265H7.635zm16.365 0h-2.183V8.726h-2.183v2.183h-2.182v2.181h2.184v2.184h2.189V13.09H24" /> |
||||
</svg></a> |
||||
<a href="https://github.com/maikka39"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
||||
<title>GitHub</title> |
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /> |
||||
</svg></a> |
||||
<a href="https://wakatime.com/@maik_dev"><svg role="img" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"> |
||||
<title>WakaTime</title> |
||||
<path d="M128,0 C57.308,0 0,57.308 0,128 C0,198.693 57.308,256 128,256 C198.693,256 256,198.693 256,128 C256,57.308 198.693,0 128,0 M128,33.805 C179.939,33.805 222.195,76.061 222.195,128 C222.195,179.94 179.939,222.195 128,222.195 C76.061,222.195 33.805,179.94 33.805,128 C33.805,76.061 76.061,33.805 128,33.805 M115.4993,155.6431 L115.3873,155.6431 C113.4353,155.6081 111.6083,154.6751 110.4343,153.1151 L81.5593,114.7321 C79.4553,111.9351 80.0173,107.9611 82.8143,105.8561 C85.6123,103.7511 89.5853,104.3131 91.6903,107.1111 L115.6833,139.0051 L122.5463,130.5271 C123.7493,129.0411 125.5603,128.1771 127.4723,128.1771 L127.4803,128.1771 C129.3973,128.1791 131.2093,129.0471 132.4103,130.5411 L139.0003,138.7281 L176.6923,90.1341 C178.8353,87.3681 182.8173,86.8651 185.5843,89.0111 C188.3493,91.1561 188.8533,95.1371 186.7073,97.9041 L144.1003,152.8371 C142.9143,154.3681 141.0883,155.2721 139.1503,155.2901 L139.0933,155.2901 C137.1743,155.2901 135.3583,154.4221 134.1553,152.9261 L127.4583,144.6071 L120.4253,153.2931 C119.2213,154.7811 117.4103,155.6431 115.4993,155.6431" /> |
||||
</svg></a> |
||||
<a href="mailto:info@maik.dev"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
||||
<title>E-Mail</title> |
||||
<path d="M24 4.5v15c0 .85-.65 1.5-1.5 1.5H21V7.387l-9 6.463-9-6.463V21H1.5C.649 21 0 20.35 0 19.5v-15c0-.425.162-.8.431-1.068C.7 3.16 1.076 3 1.5 3H2l10 7.25L22 3h.5c.425 0 .8.162 1.069.432.27.268.431.643.431 1.068z" /> |
||||
</svg></a> |
||||
</div> |
||||
<div class="copyright"> |
||||
<p class="copyright">© Maik de Kruif (maikka39). All rights reserved.</p><span class="first_span">|</span> |
||||
<p class="not_affiliated">maikka39 is not affiliated with any company.</p><span class="second_span">|</span> |
||||
<p class="trademarks">Brand and product names mentioned are trademarks of their respective companies.</p> |
||||
</div> |
||||
<div class="scroll_up"><a href="#top">⌃</a></div> |
||||
</div> |
||||
<!-- <div style="height: 80vh; background: #ffffff;"></div>--> |
||||
</footer> |
||||
</div> |
||||
<script> |
||||
function select_language(el) { |
||||
for (i = 0; i < el.children.length; i++) { |
||||
el.children[i].classList.toggle("hidden"); |
||||
} |
||||
}; |
||||
|
||||
function toggle_mobile_menu() { |
||||
document.getElementById("mobile_menu").classList.toggle("hidden"); |
||||
document.getElementById("open_mobile_nav").classList.toggle("hidden"); |
||||
document.getElementById("close_mobile_nav").classList.toggle("hidden"); |
||||
}; |
||||
|
||||
function close_menus() { |
||||
var dropdowns = document.getElementsByClassName("dropdown-content"); |
||||
var i; |
||||
for (i = 0; i < dropdowns.length; i++) { |
||||
var openDropdown = dropdowns[i]; |
||||
if (!openDropdown.classList.contains('hidden')) { |
||||
openDropdown.classList.add('hidden'); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
window.onclick = function(event) { |
||||
if (!event.target.matches('.dropbtn')) { |
||||
close_menus(); |
||||
} |
||||
}; |
||||
|
||||
window.onresize = function() { |
||||
close_menus(); |
||||
}; |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -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; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue