commit 62a9d5d828a9f93ad1ee66e27fc436ec010d9635 Author: tiennm99 Date: Mon Apr 27 08:11:22 2026 +0700 feat: initial programming fengshui presentation page Static site presenting the 'Lựa chọn ngôn ngữ lập trình theo phong thuỷ' image from toidicodedao.com with Ngũ Hành element cards and source credit. Includes GitHub Pages deploy workflow. diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml new file mode 100644 index 0000000..4491240 --- /dev/null +++ b/.github/workflows/deploy-pages.yml @@ -0,0 +1,37 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: [main] + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: true + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Pages + uses: actions/configure-pages@v5 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: . + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/README.md b/README.md new file mode 100644 index 0000000..b64b361 --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +# programming-fengshui + +Trang giới thiệu ảnh "Lựa chọn ngôn ngữ lập trình theo phong thuỷ". + +## Chạy thử + +Mở `index.html` trực tiếp trong trình duyệt, hoặc: + +```bash +python3 -m http.server 8080 +``` + +rồi truy cập http://localhost:8080. + +## Cấu trúc + +``` +. +├── index.html +├── style.css +├── assets/ +│ └── ngon-ngu-lap-trinh-phong-thuy.png +└── README.md +``` + +## Credit + +- Bài viết gốc: [Top 5 ngôn ngữ lập trình đáng học cho năm 2018](https://toidicodedao.com/2018/01/02/top-5-ngon-ngu-lap-trinh-dang-hoc-cho-nam-2018/) — Phạm Huy Hoàng (Tôi đi code dạo). +- Ảnh: [ngon-ngu-lap-trinh-phong-thuy.png](https://toidicodedao.com/wp-content/uploads/2017/12/ngon-ngu-lap-trinh-phong-thuy.png). + +Trang chỉ dùng để trình bày lại nội dung, mọi quyền thuộc tác giả gốc. diff --git a/assets/ngon-ngu-lap-trinh-phong-thuy.png b/assets/ngon-ngu-lap-trinh-phong-thuy.png new file mode 100644 index 0000000..d56e1bc Binary files /dev/null and b/assets/ngon-ngu-lap-trinh-phong-thuy.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..cd9be55 --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + Lựa chọn ngôn ngữ lập trình theo phong thuỷ + + + + +
+
+

Lựa chọn ngôn ngữ lập trình theo phong thuỷ

+

Ngũ Hành tương sinh — code cho hợp tuổi, hợp mệnh.

+
+ +
+
+ Sơ đồ phong thuỷ ngôn ngữ lập trình theo Ngũ Hành +
Sơ đồ ngôn ngữ lập trình xếp theo Ngũ Hành.
+
+
+ +
+

Ngũ Hành & ngôn ngữ

+
+
+

KIM

+

JavaScript, Objective-C, Python

+
+
+

THUỶ

+

C#, PHP

+
+
+

MỘC

+

Android, C#

+
+
+

HOẢ

+

Scala, HTML5, Java, Node.js

+
+
+

THỔ

+

JavaScript, Go, Ruby

+
+
+

* Bảng phân loại mang tính giải trí, lấy từ ảnh gốc.

+
+ + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..2444bef --- /dev/null +++ b/style.css @@ -0,0 +1,174 @@ +:root { + --bg: #fdf6ec; + --fg: #2b2118; + --muted: #6b5a48; + --accent: #b8312f; + --gold: #c79b3c; + --card-bg: #ffffff; + --shadow: 0 6px 18px rgba(0, 0, 0, 0.08); + + --kim: #d4af37; + --thuy: #2e6fb5; + --moc: #3a8f4a; + --hoa: #c0392b; + --tho: #8a6d3b; +} + +* { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +body { + font-family: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif; + background: var(--bg); + color: var(--fg); + line-height: 1.55; +} + +.page { + max-width: 880px; + margin: 0 auto; + padding: 2.5rem 1.25rem 3rem; +} + +.hero { + text-align: center; + margin-bottom: 2rem; +} + +.hero h1 { + margin: 0; + font-size: clamp(1.6rem, 4vw, 2.4rem); + color: var(--accent); + letter-spacing: 0.5px; +} + +.hero .subtitle { + margin: 0.5rem 0 0; + color: var(--muted); + font-style: italic; +} + +.figure { + display: flex; + justify-content: center; + margin: 1.5rem 0 2.5rem; +} + +.figure figure { + margin: 0; + background: var(--card-bg); + padding: 1rem; + border-radius: 12px; + box-shadow: var(--shadow); + max-width: 100%; +} + +.figure img { + display: block; + max-width: 100%; + height: auto; + border-radius: 8px; +} + +.figure figcaption { + text-align: center; + margin-top: 0.75rem; + color: var(--muted); + font-size: 0.9rem; +} + +.elements h2, +.credit h2 { + text-align: center; + color: var(--accent); + margin: 2rem 0 1rem; +} + +.grid { + display: grid; + gap: 0.9rem; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); +} + +.card { + background: var(--card-bg); + border-radius: 10px; + padding: 1rem 1rem 1.1rem; + box-shadow: var(--shadow); + border-top: 4px solid var(--gold); + transition: transform 0.15s ease; +} + +.card:hover { + transform: translateY(-2px); +} + +.card h3 { + margin: 0 0 0.4rem; + font-size: 1.1rem; + letter-spacing: 1px; +} + +.card p { + margin: 0; + color: var(--muted); +} + +.card.kim { border-top-color: var(--kim); } +.card.kim h3 { color: var(--kim); } +.card.thuy { border-top-color: var(--thuy); } +.card.thuy h3 { color: var(--thuy); } +.card.moc { border-top-color: var(--moc); } +.card.moc h3 { color: var(--moc); } +.card.hoa { border-top-color: var(--hoa); } +.card.hoa h3 { color: var(--hoa); } +.card.tho { border-top-color: var(--tho); } +.card.tho h3 { color: var(--tho); } + +.disclaimer { + text-align: center; + color: var(--muted); + font-size: 0.85rem; + margin-top: 1rem; +} + +.credit { + margin-top: 2.5rem; + background: var(--card-bg); + border-radius: 12px; + padding: 1.25rem 1.5rem; + box-shadow: var(--shadow); +} + +.credit p { + margin: 0.4rem 0; +} + +.credit ul { + margin: 0.5rem 0 0.75rem 1.25rem; + padding: 0; +} + +.credit a { + color: var(--accent); + text-decoration: none; + border-bottom: 1px dotted var(--accent); +} + +.credit a:hover { + color: var(--gold); + border-bottom-color: var(--gold); +} + +.credit .note { + font-size: 0.85rem; + color: var(--muted); + font-style: italic; +}