feat: add SLO uptime calculator project (#89)

Interactive calculator that helps engineers understand achievable SLAs based on
incident response times. Two modes: "What SLA can I achieve?" and "Can I meet
this SLA target?"

Features:
- Response time sliders for each incident phase (alert latency, acknowledge,
  travel, authenticate, diagnose, fix)
- Toggle visibility to exclude phases from calculations
- Preset profiles (Incident Commander, On-Call Working Hours, After Hours)
- Direct SLA percentage input with slider sync
- Budget breakdown visualization showing time allocation per phase
- Response overhead insight showing pre-diagnosis overhead
- Monthly and yearly downtime calculations

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: Dbochman

package-lock.json

@@ -39,7 +39,9 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
@@ -114,4 +116,3 @@
     "wait-on": "^9.0.3"
   }
 }
-

package.json

@@ -12,6 +12,12 @@
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
   </url>
+  <url>
+    <loc>https://dylanbochman.com/projects</loc>
+    <lastmod>2026-01-12</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
   <url>
     <loc>https://dylanbochman.com/blog/2026-01-11-shaving-minutes-off-deploys</loc>
     <lastmod>2026-01-11</lastmod>

public/sitemap.xml

@@ -0,0 +1,41 @@
+import { Slider } from '@/components/ui/slider';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+
+interface IncidentInputProps {
+  value: number;
+  onChange: (value: number) => void;
+}
+
+export function IncidentInput({ value, onChange }: IncidentInputProps) {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="space-y-2">
+          <div className="flex justify-between">
+            <div>
+              <Label htmlFor="incidents" className="text-sm font-medium">
+                Expected incidents per month
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                How many incidents typically require response?
+              </p>
+            </div>
+            <span className="text-sm font-mono tabular-nums text-primary">
+              {value} {value === 1 ? 'incident' : 'incidents'}
+            </span>
+          </div>
+          <Slider
+            id="incidents"
+            value={[value]}
+            onValueChange={([v]) => onChange(v)}
+            min={0}
+            max={20}
+            step={1}
+            className="w-full"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/projects/uptime-calculator/IncidentInput.tsx

@@ -0,0 +1,120 @@
+import { Slider } from '@/components/ui/slider';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Eye, EyeOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { ResponseProfile } from './calculations';
+import type { EnabledPhases } from './index';
+
+interface ResponseTimeInputsProps {
+  profile: ResponseProfile;
+  enabledPhases: EnabledPhases;
+  onChange: (field: keyof ResponseProfile, value: number) => void;
+  onToggle: (field: keyof ResponseProfile) => void;
+}
+
+interface InputConfig {
+  field: keyof ResponseProfile;
+  label: string;
+  description: string;
+  max: number;
+}
+
+const INPUT_CONFIG: InputConfig[] = [
+  {
+    field: 'alertLatencyMin',
+    label: 'Alert latency',
+    description: 'Condition true → alert fires',
+    max: 30,
+  },
+  {
+    field: 'acknowledgeMin',
+    label: 'Time to acknowledge',
+    description: 'Alert fires → you see it',
+    max: 30,
+  },
+  {
+    field: 'travelMin',
+    label: 'Time to computer',
+    description: 'Get to your workstation',
+    max: 60,
+  },
+  {
+    field: 'authMin',
+    label: 'Time to authenticate',
+    description: 'VPN, SSO, internal tools',
+    max: 20,
+  },
+  {
+    field: 'diagnoseMin',
+    label: 'Time to diagnose',
+    description: 'Investigate underlying cause(s)',
+    max: 60,
+  },
+  {
+    field: 'fixMin',
+    label: 'Time to fix',
+    description: 'Implement the fix',
+    max: 120,
+  },
+];
+
+export function ResponseTimeInputs({
+  profile,
+  enabledPhases,
+  onChange,
+  onToggle,
+}: ResponseTimeInputsProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <CardTitle className="text-base">Response Times (per incident)</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {INPUT_CONFIG.map(({ field, label, description, max }) => {
+          const isEnabled = enabledPhases[field];
+          return (
+            <div key={field} className={`space-y-2 ${!isEnabled ? 'opacity-50' : ''}`}>
+              <div className="flex justify-between items-start">
+                <div className="flex items-start gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 shrink-0"
+                    onClick={() => onToggle(field)}
+                    aria-label={isEnabled ? `Exclude ${label} from calculation` : `Include ${label} in calculation`}
+                  >
+                    {isEnabled ? (
+                      <Eye className="h-4 w-4" />
+                    ) : (
+                      <EyeOff className="h-4 w-4" />
+                    )}
+                  </Button>
+                  <div>
+                    <Label htmlFor={field} className="text-sm font-medium">
+                      {label}
+                    </Label>
+                    <p className="text-xs text-muted-foreground">{description}</p>
+                  </div>
+                </div>
+                <span className="text-sm font-mono tabular-nums text-primary">
+                  {isEnabled ? `${profile[field]} min` : 'excluded'}
+                </span>
+              </div>
+              <Slider
+                id={field}
+                value={[profile[field]]}
+                onValueChange={([value]) => onChange(field, value)}
+                min={0}
+                max={max}
+                step={1}
+                className="w-full"
+                disabled={!isEnabled}
+              />
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}