feat: Added a low power mode

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

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>