Overview
The HireMe component is a fixed-position floating action button (FAB) that encourages visitors to get in touch. It features a bouncing animation to grab attention and smoothly scrolls users to the contact form when clicked.Features
- Fixed position in bottom-right corner
- Bouncing animation to attract attention
- Smooth scroll to contact section
- Neomorphic design with border and shadow
- Hidden on mobile, visible on tablet and up
- Hover effects with shadow transition
Implementation
The component is located atsrc/components/HireMe/HireMe.jsx:
How It Works
Anchor Link to Contact Section
The button uses a hash link to scroll to the contact section:id="contact":
Smooth Scrolling
Smooth scrolling is enabled globally inindex.css:
CSS Module Styling
Fixed Positioning
- Stays fixed in the viewport
- Positioned 2rem from bottom and right edges
- High z-index (40) keeps it above other content
- Hidden on mobile (< 768px) to avoid cluttering small screens
Bounce Animation
Button Styling
- Circular shape (border-radius: 9999px)
- Fixed size (5rem × 5rem)
- Primary color background
- Thick white border (4px)
- Neomorphic shadow effect
Hover Effects
- Shadow disappears
- Button shifts down and right (4px)
- Bounce animation stops
- Creates a “pressed” effect
Customization
Change Button Text
Modify the text inHireMe.jsx:
Change Position
Move to different corners: Bottom-left:Adjust Size
Change Colors
Update the background color:Modify Animation Speed
Disable Animation
Change Bounce Height
Show on Mobile
Remove the media query display rule:Add Icon
Include a Material Icon:Change Link Target
Link to a different section:Adjust Shadow Effect
Modify the neomorphic shadow inindex.css:
Usage in App
The HireMe component should be placed at the root level of your app so it appears on all pages:Accessibility
Keyboard Navigation
The button is fully keyboard accessible as it’s a standard anchor link.Screen Readers
The text is descriptive, but you can add an aria-label for clarity:Reduced Motion
Respect user preferences for reduced motion:HireMe.module.css to disable the bounce animation for users who prefer reduced motion.
Focus State
Add a focus style for keyboard navigation:CSS Variables Used
--color-primary- Button background color--shadow-neo- Neomorphic shadow effect
Browser Support
- Modern browsers
- CSS animations support required
- Position: fixed support required
- Flexbox support required
- CSS custom properties support required
Performance
- Pure CSS animation (GPU accelerated)
- No JavaScript overhead
- Minimal DOM footprint
- Fixed positioning doesn’t affect layout reflows