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

Compare commits

base: duylai:a4836dcb469ceb6adb0860be939790c4d369c945
Branches Tags
duylai:main
..
compare: duylai:d91fb0d411455ccfd54f3e563fc72743968f60ec
Branches Tags
duylai:main

10 Commits
a4836dcb46 ... d91fb0d411

Author SHA1 Message Date
Khang Duy LAI
d91fb0d411 first commit 2026-03-11 15:44:38 +01:00
Khang Duy LAI
8b354795a4 docs: add README with deployment instructions 2026-03-11 15:09:16 +01:00
Khang Duy LAI
8a16954c93 chore: add placeholder for images 2026-03-11 15:06:02 +01:00
Khang Duy LAI
78aaf56149 feat: add Kubernetes manifests for Traefik ingress 2026-03-11 15:00:56 +01:00
Khang Duy LAI
9c4bce0473 feat: add multi-stage Docker build with Nginx 2026-03-11 14:57:21 +01:00
Khang Duy LAI
5a14c7ac4c feat: integrate all components in App 2026-03-11 14:49:56 +01:00
Khang Duy LAI
924cc340b4 feat: add BirthdayBanner with confetti animation 2026-03-11 14:46:08 +01:00
Khang Duy LAI
8d57f76a86 feat: add RoastGallery component with JSON config 
- Create RoastGallery component that loads photos from roasts.json
- Responsive grid layout (2/3/4 columns based on screen size)
- Vietnamese section title "Bộ Sưu Tập Huyền Thoại"
 2026-03-11 14:42:52 +01:00
Khang Duy LAI
fe729e40a0 feat: add RoastCard component with hover effects 2026-03-11 14:38:44 +01:00
Khang Duy LAI
55a51617ef fix: move canvas-confetti to dependencies, downgrade tailwind to v3 2026-03-11 14:36:06 +01:00
27 changed files with 1146 additions and 15 deletions
Expand all files Collapse all files

5
.dockerignore Normal file
View File

@@ -0,0 +1,5 @@
node_modules
dist
.git
*.md
.env*

14
Dockerfile Normal file
View File

@@ -0,0 +1,14 @@
# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Runtime stage
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

39
README.md Normal file
View File

@@ -0,0 +1,39 @@
# Birthday Roast Gallery
A fun birthday meme website for roasting your friends with their best (worst) moments.
## Development
```bash
npm install
npm run dev
```
## Adding Photos
1. Add images to `public/images/` folder
2. Update `public/roasts.json` with image filenames and Vietnamese captions
3. Rebuild and redeploy
## Docker Build
```bash
docker build -t cmsn-b-linh:latest .
```
## Kubernetes Deployment
1. Push image to your registry:
```bash
docker tag cmsn-b-linh:latest your-registry/cmsn-b-linh:latest
docker push your-registry/cmsn-b-linh:latest
```
2. Update `k8s/deployment.yaml` with your registry image
3. Apply manifests:
```bash
kubectl apply -f k8s/
```
4. Access at: https://cmsn-b-linh.duylai.duckdns.org

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>

29
k8s/deployment.yaml Normal file
View File

@@ -0,0 +1,29 @@
apiVersion: apps/v1
kind: Deployment
metadata:
name: cmsn-b-linh
labels:
app: cmsn-b-linh
spec:
replicas: 1
selector:
matchLabels:
app: cmsn-b-linh
template:
metadata:
labels:
app: cmsn-b-linh
spec:
containers:
- name: nginx
image: cmsn-b-linh:latest # Change to your registry
imagePullPolicy: IfNotPresent
ports:
- containerPort: 80
resources:
requests:
cpu: "50m"
memory: "64Mi"
limits:
cpu: "100m"
memory: "128Mi"

18
k8s/ingress.yaml Normal file
View File

@@ -0,0 +1,18 @@
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: cmsn-b-linh
annotations:
traefik.ingress.kubernetes.io/router.entrypoints: web
spec:
rules:
- host: cmsn-b-linh.duylai.duckdns.org
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: cmsn-b-linh
port:
number: 80

