https://byjp-portfolio.vercel.app/_next/static/chunks/83-5b0b56ea5b7e5396.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[83],{9083:(e,t,a)=>{a.d(t,{LanguageProvider:()=>u,o:()=>p});var i=a(2432),n=a(364);let o=JSON.parse('{"title":"Creative Dev - QUINETTE Jean Paul","readMore":"Read more","codeSnippetUrl":"Code Snippet","demo":"Demo","backToHome":"Back to Home","allArticles":"All Articles","noArticlesFound":"No articles found with the selected tag","heroBio":"I design, code, and orchestrate the user experience and its production — with the efficiency of today\'s tools.","heroExperience":"From e-commerce platforms to email marketing solutions, I\'ve worked with important Parisian media groups, delivering pixel-perfect interfaces and optimized user experiences.","heroQuote":"I design, I code, I orchestrate the user experience and its production — with the efficiency of today\'s tools.","heroSpecialty":"specialized in UX/UI & Front-End","heroStackTitle":"\uD83D\uDEE0 Stack & Expertise","heroUIDesign":"UI Design System","heroUIDesignDesc":"Figma, design tokens, components, variants","heroFrontEnd":"Front-End Dev","heroFrontEndDesc":"React, Next.js, Tailwind CSS, animations","heroBackEnd":"API & Back-End","heroBackEndDesc":"Node.js, API routes, PHP/SQL","heroMethodology":"Methodology","heroMethodologyDesc":"Agile product sprint, JIRA/Notion, PO/Dev collaboration","heroAITools":"⚡️ AI & Modern Tools","heroAIToolsDesc":"ChatGPT, Bolt, Vercel v0, GitHub Copilot","heroLastName":"QUINETTE","heroFirstName":"Jean Paul","heroCreativeDev":"Creative Dev","heroProfileAlt":"Jean Paul Quinette - UX/UI Front-End Developer","contactEmail":"[email protected]","contactLinkedIn":"LinkedIn","articles":[{"id":21,"title":"UX/UI landing page mockups demo","description":"Exploration of UX/UI concepts through landing page mockups: user flows, visual hierarchy, and interface variants.","content":"This demo showcases a set of landing page mockups (wireframes and high‑fidelity) designed to illustrate structure, hero messaging, and acquisition patterns. The interactive embed lets you browse screens like a prototype, while mockups present the in‑context result. The goal is to quickly test ideas, compare layouts, and prepare an efficient front‑end handoff."},{"id":20,"title":"Dynamic Demo with PHP, Twig, Gulp, and Responsive Bootstrap","description":"A dynamic website using PHP and Twig for templating, Gulp for Sass compilation and live reload, Bootstrap for responsive design, and deployment via Docker on Render.","content":"This demo combines PHP and Twig to generate dynamic HTML pages with a modern templating engine. Gulp watches Sass files and automatically recompiles the CSS on each change, while providing browser live reload for an efficient workflow. Bootstrap ensures a responsive experience on all devices. The project includes a Dockerfile to containerize the application and simple deployment on Render."},{"id":19,"title":"Transactions Dashboard with React + Chakra UI","description":"React app with Chakra UI V2, mode switch (dark/cyan/light), dynamic filtering and colored statuses.","content":"This project showcases Chakra UI V2 with advanced design token management to render a transactions dashboard. The interface offers three visual modes (dark, light, and cyan) with an animated switcher. Transactions can be filtered in real time using an accent-insensitive search field. Each item displays name, date, label, amount, and a visual status (validated, pending, canceled) with icons and dynamic colors. The code leverages useMemo for optimized filtering and useEffect to sync the theme with the <body>. This example demonstrates how to combine tokenization, accessibility, and performance with Chakra UI V2."},{"id":18,"title":"Display articles via API with Vanilla JS vs Vue.js","description":"How to fetch articles from an API and dynamically render them on a web page.","content":"This feature uses the fetch method to call the JSONPlaceholder API and retrieve a list of articles. With Vanilla JS, each article is injected into the DOM using document.createElement and appendChild. For a modern approach, Vue.js via CDN can be used with v-for to loop through articles and ref to store data, making the code reactive and cleaner. Finally, for Adobe Experience Manager (AEM) integration, the article block can be rewritten using data-sly-list for server-side iteration."},{"id":17,"title":"Custom Liquid section (Shopify)","description":"Custom Shopify Liquid section with external CSS, synced via GitHub.","content":"This section was created locally using Shopify LCI and implemented in a .liquid file within the theme. CSS styles are linked in the main layout using {%- render \'stylesheets\' -%} and {{ \'retro.css\' | asset_url | stylesheet_tag }}. The section supports dynamic blocks (badges) and is configurable via the theme editor. The project is synced between GitHub and VS Code for a modern, version-controlled development workflow."}

