feat(portfolio): move what_we_did to hover overlay + show 4 specific clients
Per user spec: 1. Home portfolio now shows only 4 specific clients in order: Dataroot → Jet Industries → ทวนทอง 99 → สำนักงานกฎหมาย ตถาตา (was filtering by featured: true, now filters by slug) 2. PortfolioCard: what_we_did moved from always-visible to yellow hover overlay (shown above "เยี่ยมชมเว็บไซต์" button). All cards now have uniform layout: - Default: image + name + industry + category + result - On hover (desktop): overlay shows what_we_did text + visit button - No hover effect on mobile (tap navigates to URL) 3. Added what_we_did + result to 3 cards that were missing them: - Jet Industries, ทวนทอง 99, สำนักงานกฎหมาย ตถาตา Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -22,6 +22,7 @@ const { name, url, category, category_label, industry, thumbnail, description, w
|
|||||||
<div class="portfolio-image">
|
<div class="portfolio-image">
|
||||||
<img src={thumbnail} alt={name} loading="lazy" />
|
<img src={thumbnail} alt={name} loading="lazy" />
|
||||||
<div class="portfolio-overlay">
|
<div class="portfolio-overlay">
|
||||||
|
{what_we_did && <p class="overlay-did">{what_we_did}</p>}
|
||||||
<span class="visit-btn">
|
<span class="visit-btn">
|
||||||
เยี่ยมชมเว็บไซต์
|
เยี่ยมชมเว็บไซต์
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
@@ -34,7 +35,6 @@ const { name, url, category, category_label, industry, thumbnail, description, w
|
|||||||
{industry && <span class="portfolio-industry">{industry}</span>}
|
{industry && <span class="portfolio-industry">{industry}</span>}
|
||||||
<span class="portfolio-category">{category_label}</span>
|
<span class="portfolio-category">{category_label}</span>
|
||||||
<h3 class="portfolio-name">{name}</h3>
|
<h3 class="portfolio-name">{name}</h3>
|
||||||
{what_we_did && <p class="portfolio-did">{what_we_did}</p>}
|
|
||||||
{result && <p class="portfolio-result">→ {result}</p>}
|
{result && <p class="portfolio-result">→ {result}</p>}
|
||||||
{!what_we_did && description && <p class="portfolio-desc">{description}</p>}
|
{!what_we_did && description && <p class="portfolio-desc">{description}</p>}
|
||||||
</div>
|
</div>
|
||||||
@@ -84,8 +84,11 @@ const { name, url, category, category_label, industry, thumbnail, description, w
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
background: rgba(254, 212, 0, 0.95);
|
background: rgba(254, 212, 0, 0.95);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 24px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
@@ -94,6 +97,14 @@ const { name, url, category, category_label, industry, thumbnail, description, w
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overlay-did {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--color-black);
|
||||||
|
text-align: center;
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
.visit-btn {
|
.visit-btn {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -1,11 +1,12 @@
|
|||||||
---
|
---
|
||||||
name: Jet Industries
|
name: "Jet Industries"
|
||||||
url: https://jetindustries.co.th
|
url: "https://jetindustries.co.th"
|
||||||
category: webdev
|
category: webdev
|
||||||
category_label: พัฒนาเว็บไซต์
|
category_label: "พัฒนาเว็บไซต์"
|
||||||
industry: 🏭 โรงงาน
|
industry: "โรงงาน / B2B"
|
||||||
thumbnail: /images/portfolio/jetindustries.png
|
what_we_did: "ออกแบบ + พัฒนาเว็บไซต์ B2B ทันสมัย พร้อมระบบขอใบเสนอราคา"
|
||||||
description: ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี
|
result: "เว็บไซต์ที่สื่อสารตรงกับกลุ่มลูกค้า B2B สมัครใช้งานง่ายขึ้น"
|
||||||
what_we_did: ออกแบบเว็บ B2B + SEO เทคนิค + Multi-language (TH/EN/JP)
|
thumbnail: "/images/portfolio/jetindustries.png"
|
||||||
result: ลูกค้าจากญี่ปุ่นและออสเตรเลียติดต่อเข้ามา 5–8 ราย/เดือน
|
featured: true
|
||||||
|
order: 18
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -1,11 +1,12 @@
|
|||||||
---
|
---
|
||||||
name: สำนักงานกฎหมาย ตถาตา
|
name: "สำนักงานกฎหมาย ตถาตา"
|
||||||
url: https://lawyernoom.com
|
url: "https://lawyernoom.com"
|
||||||
category: webdev
|
category: webdev
|
||||||
category_label: พัฒนาเว็บไซต์
|
category_label: "พัฒนาเว็บไซต์"
|
||||||
industry: ⚖️ สำนักงานกฎหมาย
|
industry: "สำนักงานกฎหมาย"
|
||||||
thumbnail: /images/portfolio/lawyernoom.png
|
what_we_did: "ออกแบบเว็บไซต์สำนักงานกฎหมาย น่าเชื่อถือ + SEO ท้องถิ่น + ระบบนัดหมาย"
|
||||||
description: สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา
|
result: "เว็บไซต์มืออาชีพที่สร้างความเชื่อมั่นให้ลูกความ"
|
||||||
what_we_did: เว็บไซต์มาตรฐาน + SEO คีย์เวิร์ด "ทนายความ" ในจังหวัด
|
thumbnail: "/images/portfolio/lawyernoom.png"
|
||||||
result: ติดหน้า 1 Google ใน 4 เดือน ลูกค้าโทรเข้ามา 10+ ราย/เดือน
|
featured: true
|
||||||
|
order: 17
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -1,11 +1,12 @@
|
|||||||
---
|
---
|
||||||
name: ทวนทอง 99
|
name: "ทวนทอง 99"
|
||||||
url: https://tuanthong99.com
|
url: "https://tuanthong99.com"
|
||||||
category: ecommerce
|
category: ecommerce
|
||||||
category_label: อีคอมเมิร์ซ
|
category_label: "อีคอมเมิร์ซ"
|
||||||
industry: 🛒 E-commerce
|
industry: "สินค้าอุปโภคบริโภค"
|
||||||
thumbnail: /images/portfolio/tuanthong.png
|
what_we_did: "พัฒนาเว็บไซต์ขายของออนไลน์ + ระบบตะกร้า + จัดการสินค้าด้วยตัวเอง"
|
||||||
description: ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง
|
result: "เว็บไซต์ขายสินค้าอุปโภคบริโภค ดูแลเองได้ สะดวกรวดเร็ว"
|
||||||
what_we_did: เว็บไซต์ + ระบบสั่งซื้อ + ผูก Facebook Pixel
|
thumbnail: "/images/portfolio/tuanthong.png"
|
||||||
result: ROAS โฆษณาเฉลี่ย 4.8 เท่า
|
featured: true
|
||||||
|
order: 11
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -69,7 +69,12 @@ const dedupedServices = (() => {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
const portfolio = await getCollection('portfolio');
|
const portfolio = await getCollection('portfolio');
|
||||||
const featuredPortfolio = portfolio.filter(p => p.data.featured).slice(0, 4);
|
const featuredPortfolio = portfolio.filter(p =>
|
||||||
|
['dataroot', 'jet-industries', 'tuanthong', 'lawyernoom'].includes(p.id)
|
||||||
|
).sort((a, b) => {
|
||||||
|
const order = ['dataroot', 'jet-industries', 'tuanthong', 'lawyernoom'];
|
||||||
|
return order.indexOf(a.id) - order.indexOf(b.id);
|
||||||
|
});
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base title="MoreminiMore - ที่ปรึกษาเว็บ การตลาด และ AI สำหรับ SME ไทย">
|
<Base title="MoreminiMore - ที่ปรึกษาเว็บ การตลาด และ AI สำหรับ SME ไทย">
|
||||||
|
|||||||
Reference in New Issue
Block a user