What shipped

Omnipresence Engine (Social Command Center)

A new admin-only interface at /admin/social that lets you write a post once and push it to X and LinkedIn simultaneously:

• Platform connections panel — shows OAuth status for X (Twitter), LinkedIn Personal, and LinkedIn Company Page. LinkedIn uses a one-click OAuth 2.0 flow; X uses static OAuth 1.0a credentials stored as environment variables.
• AI draft generation — paste an article title, URL, and optional description, select your target platforms, and GPT-4o-mini generates platform-optimized copy: punchy 250-char tweets with hashtags for X, 1st-person professional narrative posts for LinkedIn Personal, and concise brand-voice copy for LinkedIn Page.
• Per-platform editors — live character counters (280 for X, 3000 for LinkedIn Personal, 1300 for LinkedIn Page) with visual overflow warning. Drafts are fully editable before posting.
• One-click publish — posts to all selected connected platforms in parallel. Results display inline with direct post links for successes or error messages for failures.
• Post history — the last 5 published posts are shown with timestamps and per-platform success/fail status. Full history is persisted in Vercel Blob.
• Admin navigation — "Social" shortcut added to the admin dashboard nav alongside YouTube and Moderation.

Strava multi-sport tracking

The fitness dashboard now tracks all activities, not just runs:

• Removed the &type=Run filter — the Strava API now returns cycling, swimming, hiking, walking, and all other sport types.
• Activities are grouped by canonical sport for the stats section (TrailRun → Run, VirtualRide → Ride, etc.) with per-sport cards showing distance, time, and activity count.
• YTD vs all-time comparison for running remains, now alongside equivalent cards for any sport with data.
• Activity heatmap — a GitHub-style contribution calendar spanning the last 52 weeks, color-coded by sport type (orange = run, blue = ride, teal = swim, green = walk/hike).
• AI performance insights — a daily cron at 07:30 UTC sends the last 30 activities to GPT-4o-mini and caches a structured analysis: 3 strengths, 3 actionable suggestions, and a weekly trend direction (improving / consistent / declining). The insights panel displays on the hobbies page with last-analyzed timestamp.
• Expanded StravaActivity type with sport_type, average_heartrate, max_heartrate, average_cadence, calories, and suffer_score fields.

Projects showcase

A new section on the home page between Certifications and the CTA showcases five live and in-progress projects:

• Jack — AI Mobility Ecosystem — voice-first driver assistant with Android Auto integration
• Live Fitness Dashboard — real-time multi-sport pipeline on Strava API with daily cache refresh
• Chess Intelligence Tracker — Chess.com rating progression with live API sync and streak tracking
• LinkedIn Job Automator — automated cold outreach system using Hunter.io contact discovery
• Omnipresence Engine — unified social command center (this release)

Cards animate in on scroll with staggered Framer Motion transitions, gradient border on hover, and tech badge pills. External project links open in a new tab; the Omnipresence Engine card shows a "Coming Soon" badge for public access.

i18n wiring completed

All remaining pages that had hardcoded English strings are now fully wired to the translation system:

• Blog listing, blog article fallback notice, hobbies metadata, changelog (8 strings), proposal (5 strings), legal documents (English-only notice banner in Spanish), and newsletter unsubscribe (10 strings) now pull from the EN/ES translation files.

Infrastructure

• Admin auth migrated from getServerSession() to decode() + cookies() from next-auth/jwt — fixes silent null session in Next.js 14 App Router server components.
• New daily cron /api/cron/strava-insights at 07:30 UTC for AI fitness analysis.
• X API env vars: X_API_KEY, X_API_SECRET, X_ACCESS_TOKEN, X_ACCESS_TOKEN_SECRET — production only, never in git.
• LinkedIn OAuth env vars: LINKEDIN_CLIENT_ID, LINKEDIN_CLIENT_SECRET, LINKEDIN_PAGE_URN.

What shipped

Full EN/ES multilanguage support

Every user-facing page now exists in both English and Spanish. The routing is clean:

• js17.dev → English (default, no URL prefix)
• js17.dev/es → Spanish (explicit prefix for SEO)

