admin
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
86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
|
|
interface VitalCardProps {
|
|
value: string
|
|
label: string
|
|
valueSize?: 'default' | 'small' | 'medium'
|
|
delay?: number
|
|
}
|
|
|
|
function VitalCard({ value, label, valueSize = 'default', delay = 0 }: VitalCardProps) {
|
|
const sizeClasses = {
|
|
default: 'text-[28px]',
|
|
small: 'text-base',
|
|
medium: 'text-lg'
|
|
}
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay, ease: 'easeOut' }}
|
|
className="bg-card-bg rounded-2xl px-6 py-5 shadow-sm border-t-[3px] border-teal min-w-[160px] text-center transition-all duration-300 hover:shadow-md hover:-translate-y-0.5"
|
|
>
|
|
<div className={`font-primary font-bold text-heading leading-tight ${sizeClasses[valueSize]}`}>
|
|
{value}
|
|
</div>
|
|
<div className="font-secondary text-[11px] uppercase tracking-wide text-muted mt-1">
|
|
{label}
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section
|
|
id="about"
|
|
className="min-h-screen flex flex-col justify-center items-center text-center py-12 xs:py-16 md:py-20"
|
|
>
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 24 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
|
className="font-primary font-bold text-heading leading-tight"
|
|
style={{ fontSize: 'clamp(28px, 5vw, 52px)' }}
|
|
>
|
|
Andy Charlwood
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.15 }}
|
|
className="text-muted text-base mt-2"
|
|
>
|
|
Deputy Head of Population Health & Data Analysis
|
|
</motion.p>
|
|
|
|
<motion.span
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
className="inline-block mt-1 px-4 py-1 border border-teal rounded-full text-xs text-teal font-medium"
|
|
>
|
|
Norwich, UK
|
|
</motion.span>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.3 }}
|
|
className="mt-6 max-w-[560px] text-text text-[15px] leading-[1.8]"
|
|
>
|
|
GPhC Registered Pharmacist specialising in medicines optimisation, population health analytics, and NHS efficiency programmes. Bridging clinical pharmacy with data science to drive meaningful improvements in patient outcomes.
|
|
</motion.p>
|
|
|
|
<div className="grid grid-cols-1 xs:grid-cols-2 md:flex gap-4 mt-10 justify-center md:flex-wrap">
|
|
<VitalCard value="10+" label="Years Experience" delay={0.4} />
|
|
<VitalCard value="Python/SQL/BI" label="Analytics Stack" valueSize="small" delay={0.5} />
|
|
<VitalCard value="Pop. Health" label="Focus Area" valueSize="medium" delay={0.6} />
|
|
<VitalCard value="NHS N&W" label="System" valueSize="medium" delay={0.7} />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|