# Lucien Loua - Full Content **Website:** https://lu.vercel.app **Description:** My personal website, where I share my thoughts and projects. **Author:** Lucien Loua **Generated:** 2026-04-05T22:33:50.302Z ## Social Links - **Twitter/X:** https://x.com/luu_loua - **GitHub:** https://github.com/lucien-loua - **LinkedIn:** https://www.linkedin.com/in/lucien-loua - **Email:** lucien.loua@gmail.com --- ## Professional Experience --- # Design Engineer at Accel Tech **Period:** Jan 2026 - Present **Company:** [Accel Tech](https://www.accel-tech.net) **Source:** https://www.accel-tech.net --- # Frontend Engineer at TAAGG sas **Period:** Jan 2024 - May 2025 **Company:** [TAAGG sas](https://www.taagg-job.tech) **Source:** https://www.taagg-job.tech --- # Junior Graphic Designer at Usine Digitale SN **Period:** Jun 2021 - Sep 2021 **Company:** [Usine Digitale SN](https://usinedigitale.biz/) **Source:** https://usinedigitale.biz/ ## Blog Posts --- # Building a Composable Audio Player: My Journey in Web Audio Development **URL:** https://lu.vercel.app/posts/construire-un-lecteur-audio-composable **Description:** Join me in creating a composable audio player. Discover my insights on designing modular and reusable components for modern audio interfaces on the web. **Last Updated:** 2025-12-02 **Source:** https://lu.vercel.app/posts/construire-un-lecteur-audio-composable ## My Story I'm a developer passionate about audio and the web. During the week, I code. On weekends, I produce music. These two worlds remained separate for me for a long time, until the day I decided to bring them together. ## The Spark It all started when I wanted to share my music with my loved ones. I was producing tracks in my home studio, but sharing was always complicated. Existing platforms didn't really meet my needs. I wanted something that could: * Showcase my music * Be simple for non-technical people * Stay personal and authentic * Work perfectly on all devices ## From Ouest Audio to audio/ui I started building **Ouest Audio**, a complete music streaming application. ### The Evolution Ouest Audio became a complex application with features like: * Playlists and queue management * Next/previous track controls * Shuffle playback * Multiple audio sources While these features are excellent for a complete streaming app, I realized that many developers mainly needed a solid foundation for audio playback. That's when I decided to extract the core audio functionality into a separate, composable component registry — [**audio/ui**](https://audio-ui.xyz/). ### User Feedback That Shaped audio/ui I shared early versions with my musician friends, and their feedback was invaluable: * "The player is heavy on mobile" * "Why can't I easily share a specific track?" * "I'd like to customize the player for my own music" * "I need to manage my playlists" ## The Composable Approach Rather than building yet another monolithic audio player, I focused on something more flexible. My goal was to make audio development as simple as assembling React components, while leaving the freedom to: * Choose only what you need * Customize every piece * Own your code * Build your way In the philosophy of [`shadcn`](https://ui.shadcn.com/docs), [**audio/ui**](https://audio-ui.xyz/) is a component registry designed to be copied into your project rather than installed as a dependency. This approach gives you total control over the code and style, making customization and maintenance easier. ## Breaking Down the Components Here's how I built each piece. ### The Complete Player ### Available Components The player above is composed of several components that work together: #### Playback Controls * `AudioPlayerPlay`: Play/pause with keyboard shortcut (spacebar) * `AudioPlayerSkipBack` / `AudioPlayerSkipForward`: Navigation between tracks * `AudioPlayerRewind` / `AudioPlayerFastForward`: Rewind/forward by 10 seconds #### Progress Bar * `AudioPlayerSeekBar`: Progress bar with buffer support * `AudioPlayerTimeDisplay`: Display current or remaining time * Smooth drag-and-drop and real-time updates #### Queue Management * `AudioTrackList`: Track list with search, sort, and drag-and-drop * `AudioQueue`: Queue management dialog with search * `AudioQueueShuffle` / `AudioQueueRepeatMode`: Shuffle and repeat playback controls * `AudioQueuePreferences`: Compact menu with all queue settings #### Volume * `AudioPlayerVolume`: Volume control with dropdown menu * Quick mute toggle and visual feedback ## Installation and Usage To add audio/ui components to your project, simply use the Shadcn CLI: ```bash npx shadcn@latest add @audio/player ``` This command will automatically copy the component source code and its dependencies into your project. ### AudioProvider Configuration The `AudioProvider` initializes the audio element, handles playback events, retries on error, preloads next tracks, and synchronizes audio state with the Zustand store. Wrap your application with `AudioProvider` at the root level: ```tsx import { AudioProvider } from "@/components/audio/provider"; export default function RootLayout({ children }) { return ( {children} ); } ``` ### Basic Usage ```tsx import { AudioPlayer, AudioPlayerControlBar, AudioPlayerPlay, } from "@/components/audio/player"; export function MyAudioPlayer() { return ( ); } ``` ### Complete Player with Queue Here's an example of a complete player with all features: ### Customization Since the code is copied directly into your project, you can freely modify the source files according to your needs. Adapt styles, change behavior, or extend functionality. ## Key Features ### Queue Management [**audio/ui**](https://audio-ui.xyz/) includes a complete queue management system: * **Queue**: Add, remove, and reorganize tracks * **Search**: Filter tracks by title or artist * **Sort**: Reorganize by drag-and-drop * **Insertion Modes**: Choose where to add (beginning, end, after current track) ### Playback Modes * **Shuffle**: Shuffle the queue * **Repeat**: Three modes available (none, one track, entire queue) * **Navigation**: Next/previous track controls with smart logic ### Store and State The system uses Zustand with automatic localStorage persistence for playback state, queue, history, and user preferences. ## Lessons Learned ### Technical Points * The Web Audio API is powerful but complex * Browser compatibility is an ongoing battle * Zustand proved to be an excellent choice for state management * Performance optimization requires granular selectors ### Common Challenges * Resources must be properly cleaned up * Browser autoplay policies are strict * Audio context can be suspended * Error states must be properly handled * Queue management with shuffle and repeat requires complex logic ### Best Practices * Keep an API simple and intuitive * TypeScript is your ally * Error handling is essential * Mobile-first is the way to go * Accessibility is not optional ## What's Next This project was an opportunity to bring together my two passions: music and development. Over the past two years, I've spent more time coding than producing music, but the lessons learned from both worlds have been invaluable. ### Current State of audio/ui [**audio/ui**](https://audio-ui.xyz/) is now a complete component registry that includes: * **Audio Player**: Composable audio player with all controls * **Audio Queue**: Complete queue management system with search and sort * **Audio Track**: Track display and management components * **Audio Store**: Zustand store with localStorage persistence * **Audio Library**: Singleton `$audio` for playback management * **Extended UI Components**: Slider with buffer, Sortable List, etc. ### What's Coming I continue to improve and extend [**audio/ui**](https://audio-ui.xyz/) with additional audio components, advanced features, audio visualizations (waveforms, spectrum analyzers), and enriched documentation. ## Resources * [**audio/ui**](https://audio-ui.xyz/) — Component registry and documentation * [GitHub Repository](https://github.com/ouestlabs/audio-ui) — Contributions welcome! --- # What if tomorrow's SEO goes through llms.txt? **URL:** https://lu.vercel.app/posts/et-si-le-referencement-de-demain-passait-par-llms-txt **Description:** In this article, I share how llms.txt and llms-full.txt files can help guide AIs toward the right content on your site, to anticipate tomorrow's SEO. **Last Updated:** 2025-12-02 **Source:** https://lu.vercel.app/posts/et-si-le-referencement-de-demain-passait-par-llms-txt Today, it's becoming crucial to precisely indicate to AIs which content on our site deserves their attention, thanks to two still little-known files: `llms.txt` and `llms-full.txt`. For a few months now, I've been using them on my web projects. Their goal is simple: **guide language models (LLMs)** like those from ChatGPT or Gemini toward the content I really want to highlight. Where robots.txt serves to exclude certain pages, `llms.txt` does exactly the opposite: Here's what I want you to read, understand, analyze. It's still a marginal approach, but it could well **change the game**, at a time when AIs generate answers from web content without necessarily redirecting to sources. ## How does `llms.txt` work? `llms.txt` is a file placed at the root of the site, which explicitly lists the pages and content to highlight to LLMs. You can also create an `llms-full.txt` containing complete or partial versions of the content, in Markdown, for more precision. ## Why has this approach become strategic? With the arrival of Google's **AI Mode** (May 2025), search logic is evolving. We're no longer just talking about positioning in classic results, but about **generated answers** directly in the search interface. The operation relies on a principle of intelligent synthesis. Google no longer just displays links, it produces summaries, cites excerpts, and all from content it deems relevant. This implies two things: 1. A large part of potential traffic moves to these AI answers. 2. Content must be structured to be readable and usable by AIs. In this context, `llms.txt` plays a key role. It serves to clearly declare what deserves to be read, understood, or even cited. ## Concretely, how does it work? I've set up two files at the root of my blog: * [`llms.txt`](/llms.txt) contains a **selected list of important pages**: articles, case studies, projects. * [`llms-full.txt`](/llms-full.txt) contains, for each listed page, a **Markdown version** of the content (partial or complete text). This allows providing more context and structure to AIs. Here's an example of what I declare in my `llms.txt`: ```md title="llms.txt" # Blog - [Building a Composable Audio Player: My Journey in Web Audio Development](/posts/construire-un-lecteur-audio-composable) - [What if tomorrow's SEO goes through llms.txt?](/posts/et-si-le-referencement-de-demain-passait-par-llms-txt) - [UX Case Study: Analysis of the SociumJob Platform](/posts/etude-de-cas-ux-analyse-de-la-plateforme-socium-job) ``` This format allows AIs to analyze well-structured content, designed for synthesis. ## What are the concrete benefits of this approach? 1. **Increased visibility in AI answers**: AIs like Gemini, Perplexity, or ChatGPT are increasingly using external sources. By offering a clear entry point, we increase the probability of appearing in a generated answer. It's a form of alternative SEO, oriented toward citation rather than ranking. 2. **Anticipation of new SEO**: SEO is no longer limited to being well positioned in classic SERPs. It extends to AI results, where content clarity and structure are paramount. A well-designed `llms.txt` file acts as an editorial map dedicated to AI engines. 3. **Simple implementation, without technical dependency**: No plugin, no API is needed. Just create two static files, accessible at the root of the site. This gives total control over what we want to expose to AIs. 4. **Structuring editorial approach**: To create a good `llms.txt`, you need to make the effort to select, prioritize, and document your content. This forces you to think about what you want to convey, the added value of content, and their readability. An excellent habit. ## Where is adoption today? There is no official recognition of llms.txt by Google yet. [**John Mueller**](https://developers.google.com/search/blog/authors/john-mueller?hl=en), SEO spokesperson at Google, recently indicated that it was *"an interesting experiment"*, comparable to meta keywords tags in their early days. But some tools are already interested. Mintlify, FastHTML, or even Yoast are exploring uses around these files. Open source initiatives, like LangChain, even encourage their implementation in documented or technical sites. ## Conclusion `llms.txt` guarantees nothing in the short term. But it's a good practice: explicit, simple, proactive. It allows guiding AI reading, better structuring content, and preparing the future of semantic SEO. I'm continuing my experiments and documenting what I observe. If these files become standards in the coming months, we might as well master them now. --- # UX Case Study: Analysis of the SociumJob Platform **URL:** https://lu.vercel.app/posts/etude-de-cas-ux-analyse-de-la-plateforme-socium-job **Description:** Analysis of the user experience on the SociumJob platform, enriched with interactive solutions to optimize the candidate journey. **Last Updated:** 2025-12-02 **Source:** https://lu.vercel.app/posts/etude-de-cas-ux-analyse-de-la-plateforme-socium-job [**SociumJob**](https://sociumjob.com/) is a platform connecting talents and companies looking for qualified profiles. Each week, the team identifies and highlights companies sharing values of transparency and mutual investment. (see [the concept](https://sociumjob.com/pages/concept)) The objective of this case study is to evaluate the user experience of the candidate journey, from a UX Designer's perspective, and propose optimization paths through interactive UI components designed to strengthen engagement, clarity, and personalization of the journey, while remaining faithful to the product identity. ## 1. Candidate Journey: Key Observations My initial experience on **SociumJob** reveals an **ergonomic and clear** platform from navigation. The **user interface is functional**, facilitating job exploration. However, the **information density** could be lightened for better visual comfort. ### 1.1 Discovery and Navigation * The **Home** page offers direct access to jobs and companies, with a clear hierarchy of "Find a job" and "Find a company" CTAs. * **Job listings** present detailed information about the company (culture, missions, employer brand) and required skills, in line with SociumJob's transparency promise. ### 1.2 Application Process The **application journey** itself stood out for its **speed and lack of friction**. The application submission process was intuitive and had no superfluous or complex steps, a positive point not to be overlooked for the overall candidate experience. In summary, the platform offers an **effective and well-designed** first impression, with appreciable technical clarity. A lighter interface would optimize the experience for a broader audience. ## 2. Improvement Areas ### 2.1 Homepage: Strengthen Visual Impact SociumJob homepage This **homepage** reflects a notable effort on brand image: engaging illustration, clear message, and explicit positioning. However, **the main call-to-action ("Find a job") could benefit from stronger contrast**, and secondary sections would gain from being lightened to guide navigation more effectively. **Suggestion:** Add a **more marked visual hierarchy** between blocks (spacing, contrasts, titles), introduce subtle hover animations on CTAs to strengthen their appeal. ### 2.2 Candidate Space: Improve Readability and Humanization Candidate space on SociumJob This space shows a clear desire to offer an overview of applications. I appreciate the **subtle color code**, but it **lacks readability to distinguish different statuses**. Moreover, the absence of **human or narrative elements** reduces emotional attachment to the interface. **Suggestion:** integrate a more explicit and uniform `StatusBadge` component, and offer synthetic HR feedback even if automated. ### 2.3 Managing Expired Offers: Avoid Obsolete Applications Candidate space on SociumJob During navigation, it's possible to encounter potentially obsolete or expired job offers, which can lead to wasted time for candidates and increased frustration. **Suggestion:** Implement an **automatic job validity verification system** and clearly display the publication date. Disable the application button for expired offers to avoid any confusion. ## 3. Humanizing the Interface: Micro-interactions Serving the Candidate Experience The user experience on a recruitment platform doesn't stop at sending an application. On the contrary, it's precisely at this moment that the interface has a crucial role to play in **maintaining candidate engagement**, accompanying them, and strengthening the trust bond with the platform. It's essential to transform every interaction, even the smallest, into a useful and meaningful moment. Here are some concrete proposals to enrich this post-application phase, relying on simple but high-impact micro-interactions ### 3.1 Visualize Application Status at a Glance: Clarity First When a candidate returns to their dashboard, they're primarily looking for a clear answer: *"Where is my application?"* Currently, the information is present, but it requires effort to be read and understood quickly. **Immediate readability** is paramount to avoid any frustration. A simple improvement would be to introduce a system of visual badges positioned next to each application: for example, `Pending`, `In Progress`, `Accepted`, `Rejected`. This type of indicator, color-coded and easily identifiable, would allow the candidate to instantly grasp the status of their journey, without unnecessary cognitive effort. ### 3.2 Provide Constructive and Caring HR Feedback: Breaking the Silence One of the most frustrating experiences on recruitment platforms is the **silence after an application**. Often, you apply, then nothing, even in case of rejection. Yet feedback, even synthetic, has the power to transform this frustration into an **improvement opportunity** and maintain a feeling of consideration. **SociumJob** could integrate a **simple internal form** allowing recruiters to share structured and encouraging feedback. This form could be designed around recurring criteria such as skill fit, profile clarity, or availability. The goal isn't to burden recruiters' workload, but to offer them a **quick and effective way to communicate respectful feedback** and potentially useful for the candidate. This approach would help strengthen **SociumJob**'s image as a human and professional platform, truly concerned about its candidates' journey. ### 3.3 Transform a Rejection into an Opportunity Receiving a rejection is never pleasant. But a platform can play an active role to prevent this from leading to abandonment or loss of motivation. This component would act as a bridge between the decision received and the rest of the journey: a feedback alert combined with personalized suggestions of similar offers. This block would maintain candidate engagement by immediately opening other perspectives, without them having to restart a new search themselves. This type of functionality embodies a proactive posture from the platform: it shows that it accompanies the candidate, even after a "no". These micro-interactions, far from being simple gadgets, respond to key moments of the user journey where **clarity, attention, and transparency** have a direct impact on trust in the platform. By integrating them, **SociumJob** would have simple but powerful tools to strengthen its candidates' support, even in moments of doubt or waiting. ## 4. Transforming the Candidate Experience: Perspectives for SociumJob This case study highlights the crucial importance of a humanized user experience in online recruitment. By optimizing SociumJob's interface with targeted micro-interactions, the platform **could transform** the candidate journey into a user relationship based on transparency and respect. These adjustments **would allow** not only to increase user satisfaction but also to affirm **SociumJob**'s positioning as an actor that would truly accompany talents at every stage of their professional journey, thus propelling the candidate experience to a higher level. --- Last updated: 2026-04-05T22:33:50.302Z Source: https://lu.vercel.app/llms-full.txt