fix: build and test stability for design overhaul
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
+58
-79
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user