feat: Added a low power mode

- added a lower power mode that reduces cpu load by disabling hero animations

src/App.tsx

@@ -19,6 +19,7 @@ export default function App() {
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
   const [hasClickedThemePill, setHasClickedThemePill] = useState(false);
   const [showThemePillTooltip, setShowThemePillTooltip] = useState(false);
+  const [cpuModeEnabled, setCpuModeEnabled] = useState(false);
 
   // Update CSS variables for dynamic theming
   useEffect(() => {
@@ -65,7 +66,7 @@ export default function App() {
   }, [showThemePillTooltip]);
 
   return (
-    <div className="min-h-screen bg-(--bg-base) text-(--text-main) font-mono selection:bg-(--color-accent) selection:text-[var(--bg-base)] relative overflow-x-hidden">
+    <div className="min-h-screen bg-(--bg-base) text-(--text-main) font-mono selection:bg-(--color-accent) selection:text-(--bg-base) relative overflow-x-hidden">
 
       {/* <svg className="hidden">
         <filter id="noiseFilter">
@@ -75,7 +76,7 @@ export default function App() {
       <div className="fixed inset-0 z-0 pointer-events-none opacity-[0.04]" style={{ filter: 'url(#noiseFilter)' }} />
 
       {/* Blueprint Dot Grid Background */}
-      <div className="fixed inset-0 dot-grid z-0 pointer-events-none opacity-50" />
+      <div className={`fixed inset-0 dot-grid z-0 pointer-events-none opacity-50 ${cpuModeEnabled ? 'dot-grid-static' : ''}`} />
 
       {/* Subtle mouse glow */}
       <div
@@ -87,7 +88,10 @@ export default function App() {
 
       <CatEasterEgg />
       <div className="relative z-10 max-w-5xl mx-auto px-6 py-12 flex flex-col gap-16">
-        <NavigationBar />
+        <NavigationBar
+          cpuModeEnabled={cpuModeEnabled}
+          onCpuModeToggle={() => setCpuModeEnabled(prev => !prev)}
+        />
         <HeroSection
           activeThemeName={activeTheme.name}
           hasClickedThemePill={hasClickedThemePill}
@@ -96,6 +100,7 @@ export default function App() {
             setHasClickedThemePill(true);
             setShowThemePillTooltip(true);
           }}
+          cpuModeEnabled={cpuModeEnabled}
         />
         <SystemOverviewSection />
         <div className="grid grid-cols-1 gap-12 md:grid-cols-7">

src/components/HeroSection.tsx

@@ -8,6 +8,7 @@ type HeroSectionProps = {
     hasClickedThemePill: boolean;
     showThemePillTooltip: boolean;
     onThemePillClick: () => void;
+    cpuModeEnabled: boolean;
 };
 
 export function HeroSection({
@@ -15,6 +16,7 @@ export function HeroSection({
     hasClickedThemePill,
     showThemePillTooltip,
     onThemePillClick,
+    cpuModeEnabled,
 }: HeroSectionProps) {
     return (
         <header className="flex flex-col md:flex-row gap-12 items-center justify-between relative">
@@ -76,7 +78,7 @@ export function HeroSection({
                 </div>
 
                 <div className="hidden md:block">
-                    <RevolvingPrism />
+                    {cpuModeEnabled ? <HeroTitle /> : <RevolvingPrism />}
                 </div>
                 <p className="text-md text-(--text-muted) leading-relaxed max-w-xl font-mono">
                     Systems engineer in the making. From window managers and game engines to self-hosted infrastructure.

src/components/NavigationBar.tsx

@@ -1,6 +1,11 @@
-import { Github, Mail, Terminal } from 'lucide-react';
+import { Cpu, Github, Mail, Terminal } from 'lucide-react';
 
-export function NavigationBar() {
+type NavigationBarProps = {
+    cpuModeEnabled: boolean;
+    onCpuModeToggle: () => void;
+};
+
+export function NavigationBar({ cpuModeEnabled, onCpuModeToggle }: NavigationBarProps) {
     return (
         <nav className="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b-2 border-dashed border-(--border-main) pb-4 gap-4">
             <div className="flex items-center gap-2 text-sm text-(--text-muted) relative group">
@@ -13,7 +18,20 @@ export function NavigationBar() {
                 </div>
             </div>
 
-            <div className="flex items-center gap-6">
+            <div className="flex items-center gap-6 flex-wrap">
+                <button
+                    type="button"
+                    onClick={onCpuModeToggle}
+                    className="flex items-center gap-2 text-(--text-muted) hover:text-(--text-main) transition-colors"
+                    aria-pressed={cpuModeEnabled}
+                    aria-label="Toggle low CPU mode"
+                >
+                    <Cpu className={`w-4 h-4 ${cpuModeEnabled ? 'text-(--color-accent)' : ''}`} />
+                    <span className="font-sketch text-lg">cpu_sav</span>
+                    <span className={`relative inline-flex h-5 w-9 items-center rounded-full border transition-colors ${cpuModeEnabled ? 'bg-(--color-accent) border-(--color-accent)' : 'bg-(--bg-surface) border-(--border-main)'}`}>
+                        <span className={`inline-block h-4 w-4 transform rounded-full transition-colors ${cpuModeEnabled ? 'translate-x-4 bg-(--bg-base)' : 'translate-x-1 bg-(--color-accent)'}`} />
+                    </span>
+                </button>
                 <a href="#" className="font-sketch text-lg hover:text-(--text-main) transition-colors flex items-center gap-2 group"><Github className="w-4 h-4 group-hover:-translate-y-1 transition-transform" /> github</a>
                 <a href="#" className="font-sketch text-lg hover:text-(--text-main) transition-colors flex items-center gap-2 group"><Mail className="w-4 h-4 group-hover:-translate-y-1 transition-transform" /> contact</a>
             </div>

src/theme.css

@@ -99,6 +99,11 @@
     animation: dot-grid-drift-x 3s linear infinite;
 }
 
+.dot-grid.dot-grid-static::before {
+    animation: none;
+    background-position: 0px 0px;
+}
+
 @keyframes dot-grid-drift-x {
     from {
         background-position: 0px 0px;