Portfolio Website

A full-stack portfolio website featuring an AI-powered chatbot, gated resume access system, and content management capabilities. Built with Next.js 15 App Router, TypeScript, and Tailwind CSS v4, integrated with multiple third-party services for email, notifications, and database operations. ## Technical Architecture ### Core Technologies - **Next.js 15**: App Router with server components and streaming - **TypeScript**: Strict mode with comprehensive type safety - **Tailwind CSS v4**: CSS-first configuration with @theme directive - **Framer Motion**: Smooth animations and page transitions - **PostgreSQL**: Third-party database with Row Level Security (RLS) ### AI Chatbot System **RAG Implementation** (Retrieval-Augmented Generation): - Document chunking with 300-word chunks and 30-word overlap - Keyword-based scoring for relevant context retrieval - 2000-token budget management for optimal context injection - Session persistence (last 20 messages) **Multi-Provider Support**: - Primary: Anthropic Claude (Sonnet 4.5) - Fallback: OpenAI GPT-4o-mini - Streaming responses with AI SDK - Configurable rate limiting per session **Context Sources**: - Professional bio and experience - Project descriptions and technical details - Skills and technologies - FAQ and common questions ### Resume Access System **Workflow**: 1. User submits request (hCaptcha protected) 2. Database record created 3. Telegram notification sent to admin 4. Admin approves via secure token link 5. Email sent with time-limited access token 6. Token validation on every access **Security Features**: - HMAC-signed tokens with configurable expiry - Server-side validation on all endpoints - Persistent rate limiting on access requests - IP-based tracking with SHA-256 hashing **PDF Generation**: - Dynamic metadata embedding (token, email, download date, URL) - Date-stamped filenames (YYYYMMDD_Resume_Guillermo_Salazar.pdf) - Private storage outside public directory - Authenticated download endpoint ### Content Management **CMS**: - Git-based headless CMS - Markdown content with frontmatter - Direct repository commits - Blog posts and project showcase - No external database dependency ### Integrations **Email Service**: - Transactional emails for resume approval - Contact form submissions - Graceful fallback when unavailable **Telegram Bot**: - Real-time notifications for resume requests - Contact form submissions - Admin alerts **Security (hCaptcha)**: - Bot protection on all public forms - Contact form verification - Resume request validation ## Security & Rate Limiting ### Server-Side Rate Limiting **Implementation**: - Database-backed persistent rate limits for critical endpoints - IP hashing with configurable salt for privacy - Configurable time windows and request thresholds - Multiple storage strategies (in-memory and persistent) **Protected Features**: - AI chatbot interactions - Resume access requests - Public-facing API endpoints ### Input Validation - Server-side validation on all user inputs - Length limits enforced - Type checking with TypeScript - Sanitization before database storage ### Security Headers - Comprehensive Content Security Policy (CSP) - HTTP Strict Transport Security (HSTS) - X-Frame-Options and X-Content-Type-Options - Configured in next.config.mjs ## Development Approach ### AI-Assisted Development **Code Generation**: - API route scaffolding - Component structure and boilerplate - TypeScript interfaces from schemas - Test case generation **Optimization**: - Bundle size analysis - Performance profiling - Accessibility audits - Security vulnerability scanning **Documentation**: - Inline code comments - README with setup instructions - Environment variable documentation ### Quality Assurance - TypeScript strict mode enabled - ESLint with Next.js rules - Prettier for consistent formatting - Build-time type checking ## Performance & SEO ### Optimization - Server components for reduced JavaScript - Image optimization with Next.js Image - Code splitting and lazy loading - Static generation where possible ### Search Engine Optimization - JSON-LD structured data - Open Graph and Twitter Cards - Semantic HTML markup - Dynamic sitemap generation - Robots.txt configuration ## Deployment & Monitoring - Deployment with automatic CI/CD - Environment variable management - Build validation before deployment - Production error tracking This portfolio demonstrates a production-ready full-stack application combining modern web technologies, AI capabilities, and robust security practices. The modular architecture allows graceful degradation when optional services are unavailable, ensuring core functionality remains accessible.

• •AI chatbot with RAG (Retrieval-Augmented Generation) for contextual responses
• •Token-based resume access system with approval workflow
• •Git-based CMS for blog and project management
• •PDF generation with embedded metadata tracking
• •Multi-provider AI support (Claude + GPT) with streaming responses
• •Comprehensive security: rate limiting, hCaptcha, server-side validation

• •Building a secure resume access system with token-based authentication
• •Implementing RAG for AI chatbot with efficient context retrieval
• •Managing multiple integrations (Email, Telegram, Database, CMS)
• •Ensuring security across all user inputs and API endpoints

• •Token generation with HMAC signing and configurable expiration
• •Keyword-based document chunking for RAG context retrieval
• •Modular architecture with graceful degradation for missing services
• •Server-side rate limiting with IP hashing and persistent storage