Web
Personal portfolio
A responsive multi-page site with theme switching and scroll motion.
HTML/CSSJS
Layers of code & craft
I'm Ricardo M. Lu, a student at Hainan Bielefeld University of Applied Sciences (BIUH). I like turning ideas into pages you can click, feel, and explore — and polishing the space between code, layout, and motion.
Every project is built in layers: structure, motion, and the quiet gaps between them. Move the cursor to reveal what is underneath.
Explore work
01 — About
Built with care
I'm Ricardo M. Lu, studying at Hainan Bielefeld University of Applied Sciences (BIUH). I spend my time on the web, interaction, and visual design, turning classroom ideas into pages that people can click and experience.
This site is my practice ground: a record of projects, photographs, music, and things I am still learning. If you care about design or front-end work, write me a note.
HTML / CSS
JavaScript
BIUH
Interaction
Motion
HTML / CSS80%
JavaScript70%
UI design75%
Motion65%
02 — Music
A place to listen
Three original demo tracks, a floating player, and scrolling lyrics. The full NetEase search and playlist experience lives in the local build.
03 — Play
Nailong memory
A small memory game built from abstract Nailong stickers. Three difficulties, a timer, and a best score.
04 — Selected work
View all work →
Recent projects
A few interfaces and experiments. The full archive lives on the Work page.
02 — Work
Selected work
Interfaces, visual experiments, and small tools. Click a card for the story behind it, or filter by type.
Web
Web
Data dashboard
Turning dry tables into charts that make sense at a glance.
ChartsInteraction
Design
Brand visual refresh
A consistent color and type system that makes the brand recognizable.
BrandVisual
Tools
Pomodoro timer
A quiet timer that helps you stay with one thing for 25 minutes.
JSLocalStorage
Design
Music player interface
Large cover art and a blurred backdrop, built around atmosphere.
UIMotion
Tools
To-do list
Add, complete, delete, and keep tasks in your browser.
JSInteraction
Web
Landing page motion
Parallax and fade-ins that give a page a sense of rhythm.
MotionScroll
Design
Poster series
Gradient posters about the city after dark.
IllustrationPoster
Tools
Expense notebook
Category totals and a calm interface for daily spending.
JSData
03 — Gallery
Visual studies
A set of colour and light studies, generated in code. Click any image to open it, then use the arrow keys.
04 — Music
Listen closely
Three original demo tracks, a floating player, and scrolling lyrics. The full NetEase search and playlist experience lives in the local build.
Search NetEase
No track selected
Choose a demo track below
0:00
--:--
80%
Lyrics
scroll · click a line to seek
Shortcuts: Space play / pause, ← → seek 5 seconds. Demo tracks are included; the full NetEase service runs in the local build.
Sign in to NetEase
Scan the QR code with the NetEase Cloud Music app
Generating QR code…
Login details stay on this local service and are only used to play more tracks.
Track carousel
Click a cover to play
05 — Play
Nailong memory
A memory game made from 10 abstract Nailong stickers. Flip two matching cards to clear the board.
0Moves
0:00Time
--Best
Flip the first card to start the timer
Images from the Nailong sticker collection.
07 — Tools
Small, useful tools
Two quiet utilities for focused work: a Pomodoro timer and a local to-do list. Everything stays in your browser.
Focus timer
Focus
Pomodoro
25:00
Ready to focus
0 focus sessions completed
Local list
0 left
To-do
Nothing here yet. Add your first task above.
0 tasks
06 — Contact
Let's talk
Have a project, an idea, or just want to say hello? Send a note — I usually reply within a day or two.
Direct contact
Use the copy button for a one-click copy.
✉️
🎓
📍