denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fully integrated grid activity and chat

Browse Source 
Removed floating overlays. Integrated ActivityFeed and Chat directly into Bento grid cells. Refined layout for maximum clarity and 'Dennis' feel.
This commit is contained in:
denshooter
2026-02-16 01:21:49 +01:00
parent c3f55c92ed
commit 7603cb6298
6 changed files with 178 additions and 2067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/components/About.tsx
View File

@@ -1,16 +1,17 @@
"use client";
import { useState, useEffect } from "react";
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowRight, Send } from "lucide-react";
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowRight } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import type { JSONContent } from "@tiptap/react";
import RichTextClient from "./RichTextClient";
import CurrentlyReading from "./CurrentlyReading";
import ReadBooks from "./ReadBooks";
import { motion, AnimatePresence } from "framer-motion";
import { motion } from "framer-motion";
import { TechStackCategory, Hobby } from "@/lib/directus";
import Link from "next/link";
import ActivityFeed from "./ActivityFeed";
import BentoChat from "./BentoChat";
const iconMap: Record<string, any> = {
Globe, Server, Code, Wrench, Shield, Activity, Lightbulb, Gamepad2
@@ -73,7 +74,7 @@ const About = () => {
</div>
<div className="pt-8">
<div className="inline-block bg-liquid-mint/5 px-8 py-4 rounded-3xl border border-liquid-mint/20">
<p className="text-[10px] font-black uppercase tracking-[0.3em] text-liquid-mint mb-2">{t("funFactTitle")}</p>
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-liquid-mint mb-2">{t("funFactTitle")}</p>
<p className="text-base font-bold opacity-90">{t("funFactBody")}</p>
</div>
</div>
@@ -109,41 +110,23 @@ const About = () => {
)}
</div>
</div>
{/* Design Element */}
<div className="absolute -bottom-10 -right-10 w-40 h-40 bg-liquid-mint/10 blur-[80px] rounded-full" />
</motion.div>
{/* 3. AI Chat Box (Direct Integration) */}
{/* 3. AI Chat Box (Integrated) */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.2 }}
className="md:col-span-12 lg:col-span-4 bg-gradient-to-br from-liquid-purple/10 to-liquid-sky/10 dark:from-stone-900 rounded-[3rem] p-10 border border-liquid-purple/30 dark:border-stone-800/60 flex flex-col justify-between group shadow-sm overflow-hidden relative"
className="md:col-span-12 lg:col-span-4 bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 flex flex-col shadow-sm"
>
<div className="relative z-10">
<div className="flex justify-between items-start mb-10">
<div className="w-14 h-14 rounded-2xl bg-white dark:bg-stone-800 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
<MessageSquare className="text-liquid-purple" size={28} />
</div>
<div className="flex -space-x-2">
{[1,2,3].map(i => <div key={i} className="w-8 h-8 rounded-full border-2 border-white dark:border-stone-900 bg-stone-200 dark:bg-stone-700 overflow-hidden shadow-sm"><img src={`/images/me.jpg`} className="w-full h-full object-cover" /></div>)}
</div>
</div>
<h3 className="text-3xl font-black text-stone-900 dark:text-stone-50 mb-4 tracking-tighter">Ask my AI Twin</h3>
<p className="text-stone-600 dark:text-stone-400 text-lg font-light leading-relaxed mb-8">Get instant answers about my stack, availability or experience.</p>
<button
onClick={() => {
const chatBtn = document.querySelector('[aria-label="Open chat"]') as HTMLElement;
if (chatBtn) chatBtn.click();
}}
className="w-full py-4 bg-white dark:bg-stone-800 rounded-2xl border border-stone-200 dark:border-stone-700 flex items-center justify-between px-6 font-bold text-stone-400 hover:text-stone-900 dark:hover:text-white transition-all shadow-sm"
>
<span>Type a message...</span>
<Send size={18} className="text-liquid-purple" />
</button>
<div className="flex items-center gap-2 mb-8">
<MessageSquare className="text-liquid-purple" size={24} />
<h3 className="text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter text-liquid-purple">AI Twin</h3>
</div>
<div className="flex-1">
<BentoChat />
</div>
</motion.div>
@@ -158,10 +141,10 @@ const About = () => {
<div className="grid grid-cols-1 md:grid-cols-4 gap-12">
{techStack.map((cat) => (
<div key={cat.id} className="space-y-6">
<h4 className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-400">{cat.name}</h4>
<h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">{cat.name}</h4>
<div className="flex flex-wrap gap-2">
{cat.items?.map((item: any) => (
<span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700/50 hover:border-liquid-mint transition-colors">
<span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800/50 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700/50 hover:border-liquid-mint transition-colors">
{item.name}
</span>
))}
@@ -171,7 +154,7 @@ const About = () => {
</div>
</motion.div>
{/* 5. Library Link & Hobbies */}
{/* 5. Library & Hobbies */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -191,7 +174,6 @@ const About = () => {
</div>
<CurrentlyReading />
</div>
<div className="absolute top-0 right-0 w-32 h-32 bg-liquid-purple/5 blur-[60px] rounded-full" />
</div>
<div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between">