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

fix: build and test stability for design overhaul
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 9m19s
Details

Browse Source 
Fixed missing types, import errors, and updated test suites to match the new editorial design. Verified Docker container build.
This commit is contained in:
denshooter
2026-02-16 02:54:02 +01:00
parent 6213a4875a
commit 6f62b37c3a
17 changed files with 296 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
app/components/About.tsx
View File

@@ -1,13 +1,14 @@
"use client";
import { useState, useEffect } from "react";
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowUpRight, Book } 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 } from "framer-motion";
import { TechStackCategory, Hobby, BookReview } from "@/lib/directus";
import { TechStackCategory, Hobby } from "@/lib/directus";
import Link from "next/link";
import ActivityFeed from "./ActivityFeed";
import BentoChat from "./BentoChat";
@@ -67,7 +68,7 @@ const About = () => {
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
{/* 1. Bio Box */}
{/* 1. Large Bio Text */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -100,7 +101,7 @@ const About = () => {
</div>
</motion.div>
{/* 2. Status Box (Currently) */}
{/* 2. Activity / Status Box */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -143,100 +144,78 @@ const About = () => {
className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
>
<div className="grid grid-cols-1 sm:grid-cols-2 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.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 hover:border-liquid-mint transition-colors">
{item.name}
</span>
))}
{isLoading ? (
Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="space-y-6">
<Skeleton className="h-3 w-20" />
<div className="flex flex-wrap gap-2">
<Skeleton className="h-8 w-24 rounded-xl" />
<Skeleton className="h-8 w-16 rounded-xl" />
<Skeleton className="h-8 w-20 rounded-xl" />
</div>
</div>
</div>
))}
))
) : (
techStack.map((cat) => (
<div key={cat.id} className="space-y-6">
<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">
{item.name}
</span>
))}
</div>
</div>
))
)}
</div>
</motion.div>
{/* 5. Library (Visual Teaser) */}
{/* 5. Library & Hobbies */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
className="md:col-span-12 lg:col-span-6 bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm overflow-hidden relative flex flex-col justify-between group"
className="md:col-span-12 grid grid-cols-1 md:grid-cols-2 gap-8"
>
<div className="relative z-10">
<div className="flex justify-between items-start mb-12">
<div className="space-y-2">
<h3 className="text-3xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-3 uppercase tracking-tighter">
<BookOpen className="text-liquid-purple" size={32} /> Library
<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 group overflow-hidden relative">
<div className="relative z-10">
<div className="flex justify-between items-center mb-10">
<h3 className="text-2xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-3 uppercase tracking-tighter">
<BookOpen className="text-liquid-purple" size={24} /> Library
</h3>
<p className="text-stone-500 font-bold text-sm">ARCHIVE OF KNOWLEDGE</p>
<Link href={`/${locale}/books`} className="group flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all">
View All <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
</Link>
</div>
<Link href={`/${locale}/books`} className="w-14 h-14 rounded-2xl bg-stone-900 dark:bg-stone-100 flex items-center justify-center text-white dark:text-stone-900 hover:scale-110 transition-transform shadow-xl">
<ArrowUpRight size={24} />
</Link>
</div>
<div className="space-y-6">
<CurrentlyReading />
<div className="flex items-center gap-4 bg-liquid-purple/5 p-6 rounded-[2rem] border border-liquid-purple/10">
<div className="w-12 h-12 rounded-full bg-white dark:bg-stone-800 flex items-center justify-center shadow-sm">
<Book className="text-liquid-purple" size={20} />
</div>
<div>
{isLoading ? (
<Skeleton className="h-6 w-24 mb-1" />
) : (
<p className="text-xl font-black text-stone-900 dark:text-stone-100">{reviewsCount}+ Books</p>
)}
<p className="text-sm text-stone-500">Read and summarized in my personal collection.</p>
</div>
<div className="mt-6">
<ReadBooks />
</div>
</div>
</div>
<div className="absolute -bottom-20 -right-20 w-64 h-64 bg-liquid-purple/5 blur-[100px] rounded-full group-hover:bg-liquid-purple/10 transition-colors" />
</motion.div>
{/* 6. Hobbies (Clean Editorial Look) */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.5 }}
className="md:col-span-12 lg:col-span-6 bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
>
<h3 className="text-3xl font-black text-stone-900 dark:text-stone-50 mb-10 flex items-center gap-3 uppercase tracking-tighter">
<Gamepad2 className="text-liquid-mint" size={32} /> Beyond Dev
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{isLoading ? (
Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="flex items-start gap-4 p-6 bg-stone-50 dark:bg-stone-800/50 rounded-[2rem] border border-stone-100 dark:border-stone-700/50">
<Skeleton className="w-10 h-10 rounded-xl shrink-0" />
<div className="space-y-2 flex-1">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-32" />
</div>
</div>
))
) : (
hobbies.map((hobby) => {
const Icon = iconMap[hobby.icon] || Lightbulb;
return (
<div key={hobby.id} className="flex items-start gap-4 p-6 bg-stone-50 dark:bg-stone-800/50 rounded-[2rem] border border-stone-100 dark:border-stone-700/50">
<div className="w-10 h-10 rounded-xl bg-white dark:bg-stone-900 flex items-center justify-center shadow-sm shrink-0">
<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">
<div className="flex flex-wrap gap-4 mb-10">
{isLoading ? (
Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="w-12 h-12 rounded-2xl" />)
) : (
hobbies.map((hobby) => {
const Icon = iconMap[hobby.icon] || Lightbulb;
return (
<div key={hobby.id} className="w-12 h-12 rounded-2xl bg-stone-50 dark:bg-stone-800 flex items-center justify-center shadow-sm border border-stone-100 dark:border-stone-700">
<Icon size={20} className="text-liquid-mint" />
</div>
<div>
<p className="font-bold text-stone-900 dark:text-stone-100 text-base">{hobby.title}</p>
<p className="text-xs text-stone-500 line-clamp-2">Passion & Mindset</p>
</div>
</div>
)
})
)}
)
})
)}
</div>
<div className="space-y-2">
<h3 className="text-2xl font-black text-stone-900 dark:text-stone-50">{t("hobbiesTitle")}</h3>
<p className="text-stone-500 font-light text-lg">Curiosity beyond software engineering.</p>
</div>
</div>
</motion.div>

