<!DOCTYPEhtml>
<htmllang="en"class="light">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Safia Islam Subah | Animated Portfolio</title>
<!-- Custom CSS -->
<linkrel="stylesheet"href="style.css">
<!-- Tailwind CSS CDN -->
<scriptsrc="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Inter for general text, Pacifico for a playful script font -->
<linkrel="preconnect"href="https://fonts.googleapis.com">
<linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin>
<linkhref="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Pacifico&display=swap"rel="stylesheet">
<!-- Font Awesome -->
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Three.js for Background -->
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
tailwind.config = {
darkMode:'class',
theme: {
extend: {
colors: {
'primary-light':'#FFD0E6',
'secondary-light':'#E6E6FA',
'primary-dark':'#3A0150',
'secondary-dark':'#FF007F',
'cosmic-dark':'#150A22',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
script: ['Pacifico', 'cursive'],
},
animation: {
'float':'float 6s ease-in-out infinite',
'pulse-slow':'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'neon-glow':'neon-glow 1.5s ease-in-out infinite alternate',
'spin-slow':'spin 18s linear infinite',
}
}
}
}
</script>
</head>
<bodyclass="bg-gradient-to-br from-primary-light via-white to-secondary-light dark:from-cosmic-dark dark:via-primary-dark dark:to-black text-gray-800 dark:text-gray-100 min-h-screen overflow-x-hidden selection:bg-pink-300 selection:text-white font-sans">
<!-- WebGL Background -->
<canvasid="bg-canvas"></canvas>
<!-- Theme Toggle Button -->
<buttonid="theme-toggle"class="fixed top-5 right-5 z-50 p-3 rounded-full glass-card hover:scale-110 transition-transform duration-300 group shadow-md dark:shadow-secondary-dark/50">
<iclass="fas fa-sun text-yellow-500 text-xl group-hover:rotate-90 transition-transform duration-500 block dark:hidden"></i>
<iclass="fas fa-moon text-secondary-dark text-xl group-hover:-rotate-12 transition-transform duration-500 hidden dark:block animate-pulse-slow"></i>
</button>
<!-- Floating Decorative Elements -->
<!-- <div class="floating-icon top-1/4 left-10 text-3xl text-pink-400 dark:text-secondary-dark opacity-70" style="animation-delay: 0s;">✨</div>
<div class="floating-icon bottom-1/4 right-10 text-5xl text-purple-400 dark:text-purple-300 opacity-60" style="animation-delay: 2s;">🦋</div>
<div class="floating-icon top-20 right-1/4 text-2xl text-yellow-400 dark:text-yellow-300 opacity-80" style="animation-delay: 4s;">💖</div> -->
<!-- Main Container -->
<mainclass="container mx-auto px-4 py-8 relative z-10 max-w-4xl">
<!-- Hero Section -->
<sectionid="hero"class="text-center mb-16 pt-10">
<divclass="relative w-48 h-48 mx-auto mb-6 group animate-float">
<!-- Decorative rotating ring -->
<divclass="absolute inset-0 rounded-full border-4 border-dashed border-pink-300 dark:border-secondary-dark animate-spin-slow opacity-60"></div>
<!-- Profile Image Placeholder -->
<divclass="w-full h-full rounded-full overflow-hidden border-4 border-white dark:border-secondary-dark shadow-xl relative z-10 glass-card flex items-center justify-center bg-white/70 dark:bg-primary-dark/50 hover:shadow-2xl transition-shadow">
<spanclass="text-6xl text-pink-400 dark:text-secondary-dark transform transition-transform group-hover:scale-110">
<iclass="fas fa-crown"></i>
</span>
<!-- User can replace src below with real image -->
</div>
<!-- Absolute Badge -->
<divclass="absolute -bottom-2 -right-2 bg-pink-500 dark:bg-secondary-dark text-white px-4 py-1 rounded-full shadow-lg text-sm font-bold animate-pulse-slow">
Subah
</div>
</div>
<h1class="text-4xl md:text-6xl font-script font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-secondary-dark dark:to-purple-300 animate-pulse-slow">
Safia Islam Subah
</h1>
<divclass="h-10 mb-8">
<pid="daily-title"class="text-xl md:text-2xl font-script text-pink-600 dark:text-primary-light italic transition-all duration-700 overflow-hidden whitespace-nowrap inline-block border-r-4 border-pink-400 dark:border-secondary-dark pr-1 align-bottom">
<!-- Typing effect goes here -->
</p>
</div>
</section>
<!-- Age Counter (Dynamic) -->
<sectionclass="mb-16">
<divclass="glass-card rounded-3xl p-8 text-center card-hover relative overflow-hidden">
<divclass="absolute inset-0 bg-pink-100 dark:bg-secondary-dark opacity-10 rounded-3xl"></div>
<h3class="text-xl uppercase tracking-widest text-gray-500 dark:text-gray-300 mb-4 font-bold relative">Current Age</h3>
<divid="age-display"class="text-6xl md:text-8xl font-extrabold text-gray-800 dark:text-white relative">
<!-- Javascript will populate this -->
</div>
<pclass="mt-2 text-md text-gray-500 dark:text-gray-400 relative">Since November 30, 2025</p>
</div>
</section>
<!-- Dynamic Fun Fact Section -->
<sectionclass="mb-16">
<h2class="text-3xl font-script text-center mb-8 text-purple-600 dark:text-purple-300">💡 Subah's Fun Facts</h2>
<divclass="glass-card rounded-xl p-6 text-center shadow-lg border-2 border-dashed border-pink-300 dark:border-secondary-dark/50">
<iclass="fas fa-brain text-4xl text-yellow-500 mb-4 animate-bounce"></i>
<pid="fun-fact-display"class="text-lg md:text-xl font-medium dark:text-gray-200 min-h-[4rem] flex items-center justify-center transition-opacity duration-500">
Loading first fact...
</p>
<buttononclick="displayNextFact()"class="mt-4 px-6 py-2 bg-pink-500 text-white rounded-full font-bold hover:bg-pink-600 dark:bg-secondary-dark dark:hover:bg-pink-600 transition-all transform hover:scale-105 shadow-md">
Next Insight
</button>
</div>
</section>
<!-- Birth Info Grid -->
<sectionclass="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
<!-- Card 1 (Date of Birth) -->
<divclass="glass-card p-6 rounded-2xl flex flex-col items-center text-center card-hover">
<divclass="w-12 h-12 rounded-full bg-primary-light dark:bg-secondary-dark/30 flex items-center justify-center mb-4 text-pink-600 dark:text-secondary-dark">
<iclass="fas fa-calendar-alt text-xl"></i>
</div>
<h4class="font-bold text-gray-600 dark:text-gray-300">Date of Birth</h4>
<pclass="text-xl font-bold dark:text-white">30 Nov 2025</p>
</div>
<!-- Card 2 (Time) -->
<divclass="glass-card p-6 rounded-2xl flex flex-col items-center text-center card-hover">
<divclass="w-12 h-12 rounded-full bg-primary-light dark:bg-secondary-dark/30 flex items-center justify-center mb-4 text-purple-600 dark:text-purple-300">
<iclass="fas fa-clock text-xl"></i>
</div>
<h4class="font-bold text-gray-600 dark:text-gray-300">Time</h4>
<pclass="text-xl font-bold dark:text-white">12:40 PM</p>
</div>
<!-- Card 3 (Weight) -->
<divclass="glass-card p-6 rounded-2xl flex flex-col items-center text-center card-hover">
<divclass="w-12 h-12 rounded-full bg-primary-light dark:bg-secondary-dark/30 flex items-center justify-center mb-4 text-blue-600 dark:text-blue-300">
<iclass="fas fa-weight-hanging text-xl"></i>
</div>
<h4class="font-bold text-gray-600 dark:text-gray-300">Weight</h4>
<pclass="text-xl font-bold dark:text-white">2.5 kg</p>
</div>
<!-- Card 4 (Born At) - MODIFIED TO BE THE SAME SIZE -->
<divclass="glass-card p-6 rounded-2xl flex flex-col items-center text-center card-hover col-span-1 md:col-span-1 lg:col-span-3">
<divclass="w-12 h-12 rounded-full bg-primary-light dark:bg-secondary-dark/30 flex items-center justify-center mb-4 text-green-600 dark:text-green-300">
<iclass="fas fa-map-marker-alt text-xl"></i>
</div>
<h4class="font-bold text-gray-600 dark:text-gray-300">Born At</h4>
<pclass="text-xl font-bold dark:text-white">Islami Bank Hospital, Dhaka, Bangladesh</p>
</div>
</section>
<!-- Family Section -->
<sectionclass="mb-16">
<h2class="text-3xl font-script text-center mb-8 text-pink-600 dark:text-secondary-dark">My Royal Crew</h2>
<divclass="flex flex-col md:flex-row justify-center gap-6">
<divclass="glass-card flex-1 p-6 rounded-2xl flex items-center space-x-4 card-hover">
<divclass="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-3xl shadow-inner">👨🍼</div>
<div>
<pclass="text-sm uppercase tracking-wide text-pink-500 font-bold">Proud Father</p>
<h3class="text-xl font-bold dark:text-white">Saiful Islam</h3>
</div>
</div>
<divclass="glass-card flex-1 p-6 rounded-2xl flex items-center space-x-4 card-hover">
<divclass="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-3xl shadow-inner">👩🍼</div>
<div>
<pclass="text-sm uppercase tracking-wide text-pink-500 font-bold">Lovely Mother</p>
<h3class="text-xl font-bold dark:text-white">Sumaia Binte Haque</h3>
</div>
</div>
</div>
</section>
<!-- Milestones Timeline (Restored Structure) -->
<sectionclass="mb-16">
<h2class="text-3xl font-script text-center mb-8 text-pink-600 dark:text-secondary-dark">Tiny Steps</h2>
<!-- Horizontal Scroll Container -->
<divclass="flex overflow-x-auto gap-6 pb-8 snap-x no-scrollbar px-8 pt-6">
<!-- Timeline Item 1 -->
<divclass="min-w-[280px] snap-center glass-card p-6 rounded-2xl relative border-l-4 border-pink-400 card-hover">
<spanclass="absolute -top-3 -right-3 bg-pink-400 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm shadow-lg">1</span>
<h3class="font-bold text-lg dark:text-white font-sans">Hello World</h3>
<pclass="text-sm text-pink-500 font-bold mb-2 font-sans">30 Nov 2025</p>
<pclass="text-sm text-gray-600 dark:text-gray-300 font-sans">I arrived at 12:40 PM! The journey begins.</p>
</div>
<!-- Timeline Item 2 -->
<divclass="min-w-[280px] snap-center glass-card p-6 rounded-2xl relative border-l-4 border-purple-400 card-hover">
<spanclass="absolute -top-3 -right-3 bg-purple-400 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm shadow-lg">2</span>
<h3class="font-bold text-lg dark:text-white font-sans">Home Sweet Home</h3>
<pclass="text-sm text-purple-500 font-bold mb-2 font-sans">Coming Soon</p>
<pclass="text-sm text-gray-600 dark:text-gray-300 font-sans">My first day at my forever home.</p>
</div>
<!-- Timeline Item 3 -->
<divclass="min-w-[280px] snap-center glass-card p-6 rounded-2xl relative border-l-4 border-blue-400 card-hover">
<spanclass="absolute -top-3 -right-3 bg-blue-400 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm shadow-lg">3</span>
<h3class="font-bold text-lg dark:text-white font-sans">First Smile</h3>
<pclass="text-sm text-blue-500 font-bold mb-2 font-sans">Coming Soon</p>
<pclass="text-sm text-gray-600 dark:text-gray-300 font-sans">Waiting to melt everyone's hearts.</p>
</div>
</div>
</section>
<!-- Photo Album Section (Placeholders) -->
<sectionclass="mb-16">
<h2class="text-3xl font-script text-center mb-8 text-purple-600 dark:text-purple-300">📸 The Album: Early Snaps</h2>
<divclass="grid grid-cols-2 md:grid-cols-4 gap-4">
<divclass="aspect-square rounded-xl overflow-hidden glass-card p-2 group card-hover bg-primary-light/50 dark:bg-primary-dark/30">
<divclass="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-2xl text-pink-500 transition-all group-hover:scale-105">
<iclass="fas fa-camera"></i>
<spanclass="sr-only">Day 1</span>
</div>
</div>
<divclass="aspect-square rounded-xl overflow-hidden glass-card p-2 group card-hover bg-primary-light/50 dark:bg-primary-dark/30">
<divclass="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-2xl text-purple-500 transition-all group-hover:scale-105">
<iclass="fas fa-box"></i>
<spanclass="sr-only">First Gift</span>
</div>
</div>
<divclass="aspect-square rounded-xl overflow-hidden glass-card p-2 group card-hover bg-primary-light/50 dark:bg-primary-dark/30">
<divclass="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-2xl text-green-500 transition-all group-hover:scale-105">
<iclass="fas fa-hand-holding-heart"></i>
<spanclass="sr-only">First Hold</span>
</div>
</div>
<divclass="aspect-square rounded-xl overflow-hidden glass-card p-2 group card-hover bg-primary-light/50 dark:bg-primary-dark/30">
<divclass="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-2xl text-yellow-500 transition-all group-hover:scale-105">
<iclass="fas fa-star"></i>
<spanclass="sr-only">Nap Time</span>
</div>
</div>
</div>
</section>
<!-- Blessings / Dua Section -->
<sectionclass="mb-16 text-center">
<divclass="glass-card p-8 rounded-3xl relative overflow-hidden border border-amber-300 dark:border-amber-700/50 card-hover">
<divclass="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-transparent via-amber-400 dark:via-amber-600 to-transparent animate-pulse-slow"></div>
<h2class="font-sans text-xl md:text-2xl mb-4 text-gray-800 dark:text-gray-100 font-bold">A Dua for Subah</h2>
<pclass="font-sans text-sm text-gray-600 dark:text-gray-300 font-serif italic max-w-2xl mx-auto mb-4">
"May Allah bless you in His gift to you, may you give thanks to the Giver of this gift, may the child reach the maturity of years, and may you be granted its righteousness."
</p>
<pclass="font-sans text-sm text-gray-700 dark:text-gray-200 max-w-2xl mx-auto">
بَارَكَ اللَّهُ لَكِ فِي الْمَوْهُوبِ لَكِ، وَشَكَرْتِ الْوَاهِبَ، وَبَلَغَتْ أَشُدَّهَا، وَرُزِقْتِ بِرَّهَا
</p>
</div>
</section>
<!-- Footer -->
<footerclass="text-center pb-8 pt-4 border-t border-pink-200 dark:border-secondary-dark/30">
<pclass="text-gray-500 dark:text-gray-400 font-sans text-sm flex items-center justify-center gap-2 mb-1">
Made with <iclass="fas fa-heart text-red-500 animate-pulse"></i> for <spanclass="text-pink-600 dark:text-secondary-dark font-bold">Subah</span>
</p>
<pclass="text-gray-500 dark:text-gray-400 font-sans text-xs">
Gift 🎁 from Your Younger Mama
</p>
</footer>
</main>
</body>
<scriptsrc="script.js"></script>
</html>