CodePen was my public lab notebook before this Hugo blog existed — instant preview, comments, and forks without deploying. These are live CodePen embeds I kept from the jQuery-and-vanilla-JS years (~2016–2017): small UI labs, then two bigger demos (Canvas and Three.js). Each card uses the pen title from CodePen so you know what you are opening—not just the slug in the URL. Fork anything directly on CodePen if you want to adapt it. Version française.
UI and form experiments
Sign-up form (Log in Page Style)
Bootstrap-style signup layout: email, password, checkboxes, radio group, select, and textarea—mostly HTML/CSS practice.
Open on CodePenTerminal-style console (Simple Console style)
Three faux terminal rows with a blinking cursor; keystrokes from one input mirror into the prompt text.
Open on CodePenSticky header with jump links
Long placeholder page, black nav bar that sticks after the hero image, and anchor links that scroll to sections.
Open on CodePenjQuery-era widgets
Step progress bar
Four-step horizontal indicator with numbered nodes; jQuery marks completed steps and shortens the first label on narrow viewports (PASSENGER vs PASSENGER DETAILS).
Open on CodePenDate range picker (double input)
Custom element daterangepicker-two-input wrapping Moment.js and the Date Range Picker plugin—departure/return fields and night count.
Open on CodePenCountdown timer (Bootstrap)
Enter minutes, start with Enter, live min/sec display, reset button, and a short audio clip when the timer hits zero.
Open on CodePenBrowser APIs
Screen capture (ScreenShare)
getDisplayMedia demo: start/stop capture, live video preview, red recording border, and a log panel for track settings and errors.
Open on CodePenLarger demos
HTML5 Canvas blackboard (Blackboard Interactive)
Full-screen drawing surface: pen color and size, drag imported images, save PNG, erase all paths and images.
Open on CodePenThree.js wave (3D Animation)
Grid of green cubes animated with a sine-based wave; mouse drag, keyboard, scroll zoom, and optional gamepad camera nudges.
Open on CodePenAll pens (quick links)
| Pen | CodePen |
|---|---|
| Sign-up form | BMdzwx |
| Terminal console | JxrqQx |
| Sticky header + anchors | ZEENwWB |
| Step progress bar | byVQKJ |
| Date range picker | jjzxER |
| Countdown timer | xMXNyy |
| Screen capture | qzQpYg |
| Canvas blackboard | MLEdxr |
| Three.js wave | rNoqVOj |
Why I still link these
CodePen was where I learned feedback loops under 400 lines — before this Hugo blog existed. The blackboard and Three.js pens are the ones I reopen when someone asks “can you prototype UI fast?” Everything else is historical context for how form-heavy web felt before component frameworks ate the world.
Older long-form write-ups for some of these ideas were merged here; the aliases in the site config still point to this page.
Related posts
- Software engineering journey — from Flash and web demos to platform work
- Portfolio Hugo week 1 — where demos became a real site
- Kinectron + p5.js — another creative-coding thread