gallery
This commit is contained in:
parent
0c7e54f9bf
commit
a5b81c9e95
13 changed files with 206 additions and 4 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,5 +1,6 @@
|
||||||
.idea/
|
.idea/
|
||||||
_site/
|
_site/
|
||||||
node_modules/
|
node_modules/
|
||||||
|
src/static/gallery/
|
||||||
|
|
||||||
package-lock.json
|
package-lock.json
|
||||||
13
src/_data/photos.json
Normal file
13
src/_data/photos.json
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"photos": [
|
||||||
|
"001.jpg",
|
||||||
|
"002.jpg",
|
||||||
|
"003.jpg",
|
||||||
|
"004.jpg",
|
||||||
|
"005.jpg",
|
||||||
|
"006.jpg",
|
||||||
|
"007.jpg",
|
||||||
|
"008.jpg",
|
||||||
|
"009.jpg"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
"link": "https://github.com/KoenDR06/nix-config"
|
"link": "https://github.com/KoenDR06/nix-config"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "nix-config",
|
"name": "NixOS 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.",
|
"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",
|
"photo": "/static/nixos.svg",
|
||||||
"link": "https://github.com/KoenDR06/nix-config"
|
"link": "https://github.com/KoenDR06/nix-config"
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,6 @@
|
||||||
<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">
|
||||||
|
|
||||||
<script src="/static/floater.js" defer></script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -31,6 +29,7 @@
|
||||||
<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>
|
||||||
<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>
|
<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>
|
||||||
|
<a class="title-card__link" href="/gallery"><img class="title-card__image" src="/static/gallery.svg" alt="LinkedIn"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
19
src/_includes/empty.liquid
Normal file
19
src/_includes/empty.liquid
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!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/photos.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
{{ content }}
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
src/pages/gallery.liquid
Normal file
47
src/pages/gallery.liquid
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
---
|
||||||
|
permalink: /gallery.html
|
||||||
|
title: Gallery
|
||||||
|
layout: empty
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="slideshow">
|
||||||
|
<img alt="Photo" src="/static/gallery/{{ photos.photos[0] }}">
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<button id="prev"><img src="/static/prev.svg" class="control" alt="Previous photo"></button>
|
||||||
|
<button id="next"><img src="/static/next.svg" class="control" alt="Next photo"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const img = document.querySelector('.slideshow > img');
|
||||||
|
const photos = [
|
||||||
|
{% for i in photos.photos %}
|
||||||
|
'{{ i }}',
|
||||||
|
{% endfor %}
|
||||||
|
];
|
||||||
|
|
||||||
|
let i = 1;
|
||||||
|
|
||||||
|
function next() {
|
||||||
|
img.src = `/static/gallery/${photos[i++]}`;
|
||||||
|
if (i >= photos.length) {
|
||||||
|
i = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function prev() {
|
||||||
|
img.src = `/static/gallery/${photos[i--]}`;
|
||||||
|
if (i < 0) {
|
||||||
|
i = photos.length-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
next()
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
document.querySelector('#next').addEventListener('click', next);
|
||||||
|
document.querySelector('#prev').addEventListener('click', prev);
|
||||||
|
</script>
|
||||||
|
|
@ -3,6 +3,7 @@ permalink: /
|
||||||
title: Koen de Ruiter
|
title: Koen de Ruiter
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<script src="/static/floater.js" defer></script>
|
||||||
{% for p in projects.projects %}
|
{% for p in projects.projects %}
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<img alt="Project sample photo" class="project__photo" src="{{ p.photo }}">
|
<img alt="Project sample photo" class="project__photo" src="{{ p.photo }}">
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
function clamp(value, min, max) { return Math.max( min, Math.min(value, max) ); }
|
function clamp(value, min, max) { return Math.max( min, Math.min(value, max) ); }
|
||||||
|
|
||||||
const body = document.querySelector('body');
|
|
||||||
const beams = document.querySelector(".beams");
|
const beams = document.querySelector(".beams");
|
||||||
|
|
||||||
window.addEventListener("scroll", function(){
|
window.addEventListener("scroll", function(){
|
||||||
|
|
|
||||||
9
src/static/gallery.svg
Normal file
9
src/static/gallery.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!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" width="800px" height="800px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" stroke="#bf616a">
|
||||||
|
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||||
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<g id="SVGRepo_iconCarrier">
|
||||||
|
<path d="M 7.7148 49.5742 L 48.2852 49.5742 C 53.1836 49.5742 55.6446 47.1367 55.6446 42.3086 L 55.6446 13.6914 C 55.6446 8.8633 53.1836 6.4258 48.2852 6.4258 L 7.7148 6.4258 C 2.8398 6.4258 .3554 8.8398 .3554 13.6914 L .3554 42.3086 C .3554 47.1602 2.8398 49.5742 7.7148 49.5742 Z M 39.2851 27.9414 C 38.2304 27.0039 37.0351 26.5118 35.7695 26.5118 C 34.4570 26.5118 33.3085 26.9571 32.2304 27.9180 L 21.6366 37.3867 L 17.3007 33.4492 C 16.3163 32.5820 15.2617 32.1133 14.1366 32.1133 C 13.1054 32.1133 12.0976 32.5586 11.1366 33.4258 L 4.1288 39.7305 L 4.1288 13.8789 C 4.1288 11.4414 5.4413 10.1992 7.7851 10.1992 L 48.2147 10.1992 C 50.5350 10.1992 51.8708 11.4414 51.8708 13.8789 L 51.8708 39.7539 Z M 17.8163 28.1992 C 20.8398 28.1992 23.3241 25.7149 23.3241 22.6680 C 23.3241 19.6445 20.8398 17.1367 17.8163 17.1367 C 14.7695 17.1367 12.2851 19.6445 12.2851 22.6680 C 12.2851 25.7149 14.7695 28.1992 17.8163 28.1992 Z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
46
src/static/next.svg
Normal file
46
src/static/next.svg
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
sodipodi:docname="backward-fast-svgrepo-com(1).svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1">
|
||||||
|
<inkscape:page
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
id="page2"
|
||||||
|
margin="0"
|
||||||
|
bleed="0" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<g
|
||||||
|
id="SVGRepo_iconCarrier">
|
||||||
|
<path
|
||||||
|
d="m 21.000073,5 v 14 m -9,-11.671 v 9.342 c 0,1.0657 0,1.5985 0.2185,1.8722 0.1899,0.238 0.478,0.3765 0.7826,0.3762 0.3502,-4e-4 0.7662,-0.3333 1.59841,-0.999 l 4.27702,-3.4216 c 1.06769,-0.8542 1.60153,-1.2812 1.79481,-1.7972 0.16946,-0.4524 0.16946,-0.9508 0,-1.4032 -0.19328,-0.516 -0.72712,-0.943 -1.79482,-1.79718 l -4.27701,-3.42161 c -0.83221,-0.66574 -1.24821,-0.99861 -1.59841,-0.99898 -0.3046,-3.3e-4 -0.5927,0.13813 -0.7826,0.37614 -0.2185,0.27368 -0.2185,0.80653 -0.2185,1.87223 z m -8.9999997,0 v 9.342 c 0,1.0657 0,1.5985 0.2185,1.8722 0.1899,0.238 0.478,0.3765 0.7826,0.3762 0.3502,-4e-4 0.7662,-0.3333 1.5984,-0.999 l 4.277,-3.4216 c 1.0676997,-0.8542 1.6015997,-1.2812 1.7947997,-1.7972 0.1695,-0.4524 0.1695,-0.9508 0,-1.4032 -0.1932,-0.516 -0.7271,-0.943 -1.7947997,-1.79718 l -4.277,-3.42161 c -0.8322,-0.66574 -1.2482,-0.99861 -1.5984,-0.99898 -0.3046,-3.3e-4 -0.5927,0.13813 -0.7826,0.37614 -0.2185,0.27368 -0.2185,0.80653 -0.2185,1.87223 z"
|
||||||
|
stroke="#80a0c0"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
id="path1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
7
src/static/prev.svg
Normal file
7
src/static/prev.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<!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 width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(1, 0, 0, 1, 0, 0)" stroke="#80a0c0">
|
||||||
|
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||||
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<g id="SVGRepo_iconCarrier"> <path d="M3 5V19M12 7.329V16.671C12 17.7367 12 18.2695 11.7815 18.5432C11.5916 18.7812 11.3035 18.9197 10.9989 18.9194C10.6487 18.919 10.2327 18.5861 9.40049 17.9204L5.12347 14.4988C4.05578 13.6446 3.52194 13.2176 3.32866 12.7016C3.1592 12.2492 3.1592 11.7508 3.32866 11.2984C3.52194 10.7824 4.05578 10.3554 5.12348 9.50122L9.40049 6.07961C10.2327 5.41387 10.6487 5.081 10.9989 5.08063C11.3035 5.0803 11.5916 5.21876 11.7815 5.45677C12 5.73045 12 6.2633 12 7.329ZM21 7.329V16.671C21 17.7367 21 18.2695 20.7815 18.5432C20.5916 18.7812 20.3035 18.9197 19.9989 18.9194C19.6487 18.919 19.2327 18.5861 18.4005 17.9204L14.1235 14.4988C13.0558 13.6446 12.5219 13.2176 12.3287 12.7016C12.1592 12.2492 12.1592 11.7508 12.3287 11.2984C12.5219 10.7824 13.0558 10.3554 14.1235 9.50122L18.4005 6.07961C19.2327 5.41387 19.6487 5.081 19.9989 5.08063C20.3035 5.0803 20.5916 5.21876 20.7815 5.45677C21 5.73045 21 6.2633 21 7.329Z" stroke="#80a0c0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
60
src/styles/photos.scss
Normal file
60
src/styles/photos.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
@use "vars";
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "JetBrains Mono", serif;
|
||||||
|
background-color: vars.$bg-color;
|
||||||
|
color: vars.$primary;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
animation: flyIn ease-out vars.$load-speed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow {
|
||||||
|
border: 5px solid vars.$secondary;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 80vh;
|
||||||
|
width: auto;
|
||||||
|
max-width: 80vw;
|
||||||
|
|
||||||
|
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- CONTROLS ---
|
||||||
|
.control {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: inherit;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-top: 10px;
|
||||||
|
border: 5px solid vars.$secondary;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
.project {
|
.project {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue