Initial Commit

This commit is contained in:
KoenDR06 2025-04-13 02:47:46 +02:00
commit 3da46b8e0e
16 changed files with 279 additions and 0 deletions

5
.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
.idea/
_site/
node_modules/
package-lock.json

21
LICENSE Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 Mr Horseman
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

12
eleventy.config.js Normal file
View file

@ -0,0 +1,12 @@
export default function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("src/static/");
eleventyConfig.addWatchTarget("src/styles/");
return {
dir: {
input: 'src',
output: '_site'
}
};
}

21
package.json Normal file
View file

@ -0,0 +1,21 @@
{
"name": "portfolio",
"version": "0.0.0",
"author": "KoenDR06",
"license": "MIT",
"type": "module",
"dependencies": {
"@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-plugin-handlebars": "^1.0.0",
"handlebars": "^4.7.8",
"markdown-it": "^14.1.0",
"sass": "^1.86.3"
},
"scripts": {
"dev": "npx @11ty/eleventy --input src --serve",
"dev:sass": "npx sass src/styles:_site/styles --watch",
"build": "npx @11ty/eleventy --input src",
"build:sass": "npx sass src/styles:_site/styles"
}
}

16
src/_data/nav.json Normal file
View file

@ -0,0 +1,16 @@
{
"items": [
{
"url": "/",
"name": "Home"
},
{
"url": "/about/",
"name": "About"
},
{
"url": "/blog/",
"name": "Blog"
}
]
}

4
src/_data/site.json Normal file
View file

@ -0,0 +1,4 @@
{
"name": "Koen de Ruiter",
"description": "An Eleventy demo site."
}

40
src/_includes/base.liquid Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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/waterdrops.css">
</head>
<body>
<div>
<div class="background">
<div class="fixtures">
<img class="fixture-photo" src="/static/fixture.png" alt="Ayrton Diablo S">
<img class="fixture-photo flip" src="/static/fixture.png" alt="Ayrton Diablo S">
</div>
</div>
<div class="front-page">
<div class="title-card">
<h1>Koen de Ruiter</h1>
<h2>Developer, Lighting Designer</h2>
<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://www.linkedin.com/in/koen-de-ruiter-20a9a2343/" target="_blank"><img class="title-card__image" src="/static/linkedin.svg" alt="LinkedIn"></a>
</div>
</div>
</div>
</div>
<main>
{{ content }}
</main>
</body>
</html>

17
src/pages/home.html Normal file
View file

@ -0,0 +1,17 @@
---
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>-->

4
src/pages/pages.json Normal file
View file

@ -0,0 +1,4 @@
{
"layout": "base",
"permalink": "/{{ title | slug }}/"
}

BIN
src/static/fixture.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 368 KiB

4
src/static/github.svg Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE svg>
<svg width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
<g> <g stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#bf616a"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]"> </path> </g> </g> </g> </g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

11
src/static/linkedin.svg Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#bf616a" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-271 283.9 256 235.1" xml:space="preserve" width="800px" height="800px" stroke="#bf616a">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <g> <rect x="-264.4" y="359.3" width="49.9" height="159.7"/> <path d="M-240.5,283.9c-18.4,0-30.5,11.9-30.5,27.7c0,15.5,11.7,27.7,29.8,27.7h0.4c18.8,0,30.5-12.3,30.4-27.7 C-210.8,295.8-222.1,283.9-240.5,283.9z"/> <path d="M-78.2,357.8c-28.6,0-46.5,15.6-49.8,26.6v-25.1h-56.1c0.7,13.3,0,159.7,0,159.7h56.1v-86.3c0-4.9-0.2-9.7,1.2-13.1 c3.8-9.6,12.1-19.6,27-19.6c19.5,0,28.3,14.8,28.3,36.4V519h56.6v-88.8C-14.9,380.8-42.7,357.8-78.2,357.8z"/> </g> </g>
</svg>

After

Width:  |  Height:  |  Size: 1,022 B

17
src/styles/index.scss Normal file
View file

@ -0,0 +1,17 @@
@use "sass:meta";
@use "vars";
body {
margin: 0;
font-family: "JetBrains Mono", serif;
background-color: vars.$bg-color;
color: vars.$primary;
}
.flip {
transform: scaleX(-1);
}
@include meta.load-css("title-card");
@include meta.load-css("projects");

14
src/styles/projects.scss Normal file
View file

@ -0,0 +1,14 @@
@use "vars";
.project {
display: flex;
justify-content: space-evenly;
}
.project h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 2em;
color: vars.$accent-1;
}

View file

@ -0,0 +1,89 @@
@use "vars";
.front-page {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
animation: flyIn ease 2s;
}
.title-card {
height: fit-content;
color: vars.$primary;
border: 8px solid vars.$secondary;
border-radius: 15px;
background-color: vars.$bg-color;
padding: 20px;
text-align: center;
font-size: 2rem;
}
.title-card h1 {
margin-bottom: 0;
margin-top: 0;
font-size: 2.5em;
}
.title-card h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 1em;
color: vars.$accent-1;
}
.title-card__links {
display: flex;
justify-content: center;
margin-top: 20px;
}
.title-card__link {
margin-left: 15px;
margin-right: 15px;
}
.title-card__image {
width: 50px;
height: auto;
}
.background {
position: absolute;
width: 100vw;
height: 100vh;
animation: flyIn ease 2s;
}
.fixtures {
display: flex;
justify-content: space-between;
}
.fixtures > img {
height: 600px;
}
@keyframes flyIn {
0% {
opacity: 0;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}

4
src/styles/vars.scss Normal file
View file

@ -0,0 +1,4 @@
$bg-color: #1e222a;
$primary: #80a0c0;
$secondary: #4f6175;
$accent-1: #b48ead;