AI-Powered Interactive Portfolio Platform

Problem

Traditional resumes and static portfolios are passive. They make recruiters manually search for context across resumes, LinkedIn, GitHub, and project descriptions. This portfolio turns Prajesh's background into an interactive product experience where visitors can explore projects, skills, contact information, and ask a grounded AI assistant about his background.

Users

Recruiters, hiring managers, technical interviewers, networking contacts, and portfolio visitors.

My Role

Prajesh designed and built the Django backend, structured content system, templates, streaming chat endpoint, AI provider integration, desktop-style UI behavior, React/Three.js visualization integration, contact workflow, custom analytics pipeline, tests, and deployment workflow.

Architecture

The backend is Django, serving Django templates and a static-file pipeline from a JSON-driven content source loaded and cached through a service layer. The AI assistant streams responses over Server-Sent Events, with OpenRouter as the primary LLM provider, an Anthropic Claude fallback, and a local rule-based responder if neither is available. Every prompt is constructed from verified portfolio data only, with prompt-injection and off-topic filtering plus XSS/script-tag sanitization applied to user input. A contact form sends email through Django, and custom analytics are recorded via a PortfolioEvent model with a JSONField for event metadata. The desktop-style window manager (drag, focus, dock, tabs) is hand-built vanilla JavaScript. A separate React, TypeScript, Vite, and Three.js micro-frontend renders the 3D tech-stack visualization and is built into the Django static/template pipeline. GitHub Actions deploys over SSH to a Linux VPS running nginx and systemd.

Key Features

• Desktop/browser OS-style portfolio interface
• Draggable/focusable windows and dock-style interactions
• Grounded AI assistant based on structured portfolio data
• Server-Sent Events streaming for AI responses
• Multi-provider AI fallback: OpenRouter, Anthropic Claude, local fallback
• Prompt-injection and off-topic filtering
• Input sanitization for script/style tags and HTML
• React/TypeScript/Three.js technology visualization
• JSON-as-source-of-truth content architecture
• Contact form workflow
• Custom analytics event tracking
• Responsive mobile-specific layout
• GitHub Actions deployment to VPS

Technical Decisions

• Used JSON as the source of truth so portfolio content and AI context could remain grounded in verified data
• Used Server-Sent Events instead of WebSockets because the chat needs one-way streamed responses, not bidirectional realtime collaboration
• Used a multi-provider fallback pattern so the assistant can continue responding when a provider is unavailable
• Kept the AI assistant bounded by prompt-injection detection, off-topic filtering, message-length limits, and sanitization
• Built the desktop/window manager in vanilla JavaScript to preserve a custom OS-like interaction model
• Integrated the React/Three.js visualization as a Vite-built micro-frontend inside the Django static/template pipeline
• Used a custom analytics model instead of third-party tracking for lightweight event visibility

Tradeoffs

• SQLite is used in this project, so the portfolio should not claim scalable production database architecture for the site itself
• The AI assistant is intentionally grounded in structured content rather than allowed to answer as a general-purpose chatbot
• The desktop OS-style UI is memorable, but it requires careful mobile-specific handling so recruiters can still read content easily
• Email sending and analytics are lightweight and synchronous/simple rather than enterprise-grade systems
• The portfolio prioritizes recruiter experience and proof-of-work storytelling over complex application features

Security, Reliability & Testing

• Prompt-injection and jailbreak pattern checks
• Off-topic content filtering
• Input sanitization removing script/style blocks and HTML tags
• Chat message length cap
• CSRF protection on POST endpoints
• Secure cookie and HTTPS-aware proxy settings where configured
• Tests validating data integrity, prompt construction, provider selection, input sanitization, jailbreak blocking, and secret-leak prevention
• Tests ensuring API keys, .env values, and secrets do not enter AI system prompts
• Local fallback responder for provider-unavailable situations

Deployment

• Deployed to a Linux VPS
• Served behind nginx and systemd
• Used Django staticfiles and collectstatic
• Used GitHub Actions for SSH-based deployment
• Deployment flow includes pulling latest code, installing dependencies, running migrations, collecting static files, restarting the portfolio service, and reloading nginx

Outcome / Current Status

The portfolio was shipped as a production personal portfolio that acts as both a recruiter-facing proof asset and a live demonstration of Prajesh's Django, AI integration, frontend interaction design, testing, deployment, and AI-assisted software development workflow.

What I'd Improve Next

• Add stronger external monitoring and error tracking
• Improve analytics dashboard/reporting for recruiter engagement
• Add structured case-study pages for all flagship projects
• Add richer architecture diagrams for major systems
• Continue tightening AI grounding as portfolio content grows
• Improve performance budgets for heavy visual components on mobile
• Add more regression tests around template/data binding and case-study routes