11
k8s/service.yaml Normal file
View File

@@ -0,0 +1,11 @@
apiVersion: v1
kind: Service
metadata:
name: cmsn-b-linh
spec:
selector:
app: cmsn-b-linh
ports:
- port: 80
targetPort: 80
type: ClusterIP

22
nginx.conf Normal file
View File

@@ -0,0 +1,22 @@
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Gzip compression
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1000;
# Cache static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# SPA fallback
location / {
try_files $uri $uri/ /index.html;
}
}

862
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -16,15 +16,15 @@
"license": "ISC", "license": "ISC",
"description": "", "description": "",
"dependencies": { "dependencies": {
"canvas-confetti": "^1.9.4",
"react": "^19.2.4", "react": "^19.2.4",
"react-dom": "^19.2.4" "react-dom": "^19.2.4"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react": "^4.7.0", "@vitejs/plugin-react": "^4.7.0",
"autoprefixer": "^10.4.27", "autoprefixer": "^10.4.27",
"canvas-confetti": "^1.9.4",
"postcss": "^8.5.8", "postcss": "^8.5.8",
"tailwindcss": "^4.2.1", "tailwindcss": "^3.4.19",
"vite": "^6.4.1" "vite": "^6.4.1"
} }
} }

0
public/images/.gitkeep Normal file
View File

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 Normal file
View File

@@ -0,0 +1,11 @@
[
{ "image": "460885e2-fedc-4667-9d89-81479e0a037d.jpeg" },
{ "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" }
]

16
src/App.jsx Normal file
View File

@@ -0,0 +1,16 @@
import BirthdayBanner from './components/BirthdayBanner'
import RoastGallery from './components/RoastGallery'
function App() {
return (
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
<BirthdayBanner name="Linh" />
<RoastGallery />
<footer className="text-center py-8 text-gray-500">
<p>Made with 💩</p>
</footer>
</div>
)
}
export default App

70
src/components/BirthdayBanner.jsx Normal file
View File

@@ -0,0 +1,70 @@
import { useEffect } from 'react'
import confetti from 'canvas-confetti'
export default function BirthdayBanner({ name = "Linh" }) {
useEffect(() => {
// Fire confetti on load
const duration = 3 * 1000
const animationEnd = Date.now() + duration
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
function randomInRange(min, max) {
return Math.random() * (max - min) + min
}
const interval = setInterval(function() {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) {
return clearInterval(interval)
}
const particleCount = 50 * (timeLeft / duration)
confetti({
...defaults,
particleCount,
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
})
confetti({
...defaults,
particleCount,
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
})
}, 250)
return () => clearInterval(interval)
}, [])
const handleClick = () => {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
})
}
return (
<header
className="relative text-white py-16 md:py-24 cursor-pointer overflow-hidden"
onClick={handleClick}
style={{
backgroundImage: `url(/images/1.jpeg)`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
>
<div className="absolute inset-0 bg-black/40"></div>
<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">
🎂 Happy birthday b {name}! 🎉
</h1>
<p className="text-xl md:text-2xl font-medium opacity-90">
Chúc mừng sinh nhật!
</p>
<p className="mt-4 text-lg opacity-75">
(Click để ăn pháo bông vào mồm ✨)
</p>
</div>
</header>
)
}

20
src/components/RoastCard.jsx Normal file
View File

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

30
src/components/RoastGallery.jsx Normal file
View File

@@ -0,0 +1,30 @@
import { useState, useEffect } from 'react'
import RoastCard from './RoastCard'
export default function RoastGallery() {
const [roasts, setRoasts] = useState([])
useEffect(() => {
fetch('/roasts.json')
.then((res) => res.json())
.then((data) => setRoasts(data))
.catch((err) => console.error('Failed to load roasts:', err))
}, [])
return (
<section className="max-w-7xl mx-auto px-4 py-12">
<h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
📸 Phd hoá học
</h2>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
{roasts.map((roast, index) => (
<RoastCard
key={index}
image={roast.image}
caption={roast.caption}
/>
))}
</div>
</section>
)
}