250 lines
11 KiB
TypeScript
250 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
import { Globe, Smartphone, Server, Gamepad2 } from "lucide-react";
|
|
import { useState } from "react";
|
|
import MonitorCard from "@/components/MonitorCard";
|
|
import Image from "next/image";
|
|
|
|
export default function Home() {
|
|
const [isHoveringMonitors, setIsHoveringMonitors] = useState(false);
|
|
|
|
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>
|
|
<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"
|
|
>
|
|
Git
|
|
</a>
|
|
<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">
|
|
<div className="absolute top-0 right-0 w-1/2 h-full opacity-[0.03] pointer-events-none"></div>
|
|
|
|
{/* 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>
|
|
<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.
|
|
</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"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hidden md:block w-px bg-neutral-800/50 self-stretch" />
|
|
|
|
{/* 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>
|
|
<p className="text-xs text-neutral-300 leading-tight">
|
|
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>
|
|
<p className="text-xs text-neutral-300 leading-tight">
|
|
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>
|
|
<p className="text-xs text-neutral-300 leading-tight">
|
|
Kubernetes, GCP, and automated CI/CD pipelines.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top Row Right: The Service Registry */}
|
|
<motion.div
|
|
whileHover={{ y: -5 }}
|
|
onMouseEnter={() => setIsHoveringMonitors(true)}
|
|
onMouseLeave={() => setIsHoveringMonitors(false)}
|
|
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]"
|
|
>
|
|
<MonitorCard isHovered={isHoveringMonitors} />
|
|
</motion.div>
|
|
|
|
{/* Middle Row: Web Systems */}
|
|
<Link href="/projects/web" className="group md:col-span-2">
|
|
<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 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 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"
|
|
>
|
|
{tech}
|
|
</span>
|
|
),
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
|
|
{/* Middle Row: Mobile Apps */}
|
|
<Link href="/projects/mobile" className="group md:col-span-2">
|
|
<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 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 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"
|
|
>
|
|
{tech}
|
|
</span>
|
|
),
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
|
|
{/* Middle Row: DevOps */}
|
|
<Link href="/projects/infrastructure" className="group md:col-span-2">
|
|
<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 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 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"
|
|
>
|
|
{tech}
|
|
</span>
|
|
),
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
|
|
{/* Bottom Row: The Forge */}
|
|
<div className="md:col-span-6 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex items-center gap-6 group hover:border-orange-500/30 transition-colors cursor-pointer">
|
|
<div className="p-4 bg-orange-500/10 rounded-2xl border border-orange-500/20 group-hover:border-orange-500/40 transition-colors">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|