24
app/components/ActivityFeed.tsx
View File

@@ -1,15 +1,13 @@
"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import { Code2, Disc3, Gamepad2, Zap, Quote as QuoteIcon } from "lucide-react";
import { Disc3, Gamepad2, Zap, Quote as QuoteIcon } from "lucide-react";
interface StatusData {
status: { text: string; color: string; };
music: { isPlaying: boolean; track: string; artist: string; album: string; albumArt: string; url: string; } | null;
music: { isPlaying: boolean; track: string; artist: string; albumArt: string; url: string; } | null;
gaming: { isPlaying: boolean; name: string; image: string | null; state?: string | number; details?: string | number; } | null;
coding: { isActive: boolean; project?: string; file?: string; language?: string; stats?: { time: string; topLang: string; topProject: string; }; } | null;
coding: { isActive: boolean; project?: string; file?: string; language?: string; } | null;
customActivities?: Record<string, any>;
}
@@ -64,7 +62,7 @@ export default function ActivityFeed({
);
setHasActivity(isActive);
onActivityChange?.(isActive);
} catch (error) {
} catch {
setHasActivity(false);
onActivityChange?.(false);
}
@@ -118,10 +116,16 @@ export default function ActivityFeed({
<span className="text-[10px] font-black uppercase tracking-widest text-indigo-400">Gaming</span>
</div>
<div className="flex gap-4">
{data.gaming.image && <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg"><img src={data.gaming.image} className="w-full h-full object-cover" /></div>}
{data.gaming.image && (
<div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg relative">
<img src={data.gaming.image} alt={data.gaming.name} className="w-full h-full object-cover" />
</div>
)}
<div className="min-w-0 flex flex-col justify-center">
<p className="font-bold text-white text-base truncate">{data.gaming.name}</p>
<p className="text-xs text-white/50 truncate">In Game</p>
<p className="text-xs text-white/50 truncate">
{getSafeGamingText(data.gaming.details, data.gaming.state, "In Game")}
</p>
</div>
</div>
</motion.div>
@@ -134,7 +138,9 @@ export default function ActivityFeed({
<span className="text-[10px] font-black uppercase tracking-widest text-white/40">Listening</span>
</div>
<div className="flex gap-4">
<div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-2xl"><img src={data.music.albumArt} className="w-full h-full object-cover" /></div>
<div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-2xl relative">
<img src={data.music.albumArt} alt="Album Art" className="w-full h-full object-cover" />
</div>
<div className="min-w-0 flex flex-col justify-center">
<p className="font-bold text-white text-base truncate">{data.music.track}</p>
<p className="text-xs text-white/50 truncate">{data.music.artist}</p>