thechrisgrey.com

Personal website for Christian Perez (@thechrisgrey) | Founder & CEO of Altivum Inc. | Former Green Beret (18D Special Forces Medical Sergeant) | Bronze Star Recipient | Host of The Vector Podcast | Author of "Beyond the Assessment"

https://thechrisgrey.com

Table of Contents

• Technology Stack
• Features
• Architecture
• AWS Infrastructure
• Getting Started
• Testing
• Environment Variables
• Deployment
• Project Structure
• Key Integrations
• Design System
• License

Technology Stack

Features

Pages

• Home : Scroll-based animations with sticky profile sections
• About : Personal biography and military background
• Altivum Inc : Company showcase and services
• The Vector Podcast : YouTube embeds, Spotify player, collapsible episode list
• Beyond the Assessment : Book information and purchase links
• Blog : Sanity CMS-powered with categories, tags, series, and reading progress
• AI Chat : Full-viewport conversational AI with RAG-enhanced responses
• Claude : AWS certifications and Claude expertise showcase
• AWS : AWS partnership and community builder profile
• Admin : Cognito-authenticated KB management and site health dashboard
• Links : Linktree-style quick links
• Contact : Contact form, speaking topics, downloadable press kit

Technical Highlights

• SEO : JSON-LD structured data, Open Graph, dynamic sitemap, RSS feed
• AI Chat with RAG : Bedrock Knowledge Base retrieval with streaming responses
• Podcast Auto-Sync : YouTube Data API fetches episodes at build time
• Chat Widget : Floating chat widget available across all pages
• Metrics Dashboard : CloudWatch and DynamoDB-backed operational metrics
• Error Boundaries : Page-level error handling with custom fallback UIs
• Accessibility : Focus trapping, keyboard navigation, ARIA labels, skip links
• Performance : Image optimization (Sharp/SVGO), lazy loading, code splitting, manual chunking

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        FRONTEND (React)                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐           │
│  │   Home   │ │  Podcast │ │   Blog   │ │   Chat   │   ...     │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘           │
└─────────────────────────────────────────────────────────────────┘
        │               │              │              │
        ▼               ▼              ▼              ▼
┌───────────┐   ┌───────────┐   ┌───────────┐   ┌───────────────┐
│  Amplify  │   │  YouTube  │   │  Sanity   │   │    Bedrock    │
│  Hosting  │   │  Data API │   │    CMS    │   │  + RAG (KB)   │
└───────────┘   └───────────┘   └───────────┘   └───────────────┘
                (build-time)     (runtime)       (Lambda stream)

AI Chat Request Flow

User Message
    │
    ▼
Lambda Function URL (streaming)
    │
    ├──> Bedrock Knowledge Base (retrieve context)
    │         │
    │         ▼
    │    S3 Vectors (autobiography chunks)
    │
    ├──> Bedrock Guardrails (content filtering)
    │
    └──> Bedrock ConverseStream API (Claude Haiku 4.5)
              │
              ▼
         Streaming Response -> Client

AWS Infrastructure

Getting Started

Prerequisites

• Node.js 18.x or 20.x (see .nvmrc)
• npm
• AWS CLI (for deployment)

Installation

git clone https://github.com/thechrisgrey/thechrisgrey.git
cd thechrisgrey
npm install

Development

npm run dev             # Start dev server at http://localhost:5173
npm run build           # Full production build
npm run preview         # Preview production build
npm run lint            # Run ESLint

Build Pipeline

The production build runs these steps in sequence:

validate-env -> podcast-episodes -> lint -> tsc -> vite build -> sitemap -> rss

Testing

The test suite includes unit tests for components, hooks, and utilities; integration tests for page-level behavior; and end-to-end tests covering navigation, chat, blog, and contact flows.

Environment Variables

Set in AWS Amplify console or in a local .env file:

VITE_ prefixed variables are bundled into the frontend. YOUTUBE_API_KEY is only used during the build step.

Deployment

Automatic (Recommended)

Push to main triggers automatic Amplify deployment:

git push origin main

Manual Rebuild

aws amplify start-job \
  --app-id d3du8eg39a9peo \
  --branch-name main \
  --job-type RELEASE \
  --region us-east-2

Lambda Deployment

Each Lambda function is deployed independently:

cd lambda/chat-stream
npm install
zip -r function.zip index.mjs package.json node_modules
aws lambda update-function-code \
  --function-name thechrisgrey-chat-stream \
  --zip-file fileb://function.zip \
  --region us-east-1

Repeat for kb-sync, kb-builder, and metrics (adjust function name and region as needed).

Project Structure

