(chore) init commit and add tasks
This commit is contained in:
+182
@@ -0,0 +1,182 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { FeatureCard } from '@/components/FeatureCard'
|
||||
import { HeroBlobFlow } from '@/components/HeroBlobFlow'
|
||||
import { InteractiveTerminal } from '@/components/InteractiveTerminal'
|
||||
import { ExperienceTimeline } from '@/components/ExperienceTimeline'
|
||||
import {
|
||||
GitBranch,
|
||||
Database,
|
||||
BarChart3,
|
||||
MessageSquare,
|
||||
Cpu,
|
||||
Layers,
|
||||
} from 'lucide-react'
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: GitBranch,
|
||||
title: 'Infrastructure Platform',
|
||||
description: 'Multi-region Terraform + Argo CD GitOps on Kubernetes',
|
||||
href: '/infrastructure',
|
||||
stat: '40% CPU reduction',
|
||||
status: 'live' as const,
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
title: 'Distributed Systems',
|
||||
description: 'gRPC, Kafka, AWS Step Functions across 57+ regions',
|
||||
href: '/systems',
|
||||
stat: 'Mission-critical',
|
||||
status: 'live' as const,
|
||||
},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: 'LLM Systems',
|
||||
description: 'CPU-bound inference optimization, INT4/INT8 quantization',
|
||||
href: '/llm',
|
||||
stat: '60% latency cut',
|
||||
status: 'live' as const,
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: 'Kafka Cluster',
|
||||
description: 'Strimzi KRaft cluster with auto-scaling brokers',
|
||||
href: '/kafka',
|
||||
stat: '3 brokers',
|
||||
status: 'live' as const,
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
title: 'Open Source',
|
||||
description: 'go-flink: distributed DataLakeHouse in Go',
|
||||
href: '/opensource',
|
||||
stat: 'Public repo',
|
||||
status: 'live' as const,
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: 'Observability',
|
||||
description: 'Prometheus, Grafana, Dynatrace — live metrics',
|
||||
href: '/infrastructure',
|
||||
stat: '99.2% uptime',
|
||||
status: 'live' as const,
|
||||
},
|
||||
]
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
{/* Hero */}
|
||||
<section className="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-950 dark:to-gray-900 py-24 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Avatar with flowing outcomes */}
|
||||
<HeroBlobFlow />
|
||||
|
||||
{/* Description */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1 }}
|
||||
className="text-center mt-16"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Full-Stack Systems Engineer
|
||||
</h1>
|
||||
<p className="text-xl text-gray-700 dark:text-gray-300 mb-6 font-medium">
|
||||
Infrastructure × Backend × LLM Systems
|
||||
</p>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-10">
|
||||
Building observable, fault-tolerant systems from bare metal to cloud. Optimizing cost (infrastructure) × performance (inference) × reliability (SRE).
|
||||
</p>
|
||||
|
||||
<div className="flex gap-4 justify-center flex-wrap mb-8">
|
||||
<a
|
||||
href="#features"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition"
|
||||
>
|
||||
Explore Systems
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/rockliang"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="border-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 dark:hover:bg-gray-800 transition"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 1.2 }}
|
||||
className="text-sm text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
💡 Press <kbd className="bg-gray-200 dark:bg-gray-800 px-2 py-1 rounded">Cmd+K</kbd> to explore via terminal
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Experience Timeline */}
|
||||
<ExperienceTimeline />
|
||||
|
||||
{/* Features Grid */}
|
||||
<section id="features" className="max-w-6xl mx-auto px-6 py-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mb-16"
|
||||
>
|
||||
<h2 className="text-4xl font-bold mb-4">What I Build</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
Production systems spanning infrastructure, distributed backends, and LLM optimization. Click any domain to explore.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={{
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<FeatureCard key={feature.title} {...feature} />
|
||||
))}
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 py-12 px-6">
|
||||
<div className="max-w-6xl mx-auto text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<p>© 2025 Rock Liang. Deployed on homelab Kubernetes cluster (3-node Talos).</p>
|
||||
<p className="mt-2">
|
||||
<a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 dark:hover:text-blue-400">
|
||||
GitHub
|
||||
</a>
|
||||
{' • '}
|
||||
<a href="mailto:[email protected]" className="hover:text-blue-600 dark:hover:text-blue-400">
|
||||
Email
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Interactive Terminal */}
|
||||
<InteractiveTerminal />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user