🚀 Dev Update Board
Transparent development log showcasing what's shipped, in progress, and planned for jmfg.ca
✅ Shipped (56)
2025-11-26
🔍 Blog SEO & Meta Tags Overhaul
Complete SEO audit and fix for blog system: Replaced outdated "Coderamrin" defaults with JG branding throughout, fixed Twitter handles (@jamesgreer), upgraded OpenGraph type from "website" to "article" for proper blog semantics, added dynamic keywords from post tags, reading time metadata, author attribution, published/modified timestamps. Blog index page now reflects psychology + AI collaboration focus with targeted keywords. All 10 articles now have proper structured data for search engines.
2025-11-26
✨ Styled Callout Boxes Throughout All Articles (3x Each)
Added signature "Explain to 3 People" styled callout boxes at THREE strategic points in every article (not just the intro): Opening section, after Part 2 (Science), and after Part 4 (Framework). 30 total callout box sets across 10 articles! Each set features: 👶 Yellow/orange gradient (5-year-old explanation), 💼 Blue/cyan gradient (Boss with "Bottom line"), 💕 Pink/purple gradient (Girlfriend with cheeky smartness). Plus emerald/teal section headers. Reinforces the teaching style throughout the reading experience.
2025-11-26
🚀 MAJOR PRODUCT LAUNCH: UnjankYourInstagram
SHIPPED A COMPLETE COMMERCIAL PRODUCT! 🎉 Built enterprise-grade Instagram automation tool from scratch: Electron desktop app (Windows & macOS), Puppeteer-powered browser automation, React/TypeScript UI with real-time analytics, 500 unfollow free trial with tamper-proof governor system, chrome auto-recovery (handles "about:blank" navigation), activity log batching (no more UI freezes), session/daily/lifetime tracking, ETA countdown timer, sound notifications, milestone animations with confetti, rate limit detection (5-min auto-pause), memory management & health checks, branded Chrome window ("JMFG PWND THIS BROWSER"), AND comprehensive legal protection (Terms of Service, License Agreement, Privacy Policy). Product pricing: $5.99 Windows / $8.99 macOS. Waitlist live with email collection API. This is a REAL SHIPPING PRODUCT with paying customers incoming! Built in 3 intense sessions with 200+ tool calls. From idea → production-ready commercial software.
2025-11-26
⚖️ Complete Legal Framework - CYA Done Right
Created bulletproof legal documentation for JMFG Tools products: Terms of Service (18 sections covering Instagram ban risks, platform obsolescence, zero liability, no refunds, indemnification), Software License Agreement/EULA (19 sections with strict usage restrictions, one device limit, anti-reverse engineering, "may become worthless" warnings), Privacy Policy (13 sections, GDPR-compliant, local-only processing, no credential collection). Key protections: "Software may become obsolete due to Meta updates - NO REFUNDS", "Buyer explicitly acknowledges risks", "All sales final", "Not responsible for ANYTHING". Added legal links to footer + homepage announcement banner. Email privacy secured (james.greeley@owasp.org server-side only).
2025-11-26
🔒 Tamper-Proof Free Trial Governor (500 Unfollows)
Built anti-bypass free trial system with cryptographic integrity: Lifetime unfollow counter with salted checksum validation (detects tampering → resets to max penalty), real-time enforcement during purge (breaks loop at exactly 500), countdown timer in status bar (animated, color-coded: purple→orange→red), purge button locks with "TRIAL EXPIRED" message, pre-check at purge start warns users, separate localStorage key prevents reset tricks. Governor checks EVERY successful unfollow and force-stops at limit. Upgrade modal triggers automatically. Implemented in LicenseService.ts with generateChecksum() using secret salt.
2025-11-26
📧 Waitlist API + Email Collection
Built secure email collection system for product waitlist: Next.js API route (/api/waitlist) with POST endpoint, server-side email forwarding (james.greeley@owasp.org NEVER exposed to client), JSON file storage (waitlist-signups.json, gitignored), terminal logging for real-time notifications, form validation + loading states, "chance to win free keys" messaging (removed "500 free" claims). Ready for Resend.com integration. Product page updated with async form submission.
2025-11-26
🌐 JMFG Tools Product Website
Created professional product marketing site: Main products page (/products) with hero section + product cards, dedicated UnjankYourInstagram sales page (/products/unjanky-instagram) with problem/agitation/solution framework, social proof, pricing ($5.99 Win / $8.99 Mac), feature showcase, waitlist form, founder story, 30-day guarantee, ToolingHero component for homepage with animated gradients + particle effects, updated navigation menu + footer, mobile-responsive design. Full advertising copy explaining automation benefits, safety features, and smart pacing.
2025-11-26
🔄 Chrome Auto-Recovery System
Fixed "Chrome goes dark" issue after 20-30min: Added ensureOnInstagram() method (detects about:blank navigation, auto-navigates back, verifies success), enhanced checkSessionValid() (checks URL before evaluating page), maintenance sequence integration (page recovery → health check → session check), 5-second stabilization after recovery. Prevents purge from getting stuck when Instagram navigates away. Also fixed governor breaking purge state (removed cancelPurgeRef.current from 500 limit break to allow proper finalization).
2025-11-26
⚡ Activity Log Performance Fix
Eliminated UI freezing during purge: Implemented log batching (logBatchRef accumulates entries, flushes every 1 second), limited log display to last 300 entries (prevents memory bloat), wrapped addLogEntry in useCallback, added timer cleanup on stop/complete (useEffect cleanup function), immediate flush on purge stop. Reduced re-renders from 1000+/min to 60/min. Activity log now stays responsive during intensive operations with proper throttling.
2025-11-26
📚 MASSIVE Blog Drop - 10 Long-Form Articles (~50,000 Words)
Published 10 comprehensive articles in a single session! 8-part Psychology Series covering emotional intelligence, boundaries, confidence, communication, and self-awareness. Plus 2-part "How to Actually Work With AI" series documenting the human-AI collaboration framework. Every article features the signature "Explain to 3 People" format (5-year-old, boss, girlfriend), personal experiments with real data, 4-part structure, and AI transparency sections. ~5,000 words each. Topics: Low-Maintenance Cost, Reading Silence, Invisible Maintenance, Guilty Boundaries, Gut Feeling Blind Spots, Performative Confidence, Translator Tax, When Fine Isn't Fine, AI Collaboration Framework, Advanced AI Patterns.
2025-11-26
🧠 Psychology of Self Series - 8 Deep Dives LIVE
Complete 8-article series exploring behavioral psychology through personal experimentation: (1) The Cost of Being Low-Maintenance - accommodation patterns & reinforcement schedules, (2) Reading Room vs Silence - social perception gaps, (3) Maintenance Work No One Sees - invisible relationship labor, (4) Guilty Boundary Experiment - testing boundary-setting, (5) Gut Feeling Blind Spot - intuition limitations, (6) Performative Confidence Gap - real vs displayed confidence, (7) Translator Tax - emotional translation labor, (8) When Fine Isn't Fine - emotional vocabulary compression. Each ~5,000 words with research citations, frameworks, and practical experiments.
2025-11-26
🤖 "How to Actually Work With AI" - 2-Part Masterclass
Meta documentation of the human-AI collaboration workflow that produced 50,000+ words this session. Part 1: The Collaboration Framework - context loading, iterative refinement, work orders, "keep going" principle, human-AI labor division, session anatomy. Part 2: Advanced Patterns - prompting patterns that work, developing AI taste, session management for long projects, meta-skills for the AI era, real examples from actual sessions. Recursive proof: the articles about AI collaboration were produced using AI collaboration.
2025-11-26
✨ Homepage Blog Series Teasers
Added two elegant teaser cards to homepage showcasing the new blog series: Psychology of Self (8 articles, pink/rose gradient) and How to Actually Work With AI (2 parts, cyan/blue gradient). Cards feature hover effects, tag badges, and gradient text. Positioned below TypeScript patterns teaser for maximum visibility.
2025-11-23
🚀 Final Optimization Complete - 187 Pages LIVE
✅ Production build: 11.9s, Zero TypeScript errors, Zero ESLint warnings, 187 pages generating perfectly. Comprehensive mobile/desktop optimization, SEO overhaul with 156 URLs in sitemap, 30+ targeted keywords. Performance: 102 kB shared chunks, 135+ interactive lab modules. All animations working, all routes operational, all content professional. Site is Google-ready and fully optimized!
2025-11-23
🏆 The Phil Factor - Golden MSP Service Tiles
6 DRIPPING golden tiles showcasing Contemporary Computers excellence: 24/7 Canadian Support, 100% Canadian Data Hosting, Proactive Prevention, No Tech Jargon, Custom Solutions, Long-Term Relationships. Each tile features animated gradients, hover effects, reality checks. ZERO money talk - 100% focus on service quality and 15+ years of expertise. Includes UTM tracking and animated CTAs.
2025-11-23
📚 TypeScript Blog - Multi-Perspective Explanations
24 unique explanations across 3 perspectives for every code example! 👶 Explain Like I'm 3 (toys & boxes), 💼 Explain Like You're My Boss (ROI & metrics), 💕 Explain Like You're My Girlfriend (relatable situations). Covered: Discriminated Unions, Branded Types, Const Assertions. Makes TypeScript accessible to everyone from beginners to executives!
2025-11-23
📖 My Story Page - MEGA Makeover
Complete visual overhaul with interactive timeline (click to expand 5 milestones), tech evolution tracker (DOS 1990s → Next.js 2024), journey stats (200+ components, 80 labs), enhanced Phil Factor section, upgraded values (4 principles with reality checks), epic closing with animated book icon. Changed "James Gauci" → "James G." across site. All animations working perfectly.
2025-11-23
🔍 SEO MEGA OVERHAUL - Google Ready
Comprehensive SEO upgrade: 30+ targeted keywords (Toronto developer, React, TypeScript, cybersecurity training, Red/Blue/Purple Team labs), new sitemap.ts with 156 URLs mapped, optimized robots.txt, enhanced metadata for social sharing. Site now fully discoverable on Google with proper canonical URLs and structured data.
2025-11-23
📝 Custom Markdown Renderer - Blog Formatting Fix
Built custom MarkdownRenderer React component replacing dangerouslySetInnerHTML. Features: Tailwind CSS control, syntax-highlighted code blocks (react-syntax-highlighter), inline formatting (bold/italic/links), proper line breaks, top/bottom back buttons. Bug fixes: Moved TypeScript blog from markdown/blogs → content/posts, removed remark/remark-html packages.
2025-11-23
🔴 Red Team Lab - All 27 Modules Complete
Completed Red Team Lab with all 7 phases now live: Network Attacks (4), Active Directory (6 including BloodHound), Lateral Movement (4), Web Exploitation (4), Password Cracking (2 - John/Hashcat), Wireless Attacks (4 - Aircrack/Airodump/WPS/Deauth), Exploitation Frameworks (2 - Metasploit/Empire). Created 3 new route pages, updated main component with phase rendering, color-coded headers, and animations.
2025-11-23
✨ Professional Blog Formatting Upgrade
Complete blog system overhaul: Blog list now features hero header with 7xl gradient title, color-coded cards (purple/cyan/pink rotation), animated hover effects, icon badges, and decorative dividers. Individual posts upgraded with gradient heading hierarchy (H2: blue-cyan, H3: purple-pink), enhanced code blocks with 2px borders and shadows, gradient table headers with hover effects, and improved blockquotes with blue accents and gradients.
2025-11-23
📝 New Blog: TypeScript Patterns That Actually Work
Published comprehensive TypeScript guide covering 6 production patterns: Discriminated Unions for type-safe state machines, Branded Types to prevent ID mixing, Const Assertions for better inference, Type Guards with 'is' keyword, Exhaustiveness Checking with 'never', and Utility Types (Pick/Omit/Partial/Required/Record). Includes 50+ real code examples from cybersecurity labs, AI collaboration notes, and implementation checklist. 4,000+ words.
2025-11-23
📱 Complete Mobile & Desktop Routing Documentation
Created comprehensive routing map documenting all 186 pages with mobile-first strategy: Mobile = Theory Builder (command cheat sheets, MITRE mappings, detection methods, collapsible accordions), Desktop = Practical Lab (interactive simulators, WebGL animations, multi-pane layouts, hover effects). Documented all 96 lab modules (27 Red, 53 Blue, 16 Purple) with device-specific content strategies.
2025-11-23
🔧 Lab Route Creation & Verification
Systematically created missing routes for new lab modules: Red Team (aircrack-ng, metasploit, psexec pages), verified all Blue Team routes (53 modules across 11 phases), confirmed Purple Team routes (16 modules across 5 phases). Fixed routing mismatches, added proper metadata and SEO tags, ensured consistent padding (pt-32 sm:pt-36 md:pt-40) across all lab pages. All 186 pages now building successfully.
2025-11-21
🛡️ Blue Team Lab – Defensive Foundation Online
Expanded Blue Team Lab hub with defensive modules for Traffic Analysis, Nmap scanning, SIEM basics, VirusTotal triage, incident response, and password security (John the Ripper + Hashcat), plus new BloodHound and Metasploit theory labs wired under /blue-team-lab.
2025-11-21
🌐 OWASP Web Security Lab – Roadmap Hub Live
Launched OWASP Web Security hub at /owasp-lab with friendly blue theme, roadmap for OWASP Top 10, Advanced Web Attacks, and API Security, plus new navigation column linking it alongside Red and Blue Team labs.
2025-11-20
📱💻 Mobile-Desktop Learning Philosophy
Established dual-experience design system: Mobile = Theory Builder (rich reading content, command cheat sheets, study on-the-go) + Desktop = Practical Lab (interactive simulations, live animations, hands-on practice). Complete with implementation strategy, content templates, and 4-week rollout plan.
2025-11-20
🥷 Enhanced MITM Module with 3 Attack Scenarios
Upgraded Man-in-the-Middle module with scenario switcher: Network MITM (classic ARP/SSL stripping), Mobile MITM (Frida/Objection SSL pinning bypass), and IMSI Catcher (fake cell tower). Dynamic content, icons, and detection methods change per scenario. Added burglar emoji to attacker position.
2025-11-20
🛡️ VirusTotal Analysis - Blue Team Module
Built threat intelligence module with 5 sample files (Trojan.AgentTesla, Ransom.LockBit3, CoinMiner.XMRig, PUP.Adware, Clean file). Features multi-vendor detection results, file hashes (MD5/SHA-1/SHA-256), behavioral indicators, collapsible analysis sections, and search functionality.
2025-11-20
🔗 MITRE ATT&CK & Shodan Resource Links
Added essential security resource sections to both Red Team and Blue Team landing pages. MITRE ATT&CK for TTPs and threat intelligence, Shodan for attack surface monitoring. Includes context-specific descriptions and hover effects.
2025-11-20
🎯 HackTheBox & Warp Terminal Referrals
Integrated branded referral buttons for HackTheBox (practice offensive security) and Warp Terminal (AI-powered development) on hero section and both security lab landing pages. Responsive grid layout with icons and taglines.
2025-11-20
📋 Future Content Roadmap (100+ Tools, MITRE Matrix)
Comprehensive planning document for Project Maya expansion: 100+ Kali Linux tools catalog, full MITRE ATT&CK Enterprise matrix (14 tactics, 230+ techniques), 10+ new Red/Blue Team modules, Tools Arsenal page, cross-lab integrations, and TypeScript optimization checklist.
2025-11-19
🔬 Labs Stabilization & Enhancement
Added ErrorBoundary component to prevent white screens, created LabToolbar for consistent UX across all labs, implemented useQueryParam and useLocalStorageState hooks for deep-linking and persistence. Component State Visualizer now features URL param sync, localStorage persistence, export timeline, and graceful error handling.
2025-11-19
🌊 Canvas Wave Animation Bug Fix
Resolved stuck wave animation in WebGL & Canvas Experiments lab. Fixed animation cleanup and timeRef persistence to ensure smooth continuous animation when config changes.
2025-11-19
🏠 Home Page Redesign
Complete home page overhaul: moved Field Notes to dev-updates page, added FeaturedWork showcase, Purpose mission statement, and QuickLinks navigation. Repositioned BackgroundSwitcher to bottom horizontal bar with friendly hint bubble.
2025-11-19
📚 Comprehensive Documentation
Created detailed private development notes (PRIVATE_NOTES_2025-01-19.md) with complete route mapping, component locations, lab status tracking, bug fix documentation, and improvement roadmap. Added LABS_WORK_ORDER_2025-11-19.md for granular tracking.
2025-11-18
🔍 Google Search Console Integration
Added domain verification via DNS TXT record in Vercel. Submitted sitemap to Google Search Console, requested priority indexing for key pages (homepage, blog, portfolio, demos). Site now discoverable in Google search.
2025-11-18
📊 JSON-LD Structured Data
Implemented Schema.org structured data for SEO: Article schema for all blog posts with author/dates/URLs, WebPage schema for Framer Motion demo and React Sandbox. Enhances search result appearance and rich snippets.
2025-11-18
⚡ Lighthouse Performance Optimization
Core Web Vitals improvements: added fetchPriority='high' to critical logo, replaced img tags with Next.js Image component, enabled webVitalsAttribution tracking, added adjustFontFallback to minimize CLS. Created Web Vitals monitoring utility.
2025-11-18
🗺️ Sitemap Enhancement
Updated sitemap.xml with new demo and playground routes. Added /technically-savage/demos/framer-motion and /react-sandbox with higher priority (0.8) for faster indexing. All 30 pages now properly mapped for crawlers.
2025-11-18
🏷️ Complete Meta Tag Audit
Verified all new pages have proper Open Graph and Twitter Card metadata. Ensured social sharing previews work correctly for Framer Motion demo, Code Playground, and all blog posts with custom titles and descriptions.
2025-11-13
🔥 Technically Savage Section Launch
Launched new showcase section with main hub, 3 sub-pages (Interactive Demos, Debug Diaries, Code Playground), comprehensive work order with 10 showcase ideas, and full navigation integration. Foundation for high-octane technical demonstrations.
2025-11-13
My Story Page - Fixed Photo Gallery
Resolved broken images on My Story page. Added 4 personal photos with Polaroid-style layout, error handling, and Next.js Image optimization. Photos now display with rotation effects and captions.
2025-11-13
Phil Factor Content Refinement
Varied Phil's business descriptions across pages to reduce repetition. Changed focus from revenue numbers to job creation (10-15 employees) and business impact. Updated 'The Grind' to 'Maneuvering Ebbs and Flows' for realistic portrayal.
2025-11-13
CCR Mobile Responsiveness
Fixed Curiously Resource Corner mobile issues. Optimized padding, text sizes, grid layouts for small screens. Improved spacing and touch targets for better mobile experience.
2025-11-13
Technically Savage Work Order Created
Comprehensive roadmap document with 10 showcase ideas (Debug Diaries, UX Playground, Bundle Optimization, Terminal Visualizer, SEO Dashboard, AI Demos, Attachment Theory UI, etc.), implementation phases, tech stack requirements, and success metrics.
2025-11-12
Alchemical Symbiosis Font Size Updates
Increased font sizes across Stack Alchemy educational page for better readability. Adjusted hero titles, section headings, card text, code blocks, and checklist items to improve accessibility and visual hierarchy.
2025-11-12
Who I Am - New Personality Showcase
Built comprehensive introduction page with animated skill bars, philosophy cards, tools showcase (9 favorite platforms), and personality-driven design. Features Framer Motion animations throughout.
2025-11-12
Dev Update Board Launch
Built this transparent changelog page to showcase ongoing development work, shipped features, and planned improvements. Complete with filtering and status badges.
2024-12
Learn to Build with AI
Created 6 interactive lessons teaching framework fundamentals (components, props, styling, routing, debugging, deployment) with AI prompt templates and syntax-highlighted code examples.
2024-12
Curiously Resource Corner (CCR)
Transformed Projects page into organized resource hub with 5 categories: Developer Tools, Frameworks, UI/UX, AI Models, and Visualization. Added electric border animations to cards with randomized effects.
2024-12
Interactive Bulletin Board
Built draggable post-it note system with localStorage persistence, random pastel colors, and mobile-friendly controls. Community feature for leaving messages and insights.
2024-12
About Page Redesign
Added animated gradient title (purple→cyan→pink), glass-morphism card effects, 'My Story' section with smooth hash navigation, and improved hover interactions.
2024-12
Navigation Menu Fix
Replaced complex GSAP timeline with simple CSS transitions for hamburger menu. Fixed reliability issues, raised z-index, added keyboard accessibility (Enter/Space).
2024-12
Blog Post Responsive Fixes
Fixed text overflow on mobile/desktop, made code blocks scrollable, improved table responsiveness, and enhanced title sizing across breakpoints.
2025-01-18
Lighthouse Performance Optimization
Completed full performance audit with image optimization (Next.js Image, WebP/AVIF), resource preloading, Core Web Vitals tracking, and structured data. Created comprehensive optimization documentation. Ready for 90+ scores.
🚧 In Progress (2)
2025-11-13
Contact Form EmailJS Integration
Fixed 400 error on contact form by correcting message field name attribute from 'title' to 'message'. Created setup guide for Vercel environment variables configuration.
2025-11-12
SEO & Open Graph Optimization
Fixed metadataBase warnings, added comprehensive OG metadata to all pages, enhanced SEO keywords and descriptions. Created guides for OG image creation.
📅 Planned (3)
2025-11-12
Fix Trinity Card Interactions
Debug and repair interactive expand/collapse functionality on React, TypeScript, and Tailwind trinity cards in Stack Alchemy page. Ensure smooth AnimatePresence transitions.
2025-01
Complete Mobile Audit
Test all pages across 5 breakpoints (375px-1440px), document issues with screenshots, prioritize fixes, ensure 100% mobile usability score.
2025-01
Custom OG Images for All Pages
Design and create 7 unique Open Graph images (1200x630) for About, Blog, Learn, CCR, Resume, Contact, and Bulletin pages using brand colors and consistent aesthetic.
Last updated: November 26, 2025
This board is updated regularly as development progresses. Follow along to see how the site evolves!