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
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { useState } from 'react'
|
|
import type { Phase } from './types'
|
|
import { BootSequence } from './components/BootSequence'
|
|
import { ECGAnimation } from './components/ECGAnimation'
|
|
import { FloatingNav } from './components/FloatingNav'
|
|
import { Hero } from './components/Hero'
|
|
import { Skills } from './components/Skills'
|
|
import { Experience } from './components/Experience'
|
|
import { Education } from './components/Education'
|
|
import { Projects } from './components/Projects'
|
|
import { Contact } from './components/Contact'
|
|
import { Footer } from './components/Footer'
|
|
|
|
function App() {
|
|
const [phase, setPhase] = useState<Phase>('boot')
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
{phase === 'boot' && (
|
|
<BootSequence onComplete={() => setPhase('ecg')} />
|
|
)}
|
|
|
|
{phase === 'ecg' && (
|
|
<ECGAnimation onComplete={() => setPhase('content')} />
|
|
)}
|
|
|
|
{phase === 'content' && (
|
|
<>
|
|
<FloatingNav />
|
|
<main className="max-w-[1000px] mx-auto px-5 xs:px-6 md:px-8">
|
|
<Hero />
|
|
|
|
<Skills />
|
|
|
|
<Experience />
|
|
|
|
<Education />
|
|
|
|
<Projects />
|
|
|
|
<Contact />
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|