Enhanced Website UI with Modern Animations and Interactions and Fix:Binary Download & Source Download Links #35

AryanVBW · 2025-01-08T07:14:45Z

🎯 Overview

This PR significantly improves the Apache Fineract website's user interface by adding modern animations and interactive elements throughout the site.

🔍 Detailed Changes

1. Global Animation Enhancements

Added fade-in and slide-up animations for all sections
Implemented scroll-triggered animations for better engagement
Added smooth transitions between states
Optimized performance with hardware acceleration

2. Navigation Improvements

Enhanced logo and brand text presentation
Added smooth hover transitions
Improved mobile responsiveness
Added underline animations for nav links

3. Interactive Elements

Added hover effects to all cards and panels
Implemented ripple effects for buttons
Enhanced list item interactions
Added gradient animations
Improved table row hover states

4. Reference Section Redesign

Modernized link presentations with icons
Added smooth hover transitions
Enhanced visual feedback
Improved mobile layout
Added shine effects

5. Visual Feedback

Added micro-interactions
Enhanced hover states
Implemented consistent color transitions
Added subtle animations for better UX

6. Performance Optimizations

Used CSS transforms for smooth animations
Implemented efficient transitions
Added debounced scroll handlers
Optimized animation timing

7. Accessibility Improvements

Enhanced focus states
Improved colour contrast
Maintained keyboard navigation
Added clear visual feedback

🔧 Technical Implementation

Used CSS animations and transforms
Implemented cubic-bezier timing functions
Added responsive breakpoints
Used hardware-accelerated properties

📱 Mobile Responsiveness

Optimized animations for mobile devices
Adjusted spacing and sizing
Enhanced touch interactions
Improved performance on mobile

✅ Testing Checklist

📸 Screenshots

Screen.Recording.2025-01-08.at.11.53.11.AM.mov

https://vivek.aryanvbw.live/fineract-site/

🎯 Impact

These changes will:

Improve user engagement
Enhance visual feedback
Modernize the website appearance
Maintain performance
Improve accessibility
@rvs @jimjag @raboof @jdailey @kjozsa @vidakovic @mgeiss @IOhacker @myrle-krantz @jdailey

## 🎯 Overview This PR significantly improves the Apache Fineract website's user interface by adding modern animations and interactive elements throughout the site. ## 🔍 Detailed Changes ### 1. Global Animation Enhancements - Added fade-in and slide-up animations for all sections - Implemented scroll-triggered animations for better engagement - Added smooth transitions between states - Optimized performance with hardware acceleration ### 2. Navigation Improvements - Enhanced logo and brand text presentation - Added smooth hover transitions - Improved mobile responsiveness - Added underline animations for nav links ### 3. Interactive Elements - Added hover effects to all cards and panels - Implemented ripple effects for buttons - Enhanced list item interactions - Added gradient animations - Improved table row hover states ### 4. Reference Section Redesign - Modernized link presentations with icons - Added smooth hover transitions - Enhanced visual feedback - Improved mobile layout - Added shine effects ### 5. Visual Feedback - Added micro-interactions - Enhanced hover states - Implemented consistent color transitions - Added subtle animations for better UX ### 6. Performance Optimizations - Used CSS transforms for smooth animations - Implemented efficient transitions - Added debounced scroll handlers - Optimized animation timing ### 7. Accessibility Improvements - Enhanced focus states - Improved color contrast - Maintained keyboard navigation - Added clear visual feedback ## 🔧 Technical Implementation - Used CSS animations and transforms - Implemented cubic-bezier timing functions - Added responsive breakpoints - Used hardware-accelerated properties ## 📱 Mobile Responsiveness - Optimized animations for mobile devices - Adjusted spacing and sizing - Enhanced touch interactions - Improved performance on mobile ## ✅ Testing Checklist - [x] Tested on Chrome, Firefox, Safari - [x] Verified mobile responsiveness - [x] Checked performance metrics - [x] Validated accessibility - [x] Tested all animations - [x] Verified hover states ## 📸 Screenshots [Add before/after screenshots here] ## 🎯 Impact These changes will: - Improve user engagement - Enhance visual feedback - Modernize the website appearance - Maintain performance - Improve accessibility ## 📋 Testing Instructions 1. Navigate through different sections 2. Hover over interactive elements 3. Test on mobile devices 4. Check scroll animations 5. Verify all hover states

