clean up, fix layout on mobile, fix typos

This commit is contained in:
Crispy 2022-05-08 16:29:27 +02:00
parent 86cab62b4e
commit feac2d83c1
9 changed files with 71 additions and 58 deletions

View file

@ -14,7 +14,7 @@
</header> </header>
<main> <main>
<h1>Blender creations</h1> <h1>Blender creations</h1>
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p> <p>I have been using Blender since around August 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
<h2>Alien Creatures animation</h2> <h2>Alien Creatures animation</h2>
<p>January 2022</p> <p>January 2022</p>

View file

@ -13,8 +13,11 @@
<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a> <a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
</header> </header>
<main> <main>
<h1>Hello!</h1> <section id="introduction">
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects in an easier to see way compared to just github.</p> <h1>Hello!</h1>
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects.</p>
<p>You can find all my code projects on <a href="https://github.com/CrispyPin">GitHub</a> and all published games are available on <a href="https://crispypin.itch.io">itch.io</a></p>
</section>
<section id="voxels"> <section id="voxels">
<h2><a href="/voxels">Voxel engine in godot-rust</a></h2> <h2><a href="/voxels">Voxel engine in godot-rust</a></h2>
@ -32,32 +35,34 @@
OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021. OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021.
</p> </p>
<p> <p>
I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard. I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had Linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.
</p> </p>
</section> </section>
<section id="blender"> <section id="blender">
<h2><a href="/blender">Blender creations</a></h2> <h2><a href="/blender">Blender creations</a></h2>
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p> <p>I have been using Blender since around August 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
<img src="/blender/shork_wallpaper_preview.png" alt=""> <img src="/blender/shork_wallpaper_preview.png" alt="">
</section> </section>
<section id="voxel-raymarch"> <section id="voxel-raymarch">
<h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2> <h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
<a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a> <p>Source: <a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a></p>
<p>A raymarched voxel renderer made with a Godot shader.</p>
<img src="/projects/raymarched-voxels.png" alt=""> <img src="/projects/raymarched-voxels.png" alt="">
</section> </section>
<section id="gol-wallpaper"> <section id="gol-wallpaper">
<h2><a href="https://gol.crispypin.cc/">Game of life wallpaper</a></h2> <h2><a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">Game of Life wallpaper</a></h2>
<p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p> <p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p>
<p>See live here: <a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">gol.crispypin.cc</a></p>
<p>Click the title to see it live or go to <a href="https://gol.crispypin.cc/">gol.crispypin.cc</a></p>
<img src="/projects/gol.png" alt=""> <img src="/projects/gol.png" alt="">
</section> </section>
<section id="fractals"> <section id="fractals">
<h2><a href="/fractals">Fractals</a></h2> <h2><a href="/fractals">Fractals</a></h2>
While I was learning web development and javascript I made a page with fractals. I thought it was interesting enough to keep here. While I was learning web development and JavaScript I made a page with fractals. I thought it was interesting enough to keep here.
</section> </section>
</main> </main>

View file

