// Projects — stacking scroll tabs, Maven-style
const STACK_BASE = 130; // CSS sticky `top` shared by every card
const STACK_OFFSET = 44; // visual stagger between stacked cards (transform)
function Projects() {
const projects = [
{
id: "rfl",
label: "The RFL Agent",
date: "Jun–Sep 2025",
org: "Dassault Systèmes SolidWorks",
tag: "Agentic AI",
headline: "An agent that automates Product Management workflows.",
body:
"My main project while interning at SolidWorks: a locally-hosted agent that automates search-and-summarize, question-answering, and text summarization tasks across internal PM workflows. Throughout my internship, I owned the UI, backend API, and testing framework.",
chips: ["LangChain", "FastAPI", "React", "Docker"],
links: [{ label: "Slides", href: "docs/billxia.pdf" }],
visual: "rfl",
accent: "#2D4A3E",
},
{
id: "jebs",
label: "JEBS",
date: "Jun 2023 – Jun 2025",
org: "National Library of Medicine · NIH",
tag: "BioNLP",
headline: "A fine-grained biomedical lexical simplification task.",
body:
"The culmination of my two summer research internships at the NLM. I annotated 1,200+ sentence pairs and developed a suite of language models that identify, simplify, and explain non-consumer biomedical terms in research abstracts. Presented at TREC 2024 and ACL 2025 in Vienna. First-authored paper published in the ACL Findings.",
chips: ["NLP", "Fine-tuning", "Hugging Face", "PyTorch"],
links: [
{ label: "ACL Paper", href: "https://aclanthology.org/2025.findings-acl.907/" },
{ label: "ArXiv", href: "https://www.arxiv.org/abs/2506.12898" },
{ label: "ACL Poster", href: "docs/ACL 2025_Find-3515_poster.pdf" },
],
visual: "jebs",
accent: "#7A4A2B",
},
{
id: "worldmodels",
label: "World Models",
date: "Sep 2024 – May 2025",
org: "Senior Honors Thesis · Tufts",
tag: "Embodied AI",
headline: "Grounding LLMs in embodied puzzle environments.",
body:
"For my thesis, I built a novel OpenAI Gym environment for embodied puzzle solving and benchmarked various LLMs grounding strategies against reinforcement learning agents. My results reveal a clear gap between what LLMs claim to know and what they actually understand, pointing the way for future grounding work.",
chips: ["RL", "LangChain", "Ollama", "OpenAI Gym"],
links: [
{ label: "GitHub", href: "https://github.com/bill-from-ri/EscGridEnv_Public" },
{ label: "PDF", href: "docs/Senior Thesis.pdf" },
],
visual: "worldmodels",
accent: "#2A3A6B",
},
{
id: "kgrag",
label: "KG-RAG Chatbot",
date: "April 2025",
org: "Full-stack interview project",
tag: "Knowledge Graphs",
headline: "A customer-support chatbot backed by a knowledge graph.",
body:
"A full-stack webapp built around an LLM-powered chatbot with a Neo4j knowledge graph for retrieval-augmented generation. Implemented in 1 week as part of the SolidWorks interview process.",
chips: ["Neo4j", "LangChain", "Flask", "React"],
links: [
{ label: "GitHub", href: "https://github.com/bill-from-ri/KG_RAG" },
{ label: "Slides", href: "docs/DS Project Presentation.pdf" },
],
visual: "kgrag",
accent: "#8B1A1A",
},
{
id: "alchemist",
label: "Alchemist's Dungeon",
date: "February 2022",
org: "CS 23 · Game Design",
tag: "Game",
headline: "A 2D puzzle game with slippery floors.",
body:
"A single-player puzzle game I built with three classmates at Tufts. Players must navigate ten rooms with slippery floors to collect various potion ingredients. Watch out for holes!",
chips: ["Unity", "C#"],
links: [{ label: "itch.io", href: "https://alko08.itch.io/alchemists-dungeon" }],
visual: "alchemist",
accent: "#5A3A7A",
},
];
const stackRef = useRef(null);
const tabsRef = useRef(null);
const [active, setActive] = useState(-1);
useEffect(() => {
const onScroll = () => {
if (!stackRef.current) return;
const cards = stackRef.current.querySelectorAll(".proj-card");
// Active = highest-index card whose top has reached its visual sticky position.
// Stays -1 above the section so "click the tab you're already on" is honest.
let activeIdx = -1;
cards.forEach((el, i) => {
const stickyVisual = STACK_BASE + i * STACK_OFFSET;
if (el.getBoundingClientRect().top <= stickyVisual + 1) activeIdx = i;
});
setActive(activeIdx);
// Tabs follow the last card up as it releases, so the whole frame leaves together.
const tabsEl = tabsRef.current;
if (tabsEl && cards.length) {
const lastIdx = cards.length - 1;
const lastStickyVisual = STACK_BASE + lastIdx * STACK_OFFSET;
const lastTop = cards[lastIdx].getBoundingClientRect().top;
const overshoot = lastStickyVisual - lastTop;
tabsEl.style.transform = overshoot > 0 ? `translateY(${-overshoot}px)` : "";
}
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
02Projects
Selected work
A handful of programming projects I've worked on in the past. For a more comprehensive list of my projects, check out my GitHub.
{projects.map((p, i) => (
))}
{projects.map((p, i) => (
))}
);
}
function ProjectCard({ project, index, total }) {
// Same sticky top for every card so they release in lockstep; the visual
// stagger comes from the transform (which doesn't affect sticky math).
return (