Remove KibunStatus, fix Bluesky reposts, and add animations (Resolved Conflict)

Author: google-labs-jules[bot]

package-lock.json

@@ -96,7 +96,12 @@
   text-align: center;
   backdrop-filter: blur(20px);
   border: 1px solid var(--border-color);
-  transition: all 0.3s ease;
+  transition: all 0.3s ease, transform 0.1s ease-out;
+}
+
+.container:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px var(--shadow-medium);
 }
 
 .header {
@@ -630,6 +635,24 @@ html[data-theme="light"] .platform {
   display: block;
 }
 
+.repost-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #00BA7C;
+  font-size: 0.8rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.repost-indicator svg {
+  font-size: 1rem;
+}
+
 .post-header {
   display: flex;
   align-items: center;

src/App.css

@@ -5,12 +5,23 @@ import { faEnvelope, faCloud } from '@fortawesome/free-solid-svg-icons'
 import TwemojiText from './components/TwemojiText'
 import BlueskyBio from './components/BlueskyBio'
 import BlueskyPost from './components/BlueskyPost'
-import KibunStatus from './components/KibunStatus'
 import ThemeToggle from './components/ThemeToggle'
 import DropdownLink from './components/DropdownLink'
 import './App.css'
 
 function App() {
+  React.useEffect(() => {
+    const handleMouseMove = (e) => {
+      const x = (e.clientX / window.innerWidth) * 100
+      const y = (e.clientY / window.innerHeight) * 100
+      document.documentElement.style.setProperty('--mouse-x', `${x}%`)
+      document.documentElement.style.setProperty('--mouse-y', `${y}%`)
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
+
   const socialLinks = [
     {
       name: 'Bluesky',
@@ -62,8 +73,6 @@ function App() {
           <h1 className="title">j4ck.xyz</h1>
           <BlueskyBio />
           <div className="bio-separator"></div>
-          <KibunStatus username="j4ck.xyz" />
-          <div className="bio-separator"></div>
           <p className="subtitle">
             <TwemojiText>Find my socials! 👇</TwemojiText>
           </p>

src/App.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSpinner, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faExternalLinkAlt, faRetweet } from '@fortawesome/free-solid-svg-icons'
 import { faBluesky } from '@fortawesome/free-brands-svg-icons'
 import TwemojiText from './TwemojiText'
 
 const BlueskyPost = () => {
-  const [post, setPost] = useState(null)
+  const [feedItem, setFeedItem] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
 
@@ -34,18 +34,18 @@ const BlueskyPost = () => {
         const data = await response.json()
 
         // Find the first post that's not a reply
-        const latestPost = data.feed?.find(item => 
+        // We accept reposts (where author might not be HANDLE)
+        const item = data.feed?.find(item =>
           item.post && 
-          !item.post.record.reply && 
-          item.post.author.handle === HANDLE
-        )?.post
+          !item.post.record.reply
+        )
 
-        if (latestPost) {
-          console.log('Bluesky post data:', latestPost) // Debug log
-          if (latestPost.embed) {
-            console.log('Embed data:', latestPost.embed) // Debug embed structure
+        if (item) {
+          console.log('Bluesky post data:', item.post) // Debug log
+          if (item.post.embed) {
+            console.log('Embed data:', item.post.embed) // Debug embed structure
           }
-          setPost(latestPost)
+          setFeedItem(item)
         } else {
           throw new Error('No posts found')
         }
@@ -216,7 +216,7 @@ const BlueskyPost = () => {
     )
   }
 
-  if (error || !post) {
+  if (error || !feedItem) {
     return (
       <div className="bluesky-post error">
         <div className="post-header">
@@ -246,8 +246,17 @@ const BlueskyPost = () => {
     )
   }
 
+  const post = feedItem.post
+  const isRepost = feedItem.reason?.$type === 'app.bsky.feed.defs#reasonRepost'
+
   return (
     <div className="bluesky-post">
+      {isRepost && (
+         <div className="repost-indicator">
+           <FontAwesomeIcon icon={faRetweet} />
+           <span>Reposted</span>
+         </div>
+      )}
       <a 
         href={getPostUrl(post)}
         target="_blank"