@ -1,21 +1,27 @@
body { body {
font-family: sans-serif; font-family: sans-serif;
background-color: #111; background-color: #080808;
color: #fff; color: #fff;
display: -ms-grid;
display: grid;
-ms-grid-rows: 50px 1fr auto;
grid-template-rows: 50px 1fr auto;
margin: 0; margin: 0;
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
-webkit-box-pack: center; -webkit-box-pack: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
} }
main { main {
padding: 0 32px 64px; padding: 0 16px 64px;
width: 800px; width: 800px;
background-color: #222; margin-left: auto;
margin-right: auto;
max-width: 800px;
background-color: #181818;
}
header {
text-align: center;
} }
a:link { a:link {
@ -35,14 +41,7 @@ a:visited {
color: #fff; color: #fff;
} }
header {
grid-column: 1 / -1;
background-color: #111;
padding: 0;
}
footer { footer {
grid-column: 1 / -1;
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
text-align: center; text-align: center;
@ -55,4 +54,8 @@ footer p {
img { img {
max-width: 800px; max-width: 800px;
} }
video {
max-width: 800px;
}
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

View file

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "AAOA,AAAA,IAAI,CAAC;EACJ,WAAW,EAAE,UAAU;EACvB,gBAAgB,EATP,IAAI;EAUb,KAAK,EARI,IAAI;EAUb,OAAO,EAAE,IAAI;EACb,kBAAkB,EAAE,aAAa;EAEjC,MAAM,EAAE,CAAC;EACT,eAAe,EAAE,MAAM;CACvB;;AAED,AAAA,IAAI,CAAC;EACJ,OAAO,EAAE,WAAY;EAErB,KAAK,EAlBO,KAAK;EAoBjB,gBAAgB,EAvBJ,IAAI;CAwBhB;;AAED,AAAA,CAAC,AAAA,KAAK,CAAC;EACN,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,CAAC,AAAA,QAAQ,CAAC;EACT,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,WAAW,CAAC,CAAC,CAAC;EACb,eAAe,EAAE,IAAI;EACrB,KAAK,EAnCI,IAAI;CAuCb;;AAND,AAGC,WAHU,CAAC,CAAC,AAGX,QAAQ,CAAC;EACT,KAAK,EArCG,IAAI;CAsCZ;;AAGF,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,MAAM;EACnB,gBAAgB,EA7CP,IAAI;EA8Cb,OAAO,EAAE,CAAC;CACV;;AAED,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;CAIlB;;AARD,AAKC,MALK,CAKL,CAAC,CAAC;EACD,MAAM,EAAE,GAAG;CACX;;AAGF,AAAA,GAAG,CAAC;EACH,SAAS,EAxDG,KAAK;CAyDjB", "mappings": "AAOA,AAAA,IAAI,CAAC;EACJ,WAAW,EAAE,UAAU;EACvB,gBAAgB,EATP,OAAO;EAUhB,KAAK,EARI,IAAI;EAUb,MAAM,EAAE,CAAC;EACT,SAAS,EAAE,WAAW;EACtB,eAAe,EAAE,MAAM;CACvB;;AAED,AAAA,IAAI,CAAC;EACJ,OAAO,EAAE,WAAW;EACpB,KAAK,EAfO,KAAK;EAgBjB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,SAAS,EAlBG,KAAK;EAmBjB,gBAAgB,EAtBJ,OAAO;CAuBnB;;AAED,AAAA,MAAM,CAAC;EACN,UAAU,EAAE,MAAM;CAClB;;AAED,AAAA,CAAC,AAAA,KAAK,CAAC;EACN,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,CAAC,AAAA,QAAQ,CAAC;EACT,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,WAAW,CAAC,CAAC,CAAC;EACb,eAAe,EAAE,IAAI;EACrB,KAAK,EAtCI,IAAI;CA0Cb;;AAND,AAGC,WAHU,CAAC,CAAC,AAGX,QAAQ,CAAC;EACT,KAAK,EAxCG,IAAI;CAyCZ;;AAGF,AAAA,MAAM,CAAC;EACN,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;CAIlB;;AAPD,AAIC,MAJK,CAIL,CAAC,CAAC;EACD,MAAM,EAAE,GAAG;CACX;;AAGF,AAAA,GAAG,CAAC;EACH,SAAS,EApDG,KAAK;CAqDjB;;AAED,AAAA,KAAK,CAAC;EACL,SAAS,EAxDG,KAAK;CAyDjB",
"sources": [ "sources": [
"style.scss" "style.scss"
], ],

View file

@ -1,5 +1,5 @@
$main-bg: #111; $main-bg: #080808;
$content-bg: #222; $content-bg: #181818;
$main-fg: #fff; $main-fg: #fff;
$page-width: 800px; $page-width: 800px;
@ -10,21 +10,24 @@ body {
background-color: $main-bg; background-color: $main-bg;
color: $main-fg; color: $main-fg;
display: grid;
grid-template-rows: 50px 1fr auto;
margin: 0; margin: 0;
min-width: min-content;
justify-content: center; justify-content: center;
} }
main { main {
padding: 0 32px 64px ; padding: 0 16px 64px;
// grid-column: 2 / -2;
width: $page-width; width: $page-width;
// justify-self: center; margin-left: auto;
margin-right: auto;
max-width: $page-width;
background-color: $content-bg; background-color: $content-bg;
} }
header {
text-align: center;
}
a:link { a:link {
color: #8bf; color: #8bf;
} }
@ -41,14 +44,7 @@ a:visited {
} }
} }
header {
grid-column: 1 / -1;
background-color: $main-bg;
padding: 0;
}
footer { footer {
grid-column: 1 / -1;
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
text-align: center; text-align: center;
@ -61,3 +57,7 @@ img {
max-width: $page-width; max-width: $page-width;
} }
video {
max-width: $page-width;
}

View file

@ -16,17 +16,17 @@
<h1>Godot-Rust Voxel Engine</h1> <h1>Godot-Rust Voxel Engine</h1>
<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a> <a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
<p> <p>
I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems. I am making a voxel engine in rust to learn Rust and godot-rust as well as explore voxel systems.
</p> </p>
<video src="demo.mp4" controls height="320">video not supported :(</video> <video src="demo.mp4" controls>video not supported :(</video>
<p>Demo of fast terrain generation</p> <p>Demo of fast terrain generation</p>
<video src="demo2.mp4" controls height="320">video not supported :(</video> <video src="demo2.mp4" controls>video not supported :(</video>
<p>Greedy mesh visualisation</p> <p>Greedy mesh visualisation</p>
<h3>Greedy mesh algorithm</h3> <h2 id="greedy-mesh" class="title-link"><a href="#greedy-mesh">Greedy mesh algorithm</a></h2>
<p>Disclaimer: this is not done. <b>I will write the rest of this soon™</b></p> <p>Disclaimer: this is not done. <b>I will write the rest of this soon™</b></p>
<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start</p> <p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start.</p>
<p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p> <p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p>

View file

@ -8,7 +8,7 @@
<include header.html/> <include header.html/>
<main> <main>
<h1>Blender creations</h1> <h1>Blender creations</h1>
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p> <p>I have been using Blender since around August 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
<h2>Alien Creatures animation</h2> <h2>Alien Creatures animation</h2>
<p>January 2022</p> <p>January 2022</p>

View file

@ -7,8 +7,11 @@
<body> <body>
<include header.html/> <include header.html/>
<main> <main>
<h1>Hello!</h1> <section id="introduction">
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects in an easier to see way compared to just github.</p> <h1>Hello!</h1>
<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects.</p>
<p>You can find all my code projects on <a href="https://github.com/CrispyPin">GitHub</a> and all published games are available on <a href="https://crispypin.itch.io">itch.io</a></p>
</section>
<section id="voxels"> <section id="voxels">
<h2><a href="/voxels">Voxel engine in godot-rust</a></h2> <h2><a href="/voxels">Voxel engine in godot-rust</a></h2>
@ -26,32 +29,34 @@
OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021. OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021.
</p> </p>
<p> <p>
I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard. I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had Linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.
</p> </p>
</section> </section>
<section id="blender"> <section id="blender">
<h2><a href="/blender">Blender creations</a></h2> <h2><a href="/blender">Blender creations</a></h2>
<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p> <p>I have been using Blender since around August 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
<img src="/blender/shork_wallpaper_preview.png" alt=""> <img src="/blender/shork_wallpaper_preview.png" alt="">
</section> </section>
<section id="voxel-raymarch"> <section id="voxel-raymarch">
<h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2> <h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
<a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a> <p>Source: <a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a></p>
<p>A raymarched voxel renderer made with a Godot shader.</p>
<img src="/projects/raymarched-voxels.png" alt=""> <img src="/projects/raymarched-voxels.png" alt="">
</section> </section>
<section id="gol-wallpaper"> <section id="gol-wallpaper">
<h2><a href="https://gol.crispypin.cc/">Game of life wallpaper</a></h2> <h2><a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">Game of Life wallpaper</a></h2>
<p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p> <p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p>
<p>See live here: <a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">gol.crispypin.cc</a></p>
<p>Click the title to see it live or go to <a href="https://gol.crispypin.cc/">gol.crispypin.cc</a></p>
<img src="/projects/gol.png" alt=""> <img src="/projects/gol.png" alt="">
</section> </section>
<section id="fractals"> <section id="fractals">
<h2><a href="/fractals">Fractals</a></h2> <h2><a href="/fractals">Fractals</a></h2>
While I was learning web development and javascript I made a page with fractals. I thought it was interesting enough to keep here. While I was learning web development and JavaScript I made a page with fractals. I thought it was interesting enough to keep here.
</section> </section>
</main> </main>

View file

@ -10,17 +10,17 @@
<h1>Godot-Rust Voxel Engine</h1> <h1>Godot-Rust Voxel Engine</h1>
<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a> <a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
<p> <p>
I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems. I am making a voxel engine in rust to learn Rust and godot-rust as well as explore voxel systems.
</p> </p>
<video src="demo.mp4" controls height="320">video not supported :(</video> <video src="demo.mp4" controls>video not supported :(</video>
<p>Demo of fast terrain generation</p> <p>Demo of fast terrain generation</p>
<video src="demo2.mp4" controls height="320">video not supported :(</video> <video src="demo2.mp4" controls>video not supported :(</video>
<p>Greedy mesh visualisation</p> <p>Greedy mesh visualisation</p>
<h3>Greedy mesh algorithm</h3> <h2 id="greedy-mesh" class="title-link"><a href="#greedy-mesh">Greedy mesh algorithm</a></h2>
<p>Disclaimer: this is not done. <b>I will write the rest of this soon™</b></p> <p>Disclaimer: this is not done. <b>I will write the rest of this soon™</b></p>
<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start</p> <p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start.</p>
<p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p> <p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p>