fix(translations): update retroFps label to HELLRUN

Author: Kinin-Code-Offical

src/app/globals.css

@@ -1876,7 +1876,7 @@ textarea {
 }
 
 .section-featured {
-  background: linear-gradient(180deg, rgba(15, 12, 8, 0.95) 0%, rgba(12, 9, 6, 0.95) 100%);
+  background: var(--content-bg);
   min-height: 0;
   position: relative;
   overflow-x: visible;
@@ -1885,8 +1885,10 @@ textarea {
   padding-bottom: clamp(56px, 8vw, 96px);
 }
 
-:root[data-theme="light"] .section-featured {
-  background: linear-gradient(180deg, rgba(250, 240, 222, 0.96) 0%, rgba(242, 226, 200, 0.96) 100%);
+.section-featured + .section,
+.section-featured ~ .section,
+.section-featured ~ .site-footer {
+  background: var(--content-bg);
 }
 
 .featured-layout {
@@ -2025,7 +2027,11 @@ textarea {
   top: 0;
   left: 50%;
   width: var(--featured-card-width);
-  transform: translateX(calc(-50% + var(--featured-offset)))
+  transform: translateX(
+      calc(
+        -50% + var(--featured-offset) + var(--featured-center-nudge, 0px)
+      )
+    )
     scale(var(--featured-scale));
   opacity: var(--featured-opacity);
   z-index: var(--featured-z);
@@ -2040,11 +2046,13 @@ textarea {
   width: var(--featured-card-width);
   border: none;
   background: transparent;
-  z-index: 3;
+  z-index: 1;
   cursor: pointer;
   padding: 0;
   left: 50%;
-  transform: translateX(calc(-50% + var(--featured-hit-offset)));
+  transform: translateX(
+    calc(-50% + var(--featured-hit-offset) + var(--featured-center-nudge, 0px))
+  );
 }
 
 .featured-hit-prev {
@@ -3094,16 +3102,21 @@ textarea {
   .featured-viewer {
     min-height: 0;
     overflow: visible;
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
   }
 
   .featured-slider {
-    --featured-card-width: min(440px, 82vw);
-    --featured-offset-1: 26vw;
-    --featured-offset-2: 52vw;
+    width: 100vw;
+    --featured-card-width: min(380px, 86vw);
+    --featured-offset-1: 22vw;
+    --featured-offset-2: 44vw;
+    --featured-center-nudge: 0px;
   }
 
   .featured-track {
-    min-height: clamp(280px, 42vh, 480px);
+    min-height: clamp(300px, 42vh, 520px);
+    padding: 6px 0 18px;
   }
 
   .featured-item {
@@ -3121,10 +3134,16 @@ textarea {
   }
 
   .featured-card {
-    padding: 22px;
+    padding: 20px;
+    min-height: clamp(240px, 34vh, 320px);
     box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
   }
 
+  .featured-card-header {
+    align-items: start;
+    flex-wrap: wrap;
+  }
+
   .featured-summary {
     display: block;
     -webkit-line-clamp: unset;
@@ -3146,7 +3165,33 @@ textarea {
   }
 
   .featured-dots {
-    margin-top: 16px;
+    margin-top: 0;
+  }
+
+  .featured-controls {
+    display: grid;
+    grid-template-columns: 40px 1fr 40px;
+    align-items: center;
+    justify-items: center;
+    gap: 12px;
+    width: min(520px, 92vw);
+    margin: 0 auto;
+  }
+
+  .featured-controls .featured-dots {
+    margin: 0;
+    gap: 8px;
+  }
+
+  .featured-dot {
+    width: 10px;
+    height: 10px;
+    border-width: 2px;
+  }
+
+  .featured-arrow {
+    width: 38px;
+    height: 38px;
   }
 
   .featured-ghost {

src/app/page.tsx

@@ -29,7 +29,17 @@ export async function generateMetadata({
   };
 }
 
-export default async function Home() {
+export default async function Home({
+  searchParams,
+}: {
+  searchParams?: Promise<{ dev?: string; debug?: string }>;
+}) {
   const content = await getContent();
-  return <HomeClient content={content} />;
+  const params = searchParams ? await searchParams : undefined;
+  const debugEnabled =
+    params?.dev === "1" ||
+    params?.dev === "true" ||
+    params?.debug === "1" ||
+    params?.debug === "true";
+  return <HomeClient content={content} debugEnabled={debugEnabled} />;
 }

src/components/HomeClient.tsx

@@ -57,6 +57,8 @@ function useSmoothScrollProgress(
 ) {
   const progressRef = useRef(0);
   const targetRef = useRef(0);
+  const lastTargetRef = useRef(0);
+  const lastScrollAtRef = useRef(0);
   const rafRef = useRef<number | null>(null);
   const onUpdateRef = useRef<typeof onUpdate>(onUpdate);
 
@@ -67,56 +69,97 @@ function useSmoothScrollProgress(
   useEffect(() => {
     let active = true;
     let resizeObserver: ResizeObserver | null = null;
+    let running = false;
 
     const computeTarget = () => {
       if (!ref.current) {
         targetRef.current = 0;
         return;
       }
       const rect = ref.current.getBoundingClientRect();
+      if (!Number.isFinite(rect.top) || rect.height <= 1) {
+        return;
+      }
       const total = rect.height - window.innerHeight;
       const raw = total > 0 ? Math.min(Math.max(-rect.top / total, 0), 1) : 0;
+      const now =
+        typeof performance !== "undefined" ? performance.now() : Date.now();
+      const sinceScroll = now - lastScrollAtRef.current;
+      if (sinceScroll > 140 && Math.abs(raw - lastTargetRef.current) > 0.35) {
+        targetRef.current = lastTargetRef.current;
+        return;
+      }
+      lastTargetRef.current = raw;
       targetRef.current = raw;
     };
 
     const epsilon = 0.0008;
     const smoothing = 0.12;
 
     const tick = () => {
-      if (!active) {
+      if (!active || document.hidden) {
+        running = false;
+        rafRef.current = null;
         return;
       }
       const diff = targetRef.current - progressRef.current;
       if (Math.abs(diff) < epsilon) {
         progressRef.current = targetRef.current;
-      } else {
-        progressRef.current += diff * smoothing;
+        onUpdateRef.current?.(progressRef.current);
+        running = false;
+        rafRef.current = null;
+        return;
       }
+      progressRef.current += diff * smoothing;
       onUpdateRef.current?.(progressRef.current);
       rafRef.current = window.requestAnimationFrame(tick);
     };
 
+    const startLoop = () => {
+      if (running) {
+        return;
+      }
+      running = true;
+      rafRef.current = window.requestAnimationFrame(tick);
+    };
+
     computeTarget();
-    rafRef.current = window.requestAnimationFrame(tick);
+    startLoop();
 
-    const schedule = () => {
+    const schedule = (fromScroll = false) => {
+      if (fromScroll) {
+        lastScrollAtRef.current =
+          typeof performance !== "undefined" ? performance.now() : Date.now();
+      }
       computeTarget();
+      startLoop();
     };
 
-    window.addEventListener("scroll", schedule, { passive: true });
-    window.addEventListener("resize", schedule);
+    const handleScroll: EventListener = () => schedule(true);
+    const handleResize: EventListener = () => schedule(false);
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", handleResize);
+    const handleVisibility = () => {
+      if (!document.hidden) {
+        schedule();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
 
     if (typeof ResizeObserver !== "undefined") {
-      resizeObserver = new ResizeObserver(schedule);
+      const handleResizeObserver: ResizeObserverCallback = () =>
+        schedule(false);
+      resizeObserver = new ResizeObserver(handleResizeObserver);
       if (ref.current) {
         resizeObserver.observe(ref.current);
       }
     }
 
     return () => {
       active = false;
-      window.removeEventListener("scroll", schedule);
-      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleResize);
+      document.removeEventListener("visibilitychange", handleVisibility);
       resizeObserver?.disconnect();
       resizeObserver = null;
       if (rafRef.current !== null) {
@@ -459,6 +502,8 @@ export default function HomeClient({
     heroActive: true,
   });
   const debugLastRef = useRef(0);
+  const revealRef = useRef(0);
+  const fadeRef = useRef(1);
   const featuredIndex = useMemo(
     () => profile.sections.indexOf("featured"),
     [profile.sections],
@@ -488,9 +533,12 @@ export default function HomeClient({
     if (!shellRef.current) {
       return;
     }
+    if (typeof document !== "undefined" && document.hidden) {
+      return;
+    }
     const activeId = activeSectionRef.current ?? "home";
     const activeIndex = profile.sections.indexOf(activeId);
-    const forceOpaque = featuredIndex >= 0 && activeIndex > featuredIndex;
+    const forceOpaque = featuredIndex >= 0 && activeIndex >= featuredIndex;
     const clamp = (val: number, min: number, max: number) =>
       Math.min(max, Math.max(min, val));
     let reveal = 0;
@@ -500,22 +548,37 @@ export default function HomeClient({
       featuredRef.current;
     if (featuredEl) {
       const rect = featuredEl.getBoundingClientRect();
-      const elementCenter = rect.top + rect.height / 2;
-      const offsetCenter = elementCenter - window.innerHeight;
-      const triggerStart = window.innerHeight * 0.8;
-      const triggerEnd = window.innerHeight * 0.5;
-      if (triggerStart !== triggerEnd) {
-        reveal = clamp(
-          (triggerStart - offsetCenter) / (triggerStart - triggerEnd),
-          0,
-          1,
-        );
+      if (Number.isFinite(rect.top) && rect.height > 1) {
+        const elementCenter = rect.top + rect.height / 2;
+        const offsetCenter = elementCenter - window.innerHeight;
+        const triggerStart = window.innerHeight * 0.8;
+        const triggerEnd = window.innerHeight * 0.5;
+        if (triggerStart !== triggerEnd) {
+          reveal = clamp(
+            (triggerStart - offsetCenter) / (triggerStart - triggerEnd),
+            0,
+            1,
+          );
+        }
+        if (rect.top <= window.innerHeight * 0.1) {
+          reveal = 1;
+        }
+      } else {
+        reveal = revealRef.current;
       }
     } else {
       reveal = clamp((value - 0.85) / 0.12, 0, 1);
     }
     reveal = forceOpaque ? 1 : reveal;
-    const fade = forceOpaque ? 0 : 1 - reveal;
+    let fade = forceOpaque ? 0 : 1 - reveal;
+    if (!Number.isFinite(reveal)) {
+      reveal = revealRef.current;
+    }
+    if (!Number.isFinite(fade)) {
+      fade = fadeRef.current;
+    }
+    revealRef.current = reveal;
+    fadeRef.current = fade;
     shellRef.current.style.setProperty("--hero-fade", String(fade));
     shellRef.current.style.setProperty("--content-reveal", String(reveal));
     const nextHeroActive = reveal < 0.98;
@@ -1488,9 +1551,9 @@ export default function HomeClient({
           "# Kinin Portfolio\n\nStatus: active\nStack: Next.js, Three.js, WebGL\n",
       },
       {
-        path: `${projectsDir}/retro-os/README.md`,
+        path: `${projectsDir}/kinin-os/README.md`,
         content:
-          "# Retro OS\n\nExperimenting with terminal UX and CRT shaders.\n",
+          "# Kinin OS\n\nExperimenting with terminal UX and CRT shaders.\n",
       },
       {
         path: `${homeDir}/.bashrc`,

src/components/Markdown.tsx

@@ -27,23 +27,36 @@ export default function Markdown({
     return -1;
   })();
   const renderInline = (text: string) => {
-    const parts: Array<string | { label: string; href: string }> = [];
-    const regex = /\[([^\]]+)\]\(([^)]+)\)/g;
+    const parts: Array<
+      | { type: "text"; value: string }
+      | { type: "link"; label: string; href: string }
+      | { type: "bold"; value: string }
+    > = [];
+    const regex = /\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|__([^_]+)__/g;
     let lastIndex = 0;
     let match: RegExpExecArray | null;
     while ((match = regex.exec(text)) !== null) {
       if (match.index > lastIndex) {
-        parts.push(text.slice(lastIndex, match.index));
+        parts.push({ type: "text", value: text.slice(lastIndex, match.index) });
+      }
+      if (match[1] && match[2]) {
+        parts.push({ type: "link", label: match[1], href: match[2] });
+      } else if (match[3]) {
+        parts.push({ type: "bold", value: match[3] });
+      } else if (match[4]) {
+        parts.push({ type: "bold", value: match[4] });
       }
-      parts.push({ label: match[1], href: match[2] });
       lastIndex = match.index + match[0].length;
     }
     if (lastIndex < text.length) {
-      parts.push(text.slice(lastIndex));
+      parts.push({ type: "text", value: text.slice(lastIndex) });
     }
     return parts.map((part, index) => {
-      if (typeof part === "string") {
-        return <span key={index}>{part}</span>;
+      if (part.type === "text") {
+        return <span key={index}>{part.value}</span>;
+      }
+      if (part.type === "bold") {
+        return <strong key={index}>{part.value}</strong>;
       }
       return (
         <a key={index} href={part.href} target="_blank" rel="noreferrer">