update: add smirk, discord, and personal site, remove reddit

TODO.md

@@ -2,14 +2,64 @@
 
 ## Before Production
 
-- [ ] **Turnstile keys** - Set `NEXT_PUBLIC_TURNSTILE_SITE_KEY` and `TURNSTILE_SECRET_KEY` in production environment
-- [ ] **Rate limiting** - Consider adding rate limiting to contact form (Upstash, Vercel Edge Config, etc.)
+- [x] **Turnstile keys** - Set `NEXT_PUBLIC_TURNSTILE_SITE_KEY` and `TURNSTILE_SECRET_KEY` in production environment
 
 ## Nice to Have
 
+- [ ] **Blog** - Consider adding blog/articles section (MDX, Contentlayer, or headless CMS)
+- [ ] **Rate limiting** - Turnstile handles bots; add rate limiting only if abuse observed
 - [ ] Manual screen reader testing (NVDA, VoiceOver)
 - [ ] Further canvas performance optimization
 
+## Future Projects
+
+- [ ] Puzzle game (mobile app with web demo)
+- [ ] Decision making app (mobile app with web demo)
+
+---
+
+## Architecture Notes (Feb 2026)
+
+### Blog Options
+
+| Option | Pros | Cons | Best For |
+|--------|------|------|----------|
+| **MDX in repo** | Simple, version controlled, no deps | Dev-only editing, rebuild to publish | Tech blog, infrequent posts |
+| **Contentlayer** | Type-safe MDX, great DX with Next.js | Learning curve, config overhead | Structured content, many posts |
+| **Headless CMS** (Sanity/Payload) | Non-dev editing, media management | External dependency, cost at scale | Team editing, media-heavy |
+
+Recommendation: Start with MDX in `apps/web/src/content/blog/`, add Contentlayer if it grows.
+
+### New App Architecture
+
+**Option A: Monorepo (web demos)**
+```
+apps/
+  web/              # such.software
+  puzzle-demo/      # Vite or Next.js
+  decision-demo/    # Vite or Next.js
+packages/
+  ui/               # Shared (already exists)
+```
+- ✅ Share `@repo/ui`, unified CI/CD, easy cross-linking
+- ❌ Coupled deploys, heavier repo
+
+**Option B: Separate repos + subdomains**
+- `puzzle.such.software` → own repo
+- `decide.such.software` → own repo
+- ✅ Independent deploys, clean separation
+- ❌ No shared packages, more repos to manage
+
+**Option C: Hybrid (recommended)**
+- Web demos in this monorepo (lightweight, share UI)
+- Mobile apps in separate repos (React Native/Expo needs own tooling)
+- Link from such.software portfolio to demos
+
+### Mobile Considerations
+- React Native/Expo likely needs separate repo due to tooling differences
+- Web demos can use same game logic via shared `packages/` if extracted
+- Consider Expo Web for code sharing between mobile and web demo
+
 ## Completed
 
 ### Lighthouse Scores (January 2026)

apps/web/src/app/about/page.tsx

@@ -1,7 +1,7 @@
 import { FounderSignature } from "@/components/about/founder-signature";
 import { Header } from "@/components/layout/header";
 import { FaMapMarkerAlt, FaPhone, FaBuilding, FaExternalLinkAlt } from "react-icons/fa";
-import { FaXTwitter, FaTelegram, FaReddit } from "react-icons/fa6";
+import { FaXTwitter, FaTelegram, FaDiscord } from "react-icons/fa6";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -79,9 +79,9 @@ export default function AboutPage() {
                       <FaTelegram className="h-6 w-6" />
                       <span className="sr-only">Telegram</span>
                     </a>
-                    <a href="https://reddit.com/r/SuchSoftware" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
-                      <FaReddit className="h-6 w-6" />
-                      <span className="sr-only">Reddit</span>
+                    <a href="https://discord.com/users/392547150480932864" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
+                      <FaDiscord className="h-6 w-6" />
+                      <span className="sr-only">Discord</span>
                     </a>
                   </div>
                </div>

apps/web/src/components/about/founder-signature.tsx

@@ -25,7 +25,11 @@ export const FounderSignature = () => {
            </div>
            <div>
               <p className="font-mono text-xs uppercase tracking-[0.4em] text-primary/80 mb-1">Founder & Principal Engineer</p>
-              <h3 className="text-3xl font-bold tracking-tight">John Winter Murphy</h3>
+              <h3 className="text-3xl font-bold tracking-tight">
+                <a href="https://jwinterm.com" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
+                  John Winter Murphy
+                </a>
+              </h3>
            </div>
         </div>
 

apps/web/src/components/layout/footer.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { SiteLogo } from "./site-logo";
-import { FaXTwitter, FaTelegram, FaReddit, FaPhone } from "react-icons/fa6";
+import { FaXTwitter, FaTelegram, FaDiscord, FaPhone } from "react-icons/fa6";
 
 export function Footer() {
   return (
@@ -52,9 +52,9 @@ export function Footer() {
                 <FaTelegram className="h-5 w-5" />
                 <span className="sr-only">Telegram</span>
               </a>
-              <a href="https://reddit.com/r/SuchSoftware" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
-                <FaReddit className="h-5 w-5" />
-                <span className="sr-only">Reddit</span>
+              <a href="https://discord.com/users/392547150480932864" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
+                <FaDiscord className="h-5 w-5" />
+                <span className="sr-only">Discord</span>
               </a>
             </div>
           </div>

apps/web/src/components/portfolio/bento-grid.tsx

@@ -85,6 +85,25 @@ export const PortfolioGrid = () => {
            </div>
         </Card>
       </Link>
+
+      {/* Quinary: Smirk Wallet */}
+      <Link href="https://smirk.cash" target="_blank" rel="noopener noreferrer" className="md:col-span-2">
+        <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-amber-50/95 dark:!bg-amber-950/95 !border-amber-500/20 cursor-pointer">
+           <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
+            <h3 className="text-xl font-bold text-amber-700 dark:text-amber-400">Smirk Wallet</h3>
+            <p className="text-sm mt-1 text-foreground font-semibold">Non-custodial browser wallet with encrypted social tipping.</p>
+          </div>
+           <div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-amber-500/10 shadow-inner">
+               <Image
+                src="/images/smirk-wallet.png"
+                alt="Screenshot of Smirk Wallet browser extension showing multi-currency support for BTC, LTC, XMR, WOW, and GRIN"
+                fill
+                className="object-contain p-2 opacity-50 transition-transform duration-1000 group-hover:scale-110"
+                sizes="(max-width: 768px) 100vw, 50vw"
+              />
+           </div>
+        </Card>
+      </Link>
     </section>
   );
 };