AloeGames/AloeGames-Site
1
0
Fork 0
mirror of https://github.com/RedGrox2013/AloeGames-Site.git synced 2026-09-18 19:55:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Добавил страницу projects

Browse Source
This commit is contained in:
RedGrox
2026-08-17 23:33:20 +03:00
parent ba12d86464
commit 72684fe981
5 changed files with 73 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/css/style.css
+4
View File
@@ -73,6 +73,10 @@ header {
border: 1px solid var(--border); border: 1px solid var(--border);
transition: 0.3s; transition: 0.3s;
margin-right: 14px; margin-right: 14px;
font-size: 15px;
text-shadow: 0 0 10px var(--accent-glow);
color: var(--accent);
text-decoration: none;
} }
.header-button img { .header-button img {
html/index.html
+4
View File
@@ -19,6 +19,9 @@
AloeGames AloeGames
</div> </div>
<a class="header-button" href="./projects/" target="_blank">
Projects
</a>
<!-- <a class="header-button" href="https://t.me/AloeGames" rel="noopener" target="_blank"> <!-- <a class="header-button" href="https://t.me/AloeGames" rel="noopener" target="_blank">
<img src="https://telegram.org/img/t_logo.svg" alt="Telegram"> <img src="https://telegram.org/img/t_logo.svg" alt="Telegram">
</a> --> </a> -->
@@ -99,6 +102,7 @@
</footer> </footer>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="js/animation.js"></script>
</body> </body>
html/js/animation.js
+46
View File
@@ -0,0 +1,46 @@
const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
const particles = [];
for (let i = 0; i < 80; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
size: Math.random() * 2 + 1
});
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(34,197,94,0.8)';
ctx.shadowBlur = 10;
ctx.shadowColor = 'rgba(34,197,94,0.8)';
ctx.fill();
ctx.shadowBlur = 0;
});
requestAnimationFrame(animate);
}
animate();
html/js/app.js
-48
View File
@@ -71,51 +71,3 @@ function searchQuery(event) {
window.location.href = url; window.location.href = url;
} }
// Background animation
const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
const particles = [];
for (let i = 0; i < 80; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
size: Math.random() * 2 + 1
});
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(34,197,94,0.8)';
ctx.shadowBlur = 10;
ctx.shadowColor = 'rgba(34,197,94,0.8)';
ctx.fill();
ctx.shadowBlur = 0;
});
requestAnimationFrame(animate);
}
animate();
html/projects/index.html
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../css/style.css">
<title>AloeGames Projects</title>
</head>
<body>
<canvas id="bgCanvas"></canvas>
<section class="hero">
<h1>To be continue...</h1>
</section>
<script src="../js/animation.js"></script>
</body>
</html>