6cc54d8a29
- Add xs (480px) breakpoint to tailwind config for mobile - Standardize scroll-reveal animations to opacity 0→1, y 24→0 - Add responsive padding to main container (px-5 xs:px-6 md:px-8) - Add responsive section padding (py-12 xs:py-16 md:py-20) - FloatingNav: responsive width and font/padding on mobile - Hero: responsive vitals grid, title font clamp to 28px min - Skills: responsive grid (2→3→auto-fit), smaller gauges on mobile - Experience: responsive card padding, ECG decoration size - Education/Projects: responsive grids matching concept.html - Contact/Footer: responsive padding
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
|
|
const Footer: React.FC = () => {
|
|
return (
|
|
<motion.footer
|
|
initial={{ opacity: 0, y: 16 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-50px' }}
|
|
transition={{ duration: 0.5, ease: 'easeOut' }}
|
|
className="text-center pt-8 xs:pt-12 pb-6 xs:pb-8 border-t border-slate-200"
|
|
>
|
|
<svg
|
|
className="block mx-auto mb-3"
|
|
width="120"
|
|
height="20"
|
|
viewBox="0 0 120 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M 0 10 L 35 10 L 40 10 C 42 10 43 7 45 7 C 47 7 48 10 50 10 L 54 10 L 56 13 L 60 2 L 64 15 L 66 10 L 70 10 C 72 10 73 7 75 7 C 77 7 78 10 80 10 L 120 10"
|
|
stroke="#00897B"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
opacity="0.3"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
<p className="font-secondary text-xs text-muted">
|
|
Andy Charlwood — MPharm, GPhC Registered Pharmacist
|
|
</p>
|
|
</motion.footer>
|
|
)
|
|
}
|
|
|
|
export { Footer }
|