Initial idea for eastereggs

public/css/chapa_sigmoide.css

@@ -296,16 +296,40 @@ div.ficha div.description
 @keyframes image-change
 {
 	0% { opacity: 0; }
-
 	10% { opacity: 1; } 
-
 	50% { opacity: 1; } 
-
 	60% { opacity: 0; }
-
 	100% { opacity: 0; }
 }
 
+@keyframes shake {
+	0%, 100% { transform: translateX(0); }
+	20%, 60% { transform: translateX(-8px) rotate(-1deg); }
+	40%, 80% { transform: translateX(8px) rotate(1deg); }
+}
+
+.animate-shake {
+	animation: shake 0.3s ease-in-out;
+}
+
+.easteregg-transition {
+	transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in;
+	overflow: hidden;
+}
+
+.easteregg-hidden {
+	max-height: 0;
+	opacity: 0;
+	padding: 0 1.5rem; /* Maintain horizontal padding space */
+}
+
+.easteregg-visible {
+	max-height: 300px; /* Arbitrary large height for expansion */
+	opacity: 1;
+	padding-top: 1rem;
+	padding-bottom: 1.5rem;
+}
+
 div.ficha figure img:nth-of-type(1)
 { animation-delay: 0s;}
 

public/javascript/chapa_sigmoide.js

@@ -0,0 +1,76 @@
+const cards = document.querySelectorAll('div.ficha');
+
+for (const card of cards)
+{
+	card.addEventListener('click', handleCardClick);
+}
+
+const content = document.querySelector('div.ficha .easteregg');
+
+const messageBox = document.getElementById('message-box');
+
+let clickCount = 0;
+let lastClickTime = 0;
+const clickThreshold = 800;
+const expandDuration = 5000;
+
+let hideTimeoutId = null;
+
+function hideContent() {
+	content.classList.remove('easteregg-visible');
+	content.classList.add('easteregg-hidden');
+	messageBox.textContent = '';
+}
+
+function expandContent() {
+	// Show content
+	content.classList.remove('easteregg-hidden');
+	content.classList.add('easteregg-visible');
+	messageBox.textContent = 'Secret content unlocked!';
+
+	// Clear any existing timeout and set a new one
+	if (hideTimeoutId) {
+		clearTimeout(hideTimeoutId);
+	}
+
+	hideTimeoutId = setTimeout(() => {
+		hideContent();
+		// Optionally reset the count after the content hides, 
+		// but we already reset it immediately below.
+	}, expandDuration);
+
+	clickCount = 0;
+}
+
+function handleCardClick(event) {
+	const now = Date.now();
+
+	let element = event.target;
+
+	while (!element.classList.contains("ficha"))
+	{ element = element.parentElement }
+
+	element.classList.add('animate-shake');
+	setTimeout(() => {
+			element.classList.remove('animate-shake');
+	}, 300); // Duration of the shake animation
+
+	// Determine if the click is 'in a row'
+	if (now - lastClickTime < clickThreshold) {
+			clickCount++;
+	} else {
+			clickCount = 1;
+			if (content.classList.contains('easteregg-visible')) {
+					hideContent();
+			}
+	}
+	
+	lastClickTime = now;
+
+	// Check for the 3-click trigger
+	if (clickCount >= 3) {
+			expandContent();
+	}
+}
+
+window.onload = () => { hideContent(); }

views/chapa-sigmoide/readme.erb

@@ -22,6 +22,8 @@
 
 		<p><strong>Gosta de:</strong> programação, Linux, código aberto, Hollow Knight, Undertale, Deltarune, Chuunibyo.</p>
 
+		<p class="easteregg">Easteregg</p>
+
 		<p><a href="mateus">Mais</a></p>
 	</div>
 </div>

views/chapa_sigmoide.erb

@@ -32,4 +32,6 @@
 
 		title.textContent = document.querySelector('header').append(h1);
 	</script>
+
+	<script src="/javascript/chapa_sigmoide.js"></script>
 </html>