add cert

first commit
docs: add README with deployment instructions
2026-03-11 15:56:03 +01:00 · 2026-03-11 15:44:38 +01:00 · 2026-03-11 15:09:16 +01:00 · 2026-03-11 15:06:02 +01:00 · 2026-03-11 15:00:56 +01:00 · 2026-03-11 14:57:21 +01:00
27 changed files with 1151 additions and 15 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+.git
+*.md
+.env*
--- a/14
+++ b/14
@@ -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;"]
--- a/README.md
+++ b/README.md
@@ -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
--- a/docs/plans/2026-03-11-birthday-roast-gallery.md
+++ b/docs/plans/2026-03-11-birthday-roast-gallery.md
@@ -327,13 +327,13 @@ export default function BirthdayBanner({ name = "Linh" }) {
      <div className="absolute inset-0 bg-black/10"></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 {name}! 🎉
+          🎂 Happy birthday {name}! 🎉
        </h1>
        <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 className="mt-4 text-lg opacity-75">
-          (Click anywhere for more confetti 🎊)
+          (Click để ăn pháo bông vào mồm 🎊)
        </p>
      </div>
    </header>
@@ -375,7 +375,7 @@ function App() {
      <BirthdayBanner name="Linh" />
      <RoastGallery />
      <footer className="text-center py-8 text-gray-500">
-        <p>Made with 💖 for the birthday roast</p>
+        <p>Made with 💩</p>
      </footer>
    </div>
  )
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Happy Birthday Linh! 🎂</title>
+    <title>Happy birthday b Linh! 🎂</title>
  </head>
  <body>
    <div id="root"></div>
--- a/k8s/deployment.yaml
+++ b/k8s/deployment.yaml
@@ -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"
--- a/k8s/ingress.yaml
+++ b/k8s/ingress.yaml
@@ -0,0 +1,23 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: cmsn-b-linh
+  annotations:
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+spec:
+  ingressClassName: traefik
+  tls:
+    - hosts:
+        - cmsn-b-linh.duylai.duckdns.org
+      secretName: cmsn-b-linh-tls
+  rules:
+    - host: cmsn-b-linh.duylai.duckdns.org
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: cmsn-b-linh
+                port:
+                  number: 80
--- a/k8s/service.yaml
+++ b/k8s/service.yaml
@@ -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
--- a/nginx.conf
+++ b/nginx.conf
@@ -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;
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -16,15 +16,15 @@
  "license": "ISC",
  "description": "",
  "dependencies": {
+    "canvas-confetti": "^1.9.4",
    "react": "^19.2.4",
    "react-dom": "^19.2.4"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.7.0",
    "autoprefixer": "^10.4.27",
-    "canvas-confetti": "^1.9.4",
    "postcss": "^8.5.8",
-    "tailwindcss": "^4.2.1",
+    "tailwindcss": "^3.4.19",
    "vite": "^6.4.1"
  }
 }
--- a/public/images/.gitkeep
+++ b/public/images/.gitkeep
--- a/public/images/1.jpeg
+++ b/public/images/1.jpeg
--- a/public/images/460885e2-fedc-4667-9d89-81479e0a037d.jpeg
+++ b/public/images/460885e2-fedc-4667-9d89-81479e0a037d.jpeg
--- a/public/images/4734bcf9-c588-4a25-8dec-ccf240f884d1.jpeg
+++ b/public/images/4734bcf9-c588-4a25-8dec-ccf240f884d1.jpeg
--- a/public/images/474e8db1-687e-4ec3-b3c1-50ebf5a2db5a.jpeg
+++ b/public/images/474e8db1-687e-4ec3-b3c1-50ebf5a2db5a.jpeg
--- a/public/images/74f71867-ee8e-4c53-99ba-753e59b2ab20.jpeg
+++ b/public/images/74f71867-ee8e-4c53-99ba-753e59b2ab20.jpeg
--- a/public/images/894687fb-a7b7-4f5d-b64d-19fe27357cc8.jpeg
+++ b/public/images/894687fb-a7b7-4f5d-b64d-19fe27357cc8.jpeg
--- a/public/images/8ca58a8d-0c2d-4600-b8ec-ec21c4e1724a.jpeg
+++ b/public/images/8ca58a8d-0c2d-4600-b8ec-ec21c4e1724a.jpeg
--- a/public/images/c21c7258-1eb6-4ebc-bd90-177230493b53.jpeg
+++ b/public/images/c21c7258-1eb6-4ebc-bd90-177230493b53.jpeg
--- a/public/images/d1b53da2-f405-47ef-b239-ccf5a7a27bcb.jpeg
+++ b/public/images/d1b53da2-f405-47ef-b239-ccf5a7a27bcb.jpeg
--- a/public/images/f1f58a34-7d98-4d4f-affe-f39207044d80.jpeg
+++ b/public/images/f1f58a34-7d98-4d4f-affe-f39207044d80.jpeg
--- a/public/roasts.json
+++ b/public/roasts.json
@@ -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" }
+]
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -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
--- a/src/components/BirthdayBanner.jsx
+++ b/src/components/BirthdayBanner.jsx
@@ -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>
+  )
+}
--- a/src/components/RoastCard.jsx
+++ b/src/components/RoastCard.jsx
@@ -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>
+  )
+}
--- a/src/components/RoastGallery.jsx
+++ b/src/components/RoastGallery.jsx
@@ -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>
+  )
+}
Author	SHA1	Message	Date
Khang Duy LAI	c8c7b9e4a2	add cert	2026-03-11 15:56:03 +01:00
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