Intro Section with Dropdown Navigation Solution

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

I'm most proud of successfully converting a static HTML/CSS/JS layout into a modular, accessible, and responsive Next.js 15 + TypeScript project. Using CSS Modules for scoped styles and implementing ARIA roles for dropdowns were major wins.

Next time, I’d plan my class naming strategy earlier to avoid the overhead of converting from BEM to camelCase for CSS Modules during refactor.

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

• Dropdown alignment & behavior: Managing dropdown toggle states and making them accessible with keyboard support was tricky. I used aria-expanded, aria-controls, and added logic to close dropdowns with Escape and outside clicks.

• Hero image responsiveness: The desktop/mobile image switching was difficult with next/image. I solved it by combining next/image with the native <picture> element.

• Layout issues with testimonials: The testimonial section wasn’t lining up with the hero image. I fixed this by restructuring the layout with grid-template-rows and aligning sections explicitly in CSS Grid.

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

I'd appreciate help improving:

• Dropdown keyboard navigation (arrow key support and tab loop)
• Refactoring the dropdown into a reusable, accessible component
• CSS scaling strategy: Whether to keep using CSS Modules or transition to Tailwind CSS for future challenges