// Main App Component function App() { const [isGameActive, setGameActive] = React.useState(false); const [skillState, setSkillState] = React.useState(initialSkillState); const [showScrollPrompt, setShowScrollPrompt] = React.useState(false); const [projectFilter, setProjectFilter] = React.useState('All'); const [activeSection, setActiveSection] = React.useState('home'); const [hasPlayedGame, setHasPlayedGame] = React.useState(false); const [hasWonGame, setHasWonGame] = React.useState(false); const [isResetting, setIsResetting] = React.useState(false); const [currentNavIndex, setCurrentNavIndex] = React.useState(0); const [expandedJobs, setExpandedJobs] = React.useState({}); const [loadingJobs, setLoadingJobs] = React.useState({}); const [selectedProject, setSelectedProject] = React.useState(null); const navSections = ['Experience', 'Education', 'Skills', 'Projects', 'Contact']; const handleJobExpand = async (index) => { if (expandedJobs[index]) { // Collapsing setExpandedJobs(prev => ({ ...prev, [index]: false })); } else { // Expanding setLoadingJobs(prev => ({ ...prev, [index]: true })); await new Promise(resolve => setTimeout(resolve, 1200)); setLoadingJobs(prev => ({ ...prev, [index]: false })); setExpandedJobs(prev => ({ ...prev, [index]: true })); } }; const jobTypes = ['All', ...new Set(projects.flatMap(p => p.jobTypes))]; const filteredProjects = projectFilter === 'All' ? projects : projects.filter(p => p.jobTypes.includes(projectFilter)); // Scroll detection for active section based on headline visibility React.useEffect(() => { const handleScroll = () => { const sections = ['home', 'about', 'experience', 'education', 'skills', 'projects', 'contact']; const viewportHeight = window.innerHeight; const scrollPosition = window.scrollY; for (const sectionId of sections) { const element = document.getElementById(sectionId); if (element) { const rect = element.getBoundingClientRect(); const elementTop = rect.top; const elementBottom = rect.bottom; // Check if the headline area (top portion of section) is visible in viewport // Headlines typically appear in the first 150px of each section const headlineAreaTop = elementTop; const headlineAreaBottom = elementTop + 150; const viewportCenter = viewportHeight * 0.5; const headlineAreaVisible = headlineAreaTop < viewportCenter && headlineAreaBottom > viewportHeight * 0.3; if (headlineAreaVisible) { setActiveSection(sectionId); break; } } } }; window.addEventListener('scroll', handleScroll); handleScroll(); // Initial call return () => window.removeEventListener('scroll', handleScroll); }, []); // Intersection Observer for section animations React.useEffect(() => { const observerOptions = { threshold: 0.15, rootMargin: '0px 0px -100px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('section-visible'); entry.target.classList.remove('section-hidden'); } }); }, observerOptions); const sections = document.querySelectorAll('.section-about, .section-experience, .section-education, .section-skills, .section-projects, .section-contact'); sections.forEach(section => { section.classList.add('section-hidden'); observer.observe(section); }); return () => observer.disconnect(); }, []); // Cycle through navigation items React.useEffect(() => { const interval = setInterval(() => { setCurrentNavIndex((prev) => (prev + 1) % navSections.length); }, 2000); return () => clearInterval(interval); }, []); const handlePointUpdate = (skill, points) => { setSkillState(prev => { if (!prev[skill]) return prev; const newPoints = Math.min(prev[skill].points + points, 5); // Cap at 5 const isActivated = newPoints >= 5; const newState = { ...prev, [skill]: { points: newPoints, activated: isActivated } }; const allActivated = Object.values(newState).every(s => s.activated); if (allActivated && isGameActive) { // The game component will handle its own win state display } return newState; }); }; const handleActivateAll = () => { setSkillState(prev => { const newState = { ...prev }; for (const skill in newState) { newState[skill] = { points: 5, activated: true }; } return newState; }); setGameActive(false); setHasWonGame(true); setHasPlayedGame(true); }; const handleGameEnd = (isWin) => { if (isWin) { handleActivateAll(); setHasWonGame(true); } // Always deactivate the game and show button setGameActive(false); setHasPlayedGame(true); }; return (
setShowScrollPrompt(true)} />

About Me

{userData.bio}

When not at the keyboard, I'm exploring NYC, volunteering at Sean Casey Animal Rescue and New York Cares, or hunting for the best coffee.

Career Trajectory

{experience.map((job, index) => (

{job.role} @ {job.company}

{job.headline}

{job.details && job.details.length > 0 && ( <> {loadingJobs[index] && (
terminal
$ fetch --experience --details
Retrieving data
)}
output
$ fetch --experience --details
✓ Success: Retrieved {job.details.length} entries
    {job.details.map((detail, detailIndex) => (
  • ▸ {detail}
    • ))}
)}
))}

Education

{education.map((edu, index) => (

{edu.degree}

{edu.institution}

{edu.specialization && (

{edu.specialization}

)}

{edu.date}

{edu.location}

{edu.gpa}
))}

Skillset Matrix

{Object.entries(skills).map(([category, data]) => { const categoryFullyActivated = data.skills.every(skill => skillState[skill]?.activated); return data.skills.map(skill => { const skillPoints = skillState[skill]?.points || 0; const skillActivated = skillState[skill]?.activated || false; const boxClasses = categoryFullyActivated ? 'group-activated' : (skillPoints >= 1 ? 'skill-glow' : 'border-transparent'); const iconClasses = categoryFullyActivated ? 'group-activated-icon' : ''; return (
= 1 ? data.color : 'transparent', transition: 'all 0.3s' }} > {skill}= 1 ? `brightness(${0.7 + (skillPoints / 5) * 0.6}) drop-shadow(0 0 ${skillPoints * 3}px ${data.color}) saturate(${1 + skillPoints / 10})` : 'brightness(1.2) saturate(0.5) contrast(1.1)', transform: categoryFullyActivated ? undefined // Let CSS animation handle transform for activated groups : (skillPoints >= 1 ? `scale(${1 + skillPoints / 20})` : 'scale(1)'), willChange: categoryFullyActivated ? 'transform' : 'auto' }} />
= 1 ? `0 0 ${skillState[skill].points * 2}px ${data.color}` : 'none' }} > {skill}
); }); })}
{!isGameActive ? (
{hasWonGame && ( )}
) : ( { setIsResetting(true); setGameActive(false); await new Promise(resolve => setTimeout(resolve, 500)); setSkillState(initialSkillState); setHasWonGame(false); setHasPlayedGame(false); setIsResetting(false); }} /> )}

Featured Projects

{jobTypes.map(type => ( ))}
{filteredProjects.map((project, index) => (
setSelectedProject(project)}>

{project.title}

{typeof project.description === 'string' ? project.description : project.description.split('\n')[0]}

{project.insight && `[+] ${project.insight}`}

    {project.tags.map(tag =>
  • {tag}
    • )}
Click for details →
))}

Get In Touch

I'm actively seeking new opportunities and collaborations. Choose how you'd like to connect.

{/* Project Terminal Popup */} {selectedProject && ( setSelectedProject(null)} /> )} {/* AI Chatbot */}
); }