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