Skip to content

Commit

Permalink
Honor prefers-reduced-motion on landing page and make motion more vis…
Browse files Browse the repository at this point in the history 
…ible otherwise
  • Loading branch information
@DeclanChidlow
DeclanChidlow committed Feb 14, 2024
1 parent 952914f commit db99604
Show file tree
Hide file tree
Showing 48 changed files with 87 additions and 58 deletions.
2 changes: 1 addition & 1 deletion blog/feed/export/A_Year_With_The_Framework_Laptop_13.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/Answer_Padding.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/Everything_Is_Chrome.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/Halo_My_Thoughts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/I_Hate_My_Nokia.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/LibreOffice_Setup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/Making_Windows_Usable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/Prematurely_Pulling_The_Plug_On_3G.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/Revolt_Promotion.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/School_Internet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
2 changes: 1 addition & 1 deletion blog/feed/export/Welcome.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

<script src="/assets/prism.js"></script>
<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
<meta property="og:type" content="article" />
<meta property="article:author" content="Declan Chidlow" />
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />

<script src="https://giscus.app/client.js" data-repo="DeclanChidlow/vale.rocks" data-repo-id="R_kgDOGKfOVg"
data-category="Comments" data-category-id="DIC_kwDOGKfOVs4CY4vS" data-mapping="title" data-strict="1"
Expand Down
22 changes: 9 additions & 13 deletions config/global/assets/puddle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class AsciiNode {

// ASCII shades and their corresponding threshold values
this.asciiShades = [..." .,:-=+*#%@"];
this.asciiThreshold = this.asciiShades.map((el, index) => index * 100.0 / (this.asciiShades.length - 1));
this.asciiThreshold = this.asciiShades.map((el, index) => (index * 100.0) / (this.asciiShades.length - 1));
}

// Attach click and mousemove listeners
Expand Down Expand Up @@ -134,7 +134,7 @@ class PuddleData {
// Default simulation parameters
this.maxRippleStrength = 100.0;
this.forceDampeningRatio = 0.85; // Force dampening percent
this.forceCutOff = 2; // Axial force less than this is set to 0
this.forceCutOff = 2; // Axial force less than this is set to 0
this.rippleOnMove = true;
}

Expand All @@ -155,15 +155,13 @@ class PuddleData {

// Get node at specific coordinates in the grid
getNode(xx, yy) {
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows)
return undefined;
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows) return undefined;
return this.nodeList[yy * this.numCols + xx];
}

