Task 11: Implement scroll animations and responsive design
- 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
This commit is contained in:
+1
-1
@@ -27,7 +27,7 @@ function App() {
|
||||
{phase === 'content' && (
|
||||
<>
|
||||
<FloatingNav />
|
||||
<main className="max-w-[1000px] mx-auto px-8">
|
||||
<main className="max-w-[1000px] mx-auto px-5 xs:px-6 md:px-8">
|
||||
<Hero />
|
||||
|
||||
<Skills />
|
||||
|
||||
Reference in New Issue
Block a user