Add ModeToggle and SectionToggle UI controls

Global SHORT/LONG toggle below the header and a per-section coursework
toggle in Education. App wrapped in CVProvider. All controls hidden
from print. Default view is short mode with clean URL.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: mrtysn

Mert_Yasin_CV.pdf

@@ -106,6 +106,15 @@ div#narrowSkillTitle {
   }
 }
 
+/* Toggle controls */
+.modeToggleOption:hover {
+  opacity: 0.7;
+}
+
+.sectionToggle:hover {
+  opacity: 0.7;
+}
+
 /* Mobile/Narrow screen adjustments */
 @media (max-width: 768px) {
   .ui.text.container {

src/App.css

@@ -1,6 +1,7 @@
 import React from "react";
 import { Container, Divider } from "semantic-ui-react";
 import "./App.css";
+import { CVProvider } from "./context/CVContext";
 import Achievements from "./containers/Achievements";
 import Education from "./containers/Education";
 import Experience from "./containers/Experience";
@@ -9,21 +10,25 @@ import Header from "./containers/Header";
 import Skills from "./containers/Skills";
 import PdfDownloadButton from "./components/PdfDownloadButton";
 import GitHubLinkButton from "./components/GitHubLinkButton";
+import ModeToggle from "./components/ModeToggle";
 
 function App() {
   return (
-    <Container text>
-      <PdfDownloadButton />
-      <GitHubLinkButton />
-      <Divider hidden style={{ marginTop: 10 }} className="hideFromPrint" />
-      <Header />
-      <Experience />
-      <Education />
-      <Skills />
-      <Achievements />
-      <Footer />
-      <Divider hidden style={{ marginTop: 10 }} className="hideFromPrint" />
-    </Container>
+    <CVProvider>
+      <Container text>
+        <PdfDownloadButton />
+        <GitHubLinkButton />
+        <Divider hidden style={{ marginTop: 10 }} className="hideFromPrint" />
+        <Header />
+        <ModeToggle />
+        <Experience />
+        <Education />
+        <Skills />
+        <Achievements />
+        <Footer />
+        <Divider hidden style={{ marginTop: 10 }} className="hideFromPrint" />
+      </Container>
+    </CVProvider>
   );
 }
 

src/App.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { MODES, ACTIONS } from "../constants/tags";
+import { useCVContext } from "../context/CVContext";
+
+const ModeToggle = () => {
+  const { state, dispatch } = useCVContext();
+  const isShort = state.mode === MODES.SHORT;
+
+  return (
+    <div className="hideFromPrint" style={{ textAlign: "center", margin: "4px 0 8px" }}>
+      <span
+        onClick={() => dispatch({ type: ACTIONS.SET_MODE, payload: MODES.SHORT })}
+        className="modeToggleOption"
+        style={{
+          cursor: "pointer",
+          fontWeight: isShort ? 500 : 400,
+          color: isShort ? "#2185d0" : "#999",
+          fontSize: "11px",
+          letterSpacing: "1px",
+          textTransform: "uppercase",
+        }}
+      >
+        Short
+      </span>
+      <span style={{ margin: "0 8px", color: "#ccc", fontSize: "11px" }}>|</span>
+      <span
+        onClick={() => dispatch({ type: ACTIONS.SET_MODE, payload: MODES.LONG })}
+        className="modeToggleOption"
+        style={{
+          cursor: "pointer",
+          fontWeight: isShort ? 400 : 500,
+          color: isShort ? "#999" : "#2185d0",
+          fontSize: "11px",
+          letterSpacing: "1px",
+          textTransform: "uppercase",
+        }}
+      >
+        Long
+      </span>
+    </div>
+  );
+};
+
+export default ModeToggle;

src/components/ModeToggle.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { ACTIONS } from "../constants/tags";
+import { useCVContext } from "../context/CVContext";
+
+const SectionToggle = ({ tag, label }) => {
+  const { state, dispatch } = useCVContext();
+  const isHidden = state.hiddenTags.includes(tag);
+
+  return (
+    <span
+      className="hideFromPrint sectionToggle"
+      onClick={() => dispatch({ type: ACTIONS.TOGGLE_TAG, payload: tag })}
+      style={{
+        cursor: "pointer",
+        fontSize: "10px",
+        color: isHidden ? "#ccc" : "#999",
+        marginLeft: "8px",
+        letterSpacing: "0.5px",
+        fontWeight: 300,
+        textTransform: "none",
+        textDecoration: isHidden ? "line-through" : "none",
+      }}
+    >
+      {label}
+    </span>
+  );
+};
+
+export default SectionToggle;