IOhacker · 2025-01-08T14:06:16Z

LGTM

index.html

Co-authored-by: Michael Vorburger <[email protected]>

krushndayshmookh

LGTM

index.html

vorburger

Minor inline comment re. HTML escaping of how to pronounce Fineract.

FYI I've posted https://lists.apache.org/thread/g3rxt4b5541mnhoxm13ctzwlsr5o4cfz to ask for more reviews.

index.html

adamsaghy · 2025-01-12T17:10:36Z

@AryanVBW Would you consider undoing the "hover effect"?
Moving slightly the hovered items makes me dizzy and i dont think it is favoured from UX point of view!

jdailey · 2025-01-12T17:47:14Z

index.html

+              <td>1.10.1</td>
+              <td><a href="https://cwiki.apache.org/confluence/display/FINERACT/1.10.1+-+Apache+Fineract">Apache Fineract&reg; 1.10.1</a></td>
+              <td>
+                <a href="https://dlcdn.apache.org/fineract/1.10.1/apache-fineract-1.10.1-binary.tar.gz">apache-fineract-1.10.1-binary.tar.gz</a>


Please revert to the Scarf redirect per our policy.
See https://cwiki.apache.org/confluence/display/FINERACT/FSIP-2+Scarf+Data+Tracking

jdailey

Generally, I'm supportive of the improvements. Please see my correction on scarf tracking and I think also make the hover effects a bit less dramatic.

Has this been tested for low bandwidth and for accessibility ? https://www.w3.org/WAI/test-evaluate/preliminary/

currently our site receives a score of 57 out of 100, with 30 critical issues identified on this tool --> https://www.accessibilitychecker.org

I would like to try to correct many of those issues and definitely would not want to get worse when we do upgrades like this. Links need to be improved for example.

krushndayshmookh · 2025-01-12T22:15:33Z

@*jdailey* I agree with you. Let us improve accessibility. Can we do that in a separate PR?

…

On Sun, 12 Jan 2025 at 23:27, James D ***@***.***> wrote: ***@***.**** commented on this pull request. Generally, I'm supportive of the improvements. Please see my correction on scarf tracking and I think also make the hover effects a bit less dramatic. Has this been tested for low bandwidth and for accessibility ? https://www.w3.org/WAI/test-evaluate/preliminary/ currently our site receives a score of 57 out of 100, with 30 critical issues identified on this tool --> https://www.accessibilitychecker.org I would like to try to correct many of those issues and definitely would not want to get worse when we do upgrades like this. Links need to be improved for example. — Reply to this email directly, view it on GitHub <#35 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACPB5IDCT5H7HBLI5JRBGS32KKUGXAVCNFSM6AAAAABUZID6FKVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDKNBVGQ4DGNBXGY> . You are receiving this because you commented.Message ID: ***@***.***>

jdailey · 2025-01-13T22:33:52Z

@AryanVBW - three items I think before we can merge:

