Replace loading indicator with "view more" button and update styles

website/main.js

@@ -482,8 +482,9 @@ async function processPostQueue() {
     
     isProcessingQueue = false;
     
-    // Hide loading indicator when all posts are processed
+    // Replace loading indicator with "view more" button when all posts are processed
     hideLoadingIndicator();
+    showViewMoreButton();
 }
 
 function layoutPosts(postElements) {
@@ -528,6 +529,21 @@ function hideLoadingIndicator() {
     }
 }
 
+function showViewMoreButton() {
+    const postsContainer = document.getElementById("posts");
+    const viewMoreDiv = document.createElement("a");
+    viewMoreDiv.href = "https://bsky.app/profile/lit.mates.dev";
+    viewMoreDiv.target = "_blank";
+    viewMoreDiv.className = "view-more-posts";
+    viewMoreDiv.innerHTML = `
+        <div class="view-more-posts-content">
+            <strong>View more on Bluesky →</strong><br>
+            <small>Follow @lit.mates.dev for more posts</small>
+        </div>
+    `;
+    postsContainer.appendChild(viewMoreDiv);
+}
+
 async function fetchPosts() {
     // Show loading indicator
     showLoadingIndicator();

website/style.css

@@ -97,7 +97,6 @@ h1 {
 }
 
 .social-links a:hover {
-    color: var(--accent);
     transform: scale(1.1);
     transition: transform 0.3s ease;
     text-shadow: 0 0 3px white;
@@ -107,7 +106,7 @@ h1 {
     color: var(--github);
 }
 
-social-links a:hover .fab.fa-youtube {
+.social-links a:hover .fab.fa-youtube {
     color: var(--youtube);
 }
 
@@ -660,8 +659,8 @@ footer a:hover {
     animation: slideUpFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
 
-/* Loading indicator styles */
+/* Loading indicator and view more button styles */
-.loading-posts {
+.loading-posts, .view-more-posts {
     text-align: center;
     margin: 2rem auto;
     padding: 2rem;
@@ -673,9 +672,22 @@ footer a:hover {
     color: #666;
     font-family: inherit;
     position: relative;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-.loading-posts::before {
+.view-more-posts {
+    cursor: pointer;
+    text-decoration: none;
+    display: block;
+}
+
+.view-more-posts:hover {
+    transform: rotate(-1deg) scale(1.05);
+    box-shadow: 6px 6px 0 var(--shadow-light);
+    color: var(--bluesky);
+}
+
+.loading-posts::before, .view-more-posts::before {
     content: "";
     position: absolute;
     top: 5px;
@@ -688,7 +700,7 @@ footer a:hover {
     filter: blur(3px);
 }
 
-.loading-posts-content {
+.loading-posts-content, .view-more-posts-content {
     position: relative;
     z-index: 1;
 }