All 16 blog posts have Spanish translations. If a post doesn't have a Spanish version yet, it falls back to English with a visible notice.

LATAM geo-detection

Visitors from Colombia, Mexico, Argentina, Chile, Peru, and 14 other Latin American countries are automatically redirected to the Spanish version on their first visit. The preference is stored in a cookie — once set, subsequent visits skip the geo-check entirely. Users can always override via the language switcher in the header.

Language switcher

A compact EN/ES toggle lives in the navigation bar. Switching locale updates the cookie, strips/adds the /es URL prefix correctly, and persists the preference across sessions.

Admin dashboard

A unified control hub at /admin — accessible after Google sign-in — consolidates everything in one place:

• Metrics row — total posts, newsletter subscriber count, YouTube video count, and total views
• Blog posts panel — every post with its published status, reading time, notify-subscribers button, and notification state (notified / pending)
• YouTube metrics chart — bar chart of views per video, color-coded by format (Short = cyan, Long = indigo)
• Newsletter panel — subscriber count, posts notified vs pending, and a list of recently notified slugs

Post sign-in, the default redirect lands on the dashboard rather than the blog.

Jack landing page

A dedicated page at js17.dev/jack introduces the Jack driver assistant product:

• Futuristic dark design (#050505 background, electric cyan accent) — intentionally outside the site theme
• Animated ticker, capabilities grid, ecosystem diagram, and waitlist section
• WhatsApp CTA for direct contact
• Jack linked in the main navigation
• Conversation pause/resume implemented using cancel + index tracking (fixing broken Web Speech API pause on Chrome)
• New blog post covering the Jack build log and v0.8 road-to-Android-Auto progress

Infrastructure fixes

• Middleware correctly sets the X-NEXT-INTL-LOCALE header for both Spanish and English paths, fixing locale context propagation to next-intl server components
• Admin page marked force-dynamic to prevent stale cached renders from serving a null-session redirect loop
• GitHub Actions CI and release workflows upgraded to Node 24
• package-lock.json regenerated for Node 24 npm compatibility

What shipped

YouTube metrics auto-refresh with Blob caching

Video statistics (views, likes, comments) are now cached in Vercel Blob and refreshed automatically. Two refresh paths:

• Cron job — runs daily at 06:00 UTC via /api/cron/refresh-metrics, fetching public statistics using a YouTube API key
• Admin visit — live OAuth fetch on every dashboard load, with results cached for the cron fallback

The metrics dashboard now shows a "Last updated" timestamp and a manual Refresh button.

Animated blog components

Four new client-side components for visually rich blog posts:

• DashboardShowcase — animated recreation of the YouTube metrics dashboard with count-up animations, gradient border, macOS window chrome, and staggered reveal
• PipelineFlow — 5-step content pipeline visualization (horizontal on desktop, vertical on mobile) with animated gradient connection line
• ImpactGrid / ImpactMetric — scroll-triggered counting stat cards with glow effects and color-coded borders

All components use IntersectionObserver for reveal-on-scroll and requestAnimationFrame for smooth counting animations.

Admin-only feature gating

YouTube publish buttons, newsletter notifications, and LinkedIn copy are now visible only when the admin is authenticated. Public users see article video links but not publishing controls.

Interactive 3D architecture visualization

A React Three Fiber scene renders the full js17.dev architecture — 17 provider nodes with orbital rings, connection lines, cost labels, and auto-rotating camera. Embedded in the blog via dynamic import with ssr: false.

New blog post: "The Machine That Builds Itself"

A showcase post demonstrating the full pipeline with real YouTube metrics data, animated dashboard, pipeline flow visualization, impact stats, and the 3D architecture scene — the most visually rich entry on the site.

Public article video links

Blog readers can now see YouTube Short and Long video links on published articles, even without authentication.

What shipped

AI-powered YouTube video publishing

Every blog post now has a "Publish to YouTube" button visible to the admin. One click triggers the full pipeline: GPT-4o generates a narration script tailored to the article, OpenAI TTS converts it to audio (onyx voice), Shotstack composes a video with custom slides, and the result uploads directly to YouTube — all server-side, no manual editing required.

Two formats are supported per article: Short (1080x1920, vertical, under 60 seconds) and Long (1280x720, horizontal, full narration). Each format tracks its own YouTube URL to prevent duplicate uploads.

Brand video management page

A dedicated admin page at /admin/youtube manages brand-level videos (logo animations) in both short and long formats. Publishing status, YouTube URLs, and format metadata are all visible in one place.

Newsletter post notifications with AI synopsis

When a new blog post is published, the admin can notify all subscribers with a single click. GPT-4o-mini generates a concise synopsis of the article, which is embedded in a redesigned email template. Sent posts are tracked in Vercel Blob to prevent double-sends.

Newsletter email redesign

Both the welcome email and post notification emails received a visual overhaul — branded header, clean typography, prominent CTA buttons, and proper unsubscribe links compliant with RFC 8058 one-click unsubscribe.

OAuth token auto-refresh

Google OAuth access tokens (1-hour TTL) are now refreshed automatically in auth.ts using the stored refresh token. YouTube uploads no longer fail silently after 60 minutes of session time.

Admin auth hardening

All admin API routes now use verifyAdmin(req) with getToken from next-auth/jwt instead of getServerSession, which cannot read cookies reliably in Next.js 14 App Router route handlers. This fixed 401 errors on all admin endpoints.

Environment variable hygiene

All Vercel environment variables were re-added using printf '%s' to prevent trailing newline characters (%0A) that caused silent authentication failures with Google OAuth and the Shotstack API.

What shipped

Scam & abuse detection on the proposal form

Hostile submissions — insults, spam, discriminatory content — are silently blocked before any email reaches the inbox. The filter runs three layers: keyword matching, an AI content policy check (OpenAI Moderation API, free endpoint), and an autonomous learning system that extracts new block-terms from flagged content and persists them to cloud storage for future fast-path blocking.

Admin moderation dashboard

A private dashboard at /admin/submissions shows every proposal ever submitted — clean and blocked alike — with detection source, categories flagged, confidence scores, and a submission excerpt. No personal data stored beyond what's needed for observability.

Certified credentials section

Your 10 verified badges from MongoDB, Google Cloud, Certiprof, and others now appear on the homepage, pulled live from the Credly API and cached for 24 hours. Each badge links back to the verified credential on credly.com.

Newsletter security hardening

The subscribe endpoint now validates that the email domain actually accepts mail (DNS MX check), rejects 20+ known disposable/throwaway providers (mailinator, guerrillamail, yopmail…), and enforces a per-IP rate limit of 2 subscriptions per hour — all without a third-party service.

Google OAuth fixed

Root cause: environment variable set with a trailing newline character (%0A), making Google's client lookup fail with invalid_client. Re-added all credentials using printf '%s' to prevent shell newline injection. Both production and sandbox now authenticate correctly.

Proposal flow integration tests

8 automated test cases run against the live API: valid submission, validation errors (short title, invalid email, empty currency, no price), silent moderation block, rate limit enforcement, and malformed JSON. Run with npm run test:proposal:sandbox or npm run test:proposal:prod.

What shipped

Circuit tree logo & brand mark

A geometric circuit-tree SVG mark — monochromatic, currentColor, fully theme-adaptive. The icon appears in the header alongside the wordmark and in the footer as the full mark. One SVG responds correctly to every theme and dark/light mode without extra CSS.

Seven visual themes

Forest Node (default for first-time visitors), Circuit Dark, Circuit Light, Terminal Green, Plasma Purple, Titanium Gray, and Aurora. Each palette is a complete design token set — headings, code blocks, gradients, borders, and prose typography all adapt. Returning visitors get a random theme on each session.

Theme picker

A popover component with colour swatches, theme names, and descriptions. The active theme shows a live primary-colour dot on the trigger button. Replaces the plain dark/light toggle with something that expresses the breadth of the visual system.

Multi-step proposal form (5 steps)

Client info → Project details → Budget → Contact → Schedule. Each step validates independently with Zod before advancing. The budget step accepts both hourly and fixed-price inputs in USD and EUR, with a flexibility selector. Error messages are inline and field-level.

Cal.com discovery call scheduler (Step 5)

Embedded Cal.com calendar on the final step with loading skeleton, MutationObserver-based ready detection, and a fallback direct-booking link if the embed times out. The script preloads from step 3 to eliminate cold-start latency.

Web push notifications

Visitors can opt into push notifications for new blog posts. A service worker handles delivery. VAPID key pair configured for both production and sandbox environments.

Newsletter sign-up

Minimalist inline and banner variants on the blog index and per-article header. Subscribers stored in Vercel Blob with deduplication.

Prose readability on dark themes

Custom --tw-prose-* CSS variable overrides for every dark palette class, so article text, headings, links, and code blocks are readable regardless of which theme is active — not just the built-in .dark class that Tailwind Typography assumes.

What shipped

AI-powered blog-to-YouTube pipeline

Every blog post gets a "Publish to YouTube" button visible only to the admin. The pipeline:

1. GPT-4o reads the post and writes a structured video script
2. OpenAI TTS (onyx voice) narrates each section
3. Shotstack composes the audio with animated slide visuals
4. The finished video uploads directly to the YouTube channel via the Data API v3

All processing is server-side. The UI shows live progress with per-step status indicators.

Google OAuth with automatic token refresh

Admin authentication via Google OAuth 2.0. Access tokens (1-hour lifespan) are automatically refreshed using the stored refresh_token — no re-authentication required mid-session.

Branch protection & CI/CD (23 minutes)

Established via the GitHub REST API in a single directed session:

• main branch requires PR + 3 passing CI checks + linear history + no force push
• GitHub Actions CI: TypeScript type-check, ESLint, and Next.js build on every PR
• GitHub Actions release: standard-version auto-bumps version + generates CHANGELOG on every merge to main
• Conventional Commits enforced via commitlint + Husky pre-commit hook

Sandbox environment

A sandbox branch deploys automatically to sandbox.js17.dev on Vercel — a complete staging environment with its own env vars, domain, and deployment pipeline. All new features ship to sandbox first.

Security hardening

• YouTube upload moved server-side (eliminated CORS vulnerability)
• Proxy video route restricted to Shotstack CDN hostnames only (SSRF mitigation)
• MDX CVE patch: upgraded next-mdx-remote to v6 (CVE-2026-0969)

What shipped

Full-stack Next.js 14 site

Built on the App Router with a clear separation between server components (data fetching, OG images, GitHub stats), client components (animations, forms, theme), and edge functions (OG image rendering). TypeScript throughout — no any.

MDX blog engine

Author posts in Markdown + JSX. Frontmatter drives metadata, OG images, and the post list. Syntax highlighting via rehype-pretty-code. Reading time calculated automatically. Posts live in src/content/blog/ as .mdx files — no CMS, no database, no subscription.

Live GitHub activity

Contribution graph and repository stats fetched server-side from the GitHub API with a 1-hour ISR cache. Displays real commit history, language breakdown, and streak data — auto-updating without any manual maintenance.

Multi-step proposal form

A guided 5-step contact flow with per-step Zod validation, email delivery via Resend, and a confirmation email to the sender. Covers client info, project scope, budget expectations, contact preferences, and optional discovery call scheduling.

Dynamic OG images

Every page and every blog post generates a branded Open Graph image at request time using the Edge runtime — no image editing, no static files to maintain. Correct previews on Twitter, LinkedIn, Slack, and iMessage automatically.

Transactional email

Proposal submissions trigger two emails: a structured HTML brief to the inbox (with client info, project details, budget, contact, and notes) and a professional confirmation to the client with next steps. Powered by Resend with lazy initialization.

Performance & SEO baseline

• Lighthouse score: 95+ across all pages
• robots.txt and sitemap.xml generated at build time
• Semantic HTML throughout
• All images with explicit width/height to prevent CLS
• Inter + JetBrains Mono loaded via next/font (zero layout shift)