full upgrade to dev
This commit is contained in:
460
docs/ACTIVITY_FEATURES.md
Normal file
460
docs/ACTIVITY_FEATURES.md
Normal file
@@ -0,0 +1,460 @@
|
||||
# 🎨 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! 🚀**
|
||||
Reference in New Issue
Block a user