denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7d84d35f090195ca57572d1e6683c6523db30cf3
portfolio/docs/ACTIVITY_FEATURES.md
denshooter 26a8610aa7 full upgrade to dev
2026-01-07 14:30:00 +01:00

9.1 KiB
Raw Blame History

🎨 Activity Feed Features & Animations

✨ Implementierte Features

1. Dynamische Activity Bubbles

Jede Aktivität hat ihre eigene:

  • 🎨 Einzigartige Pastellfarben
  • 🎭 Spezifische Animationen
  • 🔗 Interaktive Links
  • 💫 Hintergrundeffekte

🎬 Animations-Typen

🔨 Coding Activity

Visueller Effekt:

  • Matrix Rain im Hintergrund (grüne 0/1 Zahlen fallen)
  • Rotierendes Terminal-Icon
  • Grüner Pulsing-Dot

Daten:

{
  "type": "coding",
  "details": "Building Portfolio Website",
  "project": "portfolio",
  "language": "TypeScript",
  "repo": "https://github.com/user/repo",
  "link": "https://github.com/user/repo/commit/abc123"
}

Animation:

  • 15 vertikal fallende Spalten mit 0/1 Zeichen
  • Unterschiedliche Geschwindigkeiten (2-5s)
  • Opacity fade in/out
  • Mint-grüne Farbe (liquid-mint)

🎵 Music Activity (Now Playing)

Visueller Effekt:

  • Sound Waves (5 animierte Balken)
  • Rotierendes Album Cover (10s pro Rotation)
  • Pulsierendes Headphone-Icon
  • Progress Bar

Daten:

{
  "isPlaying": true,
  "track": "Song Title",
  "artist": "Artist Name",
  "album": "Album Name",
  "progress": 45,
  "albumArt": "https://url-to-image.jpg",
  "spotifyUrl": "https://open.spotify.com/track/..."
}

Features:

  • ✅ Link "Listen with me" → Spotify Track
  • ✅ Live Progress Bar (0-100%)
  • ✅ Verschwindet automatisch wenn Musik stoppt
  • ✅ Album Cover rotiert kontinuierlich

Animation:

  • 5 vertikale Balken bewegen sich wellenförmig (20-80% Höhe)
  • Jeder Balken 0.1s delay
  • 0.8s Animationsdauer
  • Rose/Coral Gradient

🏃 Running Activity

Visueller Effekt:

  • Animierter Läufer-Emoji (🏃) bewegt sich von links nach rechts
  • Horizontale "Laufbahn" als Linie
  • Lime-grüne Farbpalette

Daten:

{
  "type": "running",
  "details": "Morning run - 5km",
  "link": "https://strava.com/activities/..."
}

Animation:

  • Läufer bewegt sich linear von -10% bis 110% (3s)
  • Kontinuierliche Wiederholung
  • Unendlich Loop

🎮 Gaming Activity

Visueller Effekt:

  • Particle System (10 schwebende Partikel)
  • Peach/Orange Farbschema
  • Gamepad-Icon

Daten:

{
  "game": "Elden Ring",
  "platform": "steam",
  "status": "playing"
}

Animation:

  • 10 Partikel an zufälligen Positionen
  • Scale animation (0 → 1 → 0)
  • Opacity fade
  • Unterschiedliche Delays (0-2s)
  • 2s Gesamtdauer, unendlich

📺 Watching Activity

Visueller Effekt:

  • TV Scan Lines (retro CRT-Effekt)
  • Lavender/Pink Gradient
  • TV-Icon

Daten:

{
  "title": "Breaking Bad S05E14",
  "platform": "netflix",
  "type": "series"
}

Animation:

  • Horizontaler Gradient-Balken (8px hoch)
  • Bewegt sich von -100% bis 200% vertikal
  • 3s linear
  • Weiß/transparent gradient
  • Simuliert alte TV-Bildschirme

😊 Status & Mood

Visueller Effekt:

  • Wackelndes Emoji (rotate: 0° → 10° → -10° → 0°)
  • Lavender/Pink Gradient
  • Custom Message

Daten:

{
  "mood": "💻",
  "customMessage": "Deep work mode - Building features"
}

Animation:

  • Emoji schwingt hin und her
  • 2s Dauer, easeInOut
  • Unendliche Wiederholung
  • Subtile Bewegung (-10° bis +10°)

🎯 Interaktive Elemente

1. Spotify "Listen with me"

<a href={spotifyUrl} target="_blank">
  <Waves size={10} />
  Listen with me
</a>
  • Öffnet Spotify Web Player
  • Direkt zum aktuellen Song
  • Kleine Wellen-Icon

2. GitHub "View Repo"

<a href={repoUrl} target="_blank">
  View <ExternalLink size={10} />
</a>
  • Link zum Repository
  • External Link Icon
  • Hover Underline

3. Live Progress Bar

  • Dynamisch basiert auf Spotify API
  • Smooth animation (0.5s transition)
  • Rose → Coral Gradient

🎨 Farbschema pro Activity

Activity Background Gradient Border Pulse Dot
Coding from-liquid-mint/20 to-liquid-sky/20 border-liquid-mint/40 Green
Music from-liquid-rose/20 to-liquid-coral/20 border-liquid-rose/40 Red
Gaming from-liquid-peach/20 to-liquid-yellow/20 border-liquid-peach/40 Orange
Watching from-liquid-lavender/20 to-liquid-pink/20 border-liquid-lavender/40 Purple
Running from-liquid-lime/20 to-liquid-mint/20 border-liquid-lime/40 Lime
Reading from-liquid-teal/20 to-liquid-lime/20 border-liquid-teal/40 Teal

