All solutions

What specific areas of your project would you like help with?

Any feedback is appreciated

What are you most proud of, and what would you do differently next time?

I defined a hover-underline-effect mixin to add an underline animation on hover for links

     @mixin hover-underline-effect {
         &::after {
           content: "";
           position: relative;
           display: inline-block;
           width: 100%;
           height: 2px;
           background-color: $White;
           transform: scale(0);
           transition: transform 0.3s ease-in-out;
           transform-origin: right;
           top: -12px;
         }
       
         &:hover {
           &::after {
             transform: scale(1);
             transform-origin: left;
           }
         }
     }

What challenges did you encounter, and how did you overcome them?

Ensuring that the correct image sizes were displayed based on the device screen size

     @HostListener('window:resize', ['$event'])
     onResize(event: any) {
       this.isMobile = window.innerWidth < 768;
     }

     ngOnInit(): void {
       this.isMobile = window.innerWidth < 768;
     }

     getImgSrc(creations: any): string {
       return this.isMobile
         ? creations.imgSrcMobile
         : creations.imgSrcDesktop;
     }

What specific areas of your project would you like help with?

I would appreciate feedback on how to improve the accessibility of my project

What are you most proud of, and what would you do differently next time?

I'm proud of utilizing advanced CSS techniques such as pseudo-elements, mixins, and responsive breakpoints.

Next time I will try to optimize images and other assets to improve loading times and overall performance, especially for users on slower connections.

What challenges did you encounter, and how did you overcome them?

Challenge: Adding hover effects with pseudo-elements, such as the cyan overlay and the eye icon, while ensuring they did not interfere with other content.

Solution: Applied CSS ::before and ::after pseudo-elements correctly and used absolute positioning within a relative parent container. This kept the effects isolated to the intended elements.

What specific areas of your project would you like help with?

Basic accessibility features are implemented, but there might be room for improvement.

What are you most proud of, and what would you do differently next time?

What am I most proud of:

1.Implementing Keyboard Navigation: Adding keyboard navigation to enhance the user experience.

2.Dynamic Category and Word Selection: Implementing a feature that ensures no repeated words within a session.

3.Responsive Design: Making the game responsive across different devices was a challenge, and I learned how to use mixins and @include.

4.State Management with NgRx: Successfully managing game state using NgRx Store.

What would I do differently next time:

1.Plan for Deployment Early: Understanding the requirements for deploying to GitHub Pages or any other platform early in the development process could save time and prevent last-minute issues.

2.Optimize CSS and Assets: Ensure that my SCSS and assets are optimized to avoid exceeding size budgets, which can affect performance and deployment.

3.Thorough Testing on All Platforms: Conduct more thorough testing on different devices and browsers to catch and fix issues related to responsiveness and compatibility.

4.Accessibility Enhancements: Focus more on accessibility to ensure the game is usable by a broader audience, including those with disabilities.

What challenges did you encounter, and how did you overcome them?

Keyboard Navigation in the Category Component:

Challenge: Implementing keyboard navigation for selecting categories was particularly challenging due to the need to manage focus and ensure a smooth user experience.

Solution: I overcame this by using Angular’s @HostListener to listen for keyboard events and dynamically setting focus on the category elements. This required a good understanding of Angular’s event handling and element manipulation.

What specific areas of your project would you like help with?

While I added keyboard navigation, there may be additional accessibility features that could make the game more inclusive, such as ARIA labels, better focus management, and support for screen readers.

I would be happy to get guidance on best practices for accessibility.

What specific areas of your project would you like help with?

Any feedback is appreciated