Case Study: The Making of This Website

This project is continuously evolving. Recent updates include:

• SOC2+ Compliance Readiness: implemented granular cookie consent (GDPR/privacy), automated weekly security scanning via GitHub Actions, and PII log redaction.
• Performance Optimization: Integration with a CDN for optimized image delivery, with auto-tagging via a multimodal LLM pipeline.
• Robustness Improvements: Enhanced error handling for the page builder to prevent crashes during data fetch failures.
• Security Hardening: Updated CSP headers and image domain policies for enterprise-grade security.

The primary vision for this portfolio was to create more than just a digital resume. The goal was to build a modern, professional, and performant portfolio website as a single-page application (SPA) that not only showcases my work but also serves as a live demonstration of my technical capabilities. Key objectives included:

• Modern User Experience: A clean, responsive, and aesthetically pleasing design that works flawlessly on all devices.
• High Performance: Fast load times and smooth navigation to keep users engaged.
• Dynamic & Scalable Content: An architecture that allows for easy content updates and the addition of new projects without code changes.
• AI-Assisted Build: To showcase the same Microsoft Copilot in VS Code + GitHub Copilot pair-programming workflow that I use on Microsoft Copilot Studio engagements at Witivio.
• Bilingual Support: Full internationalization (i18n) to serve content in both English and French seamlessly.

The website is a high-performance Next.js application running in a Docker container on a serverless platform. This architecture ensures infinite scalability with zero maintenance and is portable to Azure Container Apps or Azure App Service with no code changes. The site uses a 'headless CMS' pattern where content is decoupled from code, stored in structured JSON files.

A custom React Context, the I18nProvider, acts as a central content aggregator. When the user switches languages, this provider dynamically fetches all relevant JSON files, merges them into a single content object, and makes it available throughout the application via the useI18n hook. This powerful pattern completely decouples the application's code from its content, making the site incredibly easy to maintain and scale.

A central feature of this portfolio is the integration of a multimodal LLM stack to demonstrate the same patterns I deploy in Microsoft Copilot Studio engagements:

• ElliotBot (AI Co-Pilot): A context-aware chatbot that uses a detailed system prompt and streaming responses to act as an AI guide for the portfolio. It leverages tool-use to perform actions like navigation and filtering based on the user's conversational requests, the same agentic pattern I deploy in Microsoft Copilot Studio.
• Interactive Demos: Projects like the Automated Invoice Processing demo showcase multimodal capabilities, sending an image and a text prompt to extract structured JSON data, the same data-extraction pattern that maps onto Azure AI Document Intelligence in production.
• Real-Time AI Player: The AI Reflex Rush game demonstrates low-latency decision-making, where a fast LLM processes the game state on each frame and returns an action ('JUMP' or 'WAIT'), configured for maximum speed.

For an SPA, ensuring proper search engine indexing is critical. The routing logic in App.tsx dynamically updates the page's title and meta description on every navigation change. Furthermore, it injects structured data (JSON-LD) into the page header, providing search engines with rich context for every page, including individual project case studies. This ensures that every piece of content is individually indexable and optimized for search.