scarf link restored
hover (reduce or redo effect?)
fix ('fīn-,ˌ,rakt) back to (\’fīn-,ә-,rakt)

Updates the pronunciation guide for "Fineract" on the website homepage to use the correct phonetic notation ('fīn-,ә-,rakt) instead of ('fīn-,ˌ,rakt).

AryanVBW · 2025-01-14T12:00:22Z

@AryanVBW - three items I think before we can merge:

scarf link restored

hover (reduce or redo effect?)

fix ('fīn-,ˌ,rakt) back to (\’fīn-,ә-,rakt)

ok sir

AryanVBW · 2025-01-14T12:50:35Z

@AryanVBW Would you consider undoing the "hover effect"? Moving slightly the hovered items makes me dizzy and I don't think it is favoured from a UX point of view!

Definitely, sir. I’m agree with the suggestion

krushndayshmookh · 2025-01-14T19:25:07Z

@AryanVBW did you mean to write "agree" and it got autocorrected to "angry"?

AryanVBW · 2025-01-14T19:28:07Z

@AryanVBW did you mean to write "agree" and it got autocorrected to "angry"?

Apologies, sir. It seems like the auto-correct extension of Chrome is causing this issue. I apologise for it

krushndayshmookh · 2025-01-14T19:30:11Z

Cool. 😂

Please make the hover effects subtle.

index.html

vorburger

LGTM from me, as my code review feedback has been addressed.

But, as per the link to the Fineract mailing list, I'm intentionally NOT merging this myself; I'll leave that up to @jdailey or someone else who is currently a more active member of this community than I have the time for.

… services appearance

Key Improvements: 1. Dark Mode Enhancements: - Improved text visibility and contrast - Added gradient backgrounds for better aesthetics - Enhanced card and border visibility - Optimized theme toggle button 2. Layout Optimizations: - Made verification section more compact - Improved spacing and padding consistency - Enhanced desktop layout with better grid system - Added responsive sidebar navigation 3. Cross-Browser Compatibility: - Added vendor prefixes for better support - Implemented CSS fallbacks - Improved touch device support - Enhanced high contrast mode 4. Performance Improvements: - Added hardware acceleration - Optimized CSS transitions - Reduced layout shifts - Improved scroll performance 5. Accessibility Updates: - Better ARIA labels - Improved keyboard navigation - Enhanced screen reader support - Better color contrast ratios 6. Visual Refinements: - Consistent typography scale - Better icon alignment - Smoother animations - Professional color scheme Technical Details: - Updated CSS variables for theme consistency - Implemented CSS Grid for better layouts - Added Intersection Observer for animations - Improved localStorage theme persistence

AryanVBW · 2025-01-20T20:29:27Z

@krushndayshmookh @jdailey I've completed the requested improvements to the Fineract website. The site is now ready for review with the following enhancements:

Key Improvements:

Removed unnecessary hover effects as instructed to maintain a more professional appearance
Enhanced dark mode visibility throughout the site, especially in critical sections
Optimized the "Verifying Downloads" section to be more compact and aligned with surrounding content
Improved theme toggle functionality
Enhanced cross-browser compatibility and responsive design

Specific Changes:

Solution Providers section: Improved dark mode contrast and readability
Downloads section: Adjusted color scheme for better visibility
Navigation: Streamlined the theme toggle button in the top-right corner
Overall: Reduced animation effects for a more serious, financial-services appropriate appearance

The site now maintains a professional aesthetic while ensuring excellent readability across all color themes and devices. All changes have been tested across major browsers and screen sizes.

Looking forward to your review and feedback.

jdailey · 2025-02-05T20:14:43Z

Hey guys - all css and google resources need to be local and checked in. Per ASF security policies. Please redo the PR please.

meonkeys · 2025-02-05T20:43:36Z

LGTM, but there's a new problem because Apache changed something.

We merged your patch then reverted it because it looked like it broke something, but it seems actually that Apache's change broke our fetching some assets from google (fonts/css/icons) and the missing icons were more obvious.

We're (now) unable to pull down these assets:

https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,latin-ext,cyrillic,cyrillic-ext
https://fonts.googleapis.com/icon?family=Material+Icons

I think this was their change that is affecting us: More strict Content-Security-Policy for ASF websites -- "Brownout is slated for February 1st this year, and full switch for March 1st."

See also https://whimsy.apache.org/site/project/fineract , although I'm not sure why that doesn't show any warnings for googleapis.com.

meonkeys · 2025-02-05T20:45:25Z

@AryanVBW are you able to help us work around the Apache change? Maybe just download and commit the files from googleapis.com, or change our CSP? I'm not sure what the fix is. I also filed https://issues.apache.org/jira/browse/INFRA-26509 and Chris Lambertus says we should download and commit those assets.

Once we solve that, would you mind reopening your PR or creating a new one so we can get your awesome redesign merged in?

update: never mind, I'll see if I can get this working...

meonkeys · 2025-02-05T23:46:09Z

got it working in #37, whew

krushndayshmookh · 2025-02-06T02:15:12Z

Finally!

AryanVBW · 2025-02-08T07:04:38Z

@AryanVBW are you able to help us work around the Apache change? Maybe just download and commit the files from googleapis.com, or change our CSP? I'm not sure what the fix is. I also filed https://issues.apache.org/jira/browse/INFRA-26509 and Chris Lambertus says we should download and commit those assets.

Once we solve that, would you mind reopening your PR or creating a new one so we can get your awesome redesign merged in?

update: never mind, I'll see if I can get this working...

According to what I understand, Apache has imposed a more stringent Content Security Policy (CSP), which is blocking the retrieval of assets from googleapis.com. Does this mean Apache is moving to using its own servers to host these resources? is this correct ?

raboof · 2025-02-08T10:47:44Z

Correct: loading assets from other domains was already against the website policy (https://privacy.apache.org/policies/website-policy.html), infra is now starting to enforce that with CSP. Thanks for 948830d !

vorburger requested changes Jan 8, 2025

View reviewed changes

index.html Outdated Show resolved Hide resolved

index.html Show resolved Hide resolved

index.html Outdated Show resolved Hide resolved

AryanVBW and others added 2 commits January 10, 2025 13:36

Apply suggestions from code review

b67add5

Co-authored-by: Michael Vorburger <[email protected]>

Apply suggestions from code review

9e905d5

Co-authored-by: Michael Vorburger <[email protected]>

krushndayshmookh approved these changes Jan 11, 2025

View reviewed changes

index.html Outdated Show resolved Hide resolved

vorburger requested changes Jan 12, 2025

View reviewed changes

index.html Outdated Show resolved Hide resolved

jdailey self-requested a review January 12, 2025 17:36

jdailey reviewed Jan 12, 2025

View reviewed changes

docs: fix Fineract pronunciation guide in website

dde7591

Updates the pronunciation guide for "Fineract" on the website homepage to use the correct phonetic notation ('fīn-,ә-,rakt) instead of ('fīn-,ˌ,rakt).

vorburger reviewed Jan 17, 2025

View reviewed changes

index.html Outdated Show resolved Hide resolved

Update index.html

75c6807

vorburger approved these changes Jan 17, 2025

View reviewed changes

AryanVBW added 2 commits January 21, 2025 00:19

Remove hover effects and animations for a more professional financial…

f1fa2bd

… services appearance

Merge branch 'asf-site' into asf-site

e8a5d05

jdailey merged commit 0dc63ca into apache:asf-site Feb 5, 2025

Enhanced Website UI with Modern Animations and Interactions and Fix:Binary Download & Source Download Links #35

Enhanced Website UI with Modern Animations and Interactions and Fix:Binary Download & Source Download Links #35

Uh oh!

Conversation

AryanVBW commented Jan 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Overview

🔍 Detailed Changes

1. Global Animation Enhancements

2. Navigation Improvements

3. Interactive Elements

4. Reference Section Redesign

5. Visual Feedback

6. Performance Optimizations

7. Accessibility Improvements

🔧 Technical Implementation

📱 Mobile Responsiveness

✅ Testing Checklist

📸 Screenshots

🎯 Impact

Uh oh!

IOhacker commented Jan 8, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

krushndayshmookh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vorburger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

adamsaghy commented Jan 12, 2025

Uh oh!

jdailey Jan 12, 2025

Choose a reason for hiding this comment

Uh oh!

jdailey left a comment

Choose a reason for hiding this comment

Uh oh!

krushndayshmookh commented Jan 12, 2025 via email

Uh oh!

jdailey commented Jan 13, 2025

Uh oh!

AryanVBW commented Jan 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AryanVBW commented Jan 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

krushndayshmookh commented Jan 14, 2025

Uh oh!

AryanVBW commented Jan 14, 2025

Uh oh!

krushndayshmookh commented Jan 14, 2025

Uh oh!

Uh oh!

vorburger left a comment

Choose a reason for hiding this comment

Uh oh!

AryanVBW commented Jan 20, 2025

Uh oh!

jdailey commented Feb 5, 2025

Uh oh!

meonkeys commented Feb 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meonkeys commented Feb 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meonkeys commented Feb 5, 2025

Uh oh!

krushndayshmookh commented Feb 6, 2025

Uh oh!

AryanVBW commented Feb 8, 2025

Uh oh!

raboof commented Feb 8, 2025

Uh oh!

AryanVBW commented Jan 8, 2025 •

edited

Loading

AryanVBW commented Jan 14, 2025 •

edited

Loading

AryanVBW commented Jan 14, 2025 •

edited

Loading

meonkeys commented Feb 5, 2025 •

edited

Loading

meonkeys commented Feb 5, 2025 •

edited

Loading