57eaa9da8b
Changes: - Deleted 9 case studies A-I (no real URLs) - Researched 5 real client websites (Baofuling, Lungfinler, Trainersunny, Underdog, Luadjob) and wrote accurate what_we_did - Added mobile tap support (ontouchstart toggle + .tapped class) - All 9 remaining portfolio cards now use hover/tap overlay for what_we_did - Removed fabricated features from what_we_did (user-caught: ระบบขอใบเสนอราคา, ระบบนัดหมาย)
183 lines
4.3 KiB
Plaintext
183 lines
4.3 KiB
Plaintext
---
|
|
/**
|
|
* MOREMINIMORE - PORTFOLIO CARD COMPONENT (LIGHT THEME)
|
|
*/
|
|
|
|
interface Props {
|
|
name: string;
|
|
url: string;
|
|
category: string;
|
|
category_label: string;
|
|
industry?: string;
|
|
thumbnail: string;
|
|
description: string;
|
|
what_we_did?: string;
|
|
result?: string;
|
|
}
|
|
|
|
const { name, url, category, category_label, industry, thumbnail, description, what_we_did, result } = Astro.props;
|
|
---
|
|
|
|
<a href={url || '#'} target="_blank" rel="noopener noreferrer" class="portfolio-card" data-category={category}
|
|
ontouchstart="this.classList.toggle('tapped')"
|
|
onclick="if(this.classList.contains('tapped')&&window.innerWidth<768){this.classList.remove('tapped');return false;}">
|
|
<div class="portfolio-image">
|
|
<img src={thumbnail} alt={name} loading="lazy" />
|
|
<div class="portfolio-overlay">
|
|
{what_we_did && <p class="overlay-did">{what_we_did}</p>}
|
|
<span class="visit-btn">
|
|
เยี่ยมชมเว็บไซต์
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-info">
|
|
{industry && <span class="portfolio-industry">{industry}</span>}
|
|
<span class="portfolio-category">{category_label}</span>
|
|
<h3 class="portfolio-name">{name}</h3>
|
|
{result && <p class="portfolio-result">→ {result}</p>}
|
|
{!what_we_did && description && <p class="portfolio-desc">{description}</p>}
|
|
</div>
|
|
</a>
|
|
|
|
<style>
|
|
/* ============================================
|
|
PORTFOLIO CARD (LIGHT THEME)
|
|
============================================ */
|
|
|
|
.portfolio-card {
|
|
display: block;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
transition: all 0.4s var(--ease-out-expo);
|
|
}
|
|
|
|
.portfolio-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.portfolio-image {
|
|
position: relative;
|
|
aspect-ratio: 16/10;
|
|
overflow: hidden;
|
|
background: var(--color-bg-soft);
|
|
}
|
|
|
|
.portfolio-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.portfolio-card:hover .portfolio-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Yellow overlay on hover */
|
|
.portfolio-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(254, 212, 0, 0.95);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
padding: 24px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.portfolio-card:hover .portfolio-overlay,
|
|
.portfolio-card.tapped .portfolio-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.overlay-did {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--color-black);
|
|
text-align: center;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.visit-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
padding: 14px 28px;
|
|
border-radius: var(--radius-full);
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.visit-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* Info section */
|
|
.portfolio-info {
|
|
padding: 24px;
|
|
}
|
|
|
|
.portfolio-industry {
|
|
display: inline-block;
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
padding: 4px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.portfolio-category {
|
|
display: inline-block;
|
|
background: var(--color-bg-soft);
|
|
color: var(--color-gray-600);
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
margin-left: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.portfolio-name {
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
color: var(--color-black);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.portfolio-did,
|
|
.portfolio-desc {
|
|
font-size: 14px;
|
|
color: var(--color-gray-600);
|
|
line-height: 1.5;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.portfolio-result {
|
|
font-size: 14px;
|
|
color: var(--color-black);
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|