Light Stimulus

Overview

Light Stimulus is a comprehensive, bilingual personal website and portfolio platform that serves as a digital laboratory for documenting explorations in augmented reality (AR/XR), computer vision, artificial intelligence, and generative technologies. Built entirely with Next.js 15 and featuring a modern React architecture, the platform combines technical sophistication with thoughtful design to create a flexible, high-performance content hub.

Unlike generic portfolio templates, Light Stimulus was architected from the ground up to support bilingual content, advanced MDX capabilities, intelligent theming, and privacy-conscious analytics. The result is a living platform that evolves with its content while maintaining exceptional performance and user experience across all devices.

Motivation

Creating a personal platform in 2026 presents unique challenges: content must be discoverable yet performant, flexible yet maintainable, feature-rich yet privacy-respecting. Existing solutions fell short in key areas:

• Portfolio builders lacked the flexibility for technical deep-dives and rich multimedia content
• Blog platforms couldn't accommodate bilingual content without clumsy workarounds
• Static site generators required too much manual infrastructure work
• CMS-based solutions sacrificed performance and introduced vendor dependencies

Light Stimulus was conceived to bridge these gaps by creating a platform that:

• Enables rich technical content: MDX integration allows React components within Markdown, supporting interactive demos, math equations, and code snippets with syntax highlighting
• Supports true bilingualism: Context-based language switching with separate content trees and proper localization
• Maintains complete control: Self-hosted on Netlify with no vendor lock-in, full ownership of content and infrastructure
• Respects privacy: Privacy-first analytics with Umami, no tracking scripts, no cookies, complete transparency
• Delivers exceptional performance: Static generation with Next.js for instant page loads and optimal SEO
• Scales effortlessly: Type-safe content layer with Contentlayer2 for managing hundreds of posts and projects

The goal was to create a technical platform that could grow with evolving interests while maintaining professional presentation and user experience standards.

System Architecture

Light Stimulus is built on a sophisticated, modern web architecture that leverages cutting-edge React patterns and Next.js capabilities:

1. Next.js 15 App Router The foundation is Next.js 15 with the App Router, enabling React Server Components for optimal performance. The architecture supports parallel routes, streaming, and intelligent code splitting. Server Components handle data fetching and static generation, while Client Components manage interactivity and state.

2. Contentlayer2 Integration Content management is powered by Contentlayer2, which transforms MDX files into type-safe, validated data structures at build time. This approach provides full TypeScript intellisense for content fields, compile-time validation of frontmatter, and automatic generation of content APIs. The system maintains separate content trees for blogs and projects, each with custom schemas and validation rules.

3. Bilingual Architecture The internationalization system is built on React Context, providing seamless language switching without page reloads. Each content file contains both English and Italian sections wrapped in custom <Lang> components. The system handles date localization, pluralization rules, navigation translation, and proper lang attributes for accessibility and SEO.

4. Adaptive Theme System A sophisticated theming engine manages light and dark modes with custom color palettes. The system respects OS preferences by default but allows manual override with persistent state. Theme colors are defined in a centralized configuration and applied consistently through Tailwind CSS custom properties, enabling smooth transitions and maintaining proper contrast ratios across all color combinations.

5. Component Architecture The UI is organized into a hierarchical component library with clear separation of concerns: common components (Header, Footer, theme controls), page-specific components (home, blog, projects, about), MDX components (enhanced Markdown elements), and layout components (post templates, list views). Each component follows a consistent pattern with TypeScript interfaces, proper prop validation, and comprehensive documentation.

6. Content Enhancement Pipeline MDX content flows through a sophisticated transformation pipeline powered by Rehype and Remark plugins. The pipeline handles syntax highlighting with Prism, math rendering with KaTeX, automatic heading anchors, GitHub-style alerts, image optimization, reading time calculation, and table of contents generation. Each stage is independently configurable and testable.

7. Search and Navigation A command palette powered by Kbar provides instant keyboard-driven search across all content. The system indexes blog posts, projects, and pages, supporting fuzzy matching and keyboard shortcuts (⌘K / Ctrl+K). Navigation is enhanced with automatic breadcrumbs, related content suggestions, and intelligent pagination.

8. Performance Optimization Layer Multiple optimization strategies ensure exceptional performance: static generation for all content pages, automatic image optimization with Next.js Image component, lazy loading for below-the-fold content, font optimization with variable fonts, CSS minification and purging, and intelligent code splitting by route.

Key Features

Advanced Content Management The MDX-powered content system enables unprecedented flexibility. Authors can embed React components directly in Markdown, creating interactive code examples, custom callouts, image galleries, and data visualizations. The system supports frontmatter for metadata, automatic tag extraction, draft mode for work-in-progress content, and scheduled publishing. Content is version-controlled with Git, providing complete history and rollback capabilities.

True Bilingual Support Unlike bolt-on translation solutions, bilingualism is core to the architecture. Each content piece contains both languages in a single file, ensuring translations stay synchronized. The language context propagates through the entire component tree, affecting date formatting (en-US vs it-IT), navigation labels, UI strings, and even pluralization. The system properly sets lang attributes for accessibility and includes hreflang tags for SEO.

Intelligent Theme System The theme engine goes beyond simple light/dark switching. Custom color palettes define primary, secondary, and tertiary accent colors for both modes, ensuring proper contrast ratios and visual hierarchy. The system handles theme transitions with smooth animations, persists user preferences across sessions, and synchronizes with OS-level preference changes. Components can access theme state to adapt their behavior and appearance dynamically.