1,{"id":16,"title":"VUE JS : Sticker comparator","description":"This Vue JS component lets you compare your stickers with other users to quickly identify which ones you can trade.","content":"The section displays a list of users with two categories: the stickers you can give them and the stickers you can receive from them. If no exchange is possible, “None” is shown. This feature helps collectors connect with each other and makes sticker swaps more efficient, speeding up album completion."},{"id":15,"title":"Multi-Brand Design System","description":"A comprehensive design system for multiple brands with shared components and brand-specific styles. Includes color palettes, typography, and design tokens.","content":"This project showcases a sophisticated multi-brand design system implemented in JSON, designed to manage styles and design tokens for multiple brands within a single codebase. The system features a global theme with shared components and brand-specific overrides for four distinct brands (Stickini, Recordo, Zappy, and GlobeCup). Each brand maintains its unique visual identity through custom color palettes, typography settings, and design tokens while adhering to a consistent structure. The implementation demonstrates best practices for design token management, including semantic naming, type definitions, and comprehensive documentation. The system is structured to be easily consumed by React Native applications, with hardcoded values for optimal performance. This approach ensures brand consistency across platforms while allowing for efficient theme switching and theming capabilities."},{"id":14,"title":"Vue/Nuxt Demo","description":"Search bar and navigation demo in Vue/Nuxt. Tailwind, data management, variable integration, Vue syntax, NuxtLink, among others.","content":"This project demonstrates Vue.js and Nuxt.js capabilities through a training details application. The implementation shows Vue\'s reactive data binding, component composition, and Nuxt\'s routing system. Built with Tailwind CSS and custom pastel color variables, it includes dynamic content rendering, conditional views, and smooth navigation via NuxtLink. The app manages data through a trainings database, demonstrates Vue template syntax with v-for loops and conditional rendering, and implements responsive design patterns. This exercise highlights modern development practices in Vue/Nuxt including the Composition API, reactive data handling, and component-based architecture."},{"id":13,"title":"Nunjucks Template","description":"Nunjucks template with a job listing theme and Tailwind styles.","content":"This project showcases the capabilities of the Nunjucks templating engine through a job offers application. The implementation demonstrates template inheritance, data iteration, and filter usage in a real context. Built with Tailwind CSS for styling, it presents responsive job cards showing essential info like job title, company, location, type, and description. The template uses powerful Nunjucks features like loops, filters (truncate), and variable interpolation to generate dynamic content from JSON data. This exercise highlights modern templating practices, responsive implementation, and Nunjucks efficiency for generating static HTML from structured data."},{"id":12,"title":"Carousel Template in Next.js","description":"Migration of a Svelte-based carousel to Next.js (tool industrialization). Click, drag, and horizontal scroll navigation.","content":"This project represents the industrialization of our carousel tool by migrating from Svelte to Next.js/React. The implementation includes multiple interaction methods such as click navigation (left/right zones), drag/swipe gestures, and mouse wheel horizontal scroll support. Built with TypeScript and modern React patterns, it offers 8 different layout configurations, from overlays to split screens. The carousel includes infinite scrolling, responsive adaptations, and a progress indicator. This migration enables better integration into React-based projects while maintaining all the sophisticated interaction patterns developed in the original Svelte version."},{"id":11,"title":"Croatian Villages Carousel","description":"Creative proposal in Figma and integration in Svelte. Tourist carousel, SVG management and background image for immersive effect.","content":"This project presents a sophisticated tourist carousel about Croatian villages, with an immersive visual narrative through advanced SVG integration and background image techniques. Built with Svelte, it showcases the hidden gems of the Split-Dalmatia region using responsive design and animated components. The implementation demonstrates complex grid layouts, adaptive typography, and smooth integration of SVG maps with photographic backgrounds. The carousel creates an engaging narrative about authentic Croatian destinations, combining technical excellence with captivating visual design."},{"id":10,"title":"Michelin Guide Carousel","description":"Creative proposal in Figma and integration in Svelte. Carousel for Michelin client with route and page management in SvelteKit.","content":"This project presents a sophisticated carousel implementation for the Michelin Travel & Culture Guide. Built with SvelteKit, it includes dynamic route configuration, static site generation, and responsive design. The implementation shows advanced SvelteKit concepts like adapter configuration, environment-based route management (development, preview, production), and prerendering strategies for optimal performance. The carousel displays beautiful French landscapes and destinations, providing an engaging experience to discover travel content."},{"id":9,"title":"Australia Tourism Carousel","description":"Creative proposal in Figma and integration in Svelte. 6 carousels in 1, immersive WebP images and customization of existing component: geolocation, photo credit...","content":"This project presents a complete carousel system for Australia Tourism, highlighting the country\'s natural wonders with immersive images. Built with Svelte, it combines 6 different carousels into a unified experience, with optimized WebP images for performance and enhanced components with geolocation data and photo credits. The implementation demonstrates advanced component architecture in Svelte with responsive design, mobile-first approach, and enriched media handling including images and videos. The carousel provides an engaging way to explore Australia\'s diverse landscapes and attractions."},{"id":8,"title":"Framer-motion Demo","description":"This React app uses Framer Motion for smooth, interactive animations combined with mouse tracking and scroll detection.","content":"This React application uses Framer Motion for smooth and interactive animations combined with mouse tracking and scroll detection. Thanks to the useEffect hook, the mouse position updates constantly, allowing a title scroll effect that reacts to user movements. Additionally, useInView is used to detect when the ScrollDiv component enters the viewport and trigger animations. The clean and dynamic interface enhances user experience by making navigation more immersive and engaging."},{"id":7,"title":"React Tree (Treeview)","description":"A customizable hierarchical component built with React, with expandable nodes and selection.","content":"This React Treeview component provides an intuitive interface to display and interact with hierarchical data structures. It supports features such as node expand/collapse, multiple selection with counters, and custom styles. The implementation uses React Context API for state management and recursive rendering to handle nested data of any depth."},{"id":6,"title":"City Search in React","description":"React app for searching cities with autocomplete and interactive interface.","content":"This city search application demonstrates advanced React patterns for building interactive search interfaces. It includes autocomplete suggestions, input handling with debounce to reduce API calls, and a visual representation of the selected city. The implementation uses custom hooks for search logic and state management, with a clear separation between UI components and data handling."},{"id":5,"title":"Svelte Demo","description":"Demonstration of Svelte\'s reactive model and component-based architecture.","content":"This Svelte demo showcases the framework\'s unique approach to building user interfaces. Unlike React or Vue, Svelte shifts much of the work to compile time instead of runtime, resulting in optimized JavaScript. The demo highlights Svelte\'s reactive declarations, component composition, and built-in animations, demonstrating why it is gaining popularity for building fast and efficie

1nt web applications."},{"id":4,"title":"PHP/SQL Contest Debugging","description":"Case study on debugging and optimizing a high-traffic PHP/SQL contest application.","content":"This project involved troubleshooting and optimizing a contest application built with PHP and MySQL facing performance issues under high load. The debugging process included identifying bottlenecks in SQL queries, implementing proper indexes, optimizing the database schema, and refactoring PHP code to use prepared statements and connection pooling. The result was a 10x improvement in response times and the ability to handle concurrent users during traffic peaks. The live demo shows the final optimized contest platform."},{"id":3,"title":"Responsive Newsletter with Tables","description":"Responsive email newsletter template using HTML tables with modern CSS techniques.","content":"This project demonstrates how to create responsive email newsletters that work across all email clients while maintaining a modern design. The implementation uses HTML tables for structure (a requirement for compatibility) combined with modern CSS techniques where supported. The template includes responsive breakpoints, fluid images, and fallback solutions for clients with limited CSS support. The result is an attractive newsletter on desktop, mobile, and webmail."},{"id":2,"title":"Animated Calendar with jQuery","description":"Interactive holiday calendar with animations and event scheduling using jQuery.","content":"This project presents an animated calendar designed for Christmas promotions. Built with jQuery, it includes interactive date selection, event scheduling, and smooth transitions between views. The calendar supports custom themes and can be easily integrated into existing sites. The implementation demonstrates effective use of jQuery for DOM manipulation, event handling, and animation effects."},{"id":1,"title":"HTML/CSS Integration, Animated Banner","description":"Luxury brand banner with CSS animations and responsive design, made with HTML and CSS.","content":"This project shows advanced CSS animation techniques used to create an elegant and animated banner for a luxury brand. The implementation uses pure CSS animations with keyframes, transforms, and transitions to achieve smooth, high-performance effects without JavaScript. The banner is fully responsive and maintains visual appeal across devices. Special attention was paid to performance optimization and progressive degradation for older browsers."}]}'),s=JSON.parse('{"title":"Creative Dev - QUINETTE Jean Paul","readMore":"Lire la suite","codeSnippetUrl":"Extrait de code","demo":"D\xe9mo","backToHome":"Retour \xe0 l\'accueil","allArticles":"Tous les articles","noArticlesFound":"Aucun article trouv\xe9 avec le tag s\xe9lectionn\xe9","heroBio":"Je con\xe7ois, code et orchestre l\'exp\xe9rience utilisateur et sa production — avec l\'efficacit\xe9 des outils d\'aujourd\'hui.","heroExperience":"Des plateformes e-commerce aux solutions d\'email marketing, j\'ai travaill\xe9 avec d\'importants groupes m\xe9dias parisiens, livrant des interfaces pixel-perfect et des exp\xe9riences utilisateurs optimis\xe9es.","heroQuote":"Je con\xe7ois, code et orchestre l\'exp\xe9rience utilisateur et sa production — avec l\'efficacit\xe9 des outils d\'aujourd\'hui.","heroSpecialty":"sp\xe9cialis\xe9 en UX/UI & Front-End","heroStackTitle":"\uD83D\uDEE0 Stack & Expertise","heroUIDesign":"Design System UI","heroUIDesignDesc":"Figma, design tokens, composants, variantes","heroFrontEnd":"D\xe9veloppement Front-End","heroFrontEndDesc":"React, Next.js, Tailwind CSS, animations","heroBackEnd":"API & Back-End","heroBackEndDesc":"Node.js, routes API, PHP/SQL","heroMethodology":"M\xe9thodologie","heroMethodologyDesc":"Sprint produit Agile, JIRA/Notion, collaboration PO/Dev","heroAITools":"⚡️ IA & Outils modernes","heroAIToolsDesc":"ChatGPT, Bolt, Vercel v0, GitHub Copilot","heroLastName":"QUINETTE","heroFirstName":"Jean Paul","heroCreativeDev":"D\xe9veloppement Cr\xe9atif","heroProfileAlt":"Jean Paul Quinette - D\xe9veloppeur UX/UI Front-End","contactEmail":"[email protected]","contactLinkedIn":"LinkedIn","articles":[{"id":21,"title":"UX/UI — D\xe9mo de maquettes de landing pages","de

1scription":"Exploration de concepts d\'UX/UI \xe0 travers des maquettes de landing pages : parcours, hi\xe9rarchie visuelle et variantes d’interface.","content":"Cette d\xe9mo pr\xe9sente une s\xe9rie de maquettes de landing pages (wireframes et versions haute fid\xe9lit\xe9) con\xe7ues pour illustrer la structure, les zones d’accroche et les patterns d’acquisition. L’embed interactif permet de parcourir les \xe9crans comme un prototype, tandis que les mockups montrent le rendu en situation. L’objectif est de montrer une m\xe9thode rapide pour tester des id\xe9es, comparer des mises en page et pr\xe9parer une int\xe9gration front‑end efficace."},{"id":20,"title":"D\xe9mo dynamique avec PHP, Twig, Gulp et Bootstrap responsive","description":"Un site dynamique utilisant PHP et Twig pour le templating, Gulp pour la compilation Sass et le rechargement live, Bootstrap pour un design responsive, et un d\xe9ploiement via Docker sur Render.","content":"Cette d\xe9mo combine PHP et Twig pour g\xe9n\xe9rer des pages HTML dynamiques avec un moteur de templates moderne. Gulp surveille les fichiers Sass et recompiles automatiquement le CSS \xe0 chaque modification, tout en offrant un rechargement du navigateur pour un flux de travail efficace. Bootstrap garantit une exp\xe9rience responsive sur tous les appareils. Le projet inclut un Dockerfile permettant de containeriser l\'application et un d\xe9ploiement simple sur Render."},{"id":19,"title":"Tableau de Transactions en React + Chakra UI","description":"Application React avec Chakra UI V2, mode switch (dark/cyan/light), filtre dynamique et statuts color\xe9s.","content":"Ce projet illustre l’utilisation de Chakra UI V2 avec une gestion avanc\xe9e des tokens de design pour afficher un tableau de transactions. L’interface propose trois modes visuels (sombre, clair et cyan) via un s\xe9lecteur anim\xe9. Les transactions sont filtrables en temps r\xe9el gr\xe2ce \xe0 un champ de recherche normalis\xe9 (sans accents). Chaque entr\xe9e affiche le nom, la date, le libell\xe9, le montant et un statut visuel (valid\xe9, en cours, annul\xe9) avec ic\xf4nes et couleurs dynamiques. Le code exploite useMemo pour optimiser le filtrage et useEffect pour synchroniser le th\xe8me avec le <body>. Cet exemple d\xe9montre comment allier tokenisation, accessibilit\xe9 et performance avec Chakra UI V2."},{"id":18,"title":"Appeler des articles via API - Vanilla JS vs. Vue.js","description":"D\xe9couvrez comment r\xe9cup\xe9rer des articles depuis une API et les afficher dynamiquement sur une page web.","content":"Cette feature utilise la m\xe9thode fetch pour appeler l’API JSONPlaceholder et r\xe9cup\xe9rer une liste d’articles. Avec Vanilla JS, chaque article est inject\xe9 dans le DOM via document.createElement et appendChild. Pour une approche plus moderne, on peut utiliser Vue.js via CDN, en profitant de v-for pour boucler sur les articles et ref pour stocker les donn\xe9es, ce qui simplifie le code et la r\xe9activit\xe9. Enfin, pour une \xe9ventuelle int\xe9gration dans Adobe Experience Manager (AEM), le bloc article peut \xeatre r\xe9\xe9crit avec data-sly-list pour it\xe9rer sur les articles c\xf4t\xe9 serveur."},{"id":17,"title":"Section Liquid customis\xe9e pour Shopify","description":"Section Shopify Liquid personnalis\xe9e avec styles CSS externes, synchronis\xe9e avec GitHub.","content":"Cette section a \xe9t\xe9 cr\xe9\xe9e localement via Shopify LCI et int\xe9gr\xe9e en .liquid dans le th\xe8me. Les styles CSS sont li\xe9s dans le layout principal via {%- render \'stylesheets\' -%} et {{ \'retro.css\' | asset_url | stylesheet_tag }}. La section supporte des blocs dynamiques (badges) et peut \xeatre configur\xe9e depuis l’\xe9diteur de th\xe8me. Le projet est synchronis\xe9 entre GitHub et VS Code pour un workflow de d\xe9veloppement moderne et versionn\xe9."},{"id":16,"title":"VUE JS : comparateur de stickers","description":"Ce composant Vue JS permet de comparer vos stickers avec ceux des autres utilisateurs afin d’identifier facilement lesquels vous pouvez \xe9changer.","content":"La section affiche une liste d’utilisateurs avec deux cat\xe9gories : les stickers que vous pouvez leur donner et ceux que vous pouvez recevoir d’eux. Si aucun \xe9change n’est possible, l’indication “Aucun” appara\xeet. Ce syst\xe8me facilite la mise en relation entre collectionneurs et optimise vos \xe9changes pour compl\xe9ter vos albums plus rapidement."}

1,{"id":15,"title":"Syst\xe8me de Design Multi-Marques","description":"Un syst\xe8me de design complet pour plusieurs marques avec des composants partag\xe9s et des styles sp\xe9cifiques \xe0 chaque marque. Inclut des palettes de couleurs, typographie et tokens de design.","content":"Ce projet pr\xe9sente un syst\xe8me de design multi-marques sophistiqu\xe9 impl\xe9ment\xe9 en JSON, con\xe7u pour g\xe9rer les styles et les tokens de design pour plusieurs marques dans une seule base de code. Le syst\xe8me comprend un th\xe8me global avec des composants partag\xe9s et des surcharges sp\xe9cifiques \xe0 chaque marque (Stickini, Recordo, Zappy et GlobeCup). Chaque marque conserve son identit\xe9 visuelle unique \xe0 travers des palettes de couleurs personnalis\xe9es, des param\xe8tres typographiques et des tokens de design, tout en adh\xe9rant \xe0 une structure coh\xe9rente. L\'impl\xe9mentation d\xe9montre les meilleures pratiques de gestion des tokens de design, incluant une nomenclature s\xe9mantique, des d\xe9finitions de types et une documentation compl\xe8te. Le syst\xe8me est structur\xe9 pour \xeatre facilement utilis\xe9 par des applications React Native, avec des valeurs en dur pour des performances optimales. Cette approche garantit une coh\xe9rence de marque sur toutes les plateformes tout en permettant une commutation efficace entre les th\xe8mes."},{"id":14,"title":"D\xe9mo Vue/Nuxt","description":"D\xe9mo de barre de recherche et navigation en Vue/Nuxt. Tailwind, gestion des donn\xe9es, int\xe9gration de variables, syntaxe Vue, NuxtLink, entre autres.","content":"Ce projet d\xe9montre les capacit\xe9s de Vue.js et Nuxt.js via une application de d\xe9tails de formation. L\'impl\xe9mentation montre le lien r\xe9actif de donn\xe9es de Vue, la composition de composants et le syst\xe8me de routage de Nuxt. Construit avec Tailwind CSS et des variables de couleur pastel personnalis\xe9es, il inclut le rendu dynamique du contenu, des visualisations conditionnelles et une navigation fluide via NuxtLink. L\'application g\xe8re les donn\xe9es via une base de donn\xe9es de formations, d\xe9montre la syntaxe de template Vue avec des boucles v-for et du rendu conditionnel, et met en œuvre des patterns responsive. Cet exercice met en avant les pratiques modernes de d\xe9veloppement en Vue/Nuxt, incluant la Composition API, la gestion r\xe9active des donn\xe9es et l\'architecture bas\xe9e composants."},{"id":13,"title":"Template Nunjucks","description":"Template Nunjucks avec th\xe8me emploi et styles Tailwind.","content":"Ce projet illustre les capacit\xe9s du moteur de templates Nunjucks via une application d\'offres d\'emploi. L\'impl\xe9mentation d\xe9montre l\'h\xe9ritage de templates, l\'it\xe9ration des donn\xe9es et l\'usage de filtres dans un contexte r\xe9el. Construit avec Tailwind CSS pour les styles, il pr\xe9sente des cartes d\'emploi responsive montrant des informations essentielles comme le titre du poste, l\'entreprise, la localisation, le type et la description. Le template utilise des fonctions puissantes de Nunjucks comme boucles, filtres (truncate) et interpolation de variables pour g\xe9n\xe9rer du contenu dynamique \xe0 partir de donn\xe9es JSON. Cet exercice met en avant les pratiques modernes de templates, une impl\xe9mentation responsive et l\'efficacit\xe9 de Nunjucks pour g\xe9n\xe9rer du HTML statique \xe0 partir de donn\xe9es structur\xe9es."},{"id":12,"title":"Template de Carrousel en Next.js","description":"Migration d\'un carrousel bas\xe9 sur Svelte vers Next.js (industrialisation de l\'outil). Navigation par clic, glissement et scroll horizontal.","content":"Ce projet repr\xe9sente l\'industrialisation de notre outil de carrousel via la migration de Svelte vers Next.js/React. L\'impl\xe9mentation inclut plusieurs m\xe9thodes d\'interaction comme la navigation par clic (zones gauche/droite), les gestes de glissement et le support du scroll horizontal via la molette. Construit avec TypeScript et des patterns modernes React, il offre 8 configurations de layout diff\xe9rentes, des superpositions aux \xe9crans divis\xe9s. Le carrousel inclut un d\xe9filement infini, des adaptations responsive et un indicateur de progression. Cette migration permet une meilleure int\xe9gration dans des projets React, tout en conservant les patterns d\'interactions sophistiqu\xe9s d\xe9velopp\xe9s dans la version Svelte originale."},{"id":11,"title":"Carrousel des Villages de Croatie","description":"Proposition cr\xe9ative en Figma et int\xe9gration en Svelte. Carrousel touristique, gestion SVG et image de fond pour effet immersif.","content":"Ce projet pr\xe9sente un carrousel touristique sophistiqu\xe9 sur les villages croates, avec une narration visuelle immersive gr\xe2ce \xe0 l\'int\xe9gration avanc\xe9e de SVG et de techniques d\'image de fond. Construit avec Svelte, il met en valeur les tr\xe9sors cach\xe9s de la r\xe9gion de Split-Dalmatie via un design responsive et des composants anim\xe9s. L\'impl\xe9mentation d\xe9montre des layouts en grille complexes, une typographie adaptative et une int\xe9gration fluide de cartes SVG avec des fonds photographiques. Le carrousel cr\xe9e une narration attractive autour de destinations authentiques de Croatie, combinant excellence technique et design visuel captivant."},{"id":10,"title":"Carrousel Guide Michelin","description":"Proposition cr\xe9ative en Figma et int\xe9gration en Svelte. Carrousel client Michelin avec gestion de routes et pages en SvelteKit.","content":"Ce projet pr\xe9sente une impl\xe9mentation sophistiqu\xe9e de carrousel pour le Guide Voyages et Culture Michelin. Construit avec SvelteKit, il inclut la configuration dynamique des routes, la g\xe9n\xe9ration statique du site et un design responsive. L\'impl\xe9mentation montre des concepts avanc\xe9s de SvelteKit comme la configuration de l\'adaptateur, la gestion des routes selon l\'environnement (dev, preview, production) et des strat\xe9gies de prerendering pour des performances optimales. Le carrousel pr\xe9sente de beaux paysages et destinations fran\xe7aises, offrant une exp\xe9rience attractive pour d\xe9couvrir le contenu touristique."},{"id":9,"title":"Carrousel Tourisme Australie","description":"Proposition cr\xe9ative en Figma et int\xe9gration en Svelte. 6 carrousels en 1, images immersives en WebP et personnalisation du composant : g\xe9olocalisation, cr\xe9dits ph

1oto...","content":"Ce projet pr\xe9sente un syst\xe8me complet de carrousels pour Tourisme Australie, mettant en valeur les merveilles naturelles du pays via des images immersives. Construit avec Svelte, il combine 6 carrousels diff\xe9rents dans une exp\xe9rience unifi\xe9e, avec des images optimis\xe9es WebP pour la performance et des composants enrichis avec donn\xe9es de g\xe9olocalisation et cr\xe9dits photo. L\'impl\xe9mentation d\xe9montre une architecture avanc\xe9e de composants Svelte avec design responsive, approche mobile-first et gestion de m\xe9dias enrichis, incluant images et vid\xe9os. Le carrousel offre un moyen attractif d\'explorer les divers paysages et attractions d\'Australie."},{"id":8,"title":"D\xe9mo Framer-motion","description":"Cette application React utilise Framer Motion pour des animations fluides et interactives, combin\xe9es au suivi de la souris et d\xe9tection du scroll.","content":"Cette application React utilise Framer Motion pour des animations fluides et interactives, combin\xe9es au suivi de la souris et d\xe9tection du scroll. Gr\xe2ce au hook useEffect, la position de la souris est mise \xe0 jour constamment, permettant un effet de d\xe9placement du titre selon les mouvements utilisateur. De plus, useInView est utilis\xe9 pour d\xe9tecter l\'entr\xe9e en vue du composant ScrollDiv afin d\'activer les animations. L\'interface propre et dynamique am\xe9liore l\'exp\xe9rience utilisateur en rendant la navigation plus immersive et attractive."},{"id":7,"title":"Arbre React (Treeview)","description":"Composant hi\xe9rarchique personnalisable construit avec React, avec nœuds extensibles et s\xe9lection.","content":"Ce composant Treeview en React fournit une interface intuitive pour afficher et interagir avec des structures de donn\xe9es hi\xe9rarchiques. Il supporte des fonctionnalit\xe9s comme l\'expansion/repli des nœuds, la s\xe9lection multiple avec compteurs et styles personnalis\xe9s. L\'impl\xe9mentation utilise l\'API contexte de React pour la gestion d\'\xe9tat et le rendu r\xe9cursif afin de g\xe9rer des donn\xe9es imbriqu\xe9es \xe0 n\'importe quelle profondeur."},{"id":6,"title":"Recherche de Villes en React","description":"Application React pour chercher des villes avec autocompl\xe9tion et interface interactive.","content":"Cette application de recherche de villes d\xe9montre des patterns avanc\xe9s React pour construire des interfaces interactives. Elle inclut des suggestions d\'autocompl\xe9tion, la gestion de la saisie avec debounce pour r\xe9duire les appels API et une repr\xe9sentation visuelle de la ville s\xe9lectionn\xe9e. L\'impl\xe9mentation utilise des hooks personnalis\xe9s pour la logique de recherche et la gestion d\'\xe9tat, avec une s\xe9paration claire entre composants UI et gestion des donn\xe9es."},{"id":5,"title":"D\xe9mo Svelte","description":"D\xe9monstration du mod\xe8le r\xe9actif et de l\'architecture bas\xe9e composants de Svelte.","content":"Cette d\xe9mo Svelte montre l\'approche unique du framework pour construire des interfaces utilisateur. Contrairement \xe0 React ou Vue, Svelte transf\xe8re beaucoup de travail \xe0 la compilation plut\xf4t qu\'\xe0 l\'ex\xe9cution, r\xe9sultant en un JavaScript optimis\xe9. La d\xe9mo met en avant les d\xe9clarations r\xe9actives de Svelte, la composition de composants et les animations int\xe9gr\xe9es, d\xe9montrant pourquoi ce framework gagne en popularit\xe9 pour cr\xe9er des applications web rapides et efficaces."},{"id":4,"title":"D\xe9bogage Concours PHP/SQL","description":"\xc9tude de cas sur le d\xe9bogage et l\'optimisation d\'une application concours PHP/SQL avec forte charge.","content":"Ce projet impliquait la r\xe9solution de probl\xe8mes et l\'optimisation d\'une application concours construite avec PHP et MySQL qui souffrait de probl\xe8mes de performance sous forte demande. Le processus de d\xe9bogage incluait l\'identification des goulets d\'\xe9tranglement dans les requ\xeates SQL, la mise en place d\'index ad\xe9quats, l\'optimisation du sch\xe9ma de base de donn\xe9es et la refactorisation du code PHP pour utiliser des requ\xeates pr\xe9par\xe9es et la gestion des connexions. Le r\xe9sultat fut une am\xe9lioration par 10 du temps de r\xe9ponse et la capacit\xe9 \xe0 g\xe9rer les utilisateurs concurrents lors des pics de trafic. La d\xe9mo live montre la version finale optimis\xe9e de la plateforme concours."}

1,{"id":3,"title":"Newsletter Responsive avec Tables","description":"Template de newsletter email responsive utilisant des tables HTML avec techniques CSS modernes.","content":"Ce projet d\xe9montre comment cr\xe9er des newsletters responsive qui fonctionnent sur tous les clients email tout en conservant un design moderne. L\'impl\xe9mentation utilise des tables HTML pour la structure (exigence de compatibilit\xe9) combin\xe9es avec des techniques CSS modernes lorsque support\xe9es. Le template inclut des points de rupture responsive, images fluides et solutions fallback pour clients avec support CSS limit\xe9. Le r\xe9sultat est une newsletter attrayante sur desktop, mobile et webmail."},{"id":2,"title":"Calendrier Anim\xe9 avec jQuery","description":"Calendrier interactif de f\xeates avec animations et programmation d\'\xe9v\xe9nements utilisant jQuery.","content":"Ce projet pr\xe9sente un calendrier anim\xe9 con\xe7u pour des promotions de No\xebl. Construit avec jQuery, il inclut la s\xe9lection interactive de dates, la programmation d\'\xe9v\xe9nements et des transitions douces entre vues. Le calendrier supporte des th\xe8mes personnalis\xe9s et peut s\'int\xe9grer facilement \xe0 des sites existants. L\'impl\xe9mentation montre un usage efficace de jQuery pour la manipulation du DOM, la gestion d\'\xe9v\xe9nements et les effets d\'animation."},{"id":1,"title":"Int\xe9gration HTML/CSS, Banni\xe8re Anim\xe9e","description":"Banni\xe8re de marque de luxe avec animations CSS et design responsive, r\xe9alis\xe9e en HTML et CSS.","content":"Ce projet montre des techniques avanc\xe9es d\'animation CSS utilis\xe9es pour cr\xe9er une banni\xe8re \xe9l\xe9gante et anim\xe9e pour une marque de luxe. L\'impl\xe9mentation utilise des animations CSS pures avec keyframes, transformations et transitions pour des effets fluides et performants sans JavaScript. La banni\xe8re est totalement responsive et conserve son attrait visuel sur tous les dispositifs. Une attention particuli\xe8re a \xe9t\xe9 port\xe9e \xe0 l\'optimisation des performances et \xe0 la d\xe9gradation progressive pour les anciens navigateurs."}]}'),r=JSON.parse('{"title":"Creative Dev - QUINETTE Jean Paul","readMore":"Leer m\xe1s","codeSnippetUrl":"Fragmento de c\xf3digo","demo":"Demostraci\xf3n","backToHome":"Volver al inicio","allArticles":"Todos los art\xedculos","noArticlesFound":"No se encontraron art\xedculos con la etiqueta seleccionada","heroBio":"Dise\xf1o, codifico y orquesto la experiencia del usuario y su producci\xf3n — con la eficiencia de las herramientas de hoy.","heroExperience":"Desde plataformas de e-commerce hasta soluciones de marketing por email, he trabajado con importantes grupos medi\xe1ticos parisinos, entregando interfaces pixel-perfect y experiencias de usuario optimizadas.","heroQuote":"Dise\xf1o, codifico, orquesto la experiencia del usuario y su producci\xf3n — con la eficiencia de las herramientas de hoy.","heroSpecialty":"especializado en UX/UI y Front-End","heroStackTitle":"\uD83D\uDEE0 Stack y Experiencia","heroUIDesign":"UI Design System","heroUIDesignDesc":"Figma, design tokens, componentes, variantes","heroFrontEnd":"Front-End Dev","heroFrontEndDesc":"React, Next.js, Tailwind CSS, animaciones","heroBackEnd":"API y Back-End","heroBackEndDesc":"Node.js, rutas API, PHP/SQL","heroMethodology":"Metodolog\xeda","heroMethodologyDesc":"Sprint \xe1gil de producto, JIRA/Notion, colaboraci\xf3n PO/Dev","heroAITools":"⚡️ IA y Herramientas Modernas","heroAIToolsDesc":"ChatGPT, Bolt, Vercel v0, GitHub Copilot","heroLastName":"QUINETTE","heroFirstName":"Jean Paul","heroCreativeDev":"Desarrollador Creativo","heroProfileAlt":"Jean Paul Quinette - Desarrollador Front-End UX/UI","contactEmail":"[email protected]","contactLinkedIn":"LinkedIn","articles":[{"id":21,"title":"UX/UI — demo de maquetas de landing pages","description":"Exploraci\xf3n de conceptos de UX/UI a trav\xe9s de maquetas de landing pages: flujos, jerarqu\xeda visual y variantes de interfaz.","content":"Esta demo presenta un conjunto de maquetas de landing pages (wireframes y alta fi

1delidad) para ilustrar estructura, mensajes del hero y patrones de adquisici\xf3n. El embed interactivo permite navegar las pantallas como un prototipo, mientras que los mockups muestran el resultado en contexto. El objetivo es probar ideas r\xe1pidamente, comparar layouts y preparar una entrega eficiente al front‑end."},{"id":20,"title":"Demo din\xe1mica con PHP, Twig, Gulp y Bootstrap responsivo","description":"Un sitio din\xe1mico usando PHP y Twig para templating, Gulp para compilaci\xf3n de Sass y recarga en vivo, Bootstrap para dise\xf1o responsivo y despliegue mediante Docker en Render.","content":"Esta demo combina PHP y Twig para generar p\xe1ginas HTML din\xe1micas con un motor de plantillas moderno. Gulp supervisa los archivos Sass y recompila autom\xe1ticamente el CSS en cada cambio, ofreciendo recarga en vivo del navegador para un flujo de trabajo eficiente. Bootstrap garantiza una experiencia responsiva en todos los dispositivos. El proyecto incluye un Dockerfile que permite contenerizar la aplicaci\xf3n y un despliegue sencillo en Render."},{"id":19,"title":"Panel de Transacciones con React + Chakra UI","description":"Aplicaci\xf3n React con Chakra UI V2, cambio de modo (dark/cyan/light), filtro din\xe1mico y estados con colores.","content":"Este proyecto muestra el uso de Chakra UI V2 con una gesti\xf3n avanzada de tokens de dise\xf1o para renderizar un panel de transacciones. La interfaz ofrece tres modos visuales (oscuro, claro y cian) con un selector animado. Las transacciones se pueden filtrar en tiempo real mediante un campo de b\xfasqueda normalizado (sin acentos). Cada entrada muestra nombre, fecha, etiqueta, monto y un estado visual (validado, en curso, cancelado) con \xedconos y colores din\xe1micos. El c\xf3digo utiliza useMemo para optimizar el filtrado y useEffect para sincronizar el tema con el <body>. Este ejemplo demuestra c\xf3mo combinar tokenizaci\xf3n, accesibilidad y rendimiento con Chakra UI V2."},{"id":18,"title":"Recuperar art\xedculos v\xeda API - Vanilla JS vs. Vue.js","description":"C\xf3mo obtener art\xedculos desde una API y mostrarlos din\xe1micamente en una p\xe1gina web.","content":"Esta funci\xf3n utiliza el m\xe9todo fetch para llamar a la API JSONPlaceholder y obtener una lista de art\xedculos. Con Vanilla JS, cada art\xedculo se inyecta en el DOM usando document.createElement y appendChild. Para un enfoque moderno, se puede usar Vue.js v\xeda CDN con v-for para iterar los art\xedculos y ref para almacenar los datos, lo que simplifica el c\xf3digo y aporta reactividad. Por \xfaltimo, para integrarlo en Adobe Experience Manager (AEM), el bloque de art\xedculos puede reescribirse usando data-sly-list para iteraci\xf3n del lado servidor."},{"id":17,"title":"Secci\xf3n Liquid personalizada para Shopify","description":"Secci\xf3n Shopify Liquid personalizada con CSS externo, sincronizada con GitHub.","content":"Esta secci\xf3n se cre\xf3 localmente mediante Shopify LCI y se implement\xf3 en un archivo .liquid dentro del tema. Los estilos CSS se enlazan en el layout principal usando {%- render \'stylesheets\' -%} y {{ \'retro.css\' | asset_url | stylesheet_tag }}. La secci\xf3n admite bloques din\xe1micos (badges) y se puede configurar desde el editor de temas. El proyecto se sincroniza entre GitHub y VS Code para un flujo de trabajo moderno y versionado."},{"id":16,"title":"VUE JS : comparador de cromos / barajitas","description":"Este componente de Vue JS permite comparar tus cromos o barajitas con los de otros usuarios para identificar f\xe1cilmente cu\xe1les puedes intercambiar.","content":"La secci\xf3n muestra una lista de usuarios con dos categor\xedas: los cromos que puedes darles y los cromos que puedes recibir de ellos. Si no hay coincidencias, aparece el mensaje “Ninguno”. Este sistema facilita el contacto entre coleccionistas y optimiza los intercambios, ayudando a completar los \xe1lbumes m\xe1s r\xe1pido."},{"id":15,"title":"Sistema de Dise\xf1o Multi-Marca","description":"Un sistema de dise\xf1o completo para m\xfaltiples marcas con componentes compartidos y estilos espec\xedficos por marca. Incluye paletas de colores, tipograf\xeda y tokens de dise\xf1o.","content":"Este proyecto muestra un sofisticado sistema de dise\xf1o multi-marca implementado en JSON, dise\xf1ado para gestionar estilos y tokens de dise\xf1o para m\xfaltiples marcas dentro de una \xfanica base de c\xf3digo. El sistema incluye un tema global con componentes compartidos y anulaciones espec\xedficas para cuatro marcas distintas (Stickini, Recordo, Zappy y GlobeCup). Cada marca mantiene su identidad visual \xfanica a trav\xe9s de paletas de colores personalizadas, configuraciones tipogr\xe1ficas y tokens de dise\xf1o, todo ello siguiendo una estructura consistente. La implementaci\xf3n demuestra las mejores pr\xe1cticas en la gesti\xf3n de tokens de dise\xf1o, incluyendo nomenclatura sem\xe1ntica, definiciones de tipos y documentaci\xf3n completa. El sistema est\xe1 estructurado para ser f\xe1cilmente consumido por aplicaciones React Native, con valores fijos para un rendimiento \xf3ptimo. Este enfoque garantiza la coherencia de la marca en todas las plataformas al tiempo que permite una conmutaci\xf3n eficiente entre temas."},{"id":14,"title":"Demo Vue/Nuxt","description":"Demo de barra de b\xfasqueda y navegaci\xf3n en Vue/Nuxt. Tailwind, gesti\xf3n de datos, integraci\xf3n de variables, sintaxis Vue, NuxtLink entre otros.","content":"Este proyecto demuestra las capacidades de Vue.js y Nuxt.js a trav\xe9s de una aplicaci\xf3n de detalles de formaci\xf3n. La implementaci\xf3n muestra el enlace de datos reactivo de Vue, la composici\xf3n de componentes y el sistema de enrutamiento de Nuxt. Construido con Tailwind CSS y variables de colores pastel personalizadas, presenta renderizado de contenido din\xe1mico, pantallas condicionales y navegaci\xf3n fluida usando NuxtLink. La aplicaci\xf3n maneja datos a trav\xe9s de una base de datos de formaciones, demuestra la sintaxis de plantilla Vue con bucles v-for y renderizado condicional, e implementa patrones de dise\xf1o responsivo. Este ejercicio destaca las pr\xe1cticas modernas de desarrollo Vue/Nuxt incluyendo la API de composici\xf3n, manejo de datos reactivos y arquitectura basada en componentes."},{"id":13,"title":"Ejercicio Nunjucks Ofertas de Empleo","description":"Ejercicio Nunjucks con tem\xe1tica de b\xfasqueda de empleo. Creaci\xf3n de tarjetas de ofertas de trabajo con datos JSON, plantilla index.njk, estilo Tailwind y construcci\xf3n HTML.","content":"Este proyecto demuestra el poder del motor de plantillas Nunjucks para generar contenido HTML din\xe1mico. El ejercicio se centra en una tem\xe1tica de b\xfasqueda de empleo, creando tarjetas de ofertas de trabajo responsivas que muestran informaci\xf3n esencial como t\xedtulo del puesto, empresa, ubicaci\xf3n, tipo de trabajo y descripci\xf3n. La plantilla utiliza datos JSON como fuente, los procesa a trav\xe9s de una plantilla Nunjucks (index.njk), y produce HTML limpio estilizado con Tailwind CSS. La implementaci\xf3n muestra bucles de plantilla, filtros (como truncate), y renderizado condicional, resultando en una interfaz profesional de ofertas de trabajo que es tanto funcional como visualmente atractiva."},{"id":12,"title":"Template Carrusel Next.js","description":"Migraci\xf3n del carrusel basado en Svelte a Next (industrializaci\xf3n de la herramienta). Desplazamiento por clic, arrastre y scroll horizontal.","content":"Este proyecto representa la industrializaci\xf3n de nuestra herramienta de carrusel a trav\xe9s de la migraci\xf3n de Svelte a Next.js/React. La implementaci\xf3n presenta m\xfaltiples m\xe9todos de interacci\xf3n incluyendo navegaci\xf3n por clic (zonas izquierda/derecha), gestos de deslizamiento, y soporte de scroll horizontal. Construido con TypeScript y patrones React modernos, ofrece 8 configuraciones de layout diferentes, desde overlays de fondo hasta dise\xf1os de pantalla dividida. El carrusel incluye capacidades de desplazamiento infinito, adaptaciones de dise\xf1o responsivo, y un indicador de progreso. Esta migraci\xf3n permite una mejor integraci\xf3n en proyectos basad

1os en React mientras mantiene todos los patrones de interacci\xf3n sofisticados desarrollados en la versi\xf3n original de Svelte."},{"id":1,"title":"Demostraci\xf3n Framer Motion","description":"Esta aplicaci\xf3n React utiliza Framer Motion para animaciones fluidas e interactivas, combinando efectos de seguimiento del rat\xf3n y detecci\xf3n de desplazamiento.","content":"Esta aplicaci\xf3n React utiliza Framer Motion para crear animaciones fluidas e interactivas. A trav\xe9s del hook useEffect, la posici\xf3n del rat\xf3n se actualiza constantemente, permitiendo efectos de desplazamiento basados en los movimientos del usuario. Adem\xe1s, useInView se utiliza para detectar cu\xe1ndo los componentes son visibles en pantalla y activar animaciones. La interfaz, limpia y din\xe1mica, mejora la experiencia del usuario al hacer la navegaci\xf3n m\xe1s inmersiva y atractiva. La implementaci\xf3n muestra c\xf3mo combinar diferentes t\xe9cnicas de animaci\xf3n para crear experiencias de usuario fluidas y responsivas."},{"id":2,"title":"React Treeview","description":"Un componente de \xe1rbol jer\xe1rquico personalizable construido con React, con nodos expandibles y capacidades de selecci\xf3n.","content":"Este componente React Treeview proporciona una interfaz intuitiva para mostrar e interactuar con estructuras de datos jer\xe1rquicas. Admite funciones como expansi\xf3n/colapso de nodos, selecci\xf3n m\xfaltiple con contadores y estilo personalizado. La implementaci\xf3n utiliza la API de contexto de React para la gesti\xf3n del estado y el renderizado recursivo para manejar datos anidados de cualquier profundidad."},{"id":3,"title":"Buscador de Ciudades en React","description":"Una aplicaci\xf3n React para buscar ciudades con funcionalidad de autocompletado y visualizaci\xf3n interactiva.","content":"Esta aplicaci\xf3n de b\xfasqueda de ciudades demuestra patrones avanzados de React para construir interfaces de b\xfasqueda interactivas. Incluye sugerencias de autocompletado, manejo de entrada con debounce para minimizar las llamadas a la API y una representaci\xf3n visual de la ciudad seleccionada. La implementaci\xf3n utiliza hooks personalizados para la l\xf3gica de b\xfasqueda y la gesti\xf3n del estado, con una clara separaci\xf3n de responsabilidades entre los componentes de la interfaz de usuario y el manejo de datos."},{"id":4,"title":"Demostraci\xf3n Svelte","description":"Una demostraci\xf3n del modelo de programaci\xf3n reactiva de Svelte y su arquitectura basada en componentes.","content":"Esta demostraci\xf3n de Svelte muestra el enfoque \xfanico del framework para construir interfaces de usuario. A diferencia de React o Vue, Svelte traslada gran parte del trabajo al tiempo de compilaci\xf3n en lugar de al tiempo de ejecuci\xf3n, lo que resulta en JavaScript vanilla altamente optimizado. La demostraci\xf3n destaca las declaraciones reactivas de Svelte, la composici\xf3n de componentes y las animaciones integradas, demostrando por qu\xe9 est\xe1 ganando popularidad para construir aplicaciones web r\xe1pidas y eficientes."},{"id":5,"title":"Depuraci\xf3n de Concurso PHP/SQL","description":"Un estudio de caso sobre la depuraci\xf3n y optimizaci\xf3n de una aplicaci\xf3n de concurso PHP/SQL con altas demandas de tr\xe1fico.","content":"Este proyecto implic\xf3 la resoluci\xf3n de problemas y la optimizaci\xf3n de una aplicaci\xf3n de concurso construida con PHP y MySQL que estaba experimentando problemas de rendimiento bajo alta carga. El proceso de depuraci\xf3n incluy\xf3 la identificaci\xf3n de cuellos de botella en las consultas SQL, la implementaci\xf3n de una indexaci\xf3n adecuada, la optimizaci\xf3n del esquema de la base de datos y la refactorizaci\xf3n del c\xf3digo PHP para usar sentencias preparadas y agrupaci\xf3n de conexiones. El resultado fue una mejora de 10 veces en el tiempo de respuesta y la capacidad de manejar usuarios concurrentes durante los per\xedodos pico del concurso. La demostraci\xf3n en vivo muestra la plataforma de concurso optimizada en acci\xf3n."},{"id":6,"title":"Calendario Animado con jQuery","description":"Un calendario interactivo para las fiestas con animaciones y planificaci\xf3n de eventos construido con jQuery.","content":"Este proyecto presenta un calendario animado dise\xf1ado para las promociones de la temporada de fiestas. Construido con jQuery, incluye selecci\xf3n interactiva de fechas, planificaci\xf3n de eventos y transiciones suaves entre vistas. El calendario admite temas personalizados y se puede integrar f\xe1cilmente en sitios web existentes. La implementaci\xf3n demuestra el uso efectivo de jQuery para la manipulaci\xf3n del DOM, el manejo de eventos y los efectos de animaci\xf3n."},{"id":7,"title":"Integraci\xf3n HTML/CSS, Banner CSS Animado","description":"Un banner de marca de lujo con animaciones CSS y dise\xf1o responsivo, construido con HTML y CSS.","content":"Este proyecto muestra t\xe9cnicas avanzadas de animaci\xf3n CSS utilizadas para crear un banner elegante y animado para una marca de lujo. La implementaci\xf3n utiliza animaciones CSS puras con keyframes, transformaciones y transiciones para lograr animaciones suaves y de alto rendimiento sin JavaScript. El banner es totalmente responsivo y mantiene su atractivo visual en todos los dispositivos. Se prest\xf3 especial atenci\xf3n a la optimizaci\xf3n del rendimiento y la degradaci\xf3n elegante para navegadores m\xe1s antiguos."},{"id":8,"title":"Dise\xf1o de Newsletter Responsivo con Tablas","description":"Una plantilla de newsletter por correo electr\xf3nico responsiva que utiliza tablas HTML con t\xe9cnicas CSS modernas.","content":"Este proyecto demuestra c\xf3mo crear newsletters por correo electr\xf3nico responsivas que funcionan en todos los clientes de correo electr\xf3nico manteniendo un dise\xf1o moderno. La implementaci\xf3n utiliza tablas HTML para el dise\xf1o (requerido para la compatibilidad con clientes de correo electr\xf3nico) combinadas con t\xe9cnicas CSS modernas donde sean compatibles. La plantilla incluye puntos de interrupci\xf3n responsivos, im\xe1genes fluidas y soluciones alternativas para clientes de correo electr\xf3nico con soporte CSS limitado. El resultado es una newsletter que se ve muy bien en clientes de escritorio, m\xf3viles y webmail."},{"id":9,"title":"Carrusel Gu\xeda Michelin","description":"Propuesta creativa Figma e integraci\xf3n 

1Svelte. Propuesta creativa Figma para cliente Michelin con integraci\xf3n de carrusel y gesti\xf3n de configuraci\xf3n para Svelte JS (rutas/p\xe1ginas).","content":"Este proyecto presenta una sofisticada implementaci\xf3n de carrusel para la Gu\xeda de Viajes y Cultura Michelin. Construido con SvelteKit, cuenta con configuraci\xf3n de enrutamiento din\xe1mico, generaci\xf3n de sitios est\xe1ticos y dise\xf1o responsivo. La implementaci\xf3n demuestra conceptos avanzados de SvelteKit, incluyendo la configuraci\xf3n del adaptador, la gesti\xf3n de rutas para diferentes entornos (desarrollo, vista previa, producci\xf3n) y estrategias de prerenderizado para un rendimiento \xf3ptimo. El carrusel muestra hermosos lugares y destinos franceses, proporcionando una experiencia de usuario atractiva para el descubrimiento de contenido de viajes."},{"id":10,"title":"Carrusel Turismo Australia","description":"Propuesta creativa Figma e integraci\xf3n Svelte. 6 carruseles en 1, Svelte, im\xe1genes inmersivas trabajadas en WebP y personalizaci\xf3n de componente existente: adici\xf3n de geolocalizaci\xf3n, cr\xe9dito fotogr\xe1fico...","content":"Este proyecto presenta un sistema de carrusel completo para Turismo Australia, mostrando las maravillas naturales del pa\xeds a trav\xe9s de im\xe1genes inmersivas. Construido con Svelte, combina 6 carruseles diferentes en una experiencia unificada, con im\xe1genes optimizadas en WebP para el rendimiento y componentes mejorados con datos de geolocalizaci\xf3n y cr\xe9ditos fotogr\xe1ficos. La implementaci\xf3n demuestra una arquitectura de componentes Svelte avanzada con dise\xf1o responsivo, enfoque mobile-first y manejo de medios ricos que incluyen im\xe1genes y videos. El carrusel proporciona una forma atractiva de explorar los diversos paisajes y atracciones de Australia."},{"id":11,"title":"Carrusel Pueblos de Croacia","description":"Propuesta creativa Figma e integraci\xf3n Svelte. Propuesta Figma para carrusel tur\xedstico, gesti\xf3n de im\xe1genes SVG y background-image para efecto inmersivo. Carrusel en plataforma Svelte.","content":"Este proyecto presenta un sofisticado carrusel tur\xedstico para los pueblos croatas, con una narraci\xf3n visual inmersiva a trav\xe9s de la integraci\xf3n avanzada de SVG y t\xe9cnicas de imagen de fondo. Construido con Svelte, muestra las joyas ocultas de la regi\xf3n de Split-Dalmacia a trav\xe9s de un dise\xf1o responsivo y componentes animados. La implementaci\xf3n demuestra dise\xf1os de cuadr\xedcula complejos, tipograf\xeda responsiva e integraci\xf3n perfecta de mapas SVG con fondos fotogr\xe1ficos. El carrusel crea una narrativa atractiva sobre destinos croatas aut\xe9nticos, combinando la excelencia t\xe9cnica con un dise\xf1o visual convincente."}]}'),c=JSON.parse('[{"id":21,"codeSnippetUrl":"","demoUrl":"https://embed.figma.com/design/pBEloakMPa2aVsrslOkGA6/food-o-rama?node-id=0-1&embed-host=share&zoom=1","tags":["FIGMA","UI","MOCKUP","DESIGN"]},{"id":20,"codeSnippetUrl":"/snippets/twig.txt","demoUrl":"https://twig-demo-1.onrender.com/","tags":["TWIG","GULP","PHP","DOCKER","RENDER"]},{"id":19,"codeSnippetUrl":"/snippets/react-chakra.txt","demoUrl":"https://lydia-test-jp-xekl.vercel.app/","tags":["REACT","TYPESCRIPT","CHAKRA UI","TOKEN DESIGN"]},{"id":18,"codeSnippetUrl":"/snippets/vue-api-articles.txt","demoUrl":"https://vue-api-articles.vercel.app/","tags":["VUE","CDN","AEM","API","VANILLA JS"]},{"id":17,"codeSnippetUrl":"","demoUrl":"","tags":["LIQUID","SHOPIFY"]},{"id":16,"codeSnippetUrl":"/snippets/sticker-comparator-vue.txt","demoUrl":"https://sticker-comparator-vue.vercel.app/","tags":["VUE","JAVASCRIPT"]},{"id":15,"codeSnippetUrl":"/snippets/multi-brand-design-system.txt","demoUrl":"https://embed.figma.com/design/QevzfyXjNeAu9A9CNQ098J/STICKINI---Master-Design-System?node-id=10-0&embed-host=share","tags":["DESIGN SYSTEM","FIGMA","JSON","REACT NATIVE","TOKEN DESIGN"]},{"id":14,"codeSnippetUrl":"/snippets/vue-nuxt-exercise.txt","demoUrl":"https://nuxt-two-murex.vercel.app/","tags":["VUE","NUXT","TAILWIND","JAVASCRIPT"]},{"id":13,"codeSnippetUrl":"/snippets/nunjucks-template.txt","demoUrl":"https://nunjucks-blue.vercel.app/","tags":["NUNJUCKS","HTML","TAILWIND","TEMPLATE"]},{"id":12,"codeSnippetUrl":"/snippets/nextjs-carousel-template.txt","demoUrl":"https://studio.mpublicite.fr/lab/carousel-ok/","tags":["NEXT","REACT","CAROUSEL","TYPESCRIPT"]},{"id":11,"codeSnippetUrl":"/snippets/croatia-villages-carousel.txt","demoUrl":"https://studio.mpublicite.fr/clients/carrousels/ot-croatie/","tags":["SVELTE","CAROUSEL","SVG"]},{"id":10,"codeSnippetUrl":"/snippets/michelin-guide-carousel.txt","demoUrl":"https://studio.mpublicite.fr/clients/carrousels/michelin","tags":["SVELTE","CAROUSEL","SVELTEKIT"]},{"id":9,"codeSnippetUrl":"/snippets/tourism-australia-carousel.txt","demoUrl":"https://studio.mpublicite.fr/clients/carrousels/ot-australia","tags":["SVELTE","CAROUSEL","WEBP"]},{"id":8,"codeSnippetUrl":"/snippets/framer-motion-demo.txt","demoUrl":"https://framer-motion-tau.vercel.app","tags":["REACT","ANIMATION","FRAMER-MOTION"]},{"id":7,"codeSnippetUrl":"/snippets/react-treeview.txt","demoUrl":"https://treeview-rho.vercel.app/","tags":["REACT","UI","COMPONENT"]},{"id":6,"codeSnippetUrl":"/snippets/react-city-searcher.txt","demoUrl":"https://citysearcher.vercel.app/","tags":["REACT","API","SEARCH"]},{"id":5,"codeSnippetUrl":"/snippets/svelte-demo.txt","demoUrl":"https://svelte-seven-sand.vercel.app/","tags":["SVELTE","JS"]},{"id":4,"codeSnippetUrl":"/snippets/php-sql-contest-debugging.txt","demoUrl":"http://byjp.net/pm/almonds/","tags":["PHP","SQL","DEBUGGING","BACKEND"]},{"id":3,"codeSnippetUrl":"/snippets/responsive-newsletter-table-layout.txt","demoUrl":"https://creas.prismamediadigital.com/feminin/2015/pub/nl/nl_alinea/","tags":["HTML","CSS","EMAIL","RESPONSIVE"]},{"id":2,"codeSnippetUrl":"/snippets/jquery-animated-calendar.txt","demoUrl":"https://www.byjp.net/jquery/","tags":["JQUERY","JS","ANIMATION"]},{"id":1,"codeSnippetUrl":"/snippets/html-css-animated-banner.txt","demoUrl":"https://www.byjp.net/exolancome/exo2","tags":["CSS","ANIMATION","HTML"]}]'),l={en:o,fr:s,es:r},d=(0,n.createContext)(void 0),u=e=>{let{children:t}

1=e,[a,o]=(0,n.useState)("en");return(0,n.useEffect)(()=>{let e=localStorage.getItem("language");e&&l[e]&&o(e)},[]),(0,i.jsx)(d.Provider,{value:{language:a,setLanguage:e=>{o(e),localStorage.setItem("language",e)},t:e=>{let t=e.split("."),i=l[a];for(let e of t)if(void 0===(i=null==i?void 0:i[e]))break;return i||e},getArticle:e=>{let t=l[a].articles.find(t=>t.id===e),i=c.find(t=>t.id===e);if(t&&i)return{...t,...i}},getArticles:()=>l[a].articles.map(e=>{let t=c.find(t=>t.id===e.id);return t?{...e,...t}:e})},children:t})},p=()=>{let e=(0,n.useContext)(d);if(void 0===e)throw Error("useLanguage must be used within a LanguageProvider");return e}}}]);