✨ feat(ui): add Matrix-inspired easter egg with code input trigger
This commit is contained in:
4 files changed
+98
-26
No files matched your search
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2025 Sankalp Tharu
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -46,9 +46,8 @@ A modern, responsive social media landing page that consolidates all my social m
|
||||
## 🚀 Getting Started
|
||||
|
||||
1. Clone this repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/S4NKALP/social-links.git
|
||||
git clone https://github.com/yourusername/social-links.git
|
||||
```
|
||||
|
||||
2. Open `index.html` in your web browser to view the page.
|
||||
@@ -66,11 +65,11 @@ A modern, responsive social media landing page that consolidates all my social m
|
||||
Want to discover some fun hidden features? Here are some hints:
|
||||
|
||||
1. 🎯 Try typing these magic words:
|
||||
|
||||
- Type "wow" for a surprise effect
|
||||
- Type "fun" to start a color party
|
||||
- Type "spin" to see things go round and round
|
||||
- Type "boom" for an explosive surprise
|
||||
- Type "code" to enter the Matrix
|
||||
|
||||
2. 🕹️ Remember the classic Konami Code? Try it here!
|
||||
(Up, Up, Down, Down, Left, Right, Left, Right, B, A)
|
||||
@@ -78,7 +77,15 @@ Want to discover some fun hidden features? Here are some hints:
|
||||
3. 🖼️ The profile picture might have a secret...
|
||||
Try clicking it multiple times!
|
||||
|
||||
_Note: All effects are temporary and will reset after a few seconds._
|
||||
*Note: All effects are temporary and will reset after a few seconds.*
|
||||
|
||||
## 📱 Browser Support
|
||||
|
||||
- Chrome
|
||||
- Firefox
|
||||
- Safari
|
||||
- Edge
|
||||
- Opera
|
||||
|
||||
## 📝 License
|
||||
|
||||
@@ -89,4 +96,5 @@ This project is open source and available under the [MIT License](LICENSE).
|
||||
Created by Sankalp Tharu
|
||||
|
||||
- GitHub: [@S4NKALP](https://github.com/S4NKALP)
|
||||
- Email: sankalptharu50028@gmail.com
|
||||
- LinkedIn: [@1amsanka1p](https://linkedin.com/in/1amsanka1p)
|
||||
- Email: sankalptharu50028@gmail.com
|
||||
@@ -47,6 +47,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
createConfetti();
|
||||
}
|
||||
}
|
||||
},
|
||||
'code': {
|
||||
message: '🖥️ Enter The Matrix 🖥️',
|
||||
effect: () => {
|
||||
createMatrixEffect();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -395,6 +401,54 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Matrix Effect
|
||||
function createMatrixEffect() {
|
||||
// Create container if it doesn't exist
|
||||
let matrixContainer = document.querySelector('.matrix-container');
|
||||
if (!matrixContainer) {
|
||||
matrixContainer = document.createElement('div');
|
||||
matrixContainer.className = 'matrix-container';
|
||||
document.body.appendChild(matrixContainer);
|
||||
}
|
||||
|
||||
// Show container
|
||||
matrixContainer.style.display = 'block';
|
||||
|
||||
// Matrix characters
|
||||
const matrixChars = '日ハミヒーウシナモニサワツオリアホテマケメエカキムユラセネスタヌヘ012345789:・.=*+-<>¦|╌リ';
|
||||
|
||||
// Create falling characters
|
||||
const createCharacter = () => {
|
||||
const character = document.createElement('div');
|
||||
character.className = 'matrix-character';
|
||||
character.style.left = Math.random() * 100 + 'vw';
|
||||
character.style.animationDuration = (Math.random() * 2 + 1) + 's';
|
||||
character.textContent = matrixChars[Math.floor(Math.random() * matrixChars.length)];
|
||||
matrixContainer.appendChild(character);
|
||||
|
||||
// Remove character after animation
|
||||
character.addEventListener('animationend', () => {
|
||||
character.remove();
|
||||
});
|
||||
};
|
||||
|
||||
// Create characters continuously
|
||||
const interval = setInterval(() => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
createCharacter();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Stop after 5 seconds
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
setTimeout(() => {
|
||||
matrixContainer.style.display = 'none';
|
||||
matrixContainer.innerHTML = '';
|
||||
}, 2000);
|
||||
}, 5000);
|
||||
}
|
||||
});
|
||||
|
||||
// Add ripple effect styles
|
||||
|
||||
+31
@@ -405,3 +405,34 @@ body {
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* Matrix Effect */
|
||||
.matrix-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.matrix-character {
|
||||
position: absolute;
|
||||
color: #0f0;
|
||||
font-family: monospace;
|
||||
font-size: 20px;
|
||||
text-shadow: 0 0 5px #0f0;
|
||||
animation: matrixFall linear infinite;
|
||||
}
|
||||
|
||||
@keyframes matrixFall {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user