Basically done with home page
This commit is contained in:
parent
3da46b8e0e
commit
e57305123d
16 changed files with 303 additions and 49 deletions
|
|
@ -1,16 +0,0 @@
|
||||||
{
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"url": "/",
|
|
||||||
"name": "Home"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/about/",
|
|
||||||
"name": "About"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"url": "/blog/",
|
|
||||||
"name": "Blog"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
28
src/_data/projects.json
Normal file
28
src/_data/projects.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"projects": [
|
||||||
|
{
|
||||||
|
"name": "Mandelbrot",
|
||||||
|
"text": "A Mandelbrot renderer I made for a university course written in C#. It has multithreading, multiple color modes, and the ability to export and import renders as .mandel files, which is a file format specially created for this project.",
|
||||||
|
"photo": "/static/mandelbrot.jpg",
|
||||||
|
"link": "https://github.com/KoenDR06/UniMandelbrot"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "AulaControl",
|
||||||
|
"text": "This project aimed to control the aula at my old high school using a USB to DMX converter written in Kotlin. It played music and controlled the lights during lunchtime.",
|
||||||
|
"photo": "/static/dmx.png",
|
||||||
|
"link": "https://github.com/AVTOLZ/AulaControl"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Advent Of Code",
|
||||||
|
"text": "All of my current advent of code solutions, written in Kotlin. Some of the worst code I've written, yet I learn a lot from it.",
|
||||||
|
"photo": "/static/aoc.png",
|
||||||
|
"link": "https://github.com/KoenDR06/nix-config"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "nix-config",
|
||||||
|
"text": "The configurations for my NixOS machines. It includes configuration for all my apps, window managers, network, timezones, and more. It's also modularized so that adding a new machine with unique property is a breeze.",
|
||||||
|
"photo": "/static/nixos.svg",
|
||||||
|
"link": "https://github.com/KoenDR06/nix-config"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
{
|
|
||||||
"name": "Koen de Ruiter",
|
|
||||||
"description": "An Eleventy demo site."
|
|
||||||
}
|
|
||||||
|
|
@ -9,21 +9,26 @@
|
||||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;1,100&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;1,100&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<link rel="stylesheet" href="/styles/index.css">
|
<link rel="stylesheet" href="/styles/index.css">
|
||||||
<link rel="stylesheet" href="/styles/waterdrops.css">
|
|
||||||
|
<script src="/static/floater.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div>
|
||||||
<div class="background">
|
<div class="background">
|
||||||
<div class="fixtures">
|
<div class="fixtures">
|
||||||
<img class="fixture-photo" src="/static/fixture.png" alt="Ayrton Diablo S">
|
<img class="fixture-photo floater" src="/static/fixture.png" alt="Ayrton Diablo S">
|
||||||
<img class="fixture-photo flip" src="/static/fixture.png" alt="Ayrton Diablo S">
|
<img class="fixture-photo floater flip" src="/static/fixture.png" alt="Ayrton Diablo S">
|
||||||
|
</div>
|
||||||
|
<div class="beams">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="front-page">
|
<div class="front-page">
|
||||||
<div class="title-card">
|
<div class="title-card">
|
||||||
<h1>Koen de Ruiter</h1>
|
<h1>Koen de Ruiter</h1>
|
||||||
<h2>Developer, Lighting Designer</h2>
|
<h2>Hobby Developer</h2>
|
||||||
|
<h2>Lighting Designer</h2>
|
||||||
|
|
||||||
<div class="title-card__links">
|
<div class="title-card__links">
|
||||||
<a class="title-card__link" href="https://github.com/KoenDR06" target="_blank"><img class="title-card__image" src="/static/github.svg" alt="GitHub"></a>
|
<a class="title-card__link" href="https://github.com/KoenDR06" target="_blank"><img class="title-card__image" src="/static/github.svg" alt="GitHub"></a>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
---
|
|
||||||
permalink: /
|
|
||||||
title: Koen de Ruiter
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="project">
|
|
||||||
<img src="https://media.discordapp.net/attachments/1278669058987790386/1288879720116523100/image.png?ex=67fbd347&is=67fa81c7&hm=d7c2275e311fe803f663366e18b239ce054dba1d562c37dc2039c44f3bb83a71&=&format=webp&quality=lossless">
|
|
||||||
<div>
|
|
||||||
<h2>WebTech</h2>
|
|
||||||
<p>This is a university project I made with a group of three for a web technologies course.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--<div class="project">-->
|
|
||||||
<!-- <h2>Mandelbrot</h2>-->
|
|
||||||
<!-- <p>This is a mandelbrot renderer I wrote in C++.</p>-->
|
|
||||||
<!--</div>-->
|
|
||||||
17
src/pages/home.liquid
Normal file
17
src/pages/home.liquid
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
permalink: /
|
||||||
|
title: Koen de Ruiter
|
||||||
|
---
|
||||||
|
|
||||||
|
{% for p in projects.projects %}
|
||||||
|
<div class="project">
|
||||||
|
<img alt="Project sample photo" class="project__photo" src="{{ p.photo }}">
|
||||||
|
|
||||||
|
<div class="project__text">
|
||||||
|
<a href="{{ p.link }}" target="_blank">
|
||||||
|
<h2>{{ p.name }}</h2>
|
||||||
|
</a>
|
||||||
|
<p>{{ p.text }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
BIN
src/static/aoc.jpg
Normal file
BIN
src/static/aoc.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
src/static/aoc.png
Normal file
BIN
src/static/aoc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/static/dmx.png
Normal file
BIN
src/static/dmx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
7
src/static/floater.js
Normal file
7
src/static/floater.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
window.addEventListener("scroll", function(){
|
||||||
|
const floaters = document.querySelectorAll(".floater");
|
||||||
|
const yPos = 0 - window.scrollY;
|
||||||
|
for (const floater of floaters) {
|
||||||
|
floater.style.top = -yPos/20 + "%";
|
||||||
|
}
|
||||||
|
});
|
||||||
BIN
src/static/mandelbrot.jpg
Normal file
BIN
src/static/mandelbrot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 487 KiB |
187
src/static/nixos.svg
Normal file
187
src/static/nixos.svg
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="535"
|
||||||
|
height="535"
|
||||||
|
viewBox="0 0 501.56251 501.56249"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||||
|
sodipodi:docname="nix-snowflake-colours.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||||
|
<defs
|
||||||
|
id="defs4">
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient5562">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#699ad7;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop5564" />
|
||||||
|
<stop
|
||||||
|
id="stop5566"
|
||||||
|
offset="0.24345198"
|
||||||
|
style="stop-color:#7eb1dd;stop-opacity:1" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#7ebae4;stop-opacity:1"
|
||||||
|
offset="1"
|
||||||
|
id="stop5568" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient5053">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#415e9a;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop5055" />
|
||||||
|
<stop
|
||||||
|
id="stop5057"
|
||||||
|
offset="0.23168644"
|
||||||
|
style="stop-color:#4a6baf;stop-opacity:1" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#5277c3;stop-opacity:1"
|
||||||
|
offset="1"
|
||||||
|
id="stop5059" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient5562"
|
||||||
|
id="linearGradient4328"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(70.650339,-1055.1511)"
|
||||||
|
x1="200.59668"
|
||||||
|
y1="351.41116"
|
||||||
|
x2="290.08701"
|
||||||
|
y2="506.18814" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient5053"
|
||||||
|
id="linearGradient4330"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(864.69589,-1491.3405)"
|
||||||
|
x1="-584.19934"
|
||||||
|
y1="782.33563"
|
||||||
|
x2="-496.29703"
|
||||||
|
y2="937.71399" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.70904368"
|
||||||
|
inkscape:cx="99.429699"
|
||||||
|
inkscape:cy="195.33352"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer3"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1050"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="30"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:snap-global="true"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer3"
|
||||||
|
inkscape:label="gradient-logo"
|
||||||
|
style="display:inline;opacity:1"
|
||||||
|
transform="translate(-156.41121,933.30685)">
|
||||||
|
<g
|
||||||
|
id="g2"
|
||||||
|
transform="matrix(0.99994059,0,0,0.99994059,-0.06321798,33.188377)"
|
||||||
|
style="stroke-width:1.00006">
|
||||||
|
<path
|
||||||
|
sodipodi:nodetypes="cccccccccc"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
id="path3336-6"
|
||||||
|
d="m 309.54892,-710.38827 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8257 z"
|
||||||
|
style="opacity:1;fill:url(#linearGradient4328);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.00018;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
<use
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
transform="rotate(60,407.11155,-715.78724)"
|
||||||
|
id="use3439-6"
|
||||||
|
inkscape:transform-center-y="151.59082"
|
||||||
|
inkscape:transform-center-x="124.43045"
|
||||||
|
xlink:href="#path3336-6"
|
||||||
|
y="0"
|
||||||
|
x="0"
|
||||||
|
style="stroke-width:1.00006" />
|
||||||
|
<use
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
transform="rotate(-60,407.31177,-715.70016)"
|
||||||
|
id="use3445-0"
|
||||||
|
inkscape:transform-center-y="75.573958"
|
||||||
|
inkscape:transform-center-x="-168.20651"
|
||||||
|
xlink:href="#path3336-6"
|
||||||
|
y="0"
|
||||||
|
x="0"
|
||||||
|
style="stroke-width:1.00006" />
|
||||||
|
<use
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
transform="rotate(180,407.41868,-715.7565)"
|
||||||
|
id="use3449-5"
|
||||||
|
inkscape:transform-center-y="-139.94592"
|
||||||
|
inkscape:transform-center-x="59.669705"
|
||||||
|
xlink:href="#path3336-6"
|
||||||
|
y="0"
|
||||||
|
x="0"
|
||||||
|
style="stroke-width:1.00006" />
|
||||||
|
<path
|
||||||
|
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4330);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.00018;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="m 309.54892,-710.38827 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8256 z"
|
||||||
|
id="path4260-0"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="cccccccccc" />
|
||||||
|
<use
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
transform="rotate(120,407.33916,-716.08356)"
|
||||||
|
id="use4354-5"
|
||||||
|
xlink:href="#path4260-0"
|
||||||
|
y="0"
|
||||||
|
x="0"
|
||||||
|
style="display:inline;stroke-width:1.00006" />
|
||||||
|
<use
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
transform="rotate(-120,407.28823,-715.86995)"
|
||||||
|
id="use4362-2"
|
||||||
|
xlink:href="#path4260-0"
|
||||||
|
y="0"
|
||||||
|
x="0"
|
||||||
|
style="display:inline;stroke-width:1.00006" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.4 KiB |
|
|
@ -12,6 +12,10 @@ body {
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-left: vars.$fixture-width;
|
||||||
|
margin-right: vars.$fixture-width;
|
||||||
|
}
|
||||||
|
|
||||||
@include meta.load-css("title-card");
|
@include meta.load-css("title-card");
|
||||||
@include meta.load-css("projects");
|
@include meta.load-css("projects");
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,52 @@
|
||||||
|
|
||||||
.project {
|
.project {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
|
||||||
|
margin-bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project:nth-child(odd) {
|
||||||
|
justify-content: left;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project:nth-child(even) {
|
||||||
|
justify-content: right;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project:nth-child(odd) .project__photo {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project:nth-child(even) .project__photo {
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project h2 {
|
.project h2 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: 2em;
|
font-size: 4em;
|
||||||
|
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
color: vars.$accent-1;
|
color: vars.$accent-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project p {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__photo {
|
||||||
|
width: 500px;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__text {
|
||||||
|
max-width: 50%;
|
||||||
}
|
}
|
||||||
|
|
@ -59,6 +59,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.background {
|
.background {
|
||||||
|
z-index: -30;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
@ -67,13 +68,14 @@
|
||||||
animation: flyIn ease 2s;
|
animation: flyIn ease 2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixtures {
|
.fixtures > img {
|
||||||
display: flex;
|
position: absolute;
|
||||||
justify-content: space-between;
|
|
||||||
|
width: vars.$fixture-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixtures > img {
|
.fixtures > img.flip {
|
||||||
height: 600px;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes flyIn {
|
@keyframes flyIn {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
$bg-color: #1e222a;
|
$bg-color: #1e222a;
|
||||||
$primary: #80a0c0;
|
$primary: #80a0c0;
|
||||||
$secondary: #4f6175;
|
$secondary: #4f6175;
|
||||||
$accent-1: #b48ead;
|
$accent-1: #b48ead;
|
||||||
|
|
||||||
|
$fixture-width: 400px;
|
||||||
Loading…
Add table
Add a link
Reference in a new issue