<!DOCTYPE html>
<html lang="en" class="dark:bg-neutral-900">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jon H.M. Chan</title>
<meta property="og:title" content="Jon H.M. Chan">
<meta property="og:description" content="artist and founder using storytelling and AI to deepen human connection at scale">
<meta property="og:image" content="https://jonhmchan.com/bg.png">
<meta name="description" content="artist and founder using storytelling and AI to deepen human connection at scale">
<meta name="author" content="Jon H.M. Chan">
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes fadeInDelayed {
0% {
opacity: 0;
transform: translateY(20px);
}
80% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 1s ease-out forwards;
}
.animate-bounce-slow {
opacity: 0;
animation: fadeInUp 1s ease-out 1s forwards, bounce 2s ease-in-out infinite 2s;
}
.animate-fade-in-delayed {
opacity: 0;
animation: fadeInDelayed 1.5s ease-out forwards;
}
@font-face {
font-family: 'GT Super Display';
src: url('gt-super/GT-Super-Display-Light.woff2') format('woff2'),
url('gt-super/GT-Super-Display-Light.woff') format('woff'),
url('gt-super/GT-Super-Display-Light.ttf') format('truetype'),
url('gt-super/GT-Super-Display-Light.eot') format('embedded-opentype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'GT Super Display';
src: url('gt-super/GT-Super-Display-Bold.woff2') format('woff2'),
url('gt-super/GT-Super-Display-Bold.woff') format('woff'),
url('gt-super/GT-Super-Display-Bold.ttf') format('truetype'),
url('gt-super/GT-Super-Display-Bold.eot') format('embedded-opentype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'GT Super Display';
src: url('gt-super/GT-Super-Display-Light-Italic.woff2') format('woff2'),
url('gt-super/GT-Super-Display-Light-Italic.woff') format('woff'),
url('gt-super/GT-Super-Display-Light-Italic.ttf') format('truetype'),
url('gt-super/GT-Super-Display-Light-Italic.eot') format('embedded-opentype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'GT Super Display';
src: url('gt-super/GT-Super-Display-Bold-Italic.woff2') format('woff2'),
url('gt-super/GT-Super-Display-Bold-Italic.woff') format('woff'),
url('gt-super/GT-Super-Display-Bold-Italic.ttf') format('truetype'),
url('gt-super/GT-Super-Display-Bold-Italic.eot') format('embedded-opentype');
font-weight: 700;
font-style: italic;
}
.dark .dark\:invert {
filter: invert(1);
}
</style>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
'gt-super': ['"GT Super Display"', 'serif']
}
}
}
}
// Check for dark mode preference
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
function toggleDarkMode() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark')
localStorage.theme = 'light'
} else {
document.documentElement.classList.add('dark')
localStorage.theme = 'dark'
}
}
</script>
</head>
<body class="bg-white dark:bg-neutral-900 min-h-screen">
<div class="min-h-screen flex flex-col px-5 md:px-0">
<!-- Hero Section -->
<div class="min-h-screen flex flex-col items-center justify-center relative bg-white dark:bg-neutral-900">
<h1 class="text-4xl font-light font-gt-super uppercase tracking-wider animate-fade-in-up opacity-0 text-neutral-900 dark:text-neutral-50 md:text-8xl">Jon H.M. Chan</h1>
</div>
<!-- Content Section -->
<div class="max-w-3xl mx-auto px-4 py-16 animate-fade-in-delayed -mt-60 md:-mt-80">
<!-- Introduction Section -->
<section class="mb-24">
<h2 class="text-4xl text-neutral-700 dark:text-neutral-200 mb-12 leading-tight font-gt-super font-light">
I am an artist and founder using storytelling and AI to deepen human connection at scale.
</h2>
</section>
<!-- Previous Experience Section -->
<section class="mb-24">
<p class="text-2xl text-neutral-600 dark:text-neutral-300 mb-12 font-gt-super font-light">Previously, I led engineering for Stack Overflow's community Q&A product with 100M monthly users. I joined as an early engineer and left after it was acquired for $1.8B.</p>
</section>
<!-- Beliefs Section -->
<section class="mb-24">
<div class="prose text-lg text-neutral-600 dark:text-neutral-300 font-gt-super font-light">
<p class="mb-6">
My belief is that we are put on this earth for meaningful connection. Money, power, and fame mean nothing if you're alone and living outside of your values.
</p>
<p class="mb-6">
We are in a moment in history where AI has unlocked the nuance, richness, and emotional depth of the human experience.
I've seen firsthand how this new capability can be harnessed to master ourselves, and in turn, better relate to others and the world around us.
</p>
<p class="mb-6">
We are breaking dawn on the age of intelligence, and—with a careful hand—we can usher in a new world where we walk alongside AI in learning about the shape of our souls.
</p>
<p class="mb-6">
Come join me on this journey.
</p>
</div>
</section>
<div class="mb-12 flex justify-center">
<a href="https://jonhmchan.substack.com/subscribe" target="_blank" class="w-full text-xl bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 p-6 rounded-lg hover:bg-opacity-90 dark:hover:bg-opacity-90 transition-colors font-gt-super font-light text-center">
Subscribe to my Substack
</a>
</div>
<div class="flex flex-col md:flex-row md:justify-center md:space-x-6 space-y-6 md:space-y-0 pb-40 font-gt-super font-light">
<a href="https://instagram.com/jonhmchan" target="_blank" class="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100">Instagram</a>
<a href="https://tiktok.com/@jonhmchan" target="_blank" class="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100">TikTok</a>
<a href="https://linkedin.com/in/jonhmchan" target="_blank" class="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100">LinkedIn</a>
<a href="https://jonhmchan.bsky.app/" target="_blank" class="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100">Bluesky</a>
<a href="https://twitter.com/jonhmchan" target="_blank" class="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100">Twitter</a>
</div>
</div>
</div>
</body>
</html>