Quyen LM
Complete website development for a designer’s personal portfolio, from responsive layouts to interactions and the opening experience.
- My role
- Full website development
- Design
- Visual design by Quyen LM
- Delivery
- Responsive portfolio
Three views of the website
Website captures. Explore the interactions on the live site.
One visual identity, a complete website
Quyen LM’s design combines illustrated characters, scattered objects and a navigation dock. I developed the complete portfolio from that visual design: Home, Work, About and Contact, including the page layouts, navigation, responsive behaviour, interactions and opening experience.
A composition for each screen
The desktop homepage arranges characters, notes and tools around a central headline. I implemented a separate mobile arrangement, stacking the character and headline vertically and placing Selected Work and Say Hi directly below them. Both views retain the illustrated identity and bottom navigation, while giving the content a different order and use of space.
Making the illustrated board respond
My implementation included the hover states and movable content within the desktop composition. The design-question card responds to an arrow key, allowing its position to change on the board. Alongside the navigation links, these details make the illustrated homepage something visitors can interact with.
The experience starts before the homepage
I also built the opening screen: a fine coordinate grid and a large progress counter appear before the illustrated homepage. This opening, the interactive desktop board and the mobile arrangement are all parts of the delivered website. The captures above show each state; the live portfolio lets visitors explore the transitions and interactions.