timmy/studio-sample
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Timmy
2026-03-20 00:53:53 +08:00
commit 87dbd1517f
4 changed files with 2104 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

551
works.html Normal file
View File

@@ -0,0 +1,551 @@
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Works — Studio Sample</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
"Noto Sans TC", system-ui, sans-serif;
background-color: #ffffff;
color: #333333;
line-height: 1.6;
}
/* ─── NAV ─────────────────────────────────────────────── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: #ffffff;
border-bottom: 1px solid #eeeeee;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(16px, 5vw, 64px);
height: 56px;
}
.nav-logo {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.12em;
color: #e53935;
text-transform: uppercase;
text-decoration: none;
}
.nav-links {
display: flex;
gap: clamp(16px, 3vw, 40px);
list-style: none;
}
.nav-links a {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555555;
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: #e53935; }
/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header {
padding: clamp(48px, 7vw, 88px) clamp(24px, 8vw, 96px) clamp(32px, 4vw, 48px);
background: #f7f7f7;
border-bottom: 1px solid #eeeeee;
}
.page-header-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #e53935;
margin-bottom: 12px;
}
.page-header-title {
font-size: clamp(32px, 5vw, 64px);
font-weight: 800;
letter-spacing: -0.02em;
color: #111111;
line-height: 1.1;
margin-bottom: 16px;
}
.page-header-lead {
font-size: clamp(14px, 1.5vw, 17px);
color: #666666;
max-width: 38em;
}
/* ─── FILTER BAR ──────────────────────────────────────── */
.filter-bar {
padding: 20px clamp(24px, 8vw, 96px);
border-bottom: 1px solid #eeeeee;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-btn {
padding: 6px 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid #dddddd;
background: transparent;
color: #666666;
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover,
.filter-btn.active {
border-color: #e53935;
color: #e53935;
}
/* ─── WORKS GRID ──────────────────────────────────────── */
.works-section {
padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 96px);
}
.works-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 32px;
}
.work-card {
background: #ffffff;
border: 1px solid #eeeeee;
overflow: hidden;
transition: box-shadow 0.2s;
}
.work-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.work-thumb {
width: 100%;
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 900;
letter-spacing: -0.02em;
}
.work-thumb.red { background: #fde8e8; color: #e53935; }
.work-thumb.dark { background: #222222; color: #444444; }
.work-thumb.gray { background: #e8e8e8; color: #bbbbbb; }
.work-thumb.cream { background: #f5f0e8; color: #c8b89a; }
.work-thumb.navy { background: #1a2640; color: #2e4070; }
.work-thumb.sage { background: #e4ece4; color: #8aaa8a; }
.work-thumb.black { background: #111111; color: #333333; }
.work-thumb.blush { background: #fde8f0; color: #e07898; }
.work-body {
padding: 24px 28px;
}
.work-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.work-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #e53935;
}
.work-year {
font-size: 11px;
color: #aaaaaa;
letter-spacing: 0.05em;
}
.work-title {
font-size: clamp(16px, 1.7vw, 20px);
font-weight: 800;
color: #111111;
margin-bottom: 8px;
line-height: 1.3;
}
.work-desc {
font-size: 13px;
color: #777777;
line-height: 1.7;
margin-bottom: 16px;
}
.work-scope {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.scope-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
padding: 3px 10px;
border: 1px solid #eeeeee;
color: #888888;
}
/* ─── FEATURED (wide) ─────────────────────────────────── */
.work-card.featured {
grid-column: span 2;
}
.work-card.featured .work-thumb {
aspect-ratio: 21/9;
}
@media (max-width: 720px) {
.work-card.featured { grid-column: span 1; }
.work-card.featured .work-thumb { aspect-ratio: 16/9; }
}
/* ─── CTA STRIP ───────────────────────────────────────── */
.cta-strip {
background: #111111;
padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 96px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cta-strip-text h2 {
font-size: clamp(22px, 3vw, 36px);
font-weight: 800;
color: #ffffff;
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.cta-strip-text p {
font-size: clamp(13px, 1.3vw, 15px);
color: #888888;
}
.btn {
display: inline-block;
padding: 14px 32px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #e53935;
transition: background 0.2s, color 0.2s;
}
.btn-primary { background: #e53935; color: #ffffff; }
.btn-primary:hover { background: #c62828; border-color: #c62828; }
/* ─── FOOTER ──────────────────────────────────────────── */
footer {
background: #111111;
padding: 32px clamp(24px, 8vw, 96px);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
border-top: 1px solid #1e1e1e;
}
.footer-logo {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.12em;
color: #e53935;
text-transform: uppercase;
}
.footer-nav {
display: flex;
gap: clamp(16px, 3vw, 32px);
list-style: none;
}
.footer-nav a {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555555;
text-decoration: none;
transition: color 0.2s;
}
.footer-nav a:hover { color: #e53935; }
.footer-copy {
font-size: 12px;
color: #555555;
letter-spacing: 0.05em;
}
</style>
</head>
<body>
<!-- ─── NAV ─────────────────────────────────────────────── -->
<nav>
<a class="nav-logo" href="index.html">Studio Sample</a>
<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="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">All</button>
<button class="filter-btn">Branding</button>
<button class="filter-btn">Web</button>
<button class="filter-btn">Print</button>
<button class="filter-btn">Identity</button>
</div>
<!-- ─── WORKS ─────────────────────────────────────────────── -->
<div class="works-section">
<div class="works-grid">
<!-- Featured -->
<div class="work-card featured">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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="index.html#about">About</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>
// Simple filter interaction (no framework needed)
const btns = document.querySelectorAll('.filter-btn');
btns.forEach(btn => {
btn.addEventListener('click', () => {
btns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
</script>
</body>
</html>