💬 AI Chatbot Features

Design

  • Gradient Header: Mint → Sky
  • Message Bubbles:
    • User: Stone-900 gradient, rounded-tr-none
    • AI: White → Stone-50 gradient, rounded-tl-none
  • Sparkles Icon: Animated AI indicator
  • Thinking State: Rotating Loader2 mit liquid-mint Farbe

Features

  • ✅ Real-time responses via n8n
  • ✅ Fallback responses bei Offline
  • ✅ Context über Dennis
  • ✅ Smooth animations
  • ✅ Loading states
  • ✅ Error handling

Example Responses

"Great question! Dennis specializes in..."
"Dennis loves self-hosting! He manages..."
"Check out his projects to see what he's building!"

🎭 Zusätzliche Animation-Ideen

Noch nicht implementiert (Ideen):

1. Coffee Counter ☕

{coffeeCount > 0 && (
  <motion.div
    animate={{ 
      y: [0, -5, 0],
      rotate: [0, -5, 5, 0] 
    }}
  >
    ☕ × {coffeeCount}
  </motion.div>
)}

2. Code Streak 🔥

<motion.div>
  🔥 {consecutiveDays} day streak!
</motion.div>

3. Live Visitor Count 👥

<motion.div
  animate={{ scale: [1, 1.05, 1] }}
>
  👥 {liveVisitors} online
</motion.div>

4. Deployment Status 🚀

{isDeploying && (
  <motion.div>
    <Rocket className="animate-bounce" />
    Deploying...
  </motion.div>
)}

5. Weather Integration 🌤️

<motion.div>
  {weatherEmoji} {temperature}°C in Osnabrück
</motion.div>

6. Pomodoro Timer 🍅

{pomodoroActive && (
  <CircularProgress value={timeLeft} />
)}

🔄 Auto-Clear Logic

Musik

  • ✅ Verschwindet automatisch wenn is_playing = false
  • ✅ n8n checkt alle 30s via Spotify API
  • ✅ Database Update wenn gestoppt

Aktivitäten

  • ✅ Verfallen nach 2 Stunden
  • ✅ Check in API Route: hoursSinceUpdate < 2
  • ✅ Optionaler n8n Cleanup-Workflow

Gaming

  • ✅ Basiert auf Discord Presence
  • ✅ Auto-clear wenn Spiel beendet

📱 Responsive Design

Mobile (< 768px)

  • Bubbles: max-w-[calc(100vw-6rem)]
  • Stacked vertikal
  • Chat: Full-width minus padding

Desktop (> 768px)

  • Fixed bottom-6 right-6
  • Bubbles: max-w-xs (320px)
  • Chat: 384px breit

🚀 Performance

Optimierungen

  • ✅ will-change: transform für Animationen
  • ✅ AnimatePresence für smooth exit
  • ✅ overflow: hidden auf animated containers
  • ✅ pointer-events-none auf Hintergrund-Effekte
  • ✅ CSS backdrop-filter statt JS blur
  • ✅ Relative Z-Index (10, 20, 9999)

Polling

  • Frontend: Alle 30s (konfigurierbar)
  • Spotify: Alle 30s (n8n)
  • GitHub: Echtzeit via Webhooks
  • Discord: Alle 60s

🎨 Neue Activity hinzufügen

1. Backend (Database)

ALTER TABLE activity_status 
ADD COLUMN new_activity_field VARCHAR(255);

2. n8n Workflow

// Update database
UPDATE activity_status SET
  new_activity_field = 'value'
WHERE id = 1;

3. Frontend (ActivityFeed.tsx)

// Add to interface
interface ActivityData {
  newActivity: {
    field: string;
  } | null;
}

// Add color scheme
const activityColors = {
  newActivity: {
    bg: "from-liquid-purple/20 to-liquid-pink/20",
    border: "border-liquid-purple/40",
    text: "text-liquid-purple",
    pulse: "bg-purple-500",
  }
};

// Add animation component
const NewActivityAnimation = () => {
  return (
    <div className="absolute inset-0">
      {/* Your custom animation */}
    </div>
  );
};

// Render function
const renderNewActivity = () => {
  if (!data?.newActivity) return null;
  
  return (
    <motion.div className="...">
      <NewActivityAnimation />
      {/* Content */}
    </motion.div>
  );
};

📊 Analytics Integration

Track Activity Views

// In ActivityFeed
useEffect(() => {
  if (data?.activity) {
    fetch('/api/analytics/activity-view', {
      method: 'POST',
      body: JSON.stringify({ 
        type: data.activity.type 
      })
    });
  }
}, [data?.activity]);

Popular Activities Dashboard

SELECT 
  activity_type,
  COUNT(*) as views,
  AVG(duration) as avg_duration
FROM activity_history
WHERE created_at > NOW() - INTERVAL '7 days'
GROUP BY activity_type
ORDER BY views DESC;

🎯 Nächste Steps

  1. ✅ Datenbank Setup (setup_activity_status.sql)
  2. ✅ n8n Workflows importieren
  3. ⏳ Spotify OAuth konfigurieren
  4. ⏳ GitHub Webhooks setup
  5. ⏳ Activity Dashboard testen
  6. ⏳ AI Chatbot mit OpenAI verbinden
  7. ⏳ Auto-Clear Workflows aktivieren

🎨 Design Philosophy

  • Smooth: Alle Animationen 0.5-1s, nie schneller
  • Subtle: Opacity 20-40%, nie zu grell
  • Consistent: Gleiche Easing-Function überall
  • Performant: GPU-beschleunigt (transform, opacity)
  • Delightful: Kleine Details machen den Unterschied

Happy Coding! 🚀