Timmy
8e31d73376
- Extract duplicated per-page CSS into one shared style.css - Add CSS-only hamburger menu for ≤720px (was overflowing) - Add meta description / Open Graph / favicon to all pages - Unify footers, fix dead links, distinct <title>s - :focus-visible outlines, aria-hidden on decorative text, contrast bumps - Make works.html category filter actually filter (data-cat) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
261 lines
13 KiB
HTML
261 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="theme-color" content="#e53935">
|
||
<meta name="description" content="Studio Sample 作品集 — 品牌識別、網頁設計與印刷編輯的代表作品，可依類別篩選瀏覽。">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:locale" content="zh_TW">
|
||
<meta property="og:site_name" content="Studio Sample">
|
||
<meta property="og:title" content="Works — Studio Sample">
|
||
<meta property="og:description" content="近年完成的代表作品 — 品牌、網頁、印刷，每一個都從頭到尾親手完成。">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='8' fill='%23e53935'/><text x='32' y='45' font-family='Arial,sans-serif' font-size='42' font-weight='bold' fill='white' text-anchor='middle'>S</text></svg>">
|
||
<link rel="stylesheet" href="style.css">
|
||
<title>Works — Studio Sample</title>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ─── NAV ─────────────────────────────────────────────── -->
|
||
<nav>
|
||
<a class="nav-logo" href="index.html">Studio Sample</a>
|
||
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
||
<label class="nav-burger" for="nav-toggle" aria-label="開啟選單">☰</label>
|
||
<ul class="nav-links">
|
||
<li><a href="services.html">Services</a></li>
|
||
<li><a href="works.html" class="active">Works</a></li>
|
||
<li><a href="timeline.html">Timeline</a></li>
|
||
<li><a href="index.html#about">About</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- ─── PAGE HEADER ───────────────────────────────────────── -->
|
||
<header class="page-header">
|
||
<p class="page-header-eyebrow">Selected Works</p>
|
||
<h1 class="page-header-title">Every project,<br>fully committed.</h1>
|
||
<p class="page-header-lead">
|
||
這裡收錄了我們近年完成的代表作品。每一個都是從頭到尾由我們親手完成。<br>
|
||
A curated selection of recent work — brand, web, and print.
|
||
</p>
|
||
</header>
|
||
|
||
<!-- ─── FILTER BAR ─────────────────────────────────────────── -->
|
||
<div class="filter-bar">
|
||
<button class="filter-btn active" data-cat="all">All</button>
|
||
<button class="filter-btn" data-cat="branding">Branding</button>
|
||
<button class="filter-btn" data-cat="web">Web</button>
|
||
<button class="filter-btn" data-cat="print">Print</button>
|
||
<button class="filter-btn" data-cat="identity">Identity</button>
|
||
</div>
|
||
|
||
<!-- ─── WORKS ─────────────────────────────────────────────── -->
|
||
<div class="works-section">
|
||
<div class="works-grid">
|
||
|
||
<!-- Featured -->
|
||
<div class="work-card featured" data-cat="web">
|
||
<div class="work-thumb dark">ARCH</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Web Design / Build</p>
|
||
<p class="work-year">2025</p>
|
||
</div>
|
||
<h2 class="work-title">Arch Studio — Portfolio Site</h2>
|
||
<p class="work-desc">
|
||
東京一家建築事務所的單頁作品集網站。以暗色調呈現建築攝影，強調作品的質感與空間感。
|
||
純 HTML/CSS 交付，無任何 JavaScript 依賴，載入時間低於 0.5 秒。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Web Design</span>
|
||
<span class="scope-tag">HTML/CSS</span>
|
||
<span class="scope-tag">Typography</span>
|
||
<span class="scope-tag">Performance</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="work-card" data-cat="branding identity">
|
||
<div class="work-thumb red">BRAND</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Branding / Identity</p>
|
||
<p class="work-year">2026</p>
|
||
</div>
|
||
<h3 class="work-title">Redline Co. Brand Refresh</h3>
|
||
<p class="work-desc">
|
||
整體品牌重塑，包含 Logo 系統、色彩規範、排版指引與品牌應用規範書（Brand Guidelines）。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Logo Design</span>
|
||
<span class="scope-tag">Brand Guidelines</span>
|
||
<span class="scope-tag">Color System</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3 -->
|
||
<div class="work-card" data-cat="print">
|
||
<div class="work-thumb gray">PRINT</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Print / Editorial</p>
|
||
<p class="work-year">2025</p>
|
||
</div>
|
||
<h3 class="work-title">Annual Report 2024</h3>
|
||
<p class="work-desc">
|
||
60 頁年度報告書，從版型設計到印前輸出一條龍。以網格系統為骨幹，兼顧可讀性與視覺張力。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Layout Design</span>
|
||
<span class="scope-tag">Editorial</span>
|
||
<span class="scope-tag">Print Production</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 4 -->
|
||
<div class="work-card" data-cat="print identity">
|
||
<div class="work-thumb cream">MENU</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Print / Identity</p>
|
||
<p class="work-year">2025</p>
|
||
</div>
|
||
<h3 class="work-title">Koto Bistro — Menu & Collateral</h3>
|
||
<p class="work-desc">
|
||
京都一家法式和食餐廳的菜單、名片與包裝設計。以奶油色基底搭配極細襯線字體，呈現細膩的高級感。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Menu Design</span>
|
||
<span class="scope-tag">Stationery</span>
|
||
<span class="scope-tag">Packaging</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 5 -->
|
||
<div class="work-card" data-cat="web">
|
||
<div class="work-thumb navy">CORP</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Web Design / Build</p>
|
||
<p class="work-year">2025</p>
|
||
</div>
|
||
<h3 class="work-title">Nordsea Capital — Corporate Site</h3>
|
||
<p class="work-desc">
|
||
北歐系金融公司的企業形象網站，強調信任感與穩重。深藍色調搭配大量留白，確保內容可讀性。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Web Design</span>
|
||
<span class="scope-tag">Copywriting</span>
|
||
<span class="scope-tag">HTML/CSS</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 6 -->
|
||
<div class="work-card" data-cat="branding">
|
||
<div class="work-thumb sage">HERB</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Branding / Packaging</p>
|
||
<p class="work-year">2024</p>
|
||
</div>
|
||
<h3 class="work-title">Hara Herb Co. — Product Line</h3>
|
||
<p class="work-desc">
|
||
天然草本保養品牌的整體包裝設計，包含 12 款產品標籤與外盒。品牌色為鼠尾草綠，傳達自然與純淨。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Packaging</span>
|
||
<span class="scope-tag">Label Design</span>
|
||
<span class="scope-tag">Branding</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 7 -->
|
||
<div class="work-card" data-cat="identity print">
|
||
<div class="work-thumb black">TYPE</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Identity / Print</p>
|
||
<p class="work-year">2024</p>
|
||
</div>
|
||
<h3 class="work-title">Void Gallery — Exhibition Catalogue</h3>
|
||
<p class="work-desc">
|
||
當代藝術畫廊的展覽圖錄設計，40 頁，黑底白字為主視覺，強調作品本身的張力而非版面設計。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Editorial</span>
|
||
<span class="scope-tag">Art Direction</span>
|
||
<span class="scope-tag">Print</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 8 -->
|
||
<div class="work-card" data-cat="web">
|
||
<div class="work-thumb blush">SHOP</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Web Design / Build</p>
|
||
<p class="work-year">2024</p>
|
||
</div>
|
||
<h3 class="work-title">Sakura Stitch — E-Commerce Front End</h3>
|
||
<p class="work-desc">
|
||
手作刺繡品牌的電商前台設計，桃粉色調搭配手寫風格字型，確保商品圖片永遠是視覺焦點。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">E-Commerce</span>
|
||
<span class="scope-tag">Web Design</span>
|
||
<span class="scope-tag">UX</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── CTA STRIP ──────────────────────────────────────────── -->
|
||
<div class="cta-strip">
|
||
<div class="cta-strip-text">
|
||
<h2>有新專案想談？</h2>
|
||
<p>我們目前接受新委託。請告訴我們你的想法。</p>
|
||
</div>
|
||
<a class="btn btn-primary" href="index.html#contact">Start a Conversation</a>
|
||
</div>
|
||
|
||
<!-- ─── FOOTER ────────────────────────────────────────────── -->
|
||
<footer>
|
||
<div class="footer-logo">Studio Sample</div>
|
||
<ul class="footer-nav">
|
||
<li><a href="services.html">Services</a></li>
|
||
<li><a href="works.html">Works</a></li>
|
||
<li><a href="timeline.html">Timeline</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
<div class="footer-copy">© 2026 Studio Sample. All rights reserved.</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// 依類別篩選作品（無框架）。卡片以 data-cat 標記，可同時屬於多個類別。
|
||
const btns = document.querySelectorAll('.filter-btn');
|
||
const cards = document.querySelectorAll('.work-card');
|
||
btns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
btns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
const cat = btn.dataset.cat;
|
||
cards.forEach(card => {
|
||
const show = cat === 'all' || card.dataset.cat.split(' ').includes(cat);
|
||
card.style.display = show ? '' : 'none';
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|