<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>p1x3l</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
                    },
                },
            },
        };
    </script>
    <style>
        .icon-button {
            padding: 0.25rem;
            border-radius: 0.25rem;
            background-color: #f5f5f5;
            transition: background-color 0.2s;
        }

        .icon-button:hover:not(:disabled) {
            background-color: #e5e5e5;
        }

        .icon-button:disabled {
            opacity: 0.4;
        }

        .lucide-icon {
            width: 10px;
            height: 10px;
            stroke-width: 1.5;
            stroke: currentColor;
        }
    </style>
</head>

<body class="bg-neutral-100 text-neutral-800 font-mono text-sm">
    <main class="max-w-2xl mx-auto px-4 py-8">
        <header class="mb-8">
            <div class="flex items-start justify-between gap-4">
                <h1 class="text-xl font-bold tracking-tight uppercase mb-1">
                    <img src="/images/logo.png" width="100" />
                </h1>

                <!-- Music Player -->
                <div class="p-2 rounded-lg bg-white border border-neutral-300 shadow-sm w-[220px]">
                    <div class="mb-1">
                        <div class="font-bold text-[13px] text-neutral-700 inline" id="track-title">Loading...</div>
                        <div class="text-[11px] text-neutral-500 inline" id="track-artist"></div>
                    </div>
                    <div class="w-full h-1 opacity-0 pointer-events-none">
                        <div id="ytplayer"></div>
                    </div>
                    <div class="relative w-full h-1.5 bg-neutral-200 rounded overflow-hidden cursor-pointer"
                        id="progress-bar">
                        <div class="absolute top-0 left-0 h-full bg-blue-500" id="progress-fill" style="width: 0%">
                        </div>
                    </div>
                    <div class="flex justify-between text-[10px] text-neutral-400 mt-0.5 mb-1">
                        <span id="current-time">0:00</span>
                        <span id="duration">0:00</span>
                    </div>
                    <div class="flex items-center justify-between gap-1">
                        <div class="flex gap-1">
                            <!-- Prev button -->
                            <button id="prev-btn" onclick="previous()" class="icon-button" disabled>
                                <svg class="lucide-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="19 20 9 12 19 4 19 20"></polygon>
                                    <line x1="5" y1="19" x2="5" y2="5"></line>
                                </svg>
                            </button>

                            <!-- Play/Pause button -->
                            <button id="play-pause-btn" onclick="togglePlayPause()" class="icon-button">
                                <svg id="icon-play" class="lucide-icon" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
                                </svg>
                                <svg id="icon-pause" class="lucide-icon hidden" viewBox="0 0 24 24" fill="none"
                                    stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="6" y="4" width="4" height="16"></rect>
                                    <rect x="14" y="4" width="4" height="16"></rect>
                                </svg>
                            </button>

                            <!-- Next button -->
                            <button id="next-btn" onclick="next()" class="icon-button">
                                <svg class="lucide-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="5 4 15 12 5 20 5 4"></polygon>
                                    <line x1="19" y1="5" x2="19" y2="19"></line>
                                </svg>
                            </button>
                        </div>

                        <input type="range" min="0" max="100" value="50" id="volume-slider"
                            class="h-[4px] w-[60px] accent-neutral-400 cursor-pointer rounded" />
                    </div>
                </div>
            </div>
        </header>


        <!-- Posts Grouped by Year -->
        <section class="space-y-6">
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2025</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="153_words.html" class="hover:underline">
                            Words I Need To Say
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            May 24
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="152_p1x3l.html" class="hover:underline">
                            New P1x3l, After 5 Years Of Not Posting...
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            May 23
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2020</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="151_242_update_of_my_portfolio_davidwongfr.html" class="hover:underline">
                            Update Of My Portfolio Davidwong.fr
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 02
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="150_241_theres_no_shortcuts_you_have_to_take_your_own_jo.html" class="hover:underline">
                            There's No Shortcuts, You Have To Take Your Own Journey
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Apr 07
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2019</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="149_240__surround_yourself_with_people_not_friends.html" class="hover:underline">
                             Surround Yourself With People, Not Friends
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 21
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2018</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="148_239_social_virtual_reality_and_the_oculus_go.html" class="hover:underline">
                            Social Virtual Reality And The Oculus Go
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 22
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2017</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="147_237_london.html" class="hover:underline">
                            London
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 30
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2016</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="146_236_peinture_à_huile.html" class="hover:underline">
                            Peinture À Huile
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 15
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="145_235_lété_dernier_en_vidéo.html" class="hover:underline">
                            L'été Dernier En Vidéo
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 28
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2015</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="144_234_i_just_tried_htc_vive.html" class="hover:underline">
                            I Just Tried Htc Vive
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 26
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="143_233_chicago.html" class="hover:underline">
                            Chicago
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 27
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="142_232_nouveau_départ_pour_p1x3l.html" class="hover:underline">
                            Nouveau Départ Pour P1x3l
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 26
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2014</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="141_230_erasmus_website.html" class="hover:underline">
                            Erasmus Website
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 18
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="140_229_erasmuskoreanromanian.html" class="hover:underline">
                            Erasmus/korean/romanian
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 18
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="139_227_des_idiots_qui_résolvent_des_problèmes.html" class="hover:underline">
                            Des Idiots Qui Résolvent Des Problèmes
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 25
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="138_226_le_village_meurt_de_soif.html" class="hover:underline">
                            Le Village Meurt De Soif...
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 24
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="137_224_new_portfolio.html" class="hover:underline">
                            New Portfolio
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 05
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="136_223_piou_piou.html" class="hover:underline">
                            Piou Piou
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 29
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="135_222_ça_se_trouve_les_chiens_ils_ont_toujours_honte.html" class="hover:underline">
                            Ça Se Trouve Les Chiens Ils Ont Toujours Honte
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 28
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="134_221_on_ressort_la_tablette_graphique.html" class="hover:underline">
                            On Ressort La Tablette Graphique
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 07
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="133_219_ltc_chart.html" class="hover:underline">
                            Ltc Chart
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="132_217_gopro_project.html" class="hover:underline">
                            Gopro Project
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="131_215_cot_cot.html" class="hover:underline">
                            Cot Cot
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="130_214_bukowski_-_factotum.html" class="hover:underline">
                            Bukowski - Factotum
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 08
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="129_213_bordeaux.html" class="hover:underline">
                            Bordeaux !
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 02
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="128_212_nouveau_p1x3l_encore.html" class="hover:underline">
                            Nouveau P1x3l (Encore??)
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 19
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="127_209_la_presse_parle_de_3pagesfr.html" class="hover:underline">
                            La Presse Parle De 3pages.fr !
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 12
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2013</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="126_208_3_pages.html" class="hover:underline">
                            3 Pages
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 02
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="125_206_davidwongfr.html" class="hover:underline">
                            Davidwong.fr
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 16
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="124_204_cryptologienet.html" class="hover:underline">
                            Cryptologie.net
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="123_201_je_joue_du_piano__zelda_-_twilight_princess_trail.html" class="hover:underline">
                            Je Joue Du Piano : Zelda - Twilight Princess Trailer
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 30
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="122_200_lyonfrancefr.html" class="hover:underline">
                            Lyonfrance.fr
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 24
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="121_199_a_new_way_to_cure_addiction_to_social_network_serv.html" class="hover:underline">
                            A New Way To Cure Addiction To Social Network Services?
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 15
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="120_191_what_is_reddit.html" class="hover:underline">
                            What Is Reddit?
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 03
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="119_190_nouveau_p1x3l.html" class="hover:underline">
                            Nouveau P1x3l !
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 26
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="118_189_the_most_astounding_fact_-_neil_degrasse_tyson.html" class="hover:underline">
                            The Most Astounding Fact - Neil Degrasse Tyson 
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 26
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="117_188_citations.html" class="hover:underline">
                            Citations
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 26
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="116_187_brouillon.html" class="hover:underline">
                            Brouillon
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 12
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="115_186_lyon01_-_blog.html" class="hover:underline">
                            Lyon01 - Blog
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 02
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="114_185_script_tournament.html" class="hover:underline">
                            Script Tournament
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 02
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="113_182_counter_strike_and_a_tournament_script.html" class="hover:underline">
                            Counter Strike And A Tournament Script
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 29
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="112_181_eva_green__karen_gillan__stylo_bic.html" class="hover:underline">
                            Eva Green & Karen Gillan + Stylo Bic
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="111_180_lyon01com_bis.html" class="hover:underline">
                            Lyon01.com (Bis)
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="110_179_lyon01com.html" class="hover:underline">
                            Lyon01.com
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="109_177_barry_schwartz_the_paradox_of_choice.html" class="hover:underline">
                            Barry Schwartz: The Paradox Of Choice
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 08
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2012</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="108_176_german_strong_verbs.html" class="hover:underline">
                            German Strong Verbs
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 18
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="107_174_lyon1__ma_vision.html" class="hover:underline">
                            Lyon1 | Ma Vision
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 07
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="106_173_google_music_vs_dropbox_vs_itunes_match.html" class="hover:underline">
                            Google Music Vs Dropbox Vs Itunes Match
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 02
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="105_170_bukovsky_-_women.html" class="hover:underline">
                            Bukovsky - Women
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 25
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="104_169_pierre_choderlos_de_laclos_-_les_liaisons_dangereu.html" class="hover:underline">
                            Pierre Choderlos De Laclos - Les Liaisons Dangereuses
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 25
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="103_166_animation_flash.html" class="hover:underline">
                            Animation Flash
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="102_165_coursera_-_cryptographie.html" class="hover:underline">
                            Coursera - Cryptographie
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 13
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="101_159_streets_of_paris.html" class="hover:underline">
                            Streets Of Paris
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 24
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="100_152_lolbook_change_de_design.html" class="hover:underline">
                            Lolbook Change De Design
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="99_150_canada.html" class="hover:underline">
                            Canada
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 11
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="98_145_gymcenter__sushi_redesign.html" class="hover:underline">
                            Gymcenter & Sushi Redesign
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 06
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="97_144_de_vrais_problèmes.html" class="hover:underline">
                            De Vrais Problèmes
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 04
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="96_140_lyon01__nouveau_design.html" class="hover:underline">
                            Lyon01 | Nouveau Design
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            May 18
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="95_138_weed_in_nyc.html" class="hover:underline">
                            Weed In Nyc
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            May 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="94_135_memrise_vs_duolingo.html" class="hover:underline">
                            Memrise Vs Duolingo
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            May 05
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="93_133_bored.html" class="hover:underline">
                            Bored...
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            May 01
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="92_129_100hp_beta_test.html" class="hover:underline">
                            100hp Beta Test
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Apr 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="91_128_debilus.html" class="hover:underline">
                            Debilus
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Apr 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="90_126_lestinkycheese.html" class="hover:underline">
                            Lestinkycheese
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Apr 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="89_124_lolbook.html" class="hover:underline">
                            Lolbook
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 28
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="88_119_neo.html" class="hover:underline">
                            Neo
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 30
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="87_116_2011-2012.html" class="hover:underline">
                            2011-2012
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 19
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="86_114_free_mobile.html" class="hover:underline">
                            Free Mobile
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 10
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2011</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="85_111_goldeneye.html" class="hover:underline">
                            Goldeneye
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 11
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="84_110_snow.html" class="hover:underline">
                            Snow~~
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 11
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="83_107_des_nouvelles_de_lyon01_extended.html" class="hover:underline">
                            Des Nouvelles De Lyon01 (Extended)
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 12
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="82_105_how_diddo_i_learn_english.html" class="hover:underline">
                            How Did/do I Learn English?
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 03
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="81_103_still_friends.html" class="hover:underline">
                            Still Friends?
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 21
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="80_102_des_nouvelles_de_lyon01.html" class="hover:underline">
                            Des Nouvelles De Lyon01
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 19
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="79_99_mumtrolled.html" class="hover:underline">
                            Mumtrolled
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 06
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="78_97_brrrrrrr.html" class="hover:underline">
                            Brrrrrrr
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 19
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="77_95_onaimebien_sur_slate.html" class="hover:underline">
                            Onaimebien Sur Slate
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 12
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="76_93_first_night_in_the_house.html" class="hover:underline">
                            First Night In The House
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="75_92_house_hunting.html" class="hover:underline">
                            House Hunting
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="74_91_hello_again.html" class="hover:underline">
                            Hello Again!
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="73_90_hello_hamilton.html" class="hover:underline">
                            Hello Hamilton
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="72_89_my_first_steps.html" class="hover:underline">
                            My First Steps
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="71_85_pékin_-_to_do_list.html" class="hover:underline">
                            Pékin - To Do List
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="70_84_edt_à_mcmaster.html" class="hover:underline">
                            Edt À Mcmaster
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="69_83_paris.html" class="hover:underline">
                            Paris
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 16
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="68_80_how_to_party.html" class="hover:underline">
                            How To Party
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 05
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="67_72_refonte_de_p1x3l.html" class="hover:underline">
                            Refonte De P1x3l
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="66_71_on_redesign_lyon01com.html" class="hover:underline">
                            On Redesign Lyon01.com
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Apr 13
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="65_70_parce_que_jai_pas_grand_chose_à_poster.html" class="hover:underline">
                            Parce Que J'ai Pas Grand Chose À Poster
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Apr 12
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="64_69_ancien_header.html" class="hover:underline">
                            Ancien Header
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 28
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2010</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="63_68_onaimebien.html" class="hover:underline">
                            Onaimebien
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="62_67_100hp.html" class="hover:underline">
                            100hp
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 16
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="61_66_des_nouvelles_donaimebien.html" class="hover:underline">
                            Des Nouvelles D'onaimebien
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 16
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="60_64_onaimebien_en_espagnol_et_anglais.html" class="hover:underline">
                            Onaimebien En Espagnol Et Anglais
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 24
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="59_63_on_aime_bien.html" class="hover:underline">
                            On Aime Bien
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 12
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="58_62_nouveau_design.html" class="hover:underline">
                            Nouveau Design
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            May 27
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="57_61_on_se_réactive.html" class="hover:underline">
                            On Se Réactive !
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 20
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="56_60_apprendre_le_python_avec_google.html" class="hover:underline">
                            Apprendre Le Python Avec Google
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 20
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="55_59_javais_du_culot_à_lépoque.html" class="hover:underline">
                            J'avais Du Culot À L'époque
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 19
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="54_58_réalisation_de_t-shirt.html" class="hover:underline">
                            Réalisation De T-Shirt
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 13
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="53_57_蒜蓉西蓝花炒鸡蛋.html" class="hover:underline">
                            蒜蓉西蓝花炒鸡蛋
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="52_56_spain.html" class="hover:underline">
                            Spain ~
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 07
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="51_54_changements_sur_le_site.html" class="hover:underline">
                            Changements Sur Le Site
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 24
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="50_53_algèbre_linéaire.html" class="hover:underline">
                            Algèbre Linéaire
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 23
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="49_52_quel_navigateur_utiliser.html" class="hover:underline">
                            Quel Navigateur Utiliser ?
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 23
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="48_51_rustycheese_avance.html" class="hover:underline">
                            Rustycheese Avance
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jan 23
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2009</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="47_50_suite.html" class="hover:underline">
                            Suite
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 26
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="46_49_mrs_j.html" class="hover:underline">
                            Mrs J.
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 26
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="45_48_lyon01_version_2.html" class="hover:underline">
                            Lyon01 Version 2
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 23
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="44_47_les_différentes_version_de_p1x3l.html" class="hover:underline">
                            Les Différentes Version De P1x3l
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 22
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="43_46_videomontage_et_counterstrike.html" class="hover:underline">
                            Videomontage Et Counterstrike
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 08
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="42_45_apprendre_le_chinois.html" class="hover:underline">
                            Apprendre Le Chinois
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 30
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="41_44_le_site_de_ma_mere__part_ii.html" class="hover:underline">
                            Le Site De Ma Mere : Part Ii
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 30
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="40_43_lolbookfr.html" class="hover:underline">
                            Lolbook.fr
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="39_42_langage_codé.html" class="hover:underline">
                            Langage Codé
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 02
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="38_41_retour_a_une_vie_normal.html" class="hover:underline">
                            Retour A Une Vie Normal
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="37_40_lyon01com_lancé.html" class="hover:underline">
                            Lyon01.com Lancé !
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 14
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="36_39_mes_2_projets_avancent.html" class="hover:underline">
                            Mes 2 Projets Avancent
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 05
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="35_38_retour_en_france.html" class="hover:underline">
                            Retour En France
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="34_37_journée_de_la_femme.html" class="hover:underline">
                            Journée De La Femme
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Mar 08
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="33_36_retour_à_pékin_sous_la_neige.html" class="hover:underline">
                            Retour À Pékin... Sous La Neige
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 11
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="32_35_une_journée_à_shenzhen_深圳.html" class="hover:underline">
                            Une Journée À Shenzhen 深圳
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 11
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="31_34_jai_mangé_dans_des_toilettes.html" class="hover:underline">
                            J'ai Mangé Dans Des Toilettes
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="30_33_une_vie_différente.html" class="hover:underline">
                            Une Vie Différente
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Feb 06
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2008</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="29_32_ca_me_manque.html" class="hover:underline">
                            Ca Me Manque
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 30
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="28_31_dur_dur.html" class="hover:underline">
                            Dur Dur...
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 30
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="27_30_life_goes_on.html" class="hover:underline">
                            Life Goes On
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 23
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="26_29_décalé.html" class="hover:underline">
                            Décalé
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 15
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="25_28_cest_la_rentrée.html" class="hover:underline">
                            C'est La Rentrée
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 06
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="24_27_la_mongolie_intérieure.html" class="hover:underline">
                            La Mongolie Intérieure
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 03
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="23_26_我学习汉语.html" class="hover:underline">
                            我学习汉语
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 23
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="22_24_la_vie_continue.html" class="hover:underline">
                            La Vie Continue
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 18
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="21_23_你好_voilà_cest_fait.html" class="hover:underline">
                            你好, Voilà C'est Fait
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 17
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="20_22_ma_nouvelle_chambre.html" class="hover:underline">
                            Ma Nouvelle Chambre
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="19_21_.html" class="hover:underline">
                            ...
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 09
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="18_20_ca_y_est.html" class="hover:underline">
                            Ca Y Est
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 05
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="17_19_le_site_de_ma_mère.html" class="hover:underline">
                            Le Site De Ma Mère
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Sep 01
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="16_18_movitouch_terminé.html" class="hover:underline">
                            Movitouch Terminé !
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 22
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="15_17_les_blogs_movitouch.html" class="hover:underline">
                            Les Blogs Movitouch
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 19
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="14_16_attention_aux_poissons.html" class="hover:underline">
                            Attention Aux Poissons !
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 08
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="13_15_lalgorithme_du_doomsday.html" class="hover:underline">
                            L'algorithme Du Doomsday
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 06
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="12_13_les_films_de_zombies_sont_nuls.html" class="hover:underline">
                            Les Films De Zombies Sont Nuls
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Aug 02
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="11_12_je_hais_aller_chez_le_dentiste.html" class="hover:underline">
                            Je Hais Aller Chez Le Dentiste
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 31
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="10_11_voyage_au_centre_de_la_terre.html" class="hover:underline">
                            Voyage Au Centre De La Terre
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 27
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="9_10_mes_premiers_essais_à_laquarelle.html" class="hover:underline">
                            Mes Premiers Essais À L'aquarelle
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 25
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="8_9_2ème_forum_codé_de_a_à__z.html" class="hover:underline">
                            2ème Forum Codé De A À  Z
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jul 23
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="7_7_stay_hungry_stay_foolish.html" class="hover:underline">
                            Stay Hungry Stay Foolish
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 24
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="6_6_en_plein_partiels.html" class="hover:underline">
                            En Plein Partiels
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 04
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2007</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="5_5_ours_versus_caribout.html" class="hover:underline">
                            Ours Versus Caribout
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Dec 23
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="4_4_super_soirée.html" class="hover:underline">
                            Super Soirée !
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 26
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="3_3_moi_insomniaque.html" class="hover:underline">
                            Moi Insomniaque ?
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Oct 23
                            
                        </span>
                    </li>
                    
                    <li class="flex justify-between items-center">
                        <a href="2_2_herriot_diaries.html" class="hover:underline">
                            Herriot Diaries
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Jun 17
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
            <div>
                <h2 class="text-base font-bold text-neutral-700 border-b border-neutral-300 pb-1 mb-2">2005</h2>
                <ul class="space-y-1">
                    
                    <li class="flex justify-between items-center">
                        <a href="1_1_en_manque_dinspiration.html" class="hover:underline">
                            En Manque D'inspiration
                        </a>
                        <span class="text-neutral-400 text-xs whitespace-nowrap">
                            Nov 01
                            
                        </span>
                    </li>
                    
                </ul>
            </div>
            
        </section>

        <footer class="mt-12 pt-6 border-t border-neutral-300 text-xs text-center text-neutral-500">
            coded in a dimly lit room. last updated 2026.
        </footer>
    </main>

    <script>
        const playlist = [{"artist": "Barbara Pravi", "id": "VJuD7AnV-uw", "title": "Voil\u00e0"}, {"artist": "Charli xcx", "id": "twLhSqabby0", "title": "SS26"}, {"artist": "Helena", "id": "kDE9MUZfnTM", "title": "Tout a chang\u00e9 (Rien n\u0027a chang\u00e9)"}, {"artist": "Mitty", "id": "McsEdQeKB4U", "title": "internet"}, {"artist": "Gabriela Bee", "id": "nImhkgwTlUg", "title": "17"}, {"artist": "Miki", "id": "zFeoGjT8fcY", "title": "scorpion ascendant scorpion"}, {"artist": "Mobb Deep", "id": "rTKpYJ80OVQ", "title": "Shook Ones, Pt. II"}, {"artist": "Madonna", "id": "qYwgG2oyUbA", "title": "What It Feels Like For A Girl"}, {"artist": "Disco Lines \u0026 Tinashe", "id": "7UeAKajMmKs", "title": "No Broke Boys (Avello Remix)"}, {"artist": "Top Barry", "id": "PfuBpbIR638", "title": "\u4e00\u534a\u4e00\u534a"}, {"artist": "Bea Miller", "id": "ynw0fGVZcU0", "title": "Force of Nature"}, {"artist": "Hilary Duff", "id": "tSEsZ_7kRE8", "title": "Adult Size Medium"}, {"artist": "Avril Lavigne", "id": "0zmpuehm3UA", "title": "I\u0027m a Mess (with YUNGBLUD)"}, {"artist": "Madison Beer", "id": "bicICK6FmYU", "title": "yes baby"}, {"artist": "Ad\u00e8le Castillon", "id": "crdj-MS3fGk", "title": "Souvenirs"}, {"artist": "Ad\u00e8le Castillon", "id": "p8AgGTtXmac", "title": "\u00c0 la folie"}, {"artist": "Maybe", "id": "drZb1cKajEo", "title": "Used to This"}, {"artist": "Tones and I", "id": "UdRJY-jlEhQ", "title": "Never Seen the Rain"}, {"artist": "2Krispii", "id": "x_kAdfeCzZ4", "title": "Dinosaur for President"}, {"artist": "Danyl", "id": "txl-sy9MeqI", "title": "Brouillon"}, {"artist": "ceneri", "id": "EnQ7v54NuBM", "title": "Porta"}, {"artist": "Lily Allen", "id": "xqRNYtiAAP8", "title": "Pussy Palace"}, {"artist": "VIDEOCLUB", "id": "WxMfZW-kK5s", "title": "Amour plastique"}, {"artist": "Colt", "id": "SRFmaIDuE34", "title": "Premier"}, {"artist": "Chappell Roan", "id": "wOycfs_VSuk", "title": "Pink Pony Club"}, {"artist": "Doechii", "id": "f-OWO1aZz0g", "title": "DENIAL IS A RIVER"}, {"artist": "majiko", "id": "IHENIg8Se7M", "title": "Irony"}, {"artist": "JENNIE", "id": "cXmYNmQ4BuM", "title": "ZEN"}, {"artist": "Linkin Park", "id": "SRXH9AbT280", "title": "The Emptiness Machine"}, {"artist": "ROS\u00c9", "id": "OzdJFXyO8ts", "title": "3am"}, {"artist": "Charli XCX", "id": "fKrTCGGEiWY", "title": "party 4 u"}];

        let currentIndex = 0;
        let player;
        let currentState = "paused";
        let duration = 0;
        let progressTimer = null;

        function updateTrackInfo() {
            const track = playlist[currentIndex];
            document.getElementById("track-title").textContent = track.title;
            document.getElementById("track-artist").textContent = track.artist;
        }

        function updatePlayButton() {
            const isPlaying = currentState === "playing";
            document.getElementById("icon-play").classList.toggle("hidden", isPlaying);
            document.getElementById("icon-pause").classList.toggle("hidden", !isPlaying);
        }

        function updateNavButtons() {
            const prevBtn = document.getElementById("prev-btn");
            const nextBtn = document.getElementById("next-btn");

            prevBtn.disabled = currentIndex === 0;
            nextBtn.disabled = currentIndex === playlist.length - 1;
        }

        function formatTime(sec) {
            sec = Math.floor(sec);
            const m = Math.floor(sec / 60);
            const s = sec % 60;
            return `${m}:${s.toString().padStart(2, "0")}`;
        }

        function updateProgressBar() {
            if (!player || typeof player.getCurrentTime !== "function") return;
            const currentTime = player.getCurrentTime();
            const fill = document.getElementById("progress-fill");
            const pct = (currentTime / duration) * 100;
            fill.style.width = `${pct}%`;
            document.getElementById("current-time").textContent = formatTime(currentTime);
        }

        function startProgressUpdates() {
            if (progressTimer) clearInterval(progressTimer);
            progressTimer = setInterval(updateProgressBar, 500);
        }

        function stopProgressUpdates() {
            clearInterval(progressTimer);
        }

        function loadTrack(index) {
            currentIndex = index;
            updateTrackInfo();
            updateNavButtons();
            player.loadVideoById(playlist[currentIndex].id);
        }

        function next() {
            if (currentIndex < playlist.length - 1) {
                loadTrack(currentIndex + 1);
            }
        }

        function previous() {
            if (currentIndex > 0) {
                loadTrack(currentIndex - 1);
            }
        }

        function togglePlayPause() {
            if (!player) return;
            currentState === "paused" ? player.playVideo() : player.pauseVideo();
        }

        function onYouTubeIframeAPIReady() {
            player = new YT.Player('ytplayer', {
                height: '1',
                width: '1',
                videoId: playlist[currentIndex].id,
                events: {
                    onReady: () => {
                        updateTrackInfo();
                        updatePlayButton();
                        updateNavButtons();
                        player.setVolume(50);
                        duration = player.getDuration();
                        document.getElementById("duration").textContent = formatTime(duration);
                    },
                    onStateChange: (event) => {
                        if (event.data === YT.PlayerState.ENDED) {
                            currentState = "paused";
                            updatePlayButton();
                            stopProgressUpdates();
                            if (currentIndex < playlist.length - 1) {
                                next();
                            }
                        } else if (event.data === YT.PlayerState.PLAYING) {
                            currentState = "playing";
                            duration = player.getDuration();
                            document.getElementById("duration").textContent = formatTime(duration);
                            updatePlayButton();
                            startProgressUpdates();
                        } else if (event.data === YT.PlayerState.PAUSED) {
                            currentState = "paused";
                            updatePlayButton();
                            stopProgressUpdates();
                        }
                    }
                },
                playerVars: {
                    controls: 0,
                    modestbranding: 1,
                    rel: 0,
                    autoplay: 0
                }
            });
        }

        document.getElementById("volume-slider").addEventListener("input", (e) => {
            const vol = parseInt(e.target.value);
            if (player && typeof player.setVolume === "function") {
                player.setVolume(vol);
            }
        });

        document.getElementById("progress-bar").addEventListener("click", (e) => {
            const rect = e.currentTarget.getBoundingClientRect();
            const percent = (e.clientX - rect.left) / rect.width;
            const seekTime = duration * percent;
            if (player && typeof player.seekTo === "function") {
                player.seekTo(seekTime, true);
            }
        });

        const ytScript = document.createElement('script');
        ytScript.src = "https://www.youtube.com/iframe_api";
        document.body.appendChild(ytScript);
    </script>
</body>

</html>