// PROJECTS — mixed magazine cover + comic panel layout const PROJECTS = [ { id: 1, title: "Project One", subtitle: "coming soon", issue: "08", blurb: "More work on the way — check back soon.", tags: ["TBD"], year: "2025", role: "TBD", burst: "WIP!", layout: "cover", accent: "var(--pink)", }, { id: 2, title: "Project Two", subtitle: "coming soon", issue: "07", blurb: "More work on the way — check back soon.", tags: ["TBD"], year: "2025", role: "TBD", burst: "WIP!", layout: "panel", accent: "var(--accent)", }, { id: 3, title: "Waves", subtitle: "a mental health wearable concept", issue: "06", blurb: "A Figma + Procreate concept pairing an AI app with a discreet biosensor bracelet to detect and respond to anxiety in real time — designed at UCI Design-a-thon 2025.", tags: ["Figma", "Procreate", "UX Research", "UI/UX"], year: "2025", role: "Designer & UX Researcher", burst: "SPLASH!", layout: "cover", accent: "var(--ink)", detail: { challenge: "Over one in five U.S. adults live with mental illness, yet therapy and service animals remain out of reach for most. We wanted to build an affordable, always-present alternative — something that could actually help in the critical moments of an anxiety or panic attack.", approach: "We spent almost 5–6 hours just ideating and conceptualizing before touching Figma. Extensive user research shaped every decision — from how we asked sensitive questions to how the mascot should feel (supportive, not robotic). I used Figma for the app interface and Procreate for our dolphin mascot and illustrations. Working with a partner, we iterated quickly on the bracelet design (Sonaband) and the app flow, balancing discreet wearable aesthetics with real biosensor functionality.", outcome: "We shipped a functional prototype with an interface our users found both intuitive and comforting. The system pairs the Sonaband bracelet — which monitors heart rate, breathing, and temperature — with guided exercises through an interactive dolphin mascot. For severe situations, it can notify emergency contacts. A huge growth moment in UX research for sensitive health products.", bullets: [ "Spent 5–6 hours on user research and ideation before opening Figma", "Designed both the Sonaband wearable and the AI-powered app interface", "Created the dolphin mascot in Procreate — built to feel like a supportive friend, not a chatbot", "Tackled hard UX questions: privacy, sensitive health data, marketing, and daily wearability", ], tools: ["Figma", "Procreate"], timeline: "Design-a-thon", team: "2 designers", quote: "we spent almost 5–6 hours just thinking — and it made all the difference.", }, }, { id: 4, title: "ReLeaf", subtitle: "a property energy dashboard", issue: "05", blurb: "A web app that makes carbon emissions and energy cost data actually readable — built in 24 hours at HackUTD 2024 for CBRE's track. The judges were impressed.", tags: ["React.js", "TypeScript", "Tailwind", "Figma"], year: "2024", role: "Front-End Developer", burst: "GREEN!", layout: "panel", accent: "var(--accent)", detail: { challenge: "Property managers are swimming in energy consumption data but have no simple way to read it. ReLeaf set out to surface carbon footprint and cost metrics per property in a way that's clean, visual, and actually actionable.", approach: "We started in Figma and React Native building a mobile app, then pivoted mid-hackathon to a React.js website — a big call under the clock, but the right one. We used our mobile Figma designs as the foundation and rebuilt for web using React.js, TypeScript, and Tailwind CSS. I focused on designing and implementing the UI: the properties dashboard, individual property views, and the dynamic charts that self-adjust to real parsed data.", outcome: "We shipped a fully functional frontend with a properties dashboard, data input, pie charts, bar graphs, a built-in carbon emission calculator, and personalized reduction recommendations. The CBRE company judges were impressed by the level of detail — especially the dynamic visualizations and the depth of the data layer.", bullets: [ "Designed and implemented the full UI as front-end developer", "Pivoted from React Native mobile app to React.js website mid-hackathon", "Built dynamic self-adjusting charts that parse and visualize real energy datasets", "Participated in CBRE's track — judges noted the depth and polish of the product", ], tools: ["React.js", "TypeScript", "JavaScript", "Tailwind CSS", "Figma"], timeline: "24 hours", team: "Team of 4", quote: "even though we ran into setbacks, we shipped something we were genuinely proud to demo.", }, }, { id: 5, title: "Echo", subtitle: "a campus social app concept", issue: "04", blurb: "A Figma concept for UTD's own social space — post anonymously, ask for advice, and keep up with campus life in real time. Built for UTD Nebula in 6 hours.", tags: ["Figma", "UI/UX", "Branding", "Concept"], year: "2024", role: "Co-Designer", burst: "ECHO!", layout: "cover", accent: "var(--pink)", detail: { challenge: "UTD students needed a social space that actually understood campus life — somewhere to ask which professor to pick, find out which food spots are open, or just share a random thought with people who get it. No generic social app was cutting it.", approach: "In a 6-hour hackathon design sprint for UTD Nebula, my partner and I built Echo from scratch — starting with the concept, working through the feature set, and designing the full Figma mockup. It was my first time collaborating with another person on design, and we spent a lot of time thinking carefully about both features and branding before opening Figma.", outcome: "We shipped a complete, polished Figma concept for Echo. The app lets students post publicly or anonymously, reply via 'Echos' (our take on comments), and browse a real-time campus feed. The branding came together really well and the process taught me a lot about how to co-design with intention.", bullets: [ "Defined the full feature set: posting, anonymous mode, Echos (replies), and real-time campus feed", "Designed the branding and visual identity from scratch in a single session", "Built the complete UI mockup in Figma — all screens, components, and flows", "First time co-designing with a partner — learned to align on ideas before touching the tools", ], tools: ["Figma"], timeline: "6 hours", team: "2 designers", quote: "we got to think. a lot. about features, about branding — and it showed.", }, }, { id: 6, title: "UTD Trends", subtitle: "a UX redesign case study", issue: "03", blurb: "Redesigning the Compare feature for UTD Trends — a data viz tool used by students to evaluate professors. 76% of users preferred the new design.", tags: ["UI/UX", "Figma", "UX Research", "Data Viz"], year: "2024", role: "UX Designer", burst: "76%!", layout: "panel", accent: "var(--accent)", detail: { challenge: "The Compare feature is one of UTD Trends' most valuable tools — letting students evaluate multiple professors side-by-side across grades, ratings, and difficulty. But users struggled with it: color-coded graph data was disconnected from identifying information, key metrics were hard to scan, and the layout made adding new metrics nearly impossible. The PM requested a focused redesign for efficiency and clarity.", approach: "I identified four core pain points and designed around them. The solution: a card-based layout that groups each professor's data horizontally for direct left-to-right comparison. Cards include the professor name, class, grade count, and ratings count in the header. Color-coding matches the graph so there's no mental mapping required. Through two iterations — first introducing the card layout and alignment, then refining spacing, visual weight, contrast, and color to match UTD Trends' overall theme — the design landed in a place that was both cleaner and more functional.", outcome: "Conducting user testing and research, we found that 76% of UTD Trends users preferred the new Comparison Feature over the old one. As a UX designer on Nebula Labs UTD, this was one of the most technically specific design problems I'd tackled — iterating on an existing, functional UI to maximize efficiency rather than building from scratch.", bullets: [ "Identified 4 key pain points in the existing Compare UI through analysis and user feedback", "Designed a card-based horizontal layout that eliminates mental color-to-professor mapping", "Iterated twice — first on structure, then on spacing, contrast, and visual hierarchy", "76% of UTD Trends users preferred the redesigned Compare feature over the original", ], tools: ["Figma"], timeline: "October 2024", team: "Nebula Labs UTD design team", quote: "this problem required me to iterate on an already existing UI and improve it to its maximum efficiency.", }, }, { id: 7, title: "NOVA", subtitle: "a mobile networking app", issue: "02", blurb: "A magic-themed networking app that matches you with people going to the same career events — built in 24 hours at WEHack UTD 2024.", tags: ["React Native", "Expo", "JavaScript", "Figma"], year: "2024", role: "Lead Developer", burst: "✦ WON!", layout: "panel", accent: "var(--accent)", winner: true, winnerLabel: "1st · Design Track", detail: { challenge: "Entering the job market and expanding your career network without a friend or mentor can be intimidating. We wanted to build something that got people out of their comfort zone and into the same room as the right connections.", approach: "We started with a Figma mockup to nail the magic-themed visual direction, then coded the app in JavaScript and JSX using React Native. We originally set up a Flutter environment, but pivoted to React Native mid-hackathon — a decision that aligned much better with our goals. Expo let us test on device in real time throughout the 24 hours.", outcome: "NOVA took 1st place in the Design Track at WEHack UTD 2024. Our team's very first hackathon. We implemented nearly every feature we set out to build: a personality quiz, event selection, and a matching algorithm that pairs users attending the same events. The magic theme came through in every screen.", bullets: [ "Designed the full app flow and visual system in Figma before writing a line of code", "Pivoted from Flutter to React Native mid-hackathon and shipped anyway", "Built a quiz + event-selection matching system in under 24 hours", "Won 1st place in the Design Track at WEHack UTD 2024", ], tools: ["React Native", "Expo", "JavaScript", "Figma"], timeline: "24 hours", team: "Team of 4", quote: "we're proud of how much we were able to do in 24 hours — and proud of the team we became doing it.", }, }, { id: 8, title: "Wasted", subtitle: "a campus sustainability mobile app", issue: "01", blurb: "A React Native app that turns end-of-year student giveaways into a campus treasure hunt — built over 10 weeks through ACM UTD Projects and presented to 200 people + industry judges.", tags: ["React Native", "Expo", "Firebase", "Google Maps API"], year: "2023", role: "Front-End Developer & Designer", burst: "FOUND IT!", layout: "cover", accent: "var(--pink)", detail: { challenge: "Every end of the school year, college students trash valuable items — couches, mirrors, TVs, carpets — that other students would genuinely want. No platform existed to connect them on campus in a way that was safe, simple, and actually fun to use.", approach: "Built over 10 weeks through ACM UTD's Projects program under a PM and industry expert. I led front-end development and design: login flow, home screen, individual post view (with integrated map and claim feature), and profile page. We hit a last-minute UI redesign challenge — simplified the home screen but made it more functional and information-dense, and refreshed the color scheme. We also had to crack the Google Directions API integration, eventually solving the user location issue with Expo's Location Library.", outcome: "A fully functional, demoed mobile app presented to an audience of nearly 200 people and judges from industry companies — the culmination of ACM UTD's most prestigious undergrad program. Wasted lets students post items for giveaway, claim them via a map-based treasure hunt, and sign up securely with their college email. Every feature we set out to build shipped.", bullets: [ "Accepted into ACM UTD Projects — UTD's most prestigious undergraduate student org program", "Led front-end development and design across login, home, post detail, map, and profile screens", "Executed a last-minute UI redesign under pressure — came out cleaner and more functional", "Presented live to ~200 people and industry judges at the 10-week program demo day", ], tools: ["React Native", "Expo", "Firebase", "Google Directions API"], timeline: "10 weeks (Aug–Dec 2023)", team: "Team of 4 + PM", quote: "one post at a time, users turn their trash into someone else's treasure.", }, }, ]; const ProjectCover = ({ p, idx, onOpen }) => (
onOpen && onOpen(p)} onMouseEnter={(e) => { e.currentTarget.style.transform = "rotate(0deg) translate(-4px,-4px)"; e.currentTarget.style.boxShadow = "16px 16px 0 var(--accent)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = idx % 2 === 0 ? "rotate(-1deg)" : "rotate(1deg)"; e.currentTarget.style.boxShadow = "12px 12px 0 var(--ink)"; }} > {/* Top bar */}
ISSUE №{p.issue} · {p.year} ★ ★ ★ ★ ★ p.{p.issue}
{/* Winner badge */} {p.winner && (
★ {p.winnerLabel}
)} {/* Title block */}
▸ {p.subtitle.toUpperCase()}

{p.title.split(" ")[0]}
{p.title.split(" ").slice(1).join(" ")}

{/* Image placeholder */}
{/* Blurb */}

{p.blurb}

{/* Tags */}
{p.tags.map(t => ( {t} ))}
{/* Footer */}
ROLE / {p.role} read more →
); const ProjectPanel = ({ p, idx, onOpen }) => (
onOpen && onOpen(p)} onMouseEnter={(e) => { e.currentTarget.style.transform = "rotate(0deg) translate(-4px,-4px)"; e.currentTarget.style.boxShadow = "16px 16px 0 var(--accent)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = idx % 2 === 0 ? "rotate(0.5deg)" : "rotate(-0.7deg)"; e.currentTarget.style.boxShadow = "12px 12px 0 var(--ink)"; }} > {/* Comic-style top */}
PANEL №{p.issue} ⟶ {p.year}
{/* Big number + image split */}
0{p.issue}
{p.subtitle.toUpperCase()}

{p.title.split(" ")[0]}{" "} {p.title.split(" ").slice(1).join(" ")}

{p.winner && (
★ {p.winnerLabel}
)}

{p.blurb}

{/* Footer */}
{p.tags.map(t => ( {t} ))}
open the issue →
); const PAGE_SIZE = 4; const Projects = ({ tweaks }) => { const layout = tweaks?.projectLayout || "mixed"; const [page, setPage] = React.useState(0); const [slideDir, setSlideDir] = React.useState(1); const [animKey, setAnimKey] = React.useState(0); const isFirstRender = React.useRef(true); const totalPages = Math.ceil(PROJECTS.length / PAGE_SIZE); const visible = PROJECTS.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE); React.useEffect(() => { if (isFirstRender.current) { isFirstRender.current = false; return; } const section = document.getElementById("projects"); if (section) { const top = section.getBoundingClientRect().top + window.scrollY - 24; window.scrollTo({ top, behavior: "smooth" }); } }, [page]); const goTo = (next) => { setSlideDir(next > page ? 1 : -1); setPage(next); setAnimKey(k => k + 1); }; return (
{/* Subtle gingham accent strip */}
{visible.map((p, i) => { let useLayout = p.layout; if (layout === "covers") useLayout = "cover"; if (layout === "panels") useLayout = "panel"; return useLayout === "cover" ? : ; })}
{/* Pagination nav */} {totalPages > 1 && (
{/* Prev arrow */} {/* Page dots */}
{Array.from({ length: totalPages }).map((_, i) => (
{/* Next arrow */}
)} {/* Page label */}
— issue {page + 1} of {totalPages} —
); }; window.Projects = Projects;