Updated the press list

[PrajwalaMugajjiShambulingappa]

Problem:
Audemy website's “Press List” section originally displayed all 12 press items at once, which impacted user experience due to visual overload on small screens and inefficient use of space. Additionally, the card content was not clickable, and there was no way to collapse/expand the view for better content browsing. There was also no visual transition when toggling the press list view.

Approach
To improve usability, responsiveness, and interactivity of the Press List section, the following updates were made:

1. Controlled Display of Press Items

• Display only the first 8 press items on initial load in a responsive 2x4 grid layout.
• Implemented a "See more" button to expand the section and reveal the remaining 4 articles.
• Clicking again toggles to "Show less", collapsing back to the original view.

2. Smooth Expand/Collapse Animation

• Added transition effects for a smoother UI experience when toggling between states.
• Maintained consistent 4-column layout for the extra row on expansion.

3. Responsive Design

• Grid behavior maintained across all screen sizes, preserving the layout structure on mobile (1 column), tablet (3 columns), and desktop (4 columns).

4. Improved Accessibility & UX

• Updated PressListCard.vue to make both image and text clickable, wrapping them inside tags with target URLs.
• Ensured correct use of Vue 3 Composition API and scoped styling.

Before

• All 12 cards shown at once regardless of screen size.
• No expand/collapse control.
• No animation on toggle.
• Images and text not clickable.
• Dense UI on mobile and tablet viewports.

After

• Cleaner initial layout with 8 visible cards.
• "See more"/"Show less" toggle to manage additional content.
• Animated expansion enhances user experience.
• Clickable press items link directly to original articles.
• Fully responsive grid adapting to screen size.

Future Work

• Integrate lazy loading for press images to improve performance if needed.
• Maintain the current layout and toggle structure to support future updates with new press mentions.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
audemywebsite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 18, 2025 2:59pm