Personal project / Design and frontend development
FelisFold
Inspired by life with Lotus.
A multilingual website inspired by my cat, Lotus, bringing his story together with carefully sourced information for Scottish Fold owners.
Visit FelisFold (opens in a new tab)
- Project
- Personal and ongoing
- Tools
- Vue, Nuxt, Tailwind CSS
- Languages
- English, Arabic, French, Simplified Chinese
The story behind it
It started with Lotus.
Lotus came into my life in June 2021. As he grew, I began noticing changes in his movement and daily habits. I wanted to understand what I was seeing and arrive at veterinary appointments with better questions.
I started FelisFold to bring that research and our experience together. The site follows Lotus’s life alongside carefully sourced information for other owners. His story is presented as one cat’s experience, with a clear distinction between personal observations and diagnosis.
01 / Content and design
A personal story, with a clear purpose
I wanted FelisFold to feel like a home for Lotus’s story, with real photographs and room for his personality. People looking for information also need clear navigation, readable articles, and visible sources.
That shaped the content structure. Personal observations, general veterinary evidence, and decisions for an individual cat stay distinct. Lotus gives the site a personal starting point, while the guides explain the research behind the wider subject.
02 / Frontend development
Building for four languages
FelisFold supports English, Arabic, French, and Simplified Chinese. Arabic has a right to left layout, and every language has dedicated URLs and metadata.
I built shared page and article components around a localized content model. That keeps the structure consistent while allowing each language its own text, navigation, and reading direction. The frontend uses Vue, Nuxt, and Tailwind CSS, with responsive photographs delivered through Nuxt Image.
03 / Interaction design
The detail that came back to this portfolio
The walking cat theme transition started in FelisFold and later inspired the switch on this portfolio.
The interaction has to work alongside the essentials: reading, navigation, keyboard access, and reduced motion. The walking cat sprite is by SoyEva, used under the MIT license with its attribution preserved.
My contribution
- Information architecture, navigation, and reusable article layouts.
- A shared content model across four languages, including Arabic layout support.
- Light and dark themes, the walking cat transition, and accessible controls.
- Responsive image delivery, page metadata, and language specific URLs.
Have something in mind?