Mission 6 of 9
Add a Real Interactive Feature
Enhance your portfolio by implementing a dark mode toggle, filtering system, or dynamic contact form.
Implement React state using `useState`
Add click event handlers and dynamic CSS class switching
Enhance user interaction with animations
Mission Prerequisites
Customized Portfolio
Mission Tasks (0 / 2)
Click tasks as you execute them locallyTASK 01
Add Dark Mode State
Add theme toggle button and state variable inside your main layout or header.
Code snippet
const [darkMode, setDarkMode] = useState(false);
<button onClick={() => setDarkMode(!darkMode)}>
{darkMode ? "☀️ Light" : "🌙 Dark"}
</button>Expected Output:
Button toggles theme mode upon clicking.TASK 02
Add Project Filter Tabs
Implement interactive category filter tabs (All, Web, Mobile, AI).
Expected Output:
Cards dynamically filter based on active tab.Expected Result
Your portfolio site includes functional, interactive client-side React features.
Super Admin Verified Mission (+100 XP)
Submit Proof of Completion
Upload a Screenshot (PNG/JPG) or PDF Document showing your executed code/output. Submitting allows you to immediately continue to the next mission while Super Admin verifies your work!
Tip: You can submit your proof and advance to the next mission immediately.