Liquid Glass Portfolio
The site you are reading: multilingual, lightweight, and template-free.
- Role
- Designer & developer
- Year
- 2026
- Status
- Live
- Tech stack
- Next.jsnext-intlFramer MotionLiquid GlassVPS
This preview is an interface illustration, not a screenshot of customer data.
Problem
Portfolio templates feel empty and generic: one long page, placeholder text, and animations that overwhelm low-end devices.
Approach
I separated content from structure, put all copy in per-language message files, and made the glass layer activate only when an element is visible, on wide screens, and without a reduced-motion preference. Everything else uses a much cheaper CSS fallback.
Key features
- Seven pages with /id and /en language prefixes.
- Scroll animations that stop after an element is seen once.
- Pure CSS glass fallback for Firefox and mobile devices.
- Contact form with validation and a mailto fallback.
Results
- 01
Every page can be statically rendered and prefetched.
- 02
Expensive effects only run on visible elements.
- 03
Language and theme preferences persist after a reload.
Notes
An expensive effect needs an exit route. Building the fallback first actually simplified the whole design.
Facing a similar challenge?
I am happy to discuss technical problems, even before there is a budget or a full specification.