460 lines
9.1 KiB
Markdown
460 lines
9.1 KiB
Markdown
# 🎨 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:**
|
||
```json
|
||
{
|
||
"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:**
|
||
```json
|
||
{
|
||
"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:**
|
||
```json
|
||
{
|
||
"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:**
|
||
```json
|
||
{
|
||
"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:**
|
||
```json
|
||
{
|
||
"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:**
|
||
```json
|
||
{
|
||
"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"**
|
||
```tsx
|
||
<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"**
|
||
```tsx
|
||
<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 ☕**
|
||
```tsx
|
||
{coffeeCount > 0 && (
|
||
<motion.div
|
||
animate={{
|
||
y: [0, -5, 0],
|
||
rotate: [0, -5, 5, 0]
|
||
}}
|
||
>
|
||
☕ × {coffeeCount}
|
||
</motion.div>
|
||
)}
|
||
```
|
||
|
||
#### 2. **Code Streak 🔥**
|
||
```tsx
|
||
<motion.div>
|
||
🔥 {consecutiveDays} day streak!
|
||
</motion.div>
|
||
```
|
||
|
||
#### 3. **Live Visitor Count 👥**
|
||
```tsx
|
||
<motion.div
|
||
animate={{ scale: [1, 1.05, 1] }}
|
||
>
|
||
👥 {liveVisitors} online
|
||
</motion.div>
|
||
```
|
||
|
||
#### 4. **Deployment Status 🚀**
|
||
```tsx
|
||
{isDeploying && (
|
||
<motion.div>
|
||
<Rocket className="animate-bounce" />
|
||
Deploying...
|
||
</motion.div>
|
||
)}
|
||
```
|
||
|
||
#### 5. **Weather Integration 🌤️**
|
||
```tsx
|
||
<motion.div>
|
||
{weatherEmoji} {temperature}°C in Osnabrück
|
||
</motion.div>
|
||
```
|
||
|
||
#### 6. **Pomodoro Timer 🍅**
|
||
```tsx
|
||
{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)**
|
||
```sql
|
||
ALTER TABLE activity_status
|
||
ADD COLUMN new_activity_field VARCHAR(255);
|
||
```
|
||
|
||
### 2. **n8n Workflow**
|
||
```javascript
|
||
// Update database
|
||
UPDATE activity_status SET
|
||
new_activity_field = 'value'
|
||
WHERE id = 1;
|
||
```
|
||
|
||
### 3. **Frontend (ActivityFeed.tsx)**
|
||
```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
|
||
```typescript
|
||
// 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
|
||
```sql
|
||
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! 🚀** |