I've been learning a new language for a while, and I tried writing them down new words in notes and documents, but after a few days they would get lost among dozens of other words.
I created an application where I can save new words along with their translations and organize them in one place. To make reviewing more effective, I added a flashcard system that lets me practice the words regularly.
I started by designing a simple interface in Figma, focusing on making it fast and easy to add and review vocabulary.
I built this application using Nuxt and Mongoose.
The application has two usage modes.
1. Guest mode, with all vocabulary stored locally in the browser using Local Storage.
2. A personal user mode connected to my own MongoDB database, where my words, translations, and study progress are synced and stored.
1
85
Final Part of My "Rebuilding My Web Dev Portfolio" Series 🚀
The last stage of rebuilding my portfolio came down to two things:
Adding animations and Deploying the new site
For the animations, I used Framer Motion. I wanted the experience to feel polished without overwhelming the user, so I focused on subtle interactions that enhance usability:
✨ Hover animations for navigation and sidebar buttons
✨ Smooth card-to-page transition, project cards expand from the home page into their full detail pages.
✨ Image carousel hover effects with highlight and scale interactions
✨ Smooth enter/exit transitions for selected carousel images
Once everything was finished, I deployed the static site generated (SSG) build to Netlify.
And that's it! 🎉
The portfolio is now complete and live:
This project was a great opportunity to improve not only the design and development of my portfolio, but also the overall user experience through thoughtful animations and interactions.
1
100
Portfolio personal page
0
83
Website to redem tokens
0
91