📍 gallery
- not all about robots, but also some happy moments of my life and
my list of failures.
+ not all about robots, but also some happy moments of my life.
diff --git a/_site/js/scripts.js b/_site/js/scripts.js
index f8cb1ec..55a7fea 100644
--- a/_site/js/scripts.js
+++ b/_site/js/scripts.js
@@ -158,3 +158,76 @@ document.addEventListener('DOMContentLoaded', function() {
// Automatically update year in footer
document.getElementById("currentYear").textContent = new Date().getFullYear();
+
+
+// Canvas for particle moves
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const particles = [];
+
+
+// Resize canvas width and height
+function resizeCanvas() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+}
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+
+// Class for Particle
+class Particle {
+
+ constructor() {
+ this.reset();
+ }
+
+ reset() {
+ this.x = Math.random() * canvas.width;
+ this.y = Math.random() * canvas.height;
+ this.vx = (Math.random() - 0.5) * 2;
+ this.vy = (Math.random() - 0.5) * 2;
+ this.color = 'rgba(255, 255, 255, ' + 0.7 + ')';
+ this.lifespan = 100;
+ }
+
+ update() {
+ this.x += this.vx;
+ this.y += this.vy;
+ this.color = 'rgba(255, 255, 255, ' + this.lifespan--/100 + ')';
+
+ if (this.lifespan <= 0) {
+ this.reset();
+ }
+ }
+
+ draw(ctx) {
+ ctx.fillStyle = this.color;
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
+ ctx.fill();
+ }
+}
+
+
+// Initialize 101 particles
+for (let i = 0; i < 101; i++) {
+ particles.push(new Particle());
+}
+
+
+// Make the particles move
+function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ particles.forEach(particle => {
+ particle.update();
+ particle.draw(ctx);
+ });
+
+ requestAnimationFrame(animate);
+}
+
+
+// Animate the particles
+animate();
diff --git a/_site/styles/styles.css b/_site/styles/styles.css
index b10d625..42c4228 100644
--- a/_site/styles/styles.css
+++ b/_site/styles/styles.css
@@ -90,7 +90,7 @@ div.gallery {
float: left;
width: 212px;
}
-div.gallery:nth-child(9n+1) {
+div.gallery:nth-child(8n+1) {
clear: both;
}
div.gallery img {
@@ -251,31 +251,6 @@ button.dark-theme {
}
-/* Fancy list for failure items */
-.fancy-list {
- max-width: 600px;
- margin: 10px 0 0 0;
- padding: 0;
- list-style: none;
-}
-.fancy-list li {
- border: 1px solid #ddd;
- padding: 10px 15px;
- margin-bottom: 10px;
- border-radius: 7px;
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-.fancy-list li:hover {
- transform: translateY(-5px);
-}
-.fancy-list li::before {
- color: #000000;
- font-size: 24px;
- vertical-align: middle;
- margin-right: 10px;
-}
-
-
/* New style for webpage scrollbar */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
@@ -289,4 +264,14 @@ button.dark-theme {
::-webkit-scrollbar {
width: 10px;
}
-
\ No newline at end of file
+
+
+/* Styles for middle-layer moving-particle canvas */
+canvas {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+}
diff --git a/anotherme.md b/anotherme.md
deleted file mode 100644
index 3a736eb..0000000
--- a/anotherme.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: main
----
-
-{% include_relative _sections/about.html %}
-{% include_relative _sections/fails.html %}
-{% include_relative _sections/footer.html %}
diff --git a/assets/img/devices_mockup_white_transparent.png b/assets/img/devices_mockup_white_transparent.png
deleted file mode 100644
index 98b65d3..0000000
Binary files a/assets/img/devices_mockup_white_transparent.png and /dev/null differ
diff --git a/assets/img/iceberg.png b/assets/img/iceberg.png
deleted file mode 100644
index 00760cb..0000000
Binary files a/assets/img/iceberg.png and /dev/null differ
diff --git a/js/scripts.js b/js/scripts.js
index f8cb1ec..55a7fea 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -158,3 +158,76 @@ document.addEventListener('DOMContentLoaded', function() {
// Automatically update year in footer
document.getElementById("currentYear").textContent = new Date().getFullYear();
+
+
+// Canvas for particle moves
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const particles = [];
+
+
+// Resize canvas width and height
+function resizeCanvas() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+}
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+
+// Class for Particle
+class Particle {
+
+ constructor() {
+ this.reset();
+ }
+
+ reset() {
+ this.x = Math.random() * canvas.width;
+ this.y = Math.random() * canvas.height;
+ this.vx = (Math.random() - 0.5) * 2;
+ this.vy = (Math.random() - 0.5) * 2;
+ this.color = 'rgba(255, 255, 255, ' + 0.7 + ')';
+ this.lifespan = 100;
+ }
+
+ update() {
+ this.x += this.vx;
+ this.y += this.vy;
+ this.color = 'rgba(255, 255, 255, ' + this.lifespan--/100 + ')';
+
+ if (this.lifespan <= 0) {
+ this.reset();
+ }
+ }
+
+ draw(ctx) {
+ ctx.fillStyle = this.color;
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
+ ctx.fill();
+ }
+}
+
+
+// Initialize 101 particles
+for (let i = 0; i < 101; i++) {
+ particles.push(new Particle());
+}
+
+
+// Make the particles move
+function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ particles.forEach(particle => {
+ particle.update();
+ particle.draw(ctx);
+ });
+
+ requestAnimationFrame(animate);
+}
+
+
+// Animate the particles
+animate();
diff --git a/styles/styles.css b/styles/styles.css
index b10d625..42c4228 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -90,7 +90,7 @@ div.gallery {
float: left;
width: 212px;
}
-div.gallery:nth-child(9n+1) {
+div.gallery:nth-child(8n+1) {
clear: both;
}
div.gallery img {
@@ -251,31 +251,6 @@ button.dark-theme {
}
-/* Fancy list for failure items */
-.fancy-list {
- max-width: 600px;
- margin: 10px 0 0 0;
- padding: 0;
- list-style: none;
-}
-.fancy-list li {
- border: 1px solid #ddd;
- padding: 10px 15px;
- margin-bottom: 10px;
- border-radius: 7px;
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-.fancy-list li:hover {
- transform: translateY(-5px);
-}
-.fancy-list li::before {
- color: #000000;
- font-size: 24px;
- vertical-align: middle;
- margin-right: 10px;
-}
-
-
/* New style for webpage scrollbar */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
@@ -289,4 +264,14 @@ button.dark-theme {
::-webkit-scrollbar {
width: 10px;
}
-
\ No newline at end of file
+
+
+/* Styles for middle-layer moving-particle canvas */
+canvas {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+}
- 
-
-