File size: 14,198 Bytes
44de4e4 d25eb9b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ji Xie — AI Research Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
#hero-vanta { position:absolute; inset:0; z-index:0 }
.hero-content { position:relative; z-index:10 }
.gradient-text {
background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover { transition: all 0.3s ease }
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1)
}
.timeline-dot {
width:12px; height:12px; border-radius:50%;
background:#6366f1; position:absolute;
left:-6px; top:6px;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800 bg-white">
<!-- Vanta.js Background -->
<div id="hero-vanta"></div>
<header class="fixed w-full z-50 bg-white/90 backdrop-blur-sm shadow-sm">
<div class="container mx-auto px-4 py-3">
<nav class="flex justify-between items-center">
<a href="#" class="text-xl font-bold gradient-text">Ji Xie</a>
<div class="hidden md:flex gap-6">
<a href="#about" class="hover:text-indigo-600">About</a>
<a href="#research" class="hover:text-indigo-600">Research</a>
<a href="#projects" class="hover:text-indigo-600">Projects</a>
<a href="#contact" class="hover:text-indigo-600">Contact</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</nav>
</div>
</header>
<section class="relative min-h-[90vh] flex items-center pt-16">
<div class="container mx-auto px-4 py-12">
<div class="max-w-2xl hero-content">
<p class="text-indigo-500 mb-3">CV · Generative AI · Multimodal</p>
<h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">Ji Xie</span></h1>
<p class="text-gray-600 mb-6">
Building controllable vision-language systems at Berkeley AI Research & Zhejiang University.
</p>
<div class="flex gap-3">
<a href="#contact" class="px-6 py-2 bg-indigo-600 text-white rounded-full">Contact</a>
<a href="#projects" class="px-6 py-2 border border-indigo-600 rounded-full">Projects</a>
</div>
</div>
</div>
</section>
<section id="about" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold mb-4">About</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<p class="text-gray-600 mb-3">
Bridging research and engineering to make AI more reliable and controllable.
</p>
<p class="text-gray-600 mb-3">
At <span class="text-indigo-600 font-medium">Zhejiang University</span> and Berkeley AI Research, I focus on vision-language systems.
</p>
</div>
<div>
<p class="text-gray-600">
My work includes text-to-image generation, multimodal reasoning, and developing tools to make advanced models more accessible.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="research" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center mb-8">
<h2 class="text-2xl font-bold mb-2">Research</h2>
<p class="text-gray-600">Key focus areas</p>
</div>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-white p-6 rounded-lg card-hover">
<i data-feather="cpu" class="text-indigo-600 mb-3"></i>
<h3 class="font-bold mb-2">Multimodal Models</h3>
<p class="text-gray-600 text-sm">Joint reasoning across text and vision</p>
</div>
<div class="bg-white p-6 rounded-lg card-hover">
<i data-feather="sliders" class="text-purple-600 mb-3"></i>
<h3 class="font-bold mb-2">Controllable AI</h3>
<p class="text-gray-600 text-sm">Steerable generation workflows</p>
</div>
<div class="bg-white p-6 rounded-lg card-hover">
<i data-feather="shield" class="text-pink-600 mb-3"></i>
<h3 class="font-bold mb-2">Trustworthy AI</h3>
<p class="text-gray-600 text-sm">Responsible model behaviors</p>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-6">Selected Work</h2>
<p class="text-gray-600 mb-12">Highlights from ongoing research and collaborations</p>
<div class="space-y-8">
<div class="border border-gray-200 rounded-xl overflow-hidden card-hover">
<div class="bg-gray-900 h-48 flex items-center justify-center">
<img src="http://static.photos/technology/1024x576/42" alt="AI visualization" class="h-full w-full object-cover opacity-70">
</div>
<div class="p-8">
<div class="flex justify-between items-start mb-4">
<div>
<span class="inline-block px-3 py-1 text-xs font-semibold bg-indigo-100 text-indigo-800 rounded-full mb-2">2024 · Research</span>
<h3 class="text-2xl font-bold">Instruction-Guided Diffusion Editing</h3>
</div>
</div>
<p class="text-gray-600 mb-6">Building a controllable editing stack that aligns diffusion models with free-form instructions and layout hints.</p>
<div class="flex space-x-4">
<a href="mailto:sanaka@berkeley.edu" class="text-indigo-600 hover:text-indigo-800 flex items-center">
<i data-feather="mail" class="w-4 h-4 mr-2"></i> Contact
</a>
<a href="https://github.com/HorizonWind2004" target="_blank" class="text-indigo-600 hover:text-indigo-800 flex items-center">
<i data-feather="github" class="w-4 h-4 mr-2"></i> GitHub
</a>
</div>
</div>
</div>
<div class="border border-gray-200 rounded-xl overflow-hidden card-hover">
<div class="bg-gray-900 h-48 flex items-center justify-center">
<img src="http://static.photos/abstract/1024x576/23" alt="Multimodal visualization" class="h-full w-full object-cover opacity-70">
</div>
<div class="p-8">
<div class="flex justify-between items-start mb-4">
<div>
<span class="inline-block px-3 py-1 text-xs font-semibold bg-purple-100 text-purple-800 rounded-full mb-2">2023 · Collaboration</span>
<h3 class="text-2xl font-bold">Unified Vision-Language Benchmarks</h3>
</div>
</div>
<p class="text-gray-600 mb-6">Curated a benchmarking suite for evaluating grounding and reasoning across captioning, VQA, and editing tasks.</p>
<div class="flex space-x-4">
<a href="https://scholar.google.com.hk/citations?user=Wv7ItTYAAAAJ" target="_blank" class="text-indigo-600 hover:text-indigo-800 flex items-center">
<i data-feather="file-text" class="w-4 h-4 mr-2"></i> Overview
</a>
<a href="mailto:sanaka@berkeley.edu" class="text-indigo-600 hover:text-indigo-800 flex items-center">
<i data-feather="mail" class="w-4 h-4 mr-2"></i> Request access
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Updates Section -->
<section id="updates" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Recent Updates</h2>
<p class="text-gray-600">Snapshots of what I've been up to</p>
</div>
<div class="relative">
<div class="absolute left-0 h-full w-0.5 bg-gray-200"></div>
<div class="relative pl-8 mb-12">
<div class="timeline-dot"></div>
<span class="inline-block bg-indigo-100 text-indigo-800 px-3 py-1 text-sm font-medium rounded-full mb-2">Jan 2024</span>
<h3 class="text-xl font-bold mb-2">Joined Berkeley AI Research</h3>
<p class="text-gray-600">Started an internship with the BAIR lab to explore multimodal instruction-following models.</p>
</div>
<div class="relative pl-8 mb-12">
<div class="timeline-dot"></div>
<span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 text-sm font-medium rounded-full mb-2">Jun 2023</span>
<h3 class="text-xl font-bold mb-2">Presented on controllable generation</h3>
<p class="text-gray-600">Shared work on layout-aware diffusion editing at a university seminar.</p>
</div>
<div class="relative pl-8">
<div class="timeline-dot"></div>
<span class="inline-block bg-pink-100 text-pink-800 px-3 py-1 text-sm font-medium rounded-full mb-2">Dec 2022</span>
<h3 class="text-xl font-bold mb-2">Launched open-source resources</h3>
<p class="text-gray-600">Published a public repo of prompts and evaluation scripts for diffusion-based editing pipelines.</p>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="py-16 bg-indigo-600 text-white">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-2xl font-bold mb-4">Contact</h2>
<p class="text-indigo-100 mb-6">Let's connect about vision and generative AI</p>
<div class="grid md:grid-cols-3 gap-4">
<a href="mailto:sanaka@berkeley.edu" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800">
<i data-feather="mail" class="mb-2"></i>
<p class="text-sm">sanaka@berkeley.edu</p>
</a>
<a href="https://github.com/HorizonWind2004" target="_blank" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800">
<i data-feather="github" class="mb-2"></i>
<p class="text-sm">GitHub</p>
</a>
<a href="https://scholar.google.com.hk/citations?user=Wv7ItTYAAAAJ" target="_blank" class="bg-indigo-700 rounded-lg p-4 hover:bg-indigo-800">
<i data-feather="book" class="mb-2"></i>
<p class="text-sm">Scholar</p>
</a>
</div>
</div>
</div>
</section>
<footer class="py-6 bg-gray-900 text-gray-400 text-sm">
<div class="container mx-auto px-4 text-center">
<p>© <span id="year"></span> Ji Xie</p>
</div>
</footer>
<script>
// Initialize Vanta.js
VANTA.GLOBE({
el: "#hero-vanta",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x6366f1,
backgroundColor: 0xffffff,
size: 0.8
});
// Initialize Feather Icons
feather.replace();
// Update copyright year
document.getElementById('year').textContent = new Date().getFullYear();
// Mobile menu toggle
const mobileMenuButton = document.querySelector('button[aria-label="Toggle navigation"]');
const mobileMenu = document.querySelector('.mobile-menu');
mobileMenuButton?.addEventListener('click', () => {
mobileMenu?.classList.toggle('hidden');
});
</script>
</body>
</html>
|