// Add node to the update queue if not already added
addToUpdateQueue(xx, yy) {
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows)
return;
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows) return;
let index = yy * this.numCols + xx;
if (!this.nodeList[index].isAddedToUpdate) {
this.updateQueue.push(index);
Expand Down Expand Up @@ -221,7 +219,7 @@ class Puddle {
this.setupDefaultOptions();

// Event listener for window resize
window.addEventListener('resize', () => this.resizeHandler());
window.addEventListener("resize", () => this.resizeHandler());
}

// Set the style of nodes
Expand Down Expand Up @@ -250,7 +248,7 @@ class Puddle {
this.elementWidth = this.parentNode.scrollWidth;
this.elementHeight = this.parentNode.scrollHeight;
let lesserDimension = this.elementHeight < this.elementWidth ? this.elementHeight : this.elementWidth;
this.nodeSize = lesserDimension * 3 / 100;
this.nodeSize = (lesserDimension * 3) / 100;
if (this.elementHeight) {
this.numRows = Math.floor(this.elementHeight / this.nodeSize);
this.numCols = Math.floor(this.elementWidth / this.nodeSize);
Expand Down Expand Up @@ -278,7 +276,7 @@ class Puddle {
clearInterval(this.updateLoop);
this.data.refresh(this.numRows, this.numCols);

this.parentNode.innerHTML = '';
this.parentNode.innerHTML = "";
this.parentNode.style.cssText = `font-family: "Fira Code, monospace"; display: grid; grid-template-columns: repeat(${this.numCols}, ${this.nodeSize}px); grid-template-rows: repeat(${this.numRows}, ${this.nodeSize}px);`;

for (let yy = 0; yy < this.numRows; ++yy) {
Expand Down Expand Up @@ -318,9 +316,7 @@ class Puddle {

// Try to update elements in the simulation
tryUpdateElements() {
if (this.data.isUpdateDone)
this.data.updateElements()
else
console.log("Previous update not completed, skipping update");
if (this.data.isUpdateDone) this.data.updateElements();
else console.log("Previous update not completed, skipping update");
}
}
20 changes: 14 additions & 6 deletions config/pages/index/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
}

#puddle-container {
color: var(--grey);
color: var(--bright_grey);
position: absolute;
top: 0;
left: 0;
Expand Down Expand Up @@ -79,17 +79,25 @@
<div id="landingbody">

## About

Ahoy! I'm Declan Chidlow, a passionate student of frontend software development and graphic design. I like to think I've got an eye for aesthetics, and I've most definitely got a love for learning. My goal is to create digital experiences that are both functional and visually appealing.

When I'm not bodging together some script or reinventing the wheel, you might find me cruising around on my unicycle. Alternatively, you may find me writing up some form of article for this very website, doing some gaming, inadvertently converting an otherwise functional piece of tech into a paperweight, or browsing the crevaces of cyberspace. Within this digital domain, I document my thoughts, musings, and otherwise unhinged ramblings. I hope you stick around and find at least *something* intriguing here. I've put a lot of time into it.
When I'm not bodging together some script or reinventing the wheel, you might find me cruising around on my unicycle. Alternatively, you may find me writing up some form of article for this very website, doing some gaming, inadvertently converting an otherwise functional piece of tech into a paperweight, or browsing the crevaces of cyberspace. Within this digital domain, I document my thoughts, musings, and otherwise unhinged ramblings. I hope you stick around and find at least _something_ intriguing here. I've put a lot of time into it.

## Let's Connect

Impressed by my work? Have a project in mind? I'd love to hear about it! Don't hesitate to reach out. Visit my [contact page](/contact) and let's start a conversation.
</div>

<script src="/assets/puddle.js"></script>
</div>

<script>
var puddle = new Puddle("#puddle-container");
puddle.setNodeStyle("ascii");
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
var script = document.createElement('script');
script.src = "/assets/puddle.js";
script.onload = function() {
var puddle = new Puddle("#puddle-container");
puddle.setNodeStyle("ascii");
};
document.body.appendChild(script);
}
</script>
1 change: 1 addition & 0 deletions docs/404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

Expand Down
22 changes: 9 additions & 13 deletions docs/assets/puddle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class AsciiNode {

// ASCII shades and their corresponding threshold values
this.asciiShades = [..." .,:-=+*#%@"];
this.asciiThreshold = this.asciiShades.map((el, index) => index * 100.0 / (this.asciiShades.length - 1));
this.asciiThreshold = this.asciiShades.map((el, index) => (index * 100.0) / (this.asciiShades.length - 1));
}

// Attach click and mousemove listeners
Expand Down Expand Up @@ -134,7 +134,7 @@ class PuddleData {
// Default simulation parameters
this.maxRippleStrength = 100.0;
this.forceDampeningRatio = 0.85; // Force dampening percent
this.forceCutOff = 2; // Axial force less than this is set to 0
this.forceCutOff = 2; // Axial force less than this is set to 0
this.rippleOnMove = true;
}

Expand All @@ -155,15 +155,13 @@ class PuddleData {

// Get node at specific coordinates in the grid
getNode(xx, yy) {
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows)
return undefined;
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows) return undefined;
return this.nodeList[yy * this.numCols + xx];
}

// Add node to the update queue if not already added
addToUpdateQueue(xx, yy) {
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows)
return;
if (xx < 0 || xx >= this.numCols || yy < 0 || yy >= this.numRows) return;
let index = yy * this.numCols + xx;
if (!this.nodeList[index].isAddedToUpdate) {
this.updateQueue.push(index);
Expand Down Expand Up @@ -221,7 +219,7 @@ class Puddle {
this.setupDefaultOptions();

// Event listener for window resize
window.addEventListener('resize', () => this.resizeHandler());
window.addEventListener("resize", () => this.resizeHandler());
}

// Set the style of nodes
Expand Down Expand Up @@ -250,7 +248,7 @@ class Puddle {
this.elementWidth = this.parentNode.scrollWidth;
this.elementHeight = this.parentNode.scrollHeight;
let lesserDimension = this.elementHeight < this.elementWidth ? this.elementHeight : this.elementWidth;
this.nodeSize = lesserDimension * 3 / 100;
this.nodeSize = (lesserDimension * 3) / 100;
if (this.elementHeight) {
this.numRows = Math.floor(this.elementHeight / this.nodeSize);
this.numCols = Math.floor(this.elementWidth / this.nodeSize);
Expand Down Expand Up @@ -278,7 +276,7 @@ class Puddle {
clearInterval(this.updateLoop);
this.data.refresh(this.numRows, this.numCols);

this.parentNode.innerHTML = '';
this.parentNode.innerHTML = "";
this.parentNode.style.cssText = `font-family: "Fira Code, monospace"; display: grid; grid-template-columns: repeat(${this.numCols}, ${this.nodeSize}px); grid-template-rows: repeat(${this.numRows}, ${this.nodeSize}px);`;

for (let yy = 0; yy < this.numRows; ++yy) {
Expand Down Expand Up @@ -318,9 +316,7 @@ class Puddle {

// Try to update elements in the simulation
tryUpdateElements() {
if (this.data.isUpdateDone)
this.data.updateElements()
else
console.log("Previous update not completed, skipping update");
if (this.data.isUpdateDone) this.data.updateElements();
else console.log("Previous update not completed, skipping update");
}
}
1 change: 1 addition & 0 deletions docs/blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Declan Chidlow">
<meta property="og:site_name" content="Vale Rocks">
<link rel="alternate" type="application/rss+xml" title="Vale.Rocks Blog" href="https://vale.rocks/blog/feed.rss" />
<link href="https://github.com/DeclanChidlow" rel="me">
<link href="https://fedi.vale.rocks/vale" rel="me">

Expand Down
Loading

0 comments on commit db99604

Please sign in to comment.