- {[...Array(15)].map((_, i) => (
-
- {[...Array(20)].map((_, j) => (
-
- ))}
-
- );
-};
-
-// Sound waves for music
-const SoundWaves = () => {
- return (
- {chars[Math.floor(Math.random() * chars.length)]}
- ))}
-
- {[...Array(5)].map((_, i) => (
-
- );
-};
-
-// Running animation with smooth wavy motion
-const RunningAnimation = () => {
- return (
-
-
- ๐
-
-
- );
-};
-
-// Gaming particles
-const GamingParticles = () => {
- return (
-
- {[...Array(10)].map((_, i) => (
-
- );
-};
-
-// TV scan lines
-const TVScanLines = () => {
- return (
-
-
- );
-};
-
-const activityIcons = {
- coding: Terminal,
- listening: Headphones,
- watching: Tv,
- gaming: Gamepad2,
- reading: Coffee,
- running: Activity,
-};
-
-const activityColors = {
- coding: {
- bg: "from-liquid-mint/20 to-liquid-sky/20",
- border: "border-liquid-mint/40",
- text: "text-liquid-mint",
- pulse: "bg-green-500",
- },
- listening: {
- bg: "from-liquid-rose/20 to-liquid-coral/20",
- border: "border-liquid-rose/40",
- text: "text-liquid-rose",
- pulse: "bg-red-500",
- },
- watching: {
- bg: "from-liquid-lavender/20 to-liquid-pink/20",
- border: "border-liquid-lavender/40",
- text: "text-liquid-lavender",
- pulse: "bg-purple-500",
- },
- gaming: {
- bg: "from-liquid-peach/20 to-liquid-yellow/20",
- border: "border-liquid-peach/40",
- text: "text-liquid-peach",
- pulse: "bg-orange-500",
- },
- reading: {
- bg: "from-liquid-teal/20 to-liquid-lime/20",
- border: "border-liquid-teal/40",
- text: "text-liquid-teal",
- pulse: "bg-teal-500",
- },
- running: {
- bg: "from-liquid-lime/20 to-liquid-mint/20",
- border: "border-liquid-lime/40",
- text: "text-liquid-lime",
- pulse: "bg-lime-500",
- },
-};
-
-export const ActivityFeed = () => {
- const [data, setData] = useState
-
-
-
+
-
-
-
-
-
- {type}
-
- {details}
- {project && ( -
-
-
-
-
-
- Now Playing
-
- {track}
-{artist}
- {progress !== undefined && ( -
-
- )}
- {spotifyUrl && (
-
-
- {customMessage && (
-
- - {customMessage} -
- )} -
- {/* Chat Window */}
-
- {showChat && (
-
- ([]);
+ const [inputValue, setInputValue] = useState("");
+ const [isLoading, setIsLoading] = useState(false);
+ const [conversationId, setConversationId] = useState(() => {
+ // Generate or retrieve conversation ID
+ if (typeof window !== "undefined") {
+ const stored = localStorage.getItem("chatSessionId");
+ if (stored) return stored;
+ const newId = crypto.randomUUID();
+ localStorage.setItem("chatSessionId", newId);
+ return newId;
+ }
+ return "default";
+ });
+
+ const messagesEndRef = useRef(null);
+ const inputRef = useRef(null);
+
+ // Auto-scroll to bottom when new messages arrive
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+ }, [messages]);
+
+ // Focus input when chat opens
+ useEffect(() => {
+ if (isOpen) {
+ inputRef.current?.focus();
+ }
+ }, [isOpen]);
+
+ // Load messages from localStorage
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ const stored = localStorage.getItem("chatMessages");
+ if (stored) {
+ try {
+ const parsed = JSON.parse(stored);
+ setMessages(
+ parsed.map((m: Message) => ({
+ ...m,
+ timestamp: new Date(m.timestamp),
+ })),
+ );
+ } catch (e) {
+ console.error("Failed to load chat history", e);
+ }
+ } else {
+ // Add welcome message
+ setMessages([
+ {
+ id: "welcome",
+ text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! ๐",
+ sender: "bot",
+ timestamp: new Date(),
+ },
+ ]);
+ }
+ }
+ }, []);
+
+ // Save messages to localStorage
+ useEffect(() => {
+ if (typeof window !== "undefined" && messages.length > 0) {
+ localStorage.setItem("chatMessages", JSON.stringify(messages));
+ }
+ }, [messages]);
+
+ const handleSend = async () => {
+ if (!inputValue.trim() || isLoading) return;
+
+ const userMessage: Message = {
+ id: Date.now().toString(),
+ text: inputValue.trim(),
+ sender: "user",
+ timestamp: new Date(),
+ };
+
+ setMessages((prev) => [...prev, userMessage]);
+ setInputValue("");
+ setIsLoading(true);
+
+ // Get last 10 messages for context
+ const history = messages.slice(-10).map((m) => ({
+ role: m.sender === "user" ? "user" : "assistant",
+ content: m.text,
+ }));
+
+ try {
+ const response = await fetch("/api/n8n/chat", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ message: userMessage.text,
+ conversationId,
+ history,
+ }),
+ });
+
+ if (!response.ok) {
+ throw new Error("Failed to get response");
+ }
+
+ const data = await response.json();
+
+ const botMessage: Message = {
+ id: (Date.now() + 1).toString(),
+ text: data.reply || "Sorry, I couldn't process that. Please try again.",
+ sender: "bot",
+ timestamp: new Date(),
+ };
+
+ setMessages((prev) => [...prev, botMessage]);
+ } catch (error) {
+ console.error("Chat error:", error);
+
+ const errorMessage: Message = {
+ id: (Date.now() + 1).toString(),
+ text: "Sorry, I'm having trouble connecting right now. Please try again later or use the contact form below.",
+ sender: "bot",
+ timestamp: new Date(),
+ };
+
+ setMessages((prev) => [...prev, errorMessage]);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleKeyPress = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ };
+
+ const clearChat = () => {
+ // Reset session ID
+ const newId = crypto.randomUUID();
+ setConversationId(newId);
+ if (typeof window !== "undefined") {
+ localStorage.setItem("chatSessionId", newId);
+ localStorage.removeItem("chatMessages");
+ }
+
+ setMessages([
+ {
+ id: "welcome",
+ text: "Conversation restarted! Ask me anything about Dennis! ๐",
+ sender: "bot",
+ timestamp: new Date(),
+ },
+ ]);
+ };
+
+ return (
+ <>
+ {/* Chat Button */}
+
+ {!isOpen && (
+ setIsOpen(true)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ setIsOpen(true);
+ }
+ }}
+ className="fixed bottom-20 left-4 md:bottom-6 md:left-6 z-30 bg-gradient-to-br from-blue-500 to-purple-600 text-white p-3 rounded-full shadow-2xl hover:shadow-blue-500/50 hover:scale-110 transition-all duration-300 group cursor-pointer"
+ aria-label="Open chat"
+ >
+
+ )}
+
+
+ {/* Chat Window */}
+
+ {isOpen && (
+
+ {/* Header */}
+
+ )}
+
+
+ );
+}
diff --git a/app/components/ClientOnly.tsx b/app/components/ClientOnly.tsx
new file mode 100644
index 0000000..37799c9
--- /dev/null
+++ b/app/components/ClientOnly.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function ClientOnly({ children }: { children: React.ReactNode }) {
+ const [hasMounted, setHasMounted] = useState(false);
+
+ useEffect(() => {
+ setHasMounted(true);
+ }, []);
+
+ if (!hasMounted) {
+ return null;
+ }
+
+ return <>{children};
+}
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index f03b815..457f492 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -18,14 +18,6 @@ const Hero = () => {
{ icon: Rocket, text: "Self-Hosted Infrastructure" },
];
- // Smooth scroll configuration
- const smoothTransition = {
- type: "spring",
- damping: 30,
- stiffness: 50,
- mass: 1,
- };
-
if (!mounted) {
return null;
}
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index d1aa06f..5600f94 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -1,33 +1,24 @@
"use client";
import { useState, useEffect } from "react";
-import { motion } from "framer-motion";
-import {
- ExternalLink,
- Github,
- Calendar,
- Layers,
- ArrowRight,
-} from "lucide-react";
+import { motion, Variants } from "framer-motion";
+import { ExternalLink, Github, Layers, ArrowRight } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
-// Smooth animation configuration
-const smoothTransition = {
- duration: 0.8,
- ease: [0.25, 0.1, 0.25, 1],
-};
-
-const fadeInUp = {
+const fadeInUp: Variants = {
hidden: { opacity: 0, y: 40 },
visible: {
opacity: 1,
y: 0,
- transition: smoothTransition,
+ transition: {
+ duration: 0.8,
+ ease: [0.25, 0.1, 0.25, 1],
+ },
},
};
-const staggerContainer = {
+const staggerContainer: Variants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
@@ -68,7 +59,7 @@ const Projects = () => {
setProjects(data.projects || []);
}
} catch (error) {
- if (process.env.NODE_ENV === 'development') {
+ if (process.env.NODE_ENV === "development") {
console.error("Error loading projects:", error);
}
}
@@ -107,7 +98,7 @@ const Projects = () => {
variants={staggerContainer}
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
>
- {projects.map((project, index) => (
+ {projects.map((project) => (
(null);
-
+
const [, setProject] = useState(null);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isLoading, setIsLoading] = useState(true);
@@ -52,52 +58,54 @@ function EditorPageContent() {
const [isCreating, setIsCreating] = useState(!projectId);
const [showPreview, setShowPreview] = useState(false);
const [isTyping, setIsTyping] = useState(false);
-
+
// Form state
const [formData, setFormData] = useState({
- title: '',
- description: '',
- content: '',
- category: 'web',
+ title: "",
+ description: "",
+ content: "",
+ category: "web",
tags: [] as string[],
featured: false,
published: false,
- github: '',
- live: '',
- image: ''
+ github: "",
+ live: "",
+ image: "",
});
const loadProject = useCallback(async (id: string) => {
try {
- const response = await fetch('/api/projects');
-
+ const response = await fetch("/api/projects");
+
if (response.ok) {
const data = await response.json();
- const foundProject = data.projects.find((p: Project) => p.id.toString() === id);
-
+ const foundProject = data.projects.find(
+ (p: Project) => p.id.toString() === id,
+ );
+
if (foundProject) {
setProject(foundProject);
setFormData({
- title: foundProject.title || '',
- description: foundProject.description || '',
- content: foundProject.content || '',
- category: foundProject.category || 'web',
+ title: foundProject.title || "",
+ description: foundProject.description || "",
+ content: foundProject.content || "",
+ category: foundProject.category || "web",
tags: foundProject.tags || [],
featured: foundProject.featured || false,
published: foundProject.published || false,
- github: foundProject.github || '',
- live: foundProject.live || '',
- image: foundProject.image || ''
+ github: foundProject.github || "",
+ live: foundProject.live || "",
+ image: foundProject.image || "",
});
}
} else {
- if (process.env.NODE_ENV === 'development') {
- console.error('Failed to fetch projects:', response.status);
+ if (process.env.NODE_ENV === "development") {
+ console.error("Failed to fetch projects:", response.status);
}
}
} catch (error) {
- if (process.env.NODE_ENV === 'development') {
- console.error('Error loading project:', error);
+ if (process.env.NODE_ENV === "development") {
+ console.error("Error loading project:", error);
}
}
}, []);
@@ -107,12 +115,12 @@ function EditorPageContent() {
const init = async () => {
try {
// Check auth
- const authStatus = sessionStorage.getItem('admin_authenticated');
- const sessionToken = sessionStorage.getItem('admin_session_token');
-
- if (authStatus === 'true' && sessionToken) {
+ const authStatus = sessionStorage.getItem("admin_authenticated");
+ const sessionToken = sessionStorage.getItem("admin_session_token");
+
+ if (authStatus === "true" && sessionToken) {
setIsAuthenticated(true);
-
+
// Load project if editing
if (projectId) {
await loadProject(projectId);
@@ -123,8 +131,8 @@ function EditorPageContent() {
setIsAuthenticated(false);
}
} catch (error) {
- if (process.env.NODE_ENV === 'development') {
- console.error('Error in init:', error);
+ if (process.env.NODE_ENV === "development") {
+ console.error("Error in init:", error);
}
setIsAuthenticated(false);
} finally {
@@ -138,21 +146,21 @@ function EditorPageContent() {
const handleSave = async () => {
try {
setIsSaving(true);
-
+
// Validate required fields
if (!formData.title.trim()) {
- alert('Please enter a project title');
+ alert("Please enter a project title");
return;
}
-
+
if (!formData.description.trim()) {
- alert('Please enter a project description');
+ alert("Please enter a project description");
return;
}
-
- const url = projectId ? `/api/projects/${projectId}` : '/api/projects';
- const method = projectId ? 'PUT' : 'POST';
-
+
+ const url = projectId ? `/api/projects/${projectId}` : "/api/projects";
+ const method = projectId ? "PUT" : "POST";
+
// Prepare data for saving - only include fields that exist in the database schema
const saveData = {
title: formData.title.trim(),
@@ -166,94 +174,123 @@ function EditorPageContent() {
published: formData.published,
featured: formData.featured,
// Add required fields that might be missing
- date: new Date().toISOString().split('T')[0] // Current date in YYYY-MM-DD format
+ date: new Date().toISOString().split("T")[0], // Current date in YYYY-MM-DD format
};
-
+
const response = await fetch(url, {
method,
headers: {
- 'Content-Type': 'application/json',
- 'x-admin-request': 'true'
+ "Content-Type": "application/json",
+ "x-admin-request": "true",
},
- body: JSON.stringify(saveData)
+ body: JSON.stringify(saveData),
});
if (response.ok) {
const savedProject = await response.json();
-
+
// Update local state with the saved project data
setProject(savedProject);
- setFormData(prev => ({
+ setFormData((prev) => ({
...prev,
- title: savedProject.title || '',
- description: savedProject.description || '',
- content: savedProject.content || '',
- category: savedProject.category || 'web',
+ title: savedProject.title || "",
+ description: savedProject.description || "",
+ content: savedProject.content || "",
+ category: savedProject.category || "web",
tags: savedProject.tags || [],
featured: savedProject.featured || false,
published: savedProject.published || false,
- github: savedProject.github || '',
- live: savedProject.live || '',
- image: savedProject.imageUrl || ''
+ github: savedProject.github || "",
+ live: savedProject.live || "",
+ image: savedProject.imageUrl || "",
}));
-
+
// Show success and redirect
- alert('Project saved successfully!');
+ alert("Project saved successfully!");
setTimeout(() => {
- window.location.href = '/manage';
+ window.location.href = "/manage";
}, 1000);
} else {
const errorData = await response.json();
- if (process.env.NODE_ENV === 'development') {
- console.error('Error saving project:', response.status, errorData);
+ if (process.env.NODE_ENV === "development") {
+ console.error("Error saving project:", response.status, errorData);
}
- alert(`Error saving project: ${errorData.error || 'Unknown error'}`);
+ alert(`Error saving project: ${errorData.error || "Unknown error"}`);
}
} catch (error) {
- if (process.env.NODE_ENV === 'development') {
- console.error('Error saving project:', error);
+ if (process.env.NODE_ENV === "development") {
+ console.error("Error saving project:", error);
}
- alert(`Error saving project: ${error instanceof Error ? error.message : 'Unknown error'}`);
+ alert(
+ `Error saving project: ${error instanceof Error ? error.message : "Unknown error"}`,
+ );
} finally {
setIsSaving(false);
}
};
- const handleInputChange = (field: string, value: string | boolean | string[]) => {
- setFormData(prev => ({
+ const handleInputChange = (
+ field: string,
+ value: string | boolean | string[],
+ ) => {
+ setFormData((prev) => ({
...prev,
- [field]: value
+ [field]: value,
}));
};
const handleTagsChange = (tagsString: string) => {
- const tags = tagsString.split(',').map(tag => tag.trim()).filter(tag => tag);
- setFormData(prev => ({
+ const tags = tagsString
+ .split(",")
+ .map((tag) => tag.trim())
+ .filter((tag) => tag);
+ setFormData((prev) => ({
...prev,
- tags
+ tags,
}));
};
// Markdown components for react-markdown with security
const markdownComponents = {
- a: ({ node, ...props }: { node?: unknown; href?: string; children?: React.ReactNode }) => {
+ a: ({
+ node: _node,
+ ...props
+ }: {
+ node?: unknown;
+ href?: string;
+ children?: React.ReactNode;
+ }) => {
// Validate URLs to prevent javascript: and data: protocols
- const href = props.href || '';
- const isSafe = href && !href.startsWith('javascript:') && !href.startsWith('data:');
+ const href = props.href || "";
+ const isSafe =
+ href && !href.startsWith("javascript:") && !href.startsWith("data:");
return (
);
},
- img: ({ node, ...props }: { node?: unknown; src?: string; alt?: string }) => {
+ img: ({
+ node: _node,
+ ...props
+ }: {
+ node?: unknown;
+ src?: string;
+ alt?: string;
+ }) => {
// Validate image URLs
- const src = props.src || '';
- const isSafe = src && !src.startsWith('javascript:') && !src.startsWith('data:');
- return isSafe ? 
: null;
+ const src = props.src || "";
+ const isSafe =
+ src && !src.startsWith("javascript:") && !src.startsWith("data:");
+ // eslint-disable-next-line @next/next/no-img-element
+ return isSafe ? : null;
},
};
@@ -266,46 +303,46 @@ function EditorPageContent() {
if (!selection || selection.rangeCount === 0) return;
const range = selection.getRangeAt(0);
- let newText = '';
-
+ let newText = "";
+
switch (format) {
- case 'bold':
- newText = `**${selection.toString() || 'bold text'}**`;
+ case "bold":
+ newText = `**${selection.toString() || "bold text"}**`;
break;
- case 'italic':
- newText = `*${selection.toString() || 'italic text'}*`;
+ case "italic":
+ newText = `*${selection.toString() || "italic text"}*`;
break;
- case 'code':
- newText = `\`${selection.toString() || 'code'}\``;
+ case "code":
+ newText = `\`${selection.toString() || "code"}\``;
break;
- case 'h1':
- newText = `# ${selection.toString() || 'Heading 1'}`;
+ case "h1":
+ newText = `# ${selection.toString() || "Heading 1"}`;
break;
- case 'h2':
- newText = `## ${selection.toString() || 'Heading 2'}`;
+ case "h2":
+ newText = `## ${selection.toString() || "Heading 2"}`;
break;
- case 'h3':
- newText = `### ${selection.toString() || 'Heading 3'}`;
+ case "h3":
+ newText = `### ${selection.toString() || "Heading 3"}`;
break;
- case 'list':
- newText = `- ${selection.toString() || 'List item'}`;
+ case "list":
+ newText = `- ${selection.toString() || "List item"}`;
break;
- case 'orderedList':
- newText = `1. ${selection.toString() || 'List item'}`;
+ case "orderedList":
+ newText = `1. ${selection.toString() || "List item"}`;
break;
- case 'quote':
- newText = `> ${selection.toString() || 'Quote'}`;
+ case "quote":
+ newText = `> ${selection.toString() || "Quote"}`;
break;
- case 'link':
- const url = prompt('Enter URL:');
+ case "link":
+ const url = prompt("Enter URL:");
if (url) {
- newText = `[${selection.toString() || 'link text'}](${url})`;
+ newText = `[${selection.toString() || "link text"}](${url})`;
}
break;
- case 'image':
- const imageUrl = prompt('Enter image URL:');
+ case "image":
+ const imageUrl = prompt("Enter image URL:");
if (imageUrl) {
- newText = ``;
+ newText = ``;
}
break;
}
@@ -313,11 +350,11 @@ function EditorPageContent() {
if (newText) {
range.deleteContents();
range.insertNode(document.createTextNode(newText));
-
+
// Update form data
- setFormData(prev => ({
+ setFormData((prev) => ({
...prev,
- content: content.textContent || ''
+ content: content.textContent || "",
}));
}
};
@@ -336,7 +373,9 @@ function EditorPageContent() {
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
className="w-12 h-12 border-3 border-blue-500 border-t-transparent rounded-full mx-auto mb-6"
/>
-
@@ -347,7 +386,7 @@ function EditorPageContent() {
if (!isAuthenticated) {
return (
-
-
-
- {chatHistory.map((msg, i) => (
-
-
- ))}
- {isLoading && (
-
-
+
);
-};
+}
diff --git a/app/components/BackgroundBlobsClient.tsx b/app/components/BackgroundBlobsClient.tsx
new file mode 100644
index 0000000..1b8bd0a
--- /dev/null
+++ b/app/components/BackgroundBlobsClient.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import React from "react";
+
+// Dynamically import the heavy framer-motion component on the client only
+const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs"), { ssr: false });
+
+export default function BackgroundBlobsClient() {
+ return
- {msg.text}
-
-
-
-
+ {/* Main Container */}
+
+ {/* Header - Always Visible - Changed from button to div to fix nesting error */}
+
- {/* Activity Bubbles */}
- setIsExpanded(!isExpanded)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ setIsExpanded(!isExpanded);
+ }
+ }}
+ className="w-full px-4 py-3 flex items-center justify-between hover:bg-white/5 transition-colors cursor-pointer"
+ >
+
+
+
+
+
-
+
+ {
+ e.stopPropagation();
+ setIsMinimized(true);
+ }}
+ className="p-1 hover:bg-white/10 rounded-lg transition-colors cursor-pointer"
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.stopPropagation();
+ setIsMinimized(true);
+ }
+ }}
>
- setChatMessage(e.target.value)}
- placeholder="Ask me anything..."
- disabled={isLoading}
- className="flex-1 bg-white border-2 border-stone-200 rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-liquid-mint focus:border-transparent disabled:opacity-50 transition-all duration-300"
- />
-
-
-
-
- )}
-
+
+ {isExpanded ? (
+
-
- {renderActivityBubble()}
- {renderMusicBubble()}
- {renderStatusBubble()}
-
-
- {/* Chat Toggle Button with Notification Indicator */}
- setShowChat(!showChat)}
- className="relative bg-stone-900 text-white rounded-full p-4 shadow-xl hover:bg-stone-950 transition-all duration-500 ease-out"
- title="Ask me anything about Dennis"
- >
-
+ {isExpanded && (
+
-
+
-
+
+
+ {/* CODING CARD */}
+ {data.coding && (
+
+ {/* "RIGHT NOW" Indicator */}
+ {data.coding.isActive && (
+
+ )}
+
+ {/* GAMING CARD */}
+ {data.gaming?.isPlaying && (
+
+ {/* "RIGHT NOW" Indicator */}
+
+ )}
+
+ {/* MUSIC CARD */}
+ {data.music?.isPlaying && (
+
+
+ {/* "RIGHT NOW" Indicator */}
+
+ )}
+
+ {/* Quote of the Day (when idle) */}
+ {!hasActivity && quote && (
+
+
)}
-
+ Right Now
+
+ )}
+
+
+
+
+ {data.coding.isActive ? (
+
+
+
+ {data.coding.isActive ? (
+ <>
+
+
+
+
+
+
+
+ Coding Live
+
+
+ + {data.coding.project || "Active Project"} +
++ {data.coding.file || "Writing code..."} +
+ {data.coding.language && ( +
+
+ {data.coding.language}
+
+
+ )}
+
+ ) : (
+ <>
+
+
+ + {data.coding.stats?.time || "0m"} +
++ {data.coding.stats?.topLang || "No activity yet"} +
+ + )} +
+ Right Now
+
+
+ {/* Background Glow */}
+
+
+
+
+
+ {data.gaming.image ? (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ Gaming Now
+
+
+ + {data.gaming.name} +
++ {data.gaming.details || + data.gaming.state || + "Playing..."} +
+
+ Right Now
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spotify
+
+ {/* Equalizer Animation */}
+
+
+ {[1, 2, 3].map((i) => (
+
+ + {data.music.track} +
++ {data.music.artist} +
+
+
+ )}
+
+ {/* Status Footer */}
+
+
+ + Quote of the moment +
++ "{quote.content}" +
++ โ {quote.author} +
+
+
+
+
+
+ {data.status.text === "dnd"
+ ? "Do Not Disturb"
+ : data.status.text}
+
+
+
+ Updates every 30s
+
+
+
+
+ {/* Messages */}
+
+
+
+
+
+
+
+
+
+
+ + Dennis's AI Assistant +
+Always online
+
+
+
+
+
+ {messages.map((message) => (
+
+
+ ))}
+
+ {/* Typing Indicator */}
+ {isLoading && (
+
+
+ )}
+
+
+
+
+ {/* Input */}
+
+
+ + {message.text} +
++ {message.timestamp.toLocaleTimeString([], { + hour: "2-digit", + minute: "2-digit", + })} +
+
+
+
+
+
+
+
+ setInputValue(e.target.value)}
+ onKeyPress={handleKeyPress}
+ placeholder="Ask anything..."
+ disabled={isLoading}
+ className="flex-1 px-3 md:px-4 py-2 text-sm bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-full border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+ />
+
+
+
+ {/* Quick Actions */}
+
+ {[
+ "What are Dennis's skills?",
+ "Tell me about his projects",
+ "How can I contact him?",
+ ].map((suggestion, index) => (
+
+ ))}
+
+ Loading Editor
++ Loading Editor +
Preparing your workspace...
-
Access Denied
-You need to be logged in to access the editor.
++ You need to be logged in to access the editor. +
- +