Added prettier auto-format and cleaned up comments
This commit is contained in:
GeorgeWebberley
parent
49e62d5e2f
commit
1ff0d61a19
0
.prettierrc
Normal file
0
.prettierrc
Normal file
7
.vscode/settings.json
vendored
Normal file
7
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
"use client";
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Globe, Smartphone, Server, Gamepad2, Activity } from 'lucide-react';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white p-6 md:p-12 lg:p-24">
|
||||
<header className="mb-12">
|
||||
<h1 className="text-4xl font-bold tracking-tight">George W.</h1>
|
||||
<p className="text-neutral-400 mt-2">Senior Full Stack Engineer & Tech Lead</p>
|
||||
</header>
|
||||
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
{/* Top Row: The Architect (Wide) */}
|
||||
<div className="md:col-span-2 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex flex-col justify-between min-h-[320px]">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-4">The Architect</h2>
|
||||
<p className="text-neutral-400 leading-relaxed max-w-2xl">
|
||||
Bridging the gap between complex system architecture and fluid user experiences.
|
||||
I specialize in designing distributed web systems and cross-platform mobile apps
|
||||
with a relentless focus on performance, self-sovereign infrastructure, and automated delivery pipelines.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3 mt-8 text-[10px] font-mono text-neutral-600">
|
||||
{['#Architecture', '#SystemDesign', '#Automation', '#FullStack', '#Scalability'].map(tag => (
|
||||
<span key={tag}>{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Row: Hetzner Node (Narrow) */}
|
||||
<div className="p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex flex-col justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
<span className="text-sm font-medium">Hetzner Node-01</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-end">
|
||||
<span className="text-xs text-neutral-500 uppercase tracking-widest">Status: UP</span>
|
||||
<Activity className="text-neutral-800 w-12 h-12" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle Row: Web Systems */}
|
||||
<Link href="/projects/web" className="group">
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="p-6 rounded-3xl bg-neutral-900 border border-neutral-800 h-full flex flex-col justify-between min-h-[260px] relative overflow-hidden transition-colors hover:border-blue-500/30"
|
||||
>
|
||||
<div>
|
||||
<Globe className="text-blue-400 w-6 h-6 mb-4" />
|
||||
<h3 className="font-bold text-xl mb-2">Web Systems</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed">
|
||||
Architecting distributed platforms with a focus on high-availability, API design, and containerized deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-6">
|
||||
{['Next.js', 'Python', 'Node.js', 'Caddy', 'PostgreSQL'].map(tech => (
|
||||
<span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-blue-400 group-hover:border-blue-500/20">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Middle Row: Mobile Apps */}
|
||||
<Link href="/projects/mobile" className="group">
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="p-6 rounded-3xl bg-neutral-900 border border-neutral-800 h-full flex flex-col justify-between min-h-[260px] relative overflow-hidden transition-colors hover:border-purple-500/30"
|
||||
>
|
||||
<div>
|
||||
<Smartphone className="text-purple-400 w-6 h-6 mb-4" />
|
||||
<h3 className="font-bold text-xl mb-2">Mobile Apps</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed">
|
||||
Building fluid, cross-platform experiences using reactive state management and native hardware integration.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-6">
|
||||
{['Android', 'iOS', 'Flutter', 'Riverpod', 'Stores'].map(tech => (
|
||||
<span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-purple-400 group-hover:border-purple-500/20">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Middle Row: Infrastructure (The New Card) */}
|
||||
<Link href="/projects/infrastructure" className="group">
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="p-6 rounded-3xl bg-neutral-900 border border-neutral-800 h-full flex flex-col justify-between min-h-[260px] relative overflow-hidden transition-colors hover:border-green-500/30"
|
||||
>
|
||||
<div>
|
||||
<Server className="text-green-400 w-6 h-6 mb-4" />
|
||||
<h3 className="font-bold text-xl mb-2">DevOps</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed">
|
||||
Managing self-hosted cloud nodes with automated CI/CD pipelines, secure proxying, and proactive monitoring.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-6">
|
||||
{['Docker', 'Woodpecker', 'Hetzner', 'Linux', 'Uptime'].map(tech => (
|
||||
<span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-green-400 group-hover:border-green-500/20">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Bottom Row: The Forge (Wide) */}
|
||||
<div className="md:col-span-3 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex items-center gap-6">
|
||||
<div className="p-4 bg-orange-500/10 rounded-2xl border border-orange-500/20">
|
||||
<Gamepad2 className="text-orange-500 w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-xl">The Forge</h3>
|
||||
<p className="text-sm text-neutral-500">Indie Game Dev & Creative Prototypes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,195 +0,0 @@
|
|||
"use client";
|
||||
import { motion } from "framer-motion";
|
||||
import { Server, Globe, Smartphone, Gamepad2, Activity } from "lucide-react";
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white p-6 md:p-12 lg:p-24">
|
||||
{/* Header section */}
|
||||
<header className="mb-12">
|
||||
<h1 className="text-4xl font-bold tracking-tight">George W.</h1>
|
||||
<p className="text-neutral-400 mt-2">Senior Full Stack Engineer & Tech Lead</p>
|
||||
</header>
|
||||
|
||||
{/* Bento Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 auto-rows-[180px]">
|
||||
|
||||
{/* About Me - Large Card */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="md:col-span-2 md:row-span-2 p-8 rounded-3xl bg-neutral-900 border border-neutral-800 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">The Architect</h2>
|
||||
<p className="text-neutral-400 leading-relaxed">
|
||||
Bridging the gap between complex system architecture and fluid user experiences. I specialize in designing distributed web systems and cross-platform mobile apps with a relentless focus on performance, self-sovereign infrastructure, and automated delivery pipelines.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2 text-xs font-mono text-neutral-500">
|
||||
<span>#NextJS</span> <span>#Flutter</span> <span>#Typescript</span> <span>#Python</span> <span>#Node</span> <span>#Docker</span> <span>#Kubernetes</span> <span>#Serverless</span> <span>#CI/CD</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Live Pulse Card */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="group md:col-span-2 p-6 rounded-3xl bg-neutral-900 border border-neutral-800 flex flex-col justify-center relative overflow-hidden transition-all duration-300 min-h-[180px]"
|
||||
>
|
||||
{/* The Monitor Map (Easily editable) */}
|
||||
{(() => {
|
||||
const monitors = [
|
||||
{ id: 2, name: "Datasaur" },
|
||||
{ id: 6, name: "Audiobookshelf" },
|
||||
{ id: 7, name: "Woodpecker CI" },
|
||||
{ id: 8, name: "Forgejo Git" },
|
||||
{ id: 9, name: "Server dashboard" },
|
||||
{ id: 10, name: "Ratoong" },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Default View */}
|
||||
<div className="flex items-center justify-between w-full group-hover:opacity-0 group-hover:pointer-events-none transition-opacity duration-300">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
<span className="font-medium text-white">Hetzner Node-01</span>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<p className="text-sm text-neutral-500">System Status:</p>
|
||||
<img
|
||||
src="https://status.georgew.dev/api/status-page/dashboard/badge"
|
||||
alt="Overall Status"
|
||||
className="h-5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Activity className="text-neutral-700 w-8 h-8" />
|
||||
</div>
|
||||
|
||||
{/* Hover View: Friendly Names */}
|
||||
<div className="absolute inset-0 p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center bg-neutral-900/95 backdrop-blur-sm">
|
||||
<h4 className="text-[10px] font-mono text-neutral-500 mb-3 uppercase tracking-[0.2em]">Service Registry</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
{monitors.map((m) => (
|
||||
<div key={m.id} className="flex items-center justify-between bg-neutral-800/40 p-2 rounded-lg border border-neutral-700/30">
|
||||
<span className="text-[11px] font-medium text-neutral-300 truncate mr-2">{m.name}</span>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<img src={`https://status.georgew.dev/api/badge/${m.id}/status`} className="h-3" alt="up" />
|
||||
<img src={`https://status.georgew.dev/api/badge/${m.id}/avg-response/24`} className="h-3 opacity-60" alt="ms" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</motion.div>
|
||||
|
||||
{/* Project One */}
|
||||
<Link href="/projects/web" className="h-full">
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="group p-6 rounded-3xl bg-neutral-900 border border-neutral-800 h-full relative overflow-hidden cursor-pointer flex flex-col min-h-[260px]"
|
||||
>
|
||||
{/* Icon Container - Fixed size ensures it never disappears */}
|
||||
<div className="mb-4">
|
||||
<Globe className="text-blue-400 w-6 h-6" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-xl mb-1 text-white">Web Systems</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed mb-4">
|
||||
Architecting distributed platforms with a focus on high-availability, API design, and containerized deployment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tech Pips - Use 'flex-wrap' and 'gap-y' to handle multiline safely */}
|
||||
<div className="flex flex-wrap gap-x-2 gap-y-2 pt-2 border-t border-neutral-800/50">
|
||||
{['Next.js', 'Node.js', 'Python', 'PostgreSQL', 'Docker'].map((tech) => (
|
||||
<span key={tech} className="text-[9px] font-mono text-neutral-500 border border-neutral-800 px-2 py-1 rounded-md uppercase tracking-wider group-hover:border-blue-500/30 group-hover:text-blue-400 transition-colors">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Hover Indicator */}
|
||||
<div className="absolute top-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Project Two */}
|
||||
<Link href="/projects/mobile">
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
className="group p-6 rounded-3xl bg-neutral-900 border border-neutral-800 h-full relative overflow-hidden cursor-pointer flex flex-col"
|
||||
>
|
||||
<div className="mb-4">
|
||||
<Smartphone className="text-purple-400 w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="font-bold text-xl mb-1 text-white">Mobile Apps</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed mb-4">
|
||||
Building fluid, cross-platform experiences using reactive state management and native hardware integration.
|
||||
</p>
|
||||
|
||||
{/* Tech Pips */}
|
||||
<div className="flex flex-wrap gap-x-2 gap-y-2 pt-2 border-t border-neutral-800/50">
|
||||
{['Android', 'iOS', 'Flutter', 'Riverpod', 'Publishing'].map((tech) => (
|
||||
<span key={tech} className="text-[9px] font-mono text-neutral-500 border border-neutral-800 px-2 py-1 rounded-md uppercase tracking-wider group-hover:border-blue-500/30 group-hover:text-blue-400 transition-colors">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="absolute top-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="w-2 h-2 rounded-full bg-purple-500 animate-pulse" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Game Teaser / The Lab */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="md:col-span-2 p-6 rounded-3xl bg-gradient-to-br from-[#111] to-[#1a1a1a] border border-neutral-800 flex items-center gap-6"
|
||||
>
|
||||
<div className="p-4 rounded-2xl bg-neutral-800">
|
||||
<Gamepad2 className="w-8 h-8 text-orange-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold italic">The Forge</h3>
|
||||
<p className="text-sm text-neutral-500">Indie Game Dev & Prototypes</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Deployment Footer */}
|
||||
<footer className="mt-12 pt-8 border-t border-neutral-900 flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] text-neutral-600 font-mono tracking-wider uppercase">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<p>Pipeline Status</p>
|
||||
<img
|
||||
src="https://ci.georgew.dev/api/badges/11/status.svg"
|
||||
alt="Build Status"
|
||||
className="h-3 grayscale opacity-50 hover:opacity-100 hover:grayscale-0 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden md:block w-[1px] h-3 bg-neutral-800" />
|
||||
<p>Engine: Next.js 15 (Standalone)</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 bg-neutral-900/50 px-3 py-1 rounded-full border border-neutral-800/50">
|
||||
<div className="w-1 h-1 rounded-full bg-blue-500" />
|
||||
<p className="text-neutral-400">
|
||||
Deploy: {process.env.NEXT_PUBLIC_APP_VERSION || 'v1.0.0-dev'}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
135
app/page.tsx
135
app/page.tsx
|
|
@ -1,10 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Globe, Smartphone, Server, Gamepad2, Activity } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import MonitorCard from '@/components/MonitorCard';
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import { Globe, Smartphone, Server, Gamepad2, Activity } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import MonitorCard from "@/components/MonitorCard";
|
||||
|
||||
export default function Home() {
|
||||
const [isHoveringMonitors, setIsHoveringMonitors] = useState(false);
|
||||
|
|
@ -12,72 +12,97 @@ export default function Home() {
|
|||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white p-6 md:p-12 lg:p-24">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
|
||||
<header className="mb-12">
|
||||
<h1 className="text-4xl font-bold tracking-tight">George W.</h1>
|
||||
<p className="text-neutral-400 mt-2">Senior Full Stack Engineer & Tech Lead</p>
|
||||
<p className="text-neutral-400 mt-2">
|
||||
Senior Full Stack Engineer & Tech Lead
|
||||
</p>
|
||||
<div className="flex gap-6 text-[10px] font-mono tracking-[0.2em] uppercase mt-4">
|
||||
<a href="https://git.georgew.dev" className="text-neutral-500 hover:text-white transition-colors">
|
||||
<a
|
||||
href="https://git.georgew.dev"
|
||||
className="text-neutral-500 hover:text-white transition-colors"
|
||||
>
|
||||
Git
|
||||
</a>
|
||||
<a href="https://linkedin.com/in/georgew" className="text-neutral-500 hover:text-white transition-colors">
|
||||
<a
|
||||
href="https://linkedin.com/in/georgew"
|
||||
className="text-neutral-500 hover:text-white transition-colors"
|
||||
>
|
||||
LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-6 gap-6">
|
||||
|
||||
{/* Top Row Left: The Architect */}
|
||||
<div className="md:col-span-4 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex flex-col md:flex-row gap-8 min-h-[300px] overflow-hidden relative">
|
||||
{/* Background Decoration: Subtle Grid or Blueprint */}
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full opacity-[0.03] pointer-events-none">
|
||||
{/* You could place a subtle SVG circuit or architectural grid here */}
|
||||
</div>
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full opacity-[0.03] pointer-events-none"></div>
|
||||
|
||||
{/* Left: Bio & Tags */}
|
||||
{/* Description and tags */}
|
||||
<div className="flex-[1.5] flex flex-col justify-between relative z-10">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-4 tracking-tight">The Architect</h2>
|
||||
<h2 className="text-3xl font-bold mb-4 tracking-tight">
|
||||
The Architect
|
||||
</h2>
|
||||
<p className="text-base text-neutral-400 leading-relaxed max-w-lg">
|
||||
Bridging the gap between rigid regulatory requirements and fluid user experiences.
|
||||
I specialize in designing <span className="text-white">distributed systems</span> and
|
||||
<span className="text-white"> cross-platform mobile apps</span> with a focus on
|
||||
automated delivery and high-integrity code.
|
||||
Bridging the gap between rigid regulatory requirements and
|
||||
fluid user experiences. I specialize in designing{" "}
|
||||
<span className="text-white">distributed systems</span> and
|
||||
<span className="text-white">
|
||||
{" "}
|
||||
cross-platform mobile apps
|
||||
</span>{" "}
|
||||
with a focus on automated delivery and high-integrity code.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mt-8">
|
||||
{['#Architecture', '#Regulatory Compliance', '#Agile Leadership', '#DevOps'].map(tag => (
|
||||
<span key={tag} className="text-[10px] font-mono text-neutral-500 border border-neutral-800 px-2 py-1 rounded">
|
||||
{[
|
||||
"#Architecture",
|
||||
"#Regulatory Compliance",
|
||||
"#Agile Leadership",
|
||||
"#DevOps",
|
||||
].map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-[10px] font-mono text-neutral-500 border border-neutral-800 px-2 py-1 rounded"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vertical Divider */}
|
||||
<div className="hidden md:block w-px bg-neutral-800/50 self-stretch" />
|
||||
|
||||
{/* Right: Seniority Specs */}
|
||||
{/* Technical details */}
|
||||
<div className="flex-1 flex flex-col justify-around py-2 relative z-10">
|
||||
<div className="space-y-6">
|
||||
<section>
|
||||
<h4 className="text-[12px] font-mono text-blue-500 uppercase tracking-[0.2em] mb-2">Leadership</h4>
|
||||
<h4 className="text-[12px] font-mono text-blue-500 uppercase tracking-[0.2em] mb-2">
|
||||
Leadership
|
||||
</h4>
|
||||
<p className="text-xs text-neutral-300 leading-tight">
|
||||
Tech Lead & Scrum Master. Orchestrating sprint cycles, system design, and cross-functional team growth.
|
||||
Tech Lead & Scrum Master. Orchestrating sprint cycles,
|
||||
system design, and cross-functional team growth.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4 className="text-[12px] font-mono text-purple-500 uppercase tracking-[0.2em] mb-2">Integrity</h4>
|
||||
<h4 className="text-[12px] font-mono text-purple-500 uppercase tracking-[0.2em] mb-2">
|
||||
Integrity
|
||||
</h4>
|
||||
<p className="text-xs text-neutral-300 leading-tight">
|
||||
Experienced in <span className="italic">High-Stakes Environments</span> (Medical/Regulatory), QMS, and Cyber Essentials.
|
||||
Experienced in{" "}
|
||||
<span className="italic">High-Stakes Environments</span>{" "}
|
||||
(Medical/Regulatory), QMS, and Cyber Essentials.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4 className="text-[12px] font-mono text-green-500 uppercase tracking-[0.2em] mb-2">Infrastructure</h4>
|
||||
<h4 className="text-[12px] font-mono text-green-500 uppercase tracking-[0.2em] mb-2">
|
||||
Infrastructure
|
||||
</h4>
|
||||
<p className="text-xs text-neutral-300 leading-tight">
|
||||
Kubernetes, GCP, and automated CI/CD pipelines.
|
||||
</p>
|
||||
|
|
@ -86,8 +111,7 @@ export default function Home() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Top Row Right: The Service Registry (Restored) */}
|
||||
{/* Top Row Right: The Service Registry */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
onMouseEnter={() => setIsHoveringMonitors(true)}
|
||||
|
|
@ -107,15 +131,21 @@ export default function Home() {
|
|||
<Globe className="text-blue-400 w-6 h-6 mb-4" />
|
||||
<h3 className="font-bold text-xl mb-2">Web Systems</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed">
|
||||
Architecting distributed platforms with a focus on high-availability and containerized deployment.
|
||||
Architecting distributed platforms with a focus on
|
||||
high-availability and containerized deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-6">
|
||||
{['Next.js', 'Python', 'Node.js', 'Caddy', 'PostgreSQL'].map(tech => (
|
||||
<span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-blue-400 group-hover:border-blue-500/20 transition-all">
|
||||
{["Next.js", "Python", "Node.js", "Caddy", "PostgreSQL"].map(
|
||||
(tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-blue-400 group-hover:border-blue-500/20 transition-all"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
|
@ -130,15 +160,21 @@ export default function Home() {
|
|||
<Smartphone className="text-purple-400 w-6 h-6 mb-4" />
|
||||
<h3 className="font-bold text-xl mb-2">Mobile Apps</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed">
|
||||
Building fluid, cross-platform experiences using reactive state and native hardware integration.
|
||||
Building fluid, cross-platform experiences using reactive
|
||||
state and native hardware integration.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-6">
|
||||
{['Android', 'iOS', 'Flutter', 'Riverpod', 'Stores'].map(tech => (
|
||||
<span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-purple-400 group-hover:border-purple-500/20 transition-all">
|
||||
{["Android", "iOS", "Flutter", "Riverpod", "Stores"].map(
|
||||
(tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-purple-400 group-hover:border-purple-500/20 transition-all"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
|
@ -153,15 +189,21 @@ export default function Home() {
|
|||
<Server className="text-green-400 w-6 h-6 mb-4" />
|
||||
<h3 className="font-bold text-xl mb-2">DevOps</h3>
|
||||
<p className="text-sm text-neutral-500 leading-relaxed">
|
||||
Managing self-hosted cloud nodes with automated CI/CD pipelines and proactive monitoring.
|
||||
Managing self-hosted cloud nodes with automated CI/CD
|
||||
pipelines and proactive monitoring.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-6">
|
||||
{['Docker', 'Woodpecker', 'Hetzner', 'Linux', 'Uptime'].map(tech => (
|
||||
<span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-green-400 group-hover:border-green-500/20 transition-all">
|
||||
{["Docker", "Woodpecker", "Hetzner", "Linux", "Uptime"].map(
|
||||
(tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-green-400 group-hover:border-green-500/20 transition-all"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
|
@ -173,7 +215,9 @@ export default function Home() {
|
|||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-xl">The Forge</h3>
|
||||
<p className="text-sm text-neutral-500">Indie Game Dev & Creative Prototypes</p>
|
||||
<p className="text-sm text-neutral-500">
|
||||
Indie Game Dev & Creative Prototypes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -194,12 +238,11 @@ export default function Home() {
|
|||
<div className="flex items-center gap-4 bg-neutral-900/50 px-3 py-1 rounded-full border border-neutral-800/50">
|
||||
<div className="w-1 h-1 rounded-full bg-blue-500" />
|
||||
<p className="text-neutral-400">
|
||||
Deploy: {process.env.NEXT_PUBLIC_APP_VERSION || 'v1.0.0-dev'}
|
||||
Deploy: {process.env.NEXT_PUBLIC_APP_VERSION || "v1.0.0-dev"}
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { use } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, ExternalLink, Github, ShieldCheck, Cpu, Users } from "lucide-react";
|
||||
import { PROJECT_REGISTRY } from "@/data/projects";
|
||||
import Mermaid from "@/components/Mermaid";
|
||||
import ProjectShowcase from "@/components/ProjectShowcase";
|
||||
import ImageCarousel from "@/components/ImageCarousel";
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
|
||||
|
||||
export default function ProjectDetail({ params }: { params: Promise<{ category: string, slug: string }> }) {
|
||||
const { category, slug } = use(params);
|
||||
const project = PROJECT_REGISTRY.find((p) => p.slug === slug);
|
||||
|
||||
if (!project) return <div>Project Not Found</div>;
|
||||
|
||||
if (!project) return <div className="p-24 text-white font-mono">Project Log Not Found.</div>;
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white p-6 md:p-12 lg:p-24">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
|
||||
{/* Navigation */}
|
||||
<Link href={`/projects/${category}`} className="flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-[10px] uppercase tracking-widest">
|
||||
<ArrowLeft size={12} /> Back to {category}
|
||||
</Link>
|
||||
|
||||
{/* Header Section */}
|
||||
<header className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
|
||||
<motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
|
||||
<h1 className="text-6xl font-bold tracking-tighter mb-4">{project.title}</h1>
|
||||
<p className="text-blue-500 font-mono text-sm uppercase tracking-widest mb-6">{project.subtitle}</p>
|
||||
<p className="text-neutral-400 text-lg leading-relaxed">{project.description}</p>
|
||||
|
||||
<div className="flex gap-4 mt-8">
|
||||
{project.liveUrl && (
|
||||
<a href={project.liveUrl} className="flex items-center gap-2 bg-white text-black px-6 py-3 rounded-full font-bold text-sm hover:bg-neutral-200 transition-all">
|
||||
Launch Site <ExternalLink size={14} />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{project?.repoUrl && (
|
||||
<a href={project.repoUrl} className="flex items-center gap-2 border border-neutral-800 px-6 py-3 rounded-full font-bold text-sm hover:bg-neutral-900 transition-all">
|
||||
View Source <Github size={14} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Senior Stats Sidebar */}
|
||||
<motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-neutral-900/30 border border-neutral-800 p-8 rounded-3xl h-fit">
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<ShieldCheck className="text-blue-500" />
|
||||
<div>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">My Role</p>
|
||||
<p className="text-sm font-semibold">{project.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Cpu className="text-purple-500" />
|
||||
<div>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">Stack</p>
|
||||
<p className="text-sm font-semibold">{project.stack.join(", ")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Users className="text-green-500" />
|
||||
<div>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">Impact</p>
|
||||
<p className="text-sm font-semibold">{project.metrics.join(" • ")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</header>
|
||||
|
||||
|
||||
<section className="mb-20">
|
||||
{/* Desktop Showcase View */}
|
||||
<div className="hidden lg:block">
|
||||
<ProjectShowcase images={project.images} />
|
||||
</div>
|
||||
|
||||
{/* Mobile Carousel View */}
|
||||
<div className="block lg:hidden">
|
||||
<ImageCarousel images={project.images} />
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-center text-[10px] font-mono text-neutral-600 uppercase tracking-[0.2em]">
|
||||
Interactive Gallery — Select or swipe to explore
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* SYSTEM ARCHITECTURE (New Mermaid Section) */}
|
||||
{project.mermaidChart && (
|
||||
<section className="mb-8">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<h3 className="text-[10px] font-mono text-blue-500 uppercase tracking-[0.3em] font-bold">
|
||||
TECHNICAL_ARCH // 01
|
||||
</h3>
|
||||
<div className="h-px flex-1 bg-neutral-900" />
|
||||
<h2 className="text-xl font-bold tracking-tighter">System Architecture Log</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-neutral-900/20 rounded-3xl border border-neutral-800/50 p-4 md:p-12">
|
||||
<Mermaid chart={project.mermaidChart} />
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Engineering Narrative */}
|
||||
{/* Updated Engineering Narrative Header */}
|
||||
<article className="w-full py-12 border-t border-neutral-900 mt-16">
|
||||
<div className="flex items-center gap-3 mb-12">
|
||||
<h3 className="text-[10px] font-mono text-purple-500 uppercase tracking-[0.3em] font-bold">
|
||||
PROJECT_LOG // 02
|
||||
</h3>
|
||||
<div className="h-px flex-1 bg-neutral-900" />
|
||||
<h2 className="text-xl font-bold tracking-tighter">The Engineering Story</h2>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-invert prose-neutral max-w-none text-left
|
||||
prose-p:text-neutral-400 prose-p:leading-relaxed prose-p:text-[16px]
|
||||
prose-h4:text-white prose-h4:text-sm prose-h4:mb-2 prose-h4:mt-8
|
||||
prose-strong:text-white prose-strong:font-bold">
|
||||
<ReactMarkdown>{project.engineeringStory}</ReactMarkdown>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,83 +3,125 @@
|
|||
import { use } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, ExternalLink, Github, ShieldCheck, Cpu, Users } from "lucide-react";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ExternalLink,
|
||||
Github,
|
||||
ShieldCheck,
|
||||
Cpu,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { PROJECT_REGISTRY } from "@/data/projects";
|
||||
import Mermaid from "@/components/Mermaid";
|
||||
import ProjectShowcase from "@/components/ProjectShowcase";
|
||||
import ImageCarousel from "@/components/ImageCarousel";
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
|
||||
|
||||
export default function ProjectDetail({ params }: { params: Promise<{ category: string, slug: string }> }) {
|
||||
export default function ProjectDetail({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ category: string; slug: string }>;
|
||||
}) {
|
||||
const { category, slug } = use(params);
|
||||
const project = PROJECT_REGISTRY.find((p) => p.slug === slug);
|
||||
|
||||
if (!project) return <div>Project Not Found</div>;
|
||||
|
||||
if (!project) return <div className="p-24 text-white font-mono">Project Log Not Found.</div>;
|
||||
if (!project)
|
||||
return (
|
||||
<div className="p-24 text-white font-mono">Project Log Not Found.</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white p-6 md:p-12 lg:p-24">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
|
||||
{/* Navigation */}
|
||||
<Link href={`/projects/${category}`} className="flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-[10px] uppercase tracking-widest">
|
||||
<Link
|
||||
href={`/projects/${category}`}
|
||||
className="flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-[10px] uppercase tracking-widest"
|
||||
>
|
||||
<ArrowLeft size={12} /> Back to {category}
|
||||
</Link>
|
||||
|
||||
{/* Header Section */}
|
||||
<header className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
|
||||
<motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
|
||||
<h1 className="text-6xl font-bold tracking-tighter mb-4">{project.title}</h1>
|
||||
<p className="text-blue-500 font-mono text-sm uppercase tracking-widest mb-6">{project.subtitle}</p>
|
||||
<p className="text-neutral-400 text-lg leading-relaxed">{project.description}</p>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
>
|
||||
<h1 className="text-6xl font-bold tracking-tighter mb-4">
|
||||
{project.title}
|
||||
</h1>
|
||||
<p className="text-blue-500 font-mono text-sm uppercase tracking-widest mb-6">
|
||||
{project.subtitle}
|
||||
</p>
|
||||
<p className="text-neutral-400 text-lg leading-relaxed">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex gap-4 mt-8">
|
||||
{project.liveUrl && (
|
||||
<a href={project.liveUrl} className="flex items-center gap-2 bg-white text-black px-6 py-3 rounded-full font-bold text-sm hover:bg-neutral-200 transition-all">
|
||||
<a
|
||||
href={project.liveUrl}
|
||||
className="flex items-center gap-2 bg-white text-black px-6 py-3 rounded-full font-bold text-sm hover:bg-neutral-200 transition-all"
|
||||
>
|
||||
Launch Site <ExternalLink size={14} />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{project?.repoUrl && (
|
||||
<a href={project.repoUrl} className="flex items-center gap-2 border border-neutral-800 px-6 py-3 rounded-full font-bold text-sm hover:bg-neutral-900 transition-all">
|
||||
<a
|
||||
href={project.repoUrl}
|
||||
className="flex items-center gap-2 border border-neutral-800 px-6 py-3 rounded-full font-bold text-sm hover:bg-neutral-900 transition-all"
|
||||
>
|
||||
View Source <Github size={14} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Senior Stats Sidebar */}
|
||||
<motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-neutral-900/30 border border-neutral-800 p-8 rounded-3xl h-fit">
|
||||
{/* Stats Sidebar */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className="bg-neutral-900/30 border border-neutral-800 p-8 rounded-3xl h-fit"
|
||||
>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<ShieldCheck className="text-blue-500" />
|
||||
<div>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">My Role</p>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">
|
||||
My Role
|
||||
</p>
|
||||
<p className="text-sm font-semibold">{project.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Cpu className="text-purple-500" />
|
||||
<div>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">Stack</p>
|
||||
<p className="text-sm font-semibold">{project.stack.join(", ")}</p>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">
|
||||
Stack
|
||||
</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{project.stack.join(", ")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Users className="text-green-500" />
|
||||
<div>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">Impact</p>
|
||||
<p className="text-sm font-semibold">{project.metrics.join(" • ")}</p>
|
||||
<p className="text-[10px] text-neutral-500 uppercase font-mono tracking-tighter">
|
||||
Impact
|
||||
</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{project.metrics.join(" • ")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</header>
|
||||
|
||||
|
||||
<section className="mb-20">
|
||||
{/* Desktop Showcase View */}
|
||||
<div className="hidden lg:block">
|
||||
|
|
@ -96,7 +138,7 @@ export default function ProjectDetail({ params }: { params: Promise<{ category:
|
|||
</p>
|
||||
</section>
|
||||
|
||||
{/* SYSTEM ARCHITECTURE (New Mermaid Section) */}
|
||||
{/* Mermaid */}
|
||||
{project.mermaidChart && (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
|
|
@ -109,26 +151,26 @@ export default function ProjectDetail({ params }: { params: Promise<{ category:
|
|||
|
||||
<div className="bg-neutral-900/20 rounded-3xl border border-neutral-800/50 p-4 md:p-12">
|
||||
<Mermaid chart={project.mermaidChart} />
|
||||
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Engineering Narrative */}
|
||||
{/* Updated Engineering Narrative Header */}
|
||||
<section className="w-full pb-20 mt-12">
|
||||
<section className="w-full pb-20 mt-12">
|
||||
<div className="flex items-center gap-3 mb-12">
|
||||
<h3 className="text-[10px] font-mono text-blue-500 uppercase tracking-[0.3em] font-bold">
|
||||
PROJECT LOG // {project.storyLabel || "NARRATIVE"}
|
||||
</h3>
|
||||
<div className="h-px flex-1 bg-neutral-900" />
|
||||
<h2 className="text-xl font-bold tracking-tighter">The Engineering Story</h2>
|
||||
<h2 className="text-xl font-bold tracking-tighter">
|
||||
The Engineering Story
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-invert prose-neutral max-w-none text-left">
|
||||
<ReactMarkdown>{project.engineeringStory}</ReactMarkdown>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,120 +0,0 @@
|
|||
"use client";
|
||||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import { Globe, Smartphone, ArrowLeft } from "lucide-react";
|
||||
import { use } from "react";
|
||||
|
||||
const categories = {
|
||||
web: {
|
||||
title: "Web Systems",
|
||||
icon: <Globe className="w-8 h-8 text-blue-400" />,
|
||||
description: "Architecting scalable web applications and distributed systems.",
|
||||
projects: [
|
||||
{
|
||||
name: "Ratoong",
|
||||
detail: "Professional production platform.",
|
||||
stack: ["Node.js", "PostgreSQL", "Caddy"]
|
||||
},
|
||||
{
|
||||
name: "Datasaur",
|
||||
detail: "Full-stack data science pipeline.",
|
||||
stack: ["Python", "FastAPI", "Next.js"]
|
||||
}
|
||||
]
|
||||
},
|
||||
mobile: {
|
||||
title: "Mobile Apps",
|
||||
icon: <Smartphone className="w-8 h-8 text-purple-400" />,
|
||||
description: "Building cross-platform experiences with Flutter and native integrations.",
|
||||
projects: [
|
||||
{
|
||||
name: "Flutter App 1",
|
||||
detail: "Active Development - Coming Soon",
|
||||
stack: ["Flutter", "Dart", "Firebase"]
|
||||
},
|
||||
{
|
||||
name: "Flutter App 2",
|
||||
detail: "Internal R&D Prototype",
|
||||
stack: ["Flutter", "Riverpod", "SQLite"]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function CategoryPage({ params }: { params: Promise<{ category: string }> }) {
|
||||
|
||||
|
||||
const resolvedParams = use(params);
|
||||
const category = resolvedParams.category;
|
||||
|
||||
const data = categories[category as keyof typeof categories];
|
||||
|
||||
if (!data) return <div className="p-24 text-white">Category not found.</div>;
|
||||
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="p-24 text-white font-mono">
|
||||
<h1 className="text-2xl mb-4">404: Category Not Found</h1>
|
||||
<p className="text-neutral-500">Path: /projects/{category}</p>
|
||||
<Link href="/" className="text-blue-400 underline mt-4 block">Return Home</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white p-8 md:p-24">
|
||||
<Link href="/" className="flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-xs">
|
||||
<ArrowLeft size={14} /> BACK TO DASHBOARD
|
||||
</Link>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-5xl mx-auto"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
{data.icon}
|
||||
<h1 className="text-5xl font-bold">{data.title}</h1>
|
||||
</div>
|
||||
<p className="text-xl text-neutral-400 max-w-2xl mb-16">{data.description}</p>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8">
|
||||
{data.projects.map((project, index) => (
|
||||
<Link
|
||||
key={project.name}
|
||||
href={`/projects/${category}/${project.name.toLowerCase()}`}>
|
||||
<motion.div
|
||||
|
||||
layout
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: index * 0.1,
|
||||
duration: 0.4,
|
||||
ease: "easeOut"
|
||||
}}
|
||||
className="group p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 hover:border-neutral-700 transition-colors"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-2">{project.name}</h3>
|
||||
<p className="text-neutral-500">{project.detail}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.stack.map(s => (
|
||||
<span key={s} className="text-[10px] font-mono bg-neutral-800 text-neutral-400 px-3 py-1 rounded-full uppercase">
|
||||
{s}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -9,45 +9,54 @@ const CATEGORY_META = {
|
|||
web: {
|
||||
title: "Web Systems",
|
||||
icon: <Globe className="w-8 h-8 text-blue-400" />,
|
||||
description: "Architecting scalable web applications and distributed systems.",
|
||||
description:
|
||||
"Architecting scalable web applications and distributed systems.",
|
||||
},
|
||||
mobile: {
|
||||
title: "Mobile Apps",
|
||||
icon: <Smartphone className="w-8 h-8 text-purple-400" />,
|
||||
description: "Building cross-platform experiences with Flutter and native integrations.",
|
||||
description:
|
||||
"Building cross-platform experiences with Flutter and native integrations.",
|
||||
},
|
||||
infrastructure: {
|
||||
title: "DevOps & Infrastructure",
|
||||
icon: <Server className="w-8 h-8 text-green-400" />,
|
||||
description: "Self-hosted systems architecture and automated deployment pipelines.",
|
||||
}
|
||||
description:
|
||||
"Self-hosted systems architecture and automated deployment pipelines.",
|
||||
},
|
||||
};
|
||||
|
||||
export default function CategoryPage({ params }: { params: Promise<{ category: string }> }) {
|
||||
|
||||
|
||||
export default function CategoryPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ category: string }>;
|
||||
}) {
|
||||
const resolvedParams = use(params);
|
||||
const category = resolvedParams.category;
|
||||
|
||||
// 1. Get metadata for the header
|
||||
const meta = CATEGORY_META[category as keyof typeof CATEGORY_META];
|
||||
|
||||
// 2. Filter the registry to find projects belonging to this category
|
||||
const filteredProjects = PROJECT_REGISTRY.filter(p => p.category === category);
|
||||
const filteredProjects = PROJECT_REGISTRY.filter(
|
||||
(p) => p.category === category,
|
||||
);
|
||||
|
||||
if (!meta) {
|
||||
return (
|
||||
<div className="p-24 text-white font-mono">
|
||||
<h1 className="text-2xl mb-4">404: Category Not Found</h1>
|
||||
<Link href="/" className="text-blue-400 underline mt-4 block">Return Home</Link>
|
||||
<Link href="/" className="text-blue-400 underline mt-4 block">
|
||||
Return Home
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white p-8 md:p-24">
|
||||
<Link href="/" className="flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-xs">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-xs"
|
||||
>
|
||||
<ArrowLeft size={14} /> BACK TO DASHBOARD
|
||||
</Link>
|
||||
|
||||
|
|
@ -60,15 +69,17 @@ export default function CategoryPage({ params }: { params: Promise<{ category: s
|
|||
{meta.icon}
|
||||
<h1 className="text-5xl font-bold">{meta.title}</h1>
|
||||
</div>
|
||||
<p className="text-xl text-neutral-400 max-w-2xl mb-16">{meta.description}</p>
|
||||
<p className="text-xl text-neutral-400 max-w-2xl mb-16">
|
||||
{meta.description}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8">
|
||||
{filteredProjects.map((project, index) => (
|
||||
<Link
|
||||
key={project.slug}
|
||||
href={`/projects/${category}/${project.slug}`}>
|
||||
href={`/projects/${category}/${project.slug}`}
|
||||
>
|
||||
<motion.div
|
||||
|
||||
layout
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
|
|
@ -76,18 +87,23 @@ export default function CategoryPage({ params }: { params: Promise<{ category: s
|
|||
transition={{
|
||||
delay: index * 0.1,
|
||||
duration: 0.4,
|
||||
ease: "easeOut"
|
||||
ease: "easeOut",
|
||||
}}
|
||||
className="group p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 hover:border-neutral-700 transition-colors"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold mb-2">{project.title}</h3>
|
||||
<h3 className="text-2xl font-semibold mb-2">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="text-neutral-500">{project.description}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.stack.map(s => (
|
||||
<span key={s} className="text-[10px] font-mono bg-neutral-800 text-neutral-400 px-3 py-1 rounded-full uppercase">
|
||||
{project.stack.map((s) => (
|
||||
<span
|
||||
key={s}
|
||||
className="text-[10px] font-mono bg-neutral-800 text-neutral-400 px-3 py-1 rounded-full uppercase"
|
||||
>
|
||||
{s}
|
||||
</span>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -14,17 +14,19 @@ export default function ImageCarousel({ images }: GalleryProps) {
|
|||
|
||||
const imageIndex = Math.abs(page % images.length);
|
||||
|
||||
const paginate = useCallback((newDirection: number) => {
|
||||
const paginate = useCallback(
|
||||
(newDirection: number) => {
|
||||
setPage([page + newDirection, newDirection]);
|
||||
}, [page]);
|
||||
},
|
||||
[page],
|
||||
);
|
||||
|
||||
// AUTO-PLAY LOGIC
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
paginate(1);
|
||||
}, 5000); // 5 seconds is the "sweet spot" for technical analysis
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [paginate, isAutoPlaying]);
|
||||
|
|
@ -45,8 +47,8 @@ export default function ImageCarousel({ images }: GalleryProps) {
|
|||
return (
|
||||
<div
|
||||
className="relative aspect-video w-full overflow-hidden rounded-3xl border border-neutral-800 bg-neutral-900"
|
||||
onMouseEnter={() => setIsAutoPlaying(false)} // Pause on hover
|
||||
onMouseLeave={() => setIsAutoPlaying(true)} // Resume when mouse leaves
|
||||
onMouseEnter={() => setIsAutoPlaying(false)}
|
||||
onMouseLeave={() => setIsAutoPlaying(true)}
|
||||
>
|
||||
<AnimatePresence initial={false} custom={direction}>
|
||||
<motion.img
|
||||
|
|
@ -64,7 +66,7 @@ export default function ImageCarousel({ images }: GalleryProps) {
|
|||
drag="x"
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
dragElastic={1}
|
||||
onDragStart={() => setIsAutoPlaying(false)} // Kill auto-play on interaction
|
||||
onDragStart={() => setIsAutoPlaying(false)}
|
||||
onDragEnd={(e, { offset }) => {
|
||||
const swipe = Math.abs(offset.x) > 50;
|
||||
if (swipe) paginate(offset.x > 0 ? -1 : 1);
|
||||
|
|
@ -78,7 +80,7 @@ export default function ImageCarousel({ images }: GalleryProps) {
|
|||
<button
|
||||
className="p-2 rounded-full bg-black/50 backdrop-blur-md border border-white/10 text-white pointer-events-auto hover:bg-black/80 transition-all"
|
||||
onClick={() => {
|
||||
setIsAutoPlaying(false); // Kill auto-play
|
||||
setIsAutoPlaying(false);
|
||||
paginate(-1);
|
||||
}}
|
||||
>
|
||||
|
|
@ -87,7 +89,7 @@ export default function ImageCarousel({ images }: GalleryProps) {
|
|||
<button
|
||||
className="p-2 rounded-full bg-black/50 backdrop-blur-md border border-white/10 text-white pointer-events-auto hover:bg-black/80 transition-all"
|
||||
onClick={() => {
|
||||
setIsAutoPlaying(false); // Kill auto-play
|
||||
setIsAutoPlaying(false);
|
||||
paginate(1);
|
||||
}}
|
||||
>
|
||||
|
|
@ -95,7 +97,7 @@ export default function ImageCarousel({ images }: GalleryProps) {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar (Visual Timer) */}
|
||||
{/* Progress Bar */}
|
||||
{isAutoPlaying && (
|
||||
<motion.div
|
||||
key={imageIndex}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ export default function Mermaid({ chart }: { chart: string }) {
|
|||
});
|
||||
mermaid.contentLoaded();
|
||||
|
||||
// Check if the rendered diagram is taller than 400px
|
||||
if (contentRef.current) {
|
||||
const height = contentRef.current.scrollHeight;
|
||||
setNeedsExpansion(height > 400);
|
||||
|
|
@ -38,11 +37,15 @@ export default function Mermaid({ chart }: { chart: string }) {
|
|||
<div className="absolute top-6 right-8 flex flex-col gap-2 z-20 bg-black/40 backdrop-blur-md p-3 rounded-xl border border-white/5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500" />
|
||||
<span className="text-[9px] font-mono text-neutral-400 uppercase tracking-wider">Traffic Flow</span>
|
||||
<span className="text-[9px] font-mono text-neutral-400 uppercase tracking-wider">
|
||||
Traffic Flow
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500" />
|
||||
<span className="text-[9px] font-mono text-neutral-400 uppercase tracking-wider">Service Node</span>
|
||||
<span className="text-[9px] font-mono text-neutral-400 uppercase tracking-wider">
|
||||
Service Node
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -50,7 +53,7 @@ export default function Mermaid({ chart }: { chart: string }) {
|
|||
{chart}
|
||||
</div>
|
||||
|
||||
{/* The "Fade to Darkness" Overlay - only show if needs expansion */}
|
||||
{/* The "Fade to Darkness" Overlay (when expansion is needed) */}
|
||||
<AnimatePresence>
|
||||
{needsExpansion && !isExpanded && (
|
||||
<motion.div
|
||||
|
|
@ -63,7 +66,7 @@ export default function Mermaid({ chart }: { chart: string }) {
|
|||
</AnimatePresence>
|
||||
</motion.div>
|
||||
|
||||
{/* Expand/Collapse Button - only show if needs expansion */}
|
||||
{/* Expand/Collapse Button (when expansion is needed) */}
|
||||
{needsExpansion && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
|
|
@ -71,15 +74,22 @@ export default function Mermaid({ chart }: { chart: string }) {
|
|||
setIsExpanded(!isExpanded);
|
||||
}}
|
||||
className={`absolute -bottom-5 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 px-5 py-2.5 rounded-full text-[10px] font-mono uppercase tracking-[0.2em] transition-all border shadow-xl
|
||||
${isExpanded
|
||||
${
|
||||
isExpanded
|
||||
? "bg-neutral-800 border-neutral-700 text-white"
|
||||
: "bg-neutral-900 border-neutral-800 text-neutral-500 group-hover:bg-neutral-800 group-hover:border-neutral-600 group-hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<> <Minimize2 size={12} /> Collapse Logic </>
|
||||
<>
|
||||
{" "}
|
||||
<Minimize2 size={12} /> Collapse Logic{" "}
|
||||
</>
|
||||
) : (
|
||||
<> <Maximize2 size={12} /> Expand Architecture </>
|
||||
<>
|
||||
{" "}
|
||||
<Maximize2 size={12} /> Expand Architecture{" "}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,22 @@
|
|||
'use client';
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Activity } from 'lucide-react';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Activity } from "lucide-react";
|
||||
|
||||
const MONITORS = [
|
||||
{ id: 2, name: "Datasaur" }, { id: 6, name: "Audiobookshelf" },
|
||||
{ id: 7, name: "Woodpecker CI" }, { id: 8, name: "Forgejo Git" },
|
||||
{ id: 9, name: "Server dashboard" }, { id: 10, name: "Ratoong" },
|
||||
{ id: 3, name: "Dozzle" }, { id: 12, name: "Observatory" },
|
||||
{ id: 13, name: "Surf hub" }, { id: 11, name: "Anime list" },
|
||||
{ id: 5, name: "Wiki" }, { id: 4, name: "Watchtower" },
|
||||
{ id: 2, name: "Datasaur" },
|
||||
{ id: 6, name: "Audiobookshelf" },
|
||||
{ id: 7, name: "Woodpecker CI" },
|
||||
{ id: 8, name: "Forgejo Git" },
|
||||
{ id: 9, name: "Server dashboard" },
|
||||
{ id: 10, name: "Ratoong" },
|
||||
{ id: 3, name: "Dozzle" },
|
||||
{ id: 12, name: "Observatory" },
|
||||
{ id: 13, name: "Surf hub" },
|
||||
{ id: 11, name: "Anime list" },
|
||||
{ id: 5, name: "Wiki" },
|
||||
{ id: 4, name: "Watchtower" },
|
||||
];
|
||||
|
||||
const ITEMS_PER_PAGE = 6;
|
||||
|
|
@ -19,63 +25,68 @@ export default function MonitorRegistry({ isHovered }: { isHovered: boolean }) {
|
|||
const [page, setPage] = useState(0);
|
||||
const totalPages = Math.ceil(MONITORS.length / ITEMS_PER_PAGE);
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout | null = null;
|
||||
|
||||
if (isHovered && totalPages > 1) {
|
||||
// Only start the interval if we are hovered
|
||||
interval = setInterval(() => {
|
||||
setPage((prev) => (prev + 1) % totalPages);
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
// This cleanup function runs whenever isHovered changes
|
||||
// or the component unmounts.
|
||||
return () => {
|
||||
if (interval) clearInterval(interval);
|
||||
// Move the reset here so it happens "after" the effect cycle
|
||||
if (!isHovered) {
|
||||
setPage(0);
|
||||
}
|
||||
};
|
||||
}, [isHovered, totalPages]);
|
||||
}, [isHovered, totalPages]);
|
||||
|
||||
const currentMonitors = MONITORS.slice(page * ITEMS_PER_PAGE, (page + 1) * ITEMS_PER_PAGE);
|
||||
const currentMonitors = MONITORS.slice(
|
||||
page * ITEMS_PER_PAGE,
|
||||
(page + 1) * ITEMS_PER_PAGE,
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Default View */}
|
||||
<div className="flex min-h-[250px] flex-col justify-center w-full group-hover:opacity-0 group-hover:pointer-events-none transition-all duration-300">
|
||||
<div className="flex min-h-[250px] flex-col justify-center w-full group-hover:opacity-0 group-hover:pointer-events-none transition-all duration-300">
|
||||
{/* Header Section */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
|
||||
<span className="font-medium text-white tracking-tight">Hetzner Node-01</span>
|
||||
<span className="font-medium text-white tracking-tight">
|
||||
Hetzner Node-01
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<p className="text-xs text-neutral-500 font-mono">SYS_STATUS:</p>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-500 border border-green-500/20 px-1.5 py-0.5 rounded uppercase font-bold">Online</span>
|
||||
<span className="text-[10px] bg-green-500/10 text-green-500 border border-green-500/20 px-1.5 py-0.5 rounded uppercase font-bold">
|
||||
Online
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Activity className="text-neutral-800 w-10 h-10 -mt-1" />
|
||||
</div>
|
||||
|
||||
{/* Added "Server Specs" to fill space and match the style of "The Architect" */}
|
||||
<div className="mt-8 grid grid-cols-2 gap-4 border-t border-neutral-800/50 pt-6">
|
||||
<div>
|
||||
<p className="text-[10px] font-mono text-neutral-600 uppercase">Architecture</p>
|
||||
<p className="text-[10px] font-mono text-neutral-600 uppercase">
|
||||
Architecture
|
||||
</p>
|
||||
<p className="text-xs text-neutral-400">linux/amd64</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-mono text-neutral-600 uppercase">Provider</p>
|
||||
<p className="text-[10px] font-mono text-neutral-600 uppercase">
|
||||
Provider
|
||||
</p>
|
||||
<p className="text-xs text-neutral-400">Hetzner Cloud</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hover View */}
|
||||
{/* Hover View: Automated Carousel */}
|
||||
<div className="absolute inset-0 p-5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col bg-neutral-900/95 backdrop-blur-sm">
|
||||
<div className="flex justify-between items-center mb-2 px-1">
|
||||
<h4 className="text-[10px] font-mono text-neutral-500 uppercase tracking-[0.2em]">
|
||||
|
|
@ -83,7 +94,6 @@ useEffect(() => {
|
|||
</h4>
|
||||
</div>
|
||||
|
||||
{/* Increased height slightly to 200px and removed 'justify-center' from parent */}
|
||||
<div className="flex-1 relative min-h-0 overflow-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
|
|
@ -92,7 +102,7 @@ useEffect(() => {
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="grid grid-cols-1 gap-2" // Reduced gap from 2 to 1.5
|
||||
className="grid grid-cols-1 gap-2"
|
||||
>
|
||||
{currentMonitors.map((m) => (
|
||||
<div
|
||||
|
|
@ -102,16 +112,24 @@ useEffect(() => {
|
|||
<span className="text-[12px] font-medium text-neutral-300 truncate mr-2">
|
||||
{m.name}
|
||||
</span>
|
||||
<div className="flex gap-1 shrink-0 scale-90 origin-right"> {/* Scale badges slightly */}
|
||||
<img src={`https://status.georgew.dev/api/badge/${m.id}/status`} className="h-5" alt="up" />
|
||||
<img src={`https://status.georgew.dev/api/badge/${m.id}/avg-response/24`} className="h-5 opacity-60" alt="ms" />
|
||||
<div className="flex gap-1 shrink-0 scale-90 origin-right">
|
||||
<img
|
||||
src={`https://status.georgew.dev/api/badge/${m.id}/status`}
|
||||
className="h-5"
|
||||
alt="up"
|
||||
/>
|
||||
<img
|
||||
src={`https://status.georgew.dev/api/badge/${m.id}/avg-response/24`}
|
||||
className="h-5 opacity-60"
|
||||
alt="ms"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ export default function ProjectShowcase({ images }: { images: string[] }) {
|
|||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 h-[500px]">
|
||||
{/* Large Featured Image (Left 9 Columns) */}
|
||||
{/* Main Image */}
|
||||
<div className="lg:col-span-9 relative overflow-hidden rounded-3xl border border-neutral-800 bg-neutral-900 group">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.img
|
||||
|
|
@ -30,7 +30,7 @@ export default function ProjectShowcase({ images }: { images: string[] }) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Thumbnail Column (Right 3 Columns) */}
|
||||
{/* Thumbnail Column */}
|
||||
<div className="lg:col-span-3 flex lg:flex-col gap-3 overflow-x-auto lg:overflow-y-auto pr-2 custom-scrollbar">
|
||||
{images.map((img, i) => (
|
||||
<button
|
||||
|
|
@ -42,7 +42,11 @@ export default function ProjectShowcase({ images }: { images: string[] }) {
|
|||
: "border-neutral-800 opacity-40 hover:opacity-100"
|
||||
}`}
|
||||
>
|
||||
<img src={img} className="h-full w-full object-cover" alt={`Thumb ${i}`} />
|
||||
<img
|
||||
src={img}
|
||||
className="h-full w-full object-cover"
|
||||
alt={`Thumb ${i}`}
|
||||
/>
|
||||
{i === index && (
|
||||
<motion.div
|
||||
layoutId="active-thumb"
|
||||
|
|
|
|||
|
|
@ -1,18 +1,13 @@
|
|||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
import eslintConfigPrettier from "eslint-config-prettier";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
eslintConfigPrettier,
|
||||
globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
|
|
|
|||
17
package-lock.json
generated
17
package-lock.json
generated
|
|
@ -25,6 +25,7 @@
|
|||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.1.4",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"react-markdown": "^10.1.0",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"typescript": "^5"
|
||||
|
|
@ -4324,6 +4325,22 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-config-prettier": {
|
||||
"version": "10.1.8",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
|
||||
"integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"eslint-config-prettier": "bin/cli.js"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/eslint-config-prettier"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-import-resolver-node": {
|
||||
"version": "0.3.9",
|
||||
"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.1.4",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"react-markdown": "^10.1.0",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"typescript": "^5"
|
||||
|
|
|
|||
Loading…
Reference in a new issue