Skip to content

Commit 4484456

Browse files
l-whitel-white
authored
Merge pull request #2949 from TAKUNDA1202/popsitron
adding my popsnation to the project
2 parents dfb674e + b2d1872 commit 4484456

File tree

4 files changed

+190
-0
lines changed

4 files changed

+190
-0
lines changed

‎Art/popsnation/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Hacktober Animation Glitch</title>
7+
<!-- Ready for GitHub Hacktoberfest - Verified by Jake 🥷 -->
8+
<link rel="stylesheet" href="styles.css" />
9+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet" />
10+
11+
<!-- ✅ FontAwesome for GitHub icon -->
12+
<link rel="stylesheet"
13+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
14+
integrity="sha512-RXf+QSDCUQs6Q0pFBxEae5FpX7Q4z1vKpBfY5e9RCXkS1OjPjzF0t9DfM6+qFDKXjg6eC1+kOZAZgdyGqv1MaQ=="
15+
crossorigin="anonymous"
16+
referrerpolicy="no-referrer" />
17+
</head>
18+
<body>
19+
<div class="overlay"></div> <!-- Optional gradient or image overlay -->
20+
21+
<div class="glitch-wrapper">
22+
<h1 class="glitch-text" data-text="HACKTOBERFEST POPSINATION">HACKTOBERFEST</h1>
23+
</div>
24+
25+
<!-- 🎨 Cards section injected by JS -->
26+
<ul id="cardContainer" class="cards-grid"></ul>
27+
</script>
28+
</body>
29+
</html>

‎Art/popsnation/meta..json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "Hacktoberfest CSS Glitch Animation",
3+
"description": "A pure CSS3 glitch animation featuring 'HACKTOBERFEST' with optional background imagery and effects. Built for Hacktoberfest 2025 animation showcase.",
4+
"author": {
5+
"name": "Takunda",
6+
"github": "https://github.com/Enock12234"
7+
},
8+
"version": "1.0.0",
9+
"license": "MIT",
10+
"tags": ["CSS3", "glitch", "animation", "Hacktoberfest", "frontend", "html", "design"],
11+
"files": [
12+
"index.html",
13+
"styles.css",
14+
"hacktoberfest-logo.png"
15+
],
16+
"created": "2025-10-01",
17+
"updated": "2025-10-13",
18+
"preview": "hacktoberfest-logo.png",
19+
"repository": "https://github.com/Enock12234/hacktoberfest-css-glitch-animation"
20+
}

‎Art/popsnation/styles.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/* Reset & base styles */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: 'Orbitron', sans-serif;
10+
height: 100vh;
11+
background: linear-gradient(120deg, #0f0f0f, #1a1a1a);
12+
overflow: hidden;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
position: relative;
17+
}
18+
19+
/* Optional image or animated overlay */
20+
.overlay {
21+
position: absolute;
22+
top: 0;
23+
left: 0;
24+
height: 100%;
25+
width: 100%;
26+
background: url('hacktoberfest-logo.png') no-repeat center center/cover;
27+
opacity: 0.15;
28+
z-index: 0;
29+
filter: blur(2px);
30+
}
31+
32+
/* Glitch text wrapper */
33+
.glitch-wrapper {
34+
z-index: 1;
35+
position: relative;
36+
}
37+
38+
/* Main glitch animation */
39+
.glitch-text {
40+
font-size: 3.5rem;
41+
color: #fff;
42+
position: relative;
43+
animation: flicker 2s infinite;
44+
letter-spacing: 2px;
45+
text-shadow: 0 0 8px #0ff, 0 0 12px #f0f;
46+
}
47+
48+
.glitch-text::before,
49+
.glitch-text::after {
50+
content: attr(data-text);
51+
position: absolute;
52+
left: 0;
53+
width: 100%;
54+
background: transparent;
55+
overflow: hidden;
56+
}
57+
58+
.glitch-text::before {
59+
color: #f0f;
60+
top: 0;
61+
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
62+
animation: glitchTop 2.5s infinite ease-in-out;
63+
}
64+
65+
.glitch-text::after {
66+
color: #0ff;
67+
top: 0;
68+
clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
69+
animation: glitchBottom 2.5s infinite ease-in-out;
70+
}
71+
72+
/* Glitch effects */
73+
@keyframes glitchTop {
74+
0%, 100% { transform: translate(0); }
75+
20% { transform: translate(-2px, -2px); }
76+
40% { transform: translate(2px, 2px); }
77+
60% { transform: translate(-1px, 1px); }
78+
80% { transform: translate(1px, -1px); }
79+
}
80+
81+
@keyframes glitchBottom {
82+
0%, 100% { transform: translate(0); }
83+
20% { transform: translate(2px, 2px); }
84+
40% { transform: translate(-2px, -2px); }
85+
60% { transform: translate(1px, -1px); }
86+
80% { transform: translate(-1px, 1px); }
87+
}
88+
89+
@keyframes flicker {
90+
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
91+
opacity: 1;
92+
}
93+
20%, 22%, 24%, 55% {
94+
opacity: 0.4;
95+
}
96+
}

‎public/includes.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,48 @@ fetch('./public/cards.json')
6060
.catch((error) => {
6161
console.error('Error fetching the cards.json file:', error);
6262
});
63+
64+
// 🎨 Hacktoberfest Card Data
65+
const cardList = [
66+
{
67+
artName: "HACKTOBERFEST",
68+
pageLink: "index.html",
69+
imageLink: "hacktoberfest-logo.png",
70+
author: "Takunda",
71+
githubLink: "https://github.com/Enock12234"
72+
}
73+
];
74+
75+
// 🔀 Optional shuffle function (add if not defined)
76+
function shuffle(array) {
77+
return array.sort(() => 0.5 - Math.random());
78+
}
79+
80+
// 🖼️ Generate HTML cards
81+
const getCardContents = (cardList) => {
82+
return shuffle(cardList)
83+
.map((c) => `
84+
<li class="card">
85+
<a href='${c.pageLink}'>
86+
<img class="art-image" src='${c.imageLink}' alt='${c.artName}' />
87+
</a>
88+
<a class="art-title" href='${c.pageLink}'>
89+
<h3>${c.artName}</h3>
90+
</a>
91+
<p class='author'>
92+
<a href="${c.githubLink}" target="_blank">
93+
<i class="fab fa-github"></i> ${c.author}
94+
</a>
95+
</p>
96+
</li>
97+
`)
98+
.join('');
99+
};
100+
101+
// 🧩 Inject into the DOM
102+
document.addEventListener('DOMContentLoaded', () => {
103+
const container = document.getElementById("cardContainer");
104+
if (container) {
105+
container.innerHTML = getCardContents(cardList);
106+
}
107+
});

0 commit comments

Comments
 (0)