revision

public/css/chapa_sigmoide.css

@@ -270,17 +270,24 @@ div.ficha figure
 	padding: 0;
 }
 
-div.ficha figure img
+div.ficha img
 {
 	margin: 0;
 	aspect-ratio: 3 / 4;
+}
+
+div.ficha:not(.easteregg-visible) img
+{
 	animation-name: image-change;
 	animation-timing-function: ease-in-out;
 	animation-iteration-count: infinite;
 	animation-duration: 10s;
 }
 
-div.ficha div.description
+div.ficha.easteregg-visible img:not(.easteregg)
+{ opacity: 0; }
+
+div.ficha div.description, div.ficha div.easteregg
 {
 	grid-row: 2;
 	grid-column: 1 / 3;
@@ -308,43 +315,55 @@ div.ficha div.description
 	40%, 80% { transform: translateX(8px) rotate(1deg); }
 }
 
-.animate-shake {
-	animation: shake 0.3s ease-in-out;
+.animate-shake
+{ animation: shake 0.3s ease-in-out; }
+
+div.easteregg-visible
+{ animation: glow 1s infinite alternate ease-in-out; }
+
+@keyframes glow {
+  0% {
+    border-color: orange;
+    box-shadow: 0 0 10px orange,
+                0 0 20px orange;
+  }
+  
+  100% {
+    border-color: red;
+    box-shadow: 0 0 10px red,
+                0 0 30px red;
+  }
 }
 
-.easteregg-transition {
-	transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in;
-	overflow: hidden;
-}
+div.easteregg-visible div.description
+{ display: none; }
 
-.easteregg-hidden {
-	max-height: 0;
-	opacity: 0;
-	padding: 0 1.5rem; /* Maintain horizontal padding space */
-}
+div:not(.easteregg-visible) .easteregg
+{ display: none; }
 
-.easteregg-visible {
-	max-height: 300px; /* Arbitrary large height for expansion */
-	opacity: 1;
-	padding-top: 1rem;
-	padding-bottom: 1.5rem;
-}
+div.easteregg-visible .easteregg
+{ display: block; }
 
 div.ficha figure img:nth-of-type(1)
 { animation-delay: 0s;}
 
-div.ficha figure img:nth-of-type(2)
+div.ficha figure img:not(:nth-of-type(1))
 {
-	animation-delay: 5s;
-	opacity: 0;
 	position: absolute;
 	left: 0rem;
 	top: 0rem;
-	width: 100%;;
+	width: 100%;
 	padding: inherit;
 	box-sizing: border-box;
 }
 
+div.ficha figure img:not(:nth-of-type(1)):not(.easteregg)
+{ opacity: 0; animation-delay: 5s; }
+
+div.ficha img.easteregg
+{ opacity: 1; }
+
+
 @media print
 {
 	:root

public/javascript/chapa_sigmoide.js

@@ -5,7 +5,7 @@ for (const card of cards)
 	card.addEventListener('click', handleCardClick);
 }
 
-const content = document.querySelector('div.ficha .easteregg');
+const eastereggContainers = document.querySelectorAll('div.ficha:has(.easteregg)');
 
 const messageBox = document.getElementById('message-box');
 
@@ -16,28 +16,30 @@ const expandDuration = 5000;
 
 let hideTimeoutId = null;
 
-function hideContent() {
-	content.classList.remove('easteregg-visible');
-	content.classList.add('easteregg-hidden');
-	messageBox.textContent = '';
+function hideEastereggs() {
+	for (const div of eastereggContainers)
+	{
+		div.classList.remove('easteregg-visible');
+		div.classList.add('easteregg-hidden');
+	}
 }
 
-function expandContent() {
-	// Show content
-	content.classList.remove('easteregg-hidden');
-	content.classList.add('easteregg-visible');
-	messageBox.textContent = 'Secret content unlocked!';
+function expandEastereggs() {
+	for (const div of eastereggContainers)
+	{
+		div.classList.add('easteregg-visible');
+		div.classList.remove('easteregg-hidden');
+	}
 
 	// 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);
+	hideTimeoutId = setTimeout(
+		() => { hideEastereggs(); },
+		expandDuration
+	);
 
 	clickCount = 0;
 }
@@ -51,26 +53,27 @@ function handleCardClick(event) {
 	{ element = element.parentElement }
 
 	element.classList.add('animate-shake');
-	setTimeout(() => {
-			element.classList.remove('animate-shake');
-	}, 300); // Duration of the shake animation
+
+	setTimeout(
+		() => { element.classList.remove('animate-shake'); },
+		300
+	);
 
 	// Determine if the click is 'in a row'
-	if (now - lastClickTime < clickThreshold) {
-			clickCount++;
-	} else {
-			clickCount = 1;
-			if (content.classList.contains('easteregg-visible')) {
-					hideContent();
-			}
+	if (now - lastClickTime < clickThreshold)
+	{ clickCount++; }
+	else
+	{
+		clickCount = 1;
+		if (element.classList.contains('easteregg-visible'))
+		{ hideEastereggs(); }
 	}
 	
 	lastClickTime = now;
 
 	// Check for the 3-click trigger
-	if (clickCount >= 3) {
-			expandContent();
-	}
+	if (clickCount >= 3)
+	{ expandEastereggs(); }
 }
 
-window.onload = () => { hideContent(); }
+window.onload = () => { hideEastereggs(); }

views/chapa-sigmoide/readme.erb

@@ -15,6 +15,8 @@
 		<img src="/chapa-sigmoide/mateus.jpg">
 
 		<img src="/chapa-sigmoide/mateus-avatar.png"/>
+
+		<img class="easteregg" src="/chapa-sigmoide/mateus-easteregg.gif"/>
 	</figure>
 
 	<div class="description">
@@ -22,10 +24,12 @@
 
 		<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 class="easteregg">
+		<p>UwU</p>
+	</div>
 </div>
 
 <div class="ficha">