thechrisgrey/
├── public/                          # Static assets (served as-is)
│   ├── assets/documents/            # Downloadable PDFs
│   ├── press-kit/                   # Press materials + archive
│   ├── .well-known/security.txt
│   ├── robots.txt
│   ├── _redirects
│   ├── og.png                       # Open Graph image
│   └── favicon.png
│
├── src/
│   ├── components/
│   │   ├── admin/                   # Admin panel (login, KB entries, site health)
│   │   ├── chat/                    # AI chat (message, input, suggestions, widget)
│   │   ├── ui/                      # Base UI (Button, FormInput, IconButton)
│   │   ├── Navigation.tsx
│   │   ├── Footer.tsx
│   │   ├── SEO.tsx                  # Meta tags + JSON-LD
│   │   ├── ErrorBoundary.tsx
│   │   ├── ErrorFallbacks.tsx
│   │   ├── EpisodeCard.tsx
│   │   ├── NewsletterForm.tsx
│   │   ├── ReadingProgressBar.tsx
│   │   └── ...
│   │
│   ├── pages/                       # Route-level page components
│   │   ├── Home.tsx, About.tsx, Altivum.tsx, Podcast.tsx
│   │   ├── BeyondTheAssessment.tsx, Blog.tsx, BlogPost.tsx
│   │   ├── Chat.tsx, Claude.tsx, AWS.tsx, Admin.tsx
│   │   ├── Contact.tsx, Links.tsx, Privacy.tsx
│   │   └── NotFound.tsx
│   │
│   ├── hooks/                       # Custom React hooks
│   │   ├── useAuth.ts               # Cognito authentication
│   │   ├── useChatEngine.ts         # Chat state and streaming
│   │   ├── useFocusTrap.ts          # Modal focus management
│   │   ├── useKbAdmin.ts            # KB admin operations
│   │   ├── usePageContext.ts        # Page-level context for chat
│   │   ├── useSessionStorage.ts     # Typed sessionStorage with Date revival
│   │   └── useSiteHealth.ts         # Site health monitoring
│   │
│   ├── sanity/                      # Sanity CMS client, queries, types, cache
│   ├── utils/                       # Typography, schemas, validators, web vitals
│   ├── constants/                   # Social links
│   ├── types/                       # TypeScript interfaces
│   ├── data/                        # Podcast episode data (generated + fallback)
│   ├── assets/                      # Optimized images (Vite processed)
│   │
│   ├── __tests__/
│   │   ├── integration/             # Page-level integration tests
│   │   └── setup.ts
│   │
│   ├── App.tsx                      # Routes, layout, error boundaries
│   ├── main.tsx                     # Entry point
│   └── index.css                    # Tailwind directives
│
├── lambda/
│   ├── shared/                      # Shared utilities (auth, rate limiting, response)
│   ├── chat-stream/                 # Bedrock streaming Lambda
│   ├── kb-sync/                     # Knowledge Base auto-sync
│   ├── kb-builder/                  # KB admin CRUD
│   └── metrics/                     # Metrics collection
│
├── scripts/
│   ├── validate-env.js              # Build-time env validation
│   ├── generate-podcast-episodes.js # YouTube API fetch
│   ├── generate-sitemap.js          # Sitemap from Sanity
│   └── generate-rss.js             # RSS feed from Sanity
│
├── cypress/                         # E2E tests
│   ├── e2e/                         # Test specs
│   ├── fixtures/                    # Test data
│   └── support/                     # Custom commands
│
├── docs/                            # Internal documentation and plans
├── .github/workflows/ci.yml        # GitHub Actions CI
├── amplify.yml                      # Amplify build config
├── tailwind.config.js
├── vite.config.ts
├── vitest.config.ts
├── cypress.config.ts
└── tsconfig.json

Key Integrations

Sanity CMS (Blog)

• Project ID: k5950b3w | Dataset: production
• Content includes blog posts with categories, tags, series, and Portable Text rich content
• Client-side caching via postCache.ts with Date revival

YouTube Data API (Podcast)

Episodes are fetched at build time from the @AltivumPress channel.

1. generate-podcast-episodes.js runs during the build step
2. Fetches channel, uploads playlist, and video details
3. Generates src/data/generatedEpisodes.json
4. Falls back to static data if the API is unavailable

Amazon Bedrock (AI Chat)

• Model: Claude Haiku 4.5 (us.anthropic.claude-haiku-4-5-20251001-v1:0)
• Knowledge Base: ARFYABW8HP (autobiography chunks)
• Guardrail: 5kofhp46ssob (content filtering)
• Rate Limit: 20 requests/hour per IP (DynamoDB-backed)
• Streaming responses via Lambda Function URL with RAG retrieval (5 chunks per query)

Cloudflare Web Analytics

Privacy-friendly, cookie-free analytics with no personal data collection.

Design System

Color Palette

Typography

SF Pro Display with system font fallbacks. Ultra-light weight (200) throughout. Defined in src/utils/typography.ts.

Animations

• animate-fade-in : Hero entrance (1.2s)
• animate-nav-fade-in : Nav delayed entrance (0.8s, 2s delay)
• shimmer : Background shimmer effect
• widget-open : Chat widget expansion (250ms)

License

Copyright 2026 Christian Perez. All rights reserved.

For inquiries, use the contact form or email via the website.