Today, I spent time refining my ‘Quote Generator’ project to meet the feedback provided by the reviewers. My goal was to move away from standard layouts and build something unique that feels like a polished product.
Today, I spent time refining my ‘Quote Generator’ project to meet the feedback provided by the reviewers. My goal was to move away from standard layouts and build something unique that feels like a polished product.Thoughts & Process: I started by analyzing the feedback regarding the CSS. I realized my previous version looked too generic, similar to basic AI-generated templates. I wanted to give it a custom personality. I decided to implement a ‘Glassmorphism’ effect because it provides a modern, high-end feel.Challenges & Rabbit Holes: Initially, I struggled to get the backdrop-filter property to work correctly. I spent about 45 minutes debugging why the background wasn’t blurring. I fell into a rabbit hole researching CSS properties, only to realize that the background color must have an alpha channel (using rgba) for the blur effect to be visible behind the container. It was a great learning moment for me regarding how CSS layers interact. Refinements:UI/UX: Implemented a new gradient background and glass-card container. Animations: Added a custom fadeIn animation using @keyframes to make quote transitions feel smooth rather than abrupt .JavaScript: Improved the logic for generating quotes to ensure a cleaner user experience.I have attached a screenshot of the new UI below. The application now feels much more interactive and professional.
Weather App
Ship
Weather App
