duylai/cmsn-b-linh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Khang Duy LAI
2026-03-11 15:44:38 +01:00
parent 8b354795a4
commit d91fb0d411
17 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/plans/2026-03-11-birthday-roast-gallery.md
View File

@@ -327,13 +327,13 @@ export default function BirthdayBanner({ name = "Linh" }) {
<div className="absolute inset-0 bg-black/10"></div> <div className="absolute inset-0 bg-black/10"></div>
<div className="relative z-10 max-w-4xl mx-auto text-center px-4"> <div className="relative z-10 max-w-4xl mx-auto text-center px-4">
<h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce"> <h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce">
🎂 Happy Birthday {name}! 🎉 🎂 Happy birthday {name}! 🎉
</h1> </h1>
<p className="text-xl md:text-2xl font-medium opacity-90"> <p className="text-xl md:text-2xl font-medium opacity-90">
Chúc mừng sinh nhật! Click để ăn confetti! ✨ Chúc mừng sinh nhật!
</p> </p>
<p className="mt-4 text-lg opacity-75"> <p className="mt-4 text-lg opacity-75">
(Click anywhere for more confetti 🎊) (Click để ăn pháo bông vào mồm 🎊)
</p> </p>
</div> </div>
</header> </header>
@@ -375,7 +375,7 @@ function App() {
<BirthdayBanner name="Linh" /> <BirthdayBanner name="Linh" />
<RoastGallery /> <RoastGallery />
<footer className="text-center py-8 text-gray-500"> <footer className="text-center py-8 text-gray-500">
<p>Made with 💖 for the birthday roast</p> <p>Made with 💩</p>
</footer> </footer>
</div> </div>
) )

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Happy Birthday Linh! 🎂</title> <title>Happy birthday b Linh! 🎂</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
public/images/1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
public/images/460885e2-fedc-4667-9d89-81479e0a037d.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
public/images/4734bcf9-c588-4a25-8dec-ccf240f884d1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

BIN
public/images/474e8db1-687e-4ec3-b3c1-50ebf5a2db5a.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
public/images/74f71867-ee8e-4c53-99ba-753e59b2ab20.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

BIN
public/images/894687fb-a7b7-4f5d-b64d-19fe27357cc8.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
public/images/8ca58a8d-0c2d-4600-b8ec-ec21c4e1724a.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
public/images/c21c7258-1eb6-4ebc-bd90-177230493b53.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
public/images/d1b53da2-f405-47ef-b239-ccf5a7a27bcb.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

BIN
public/images/f1f58a34-7d98-4d4f-affe-f39207044d80.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

11
public/roasts.json
View File

@@ -1,4 +1,11 @@
[ [
{ "image": "placeholder-1.jpg", "caption": "Thêm ảnh vào thư mục public/images/ nhé! 😄" }, { "image": "460885e2-fedc-4667-9d89-81479e0a037d.jpeg" },
{ "image": "placeholder-2.jpg", "caption": "Chỉnh caption trong public/roasts.json" } { "image": "4734bcf9-c588-4a25-8dec-ccf240f884d1.jpeg" },
{ "image": "474e8db1-687e-4ec3-b3c1-50ebf5a2db5a.jpeg" },
{ "image": "74f71867-ee8e-4c53-99ba-753e59b2ab20.jpeg" },
{ "image": "894687fb-a7b7-4f5d-b64d-19fe27357cc8.jpeg" },
{ "image": "8ca58a8d-0c2d-4600-b8ec-ec21c4e1724a.jpeg" },
{ "image": "c21c7258-1eb6-4ebc-bd90-177230493b53.jpeg" },
{ "image": "d1b53da2-f405-47ef-b239-ccf5a7a27bcb.jpeg" },
{ "image": "f1f58a34-7d98-4d4f-affe-f39207044d80.jpeg" }
] ]

2
src/App.jsx
View File

@@ -7,7 +7,7 @@ function App() {
<BirthdayBanner name="Linh" /> <BirthdayBanner name="Linh" />
<RoastGallery /> <RoastGallery />
<footer className="text-center py-8 text-gray-500"> <footer className="text-center py-8 text-gray-500">
<p>Made with 💖 for the birthday roast</p> <p>Made with 💩</p>
</footer> </footer>
</div> </div>
) )

15
src/components/BirthdayBanner.jsx
View File

@@ -45,19 +45,24 @@ export default function BirthdayBanner({ name = "Linh" }) {
return ( return (
<header <header
className="relative bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white py-16 md:py-24 cursor-pointer overflow-hidden" className="relative text-white py-16 md:py-24 cursor-pointer overflow-hidden"
onClick={handleClick} onClick={handleClick}
style={{
backgroundImage: `url(/images/1.jpeg)`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
> >
<div className="absolute inset-0 bg-black/10"></div> <div className="absolute inset-0 bg-black/40"></div>
<div className="relative z-10 max-w-4xl mx-auto text-center px-4"> <div className="relative z-10 max-w-4xl mx-auto text-center px-4">
<h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce"> <h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce">
🎂 Happy Birthday {name}! 🎉 🎂 Happy birthday b {name}! 🎉
</h1> </h1>
<p className="text-xl md:text-2xl font-medium opacity-90"> <p className="text-xl md:text-2xl font-medium opacity-90">
Chúc mừng sinh nhật! Click để ăn confetti! ✨ Chúc mừng sinh nhật!
</p> </p>
<p className="mt-4 text-lg opacity-75"> <p className="mt-4 text-lg opacity-75">
(Click anywhere for more confetti 🎊) (Click để ăn pháo bông vào mồm ✨)
</p> </p>
</div> </div>
</header> </header>

14
src/components/RoastCard.jsx
View File

@@ -4,15 +4,17 @@ export default function RoastCard({ image, caption }) {
<div className="aspect-square overflow-hidden"> <div className="aspect-square overflow-hidden">
<img <img
src={`/images/${image}`} src={`/images/${image}`}
alt={caption} alt={caption || 'Roast photo'}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
/> />
</div> </div>
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4"> {caption && (
<p className="text-white text-sm md:text-base font-medium text-center"> <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
{caption} <p className="text-white text-sm md:text-base font-medium text-center">
</p> {caption}
</div> </p>
</div>
)}
</div> </div>
) )
} }

2
src/components/RoastGallery.jsx
View File

@@ -14,7 +14,7 @@ export default function RoastGallery() {
return ( return (
<section className="max-w-7xl mx-auto px-4 py-12"> <section className="max-w-7xl mx-auto px-4 py-12">
<h2 className="text-3xl font-bold text-center mb-8 text-gray-800"> <h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
📸 Bộ Sưu Tập "Huyền Thoại" 📸 Phd hoá học
</h2> </h2>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6"> <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
{roasts.map((roast, index) => ( {roasts.map((roast, index) => (