setEaster(null)} />}
setTweak('hero', v)} />
setTweak('accent', v)} />
setTweak('easter', v)} />
);
}
// ============================================================
// Reused subcomponents
// ============================================================
function ResEntry({ year, status, tags, title, desc, venue, links }) {
return (
{title}
{desc}
{tags.map((t, i) => {t})}
{venue}
{links.map(([label, url], i) => (
{label} ↗
))}
{type.toUpperCase()}
{when}
{where}
{desc}
);
}
function SkillGroup({ name, count, items }) {
return (
{name}{count}
{items.map((it, i) => {it})}
);
}
// project visualizations
const projectImgBase = {
position: 'absolute',
inset: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
display: 'block',
};
function ProjectImage({ src, alt, position = 'center center', zoom = 1 }) {
return (
);
}
function ProjectCapaVis() {
return (
<>
);
}
function ProjectSkinVis() {
return (
);
}
function ProjectFuseVis() {
return (
<>
);
}
function ProjectGurVis() {
return (
);
}
function ProjectFtcVis() {
return (
);
}
// ============================================================
// MatrixEgg — falling text/code animation
// ============================================================
function MatrixEgg() {
const canvasRef = React.useRef(null);
React.useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const rect = canvas.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
const chars = 'sh4wn';
const charArray = chars.split('');
const fontSize = 16;
const columns = Math.floor(rect.width / fontSize);
const drops = Array(columns).fill(0);
const draw = () => {
ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
ctx.fillRect(0, 0, rect.width, rect.height);
ctx.fillStyle = '#ff2d7e';
ctx.font = `${fontSize}px monospace`;
for (let i = 0; i < drops.length; i++) {
const text = charArray[Math.floor(Math.random() * charArray.length)];
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > rect.height && Math.random() > 0.95) {
drops[i] = 0;
}
drops[i]++;
}
};
const interval = setInterval(draw, 50);
return () => clearInterval(interval);
}, []);
return (
);
}
// ============================================================
// VerseEgg — shows Shawn's favorite (Isaiah 40:31) + today's verse
// Fetches from bible-api.com (CORS-enabled, no key)
// ============================================================
function VerseEgg() {
const [daily, setDaily] = React.useState({ state: 'loading' });
// Curated rotation — a verse picked deterministically by day-of-year
// so it stays the same all day but changes daily. Backed by bible-api.com.
const ROTATION = React.useMemo(() => ([
'philippians 4:13',
'jeremiah 29:11',
'proverbs 3:5-6',
'romans 8:28',
'psalm 23:1-3',
'john 3:16',
'matthew 6:33',
'2 timothy 1:7',
'joshua 1:9',
'psalm 46:10',
'romans 12:2',
'1 corinthians 13:4-7',
'galatians 5:22-23',
'ephesians 2:8-9',
'hebrews 11:1',
'james 1:2-4',
'1 peter 5:7',
'lamentations 3:22-23',
'matthew 11:28',
'psalm 27:1',
'psalm 91:1-2',
'isaiah 41:10',
'romans 5:8',
'philippians 4:6-7',
'2 corinthians 5:17',
'psalm 119:105',
'micah 6:8',
'john 14:6',
'matthew 5:14-16',
'1 john 4:19',
]), []);
React.useEffect(() => {
let alive = true;
const dayOfYear = (() => {
const now = new Date();
const start = new Date(now.getFullYear(), 0, 0);
const diff = now - start;
return Math.floor(diff / (1000 * 60 * 60 * 24));
})();
const ref = ROTATION[dayOfYear % ROTATION.length];
const url = `https://bible-api.com/${encodeURIComponent(ref)}?translation=esv`;
fetch(url)
.then(r => r.ok ? r.json() : Promise.reject(r.status))
.then(d => {
if (!alive) return;
setDaily({
state: 'ok',
text: (d.text || '').trim().replace(/\s+/g, ' '),
reference: d.reference || ref,
translation: d.translation_name || d.translation_id || 'WEB',
});
})
.catch(() => {
if (!alive) return;
// Fallback to no-translation endpoint (defaults to WEB) if ESV is unavailable
fetch(`https://bible-api.com/${encodeURIComponent(ref)}`)
.then(r => r.ok ? r.json() : Promise.reject(r.status))
.then(d => {
if (!alive) return;
setDaily({
state: 'ok',
text: (d.text || '').trim().replace(/\s+/g, ' '),
reference: d.reference || ref,
translation: d.translation_name || 'WEB',
});
})
.catch(() => alive && setDaily({ state: 'err', reference: ref }));
});
return () => { alive = false; };
}, [ROTATION]);
return (
{/* My favorite */}
shawn's favorite
But they who wait for the Lord shall renew their strength;
they shall mount up with wings like eagles; they shall run
and not be weary; they shall walk and not faint.
— Isaiah 40:31 · ESV
{/* Today's verse */}
today's verse
{new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
{daily.state === 'loading' && (
fetching from bible-api.com...
)}
{daily.state === 'ok' && (
<>
"{daily.text}"
— {daily.reference} · {daily.translation}
)}
{daily.state === 'err' && (
<>
(couldn't reach bible-api.com from here — try opening{' '}
{daily.reference}
{' '}
directly)
)}
powered by bible-api.com · rotates daily
e.stopPropagation()}>
dismiss
~ mobile detected
{`device: `}mobile / tablet{`
status: `}limited experience{`
hey — looks like you're on a smaller screen.
this site was built for desktop, so some
things might feel a little off here.
for the full experience:
→ open on a laptop or desktop
→ or rotate to landscape
`}— sh4wn
);
}
function EasterEgg({ kind, onClose }) {
const content = {
whoami: (
<>
~ shawn@sh4wn
{`uid=27(shawn) gid=2026(tjhsst) groups=builders,researchers,
speedcubers,pianists,FTC14607,GUR-execs,AYM-volunteers
current_dir ./projects/capa
last_commit "ribbon updates + bugfixes"
shell /bin/curiosity`}
),
sudo: (
<>
~ permission denied
{`shawn is not in the sudoers file.
this incident will not be reported, because i think it's funny.
subject line that always works: `}"i typed sudo"
),
shawn: (
<>
~ ./shawn --help
{`USAGE: shawn [options]
OPTIONS:
--build ship the next thing
--research ask a specific question
--teach show up for a kid
--pray isaiah 40:31
--rest celsius will keep me going
CONTACT:
`}shawnli1028@gmail.com
),
verse: (
<>
~ verse
),
boba: (
<>
~ boba.order
{`current go-to: passionfruit green tea
50% sweet
less ice
crystal boba
location: tea-do fairfax
schedule: thursday + sunday evenings, saturday afternoons
`}
),
cube: (
<>
~ ./cube --stats
{`event 3x3
method CFOP
PB 5.21s
PB avg5 8.98spas
WCA ID: 2022LISH01
mood `}maybe
),
connect: (
<>
~ ./connect
{`interested in:
- research collabs (ML, transplant, robotics)
- mentorship from researchers and builders
- hackathons and competitions
- learning new things
what i've done:
- 2 pending patents, 1 published paper
- ML in production (CAPA, SKINAI)
- nonprofit leadership (GUR)
- speedcubing and competition math
let's build something:
`}shawnli1028@gmail.com
),
help: (
<>
~ help
{`EASTER EGG COMMANDS:
whoami show system info
sudo permission denied lol
shawn ./shawn --help
verse daily bible verse
boba tea order preferences
cube speedcubing stats
connect research & collaboration
papers published research
skills tech stack breakdown
matrix `}see for yourself{`
type any command anywhere on the page to trigger
esc or click outside to close
_happy exploring!_`}
),
papers: (
<>
~ ./papers
{`PUBLISHED & PENDING:
PUBLISHED:
✓ Immunogenomics of GvHD Transplant Outcomes
Status: Published
Journal: [pending disclosure]
Year: 2025
Role: Lead author, data science
Focus: HLA typing, survival analysis, HSCT
Impact: Clinical decision support for transplant teams
PENDING PATENTS:
⧂ CAPA: Clinical AI for Prediction & Analysis (Patent 1/2)
Status: Pending patent
Year: 2025-2026
Focus: transplant ML, GvHD prediction, survival models
Tech: PyTorch, TensorFlow, survival analysis
Target: ArXiv Q3 2026, clinical deployment Q4 2026
⧂ CAPA: Clinical AI for Prediction & Analysis (Patent 2/2)
Status: Pending patent
Year: 2025-2026
Focus: competing risks, immunogenomics integration
Tech: ESM-2, protein embeddings, statistical modeling
⧂ SKINAI: Dermatology Classification System
Status: Pending patent
Year: 2024-2025
Focus: computer vision, mobile deployment, real-time inference
Tech: OpenCV, ONNX, efficient neural networks
Deployed: Mobile app, web interface
RESEARCH IN PROGRESS:
🔬 Immunogenomics in Transplant Outcomes
Focus: HLA diversity effects, long-term survival
Collaborators: immunology & hematology teams
Target: Multiple publications 2026
🔬 Competing Risks in Clinical Prediction
Focus: Fine-Gray models, cause-specific hazards
Application: Multi-outcome modeling for HSCT
Target: Methods paper Q2 2026
all research driven by real clinical need and real patients
`}
),
skills: (
<>
~ ./skills --breakdown
{`AI / ML PyTorch, TensorFlow, scikit-learn, deep learning
computer vision, reinforcement learning, survival analysis
Biomedical immunology, immunogenomics, HLA typing, HSCT modeling
bioinformatics, research methods, scientific writing
Engineering CAD, 3D printing, robotics, circuits, PCB design
embedded systems, Raspberry Pi, BLDC motors, Linux
Web / Software React, Next.js, TypeScript, Tailwind, Framer Motion
FastAPI, Git
Languages Python, C++, C, Java, JavaScript, R, SQL, Bash
Leadership nonprofit management, curriculum design, event ops
public speaking, mentoring, music instruction
Music ABRSM Grade 8 Piano, ABRSM Grade 5 Theory
Fluent: English, Mandarin
`}
),
matrix: (
<>
~ matrix
),
};
return (
e.stopPropagation()}>
esc / close
{content[kind]}
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();