Revamp “Dev Projects” Section

[smalex-z]

Summary

Redesign the “Our Projects” section on the Dev Team page to feel more modern, cohesive, and on-brand with ACM’s diamond identity. The goal is to improve visual appeal, usability, and brand consistency.

Site: https://www.uclaacm.com/dev

Goals:

• Make the Projects section visually appealing and consistent with ACM branding.
• Incorporate ACM’s diamond motif in a tasteful, modern way.
  • Optional, but nice
• Highlight key ACM initiatives (Portal, Cluster, Open Source, etc.) more clearly.
• Improve the usability and professionalism of the project showcase.
• Establish a reusable design pattern for future project cards.

Suggestions:

1. Add Diamond-Themed Visual Identity

• Add diamond background pattern behind each project card
• Introduce diamond hover animation (slight rotation, glow, or accent)
• Add a large faint diamond behind the “Our Projects” header
• Optional: diamond corner accent on each card

2. Improve Card Design

• Add short tagline/subtitle under each project title
• Use subtle color coding per category (Infra, Web, Open Source, Templates)
• Add consistent card shadows, spacing, and rounded corners
• Improve screenshot framing and proportions

3. Add Interactions

• Smooth hover lift + shadow
• Diamond “shine” on hover
• Optional: staggered fade-in on scroll (Framer Motion)

4. Optional: Add Category Filtering

• Filter bar: [ All ] [ Infra ] [ Web ] [ Open Source ] [ Templates ]
• Cards animate/reflow when category is selected