Rich Blog Platform The blog supports everything needed for technical writing: syntax-highlighted code blocks in 50+ languages, LaTeX math rendering for equations and formulas, automatic table of contents generation, estimated reading time calculation, tag-based categorization and filtering, RSS feed generation, and social media preview cards. The layout is optimized for long-form reading with proper typography, generous whitespace, and responsive images.

Project Showcase Projects are presented with rich multimedia support: multiple cover images, external links (GitHub, live demos, documentation), technology stack tags with filtering, detailed MDX content with full component support, related project suggestions, and custom layouts per project type. The showcase automatically generates a filterable grid view with smooth animations and loading states.

Command Palette Search The Kbar-powered search provides instant access to any content: fuzzy matching finds content even with typos, keyboard shortcuts enable rapid navigation, results are grouped by content type (blogs, projects, pages), recent searches are remembered, and the palette includes quick actions for theme switching and language changing. The search index is generated at build time for optimal performance.

Privacy-Focused Analytics Umami analytics provides essential insights while respecting privacy: no cookies or local storage, anonymous visitor counting, page view tracking, referrer information, and geographic data at country level only. No personal data is collected, no IP addresses are stored, and users can't be tracked across sessions. The analytics dashboard is accessible only to the site owner.

SEO Excellence Every page is optimized for discoverability: comprehensive meta tags (title, description, keywords), OpenGraph tags for social media previews, Twitter Card support, automatic sitemap generation, robots.txt configuration, structured data with Schema.org markup, proper canonical URLs, and semantic HTML throughout. Blog posts include article structured data with author, publish date, and modification timestamps.

Performance Optimization Multiple strategies ensure exceptional speed: static generation produces pre-rendered HTML at build time, image optimization with WebP and AVIF formats, automatic compression and responsive images, lazy loading for images and components, font optimization with variable fonts and font-display swap, CSS purging removes unused styles, and code splitting loads only necessary JavaScript per route.

Technical Excellence

The project demonstrates numerous web development best practices:

• Modern React Patterns: Extensive use of React Server Components, Suspense boundaries, and streaming for optimal performance and user experience
• TypeScript Throughout: Comprehensive type coverage including content schemas, component props, API responses, and configuration objects
• Component Composition: Highly reusable components following single responsibility principle with clear interfaces and documentation
• Performance Consciousness: Lighthouse scores consistently above 95 across all metrics with careful attention to Core Web Vitals
• Accessibility Compliance: WCAG 2.1 Level AA compliance with proper ARIA labels, keyboard navigation, focus management, and semantic HTML
• Code Organization: Clean architecture with logical separation of concerns, consistent naming conventions, and comprehensive documentation
• Build Optimization: Advanced webpack configuration with code splitting, tree shaking, minification, and intelligent caching strategies
• Error Handling: Comprehensive error boundaries, fallback UI for loading states, and graceful degradation for missing content

Development Philosophy

The project reflects a thoughtful, principled approach to web development:

• Content First: The architecture prioritizes content creation and management, making it easy to add and update posts without touching code
• Privacy by Design: Every feature decision considers privacy implications, defaulting to user control and transparency
• Performance as a Feature: Speed isn't an afterthought but a core requirement, with optimization strategies built into every layer
• Progressive Enhancement: The site works with JavaScript disabled, loading progressively to ensure accessibility for all users
• Maintainability: Clean, well-documented code with consistent patterns makes long-term maintenance and feature additions straightforward
• User Experience Focus: Every interaction is designed to feel smooth, responsive, and intuitive, with careful attention to feedback and affordances
• Scalability: The architecture supports growth from dozens to thousands of posts without degradation in performance or developer experience

Impact

Light Stimulus has evolved into a comprehensive digital platform that successfully balances multiple objectives:

Technical Showcase: The site itself demonstrates proficiency with modern web technologies, serving as a living portfolio piece that showcases architectural decisions, performance optimization, and attention to detail.

Content Hub: With support for rich technical content, the platform enables deep dives into computer vision algorithms, AR/XR experiments, AI workflows, and development practices, complete with interactive examples and multimedia.

Bilingual Reach: True internationalization enables communication with both English and Italian-speaking audiences, expanding reach without compromising either language's experience.

Knowledge Base: The combination of blog posts and project documentation creates a searchable, well-organized repository of experiments, learnings, and technical insights accumulated over time.

Community Connection: The platform facilitates connection with like-minded developers and researchers through shared content, while maintaining complete control over data and presentation.

Most importantly, the platform achieves these goals while maintaining exceptional performance (sub-second page loads), complete privacy (no tracking beyond optional analytics), and professional presentation (polished design and smooth interactions).

Future Directions

Planned enhancements include:

• Interactive Demonstrations: Embedding live code playgrounds and AR/XR experiments directly in posts using WebGL and WebXR APIs
• Enhanced Animations: More sophisticated page transitions and micro-interactions using GSAP and Motion for delightful user experience
• Newsletter Features: Expanding the Buttondown integration with automated digest emails and subscription management
• Comments System: Adding Giscus or similar for community discussion while maintaining privacy standards
• Content Series: Support for multi-part series with automatic navigation and progress tracking
• Performance Monitoring: Real-time performance metrics dashboard using Umami's event system
• Additional Content Types: Support for video content, podcast episodes, and case study templates
• Accessibility Enhancements: Comprehensive keyboard navigation, high-contrast themes, and screen reader optimization
• API Endpoints: Public APIs for programmatic access to content metadata and search
• Advanced Search: Full-text search with filters, date ranges, and saved searches

Light Stimulus represents a mature, production-ready platform that successfully merges technical excellence, content flexibility, and user experience into a cohesive digital presence that grows and evolves with its creator's journey.