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>
239 lines
12 KiB
HTML
239 lines
12 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 工作室大事記 — 從 2020 年於東京創立至今的重要里程碑、獲獎、合作與作品上線紀錄。">
|
||
<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="Timeline — Studio Sample">
|
||
<meta property="og:description" content="工作室從 2020 年創立至今的重要時刻。Key milestones from founding to now.">
|
||
<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>Timeline — 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">Works</a></li>
|
||
<li><a href="timeline.html" class="active">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-label">Studio History</p>
|
||
<h1 class="page-header-title">Our<br>Timeline.</h1>
|
||
<p class="page-header-sub">
|
||
工作室從 2020 年創立至今的重要時刻。<br>
|
||
Key milestones from founding to now.
|
||
</p>
|
||
</header>
|
||
|
||
<!-- ─── TIMELINE ──────────────────────────────────────────── -->
|
||
<section class="timeline-section">
|
||
<div class="timeline">
|
||
|
||
<!-- 2026 -->
|
||
<div class="timeline-year">
|
||
<p class="timeline-year-label">2026</p>
|
||
|
||
<div class="timeline-item highlight">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Mar</div>
|
||
<div class="timeline-date-day">18</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-launch">Launch</span>
|
||
<h2 class="timeline-title">Redline Co. 品牌全面更新上線</h2>
|
||
<p class="timeline-desc">
|
||
歷時三個月的品牌再造計畫正式交付，涵蓋新識別系統、色彩規範與全站前端重建。
|
||
<span>Three-month rebrand: new identity system, colour guidelines, full front-end rebuild.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Feb</div>
|
||
<div class="timeline-date-day">03</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-article">Article</span>
|
||
<h2 class="timeline-title">發表文章：為什麼我們不用任何前端框架</h2>
|
||
<p class="timeline-desc">
|
||
整理五年來不依賴框架交付高品質網站的核心原則，在設計社群引發討論。
|
||
<span>Published our philosophy on framework-free front-end development — sparked wide discussion.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2025 -->
|
||
<div class="timeline-year">
|
||
<p class="timeline-year-label">2025</p>
|
||
|
||
<div class="timeline-item highlight">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Nov</div>
|
||
<div class="timeline-date-day">22</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-award">Award</span>
|
||
<h2 class="timeline-title">Tokyo Design Award — Print 類別銀獎</h2>
|
||
<p class="timeline-desc">
|
||
以「Mono Press」年刊設計獲頒東京設計獎印刷類銀獎，為工作室首個正式設計獎項。
|
||
<span>Silver award at Tokyo Design Award (Print) for the "Mono Press" annual publication.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Aug</div>
|
||
<div class="timeline-date-day">14</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-collab">Collab</span>
|
||
<h2 class="timeline-title">與 Koto Studio 展開合作計畫</h2>
|
||
<p class="timeline-desc">
|
||
與倫敦品牌顧問公司 Koto Studio 建立合作關係，共同服務在亞洲市場拓展的歐洲客戶。
|
||
<span>Partnership with London-based Koto Studio to serve European clients expanding into Asia.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Jan</div>
|
||
<div class="timeline-date-day">07</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-studio">Studio</span>
|
||
<h2 class="timeline-title">搬遷至澀谷新工作室</h2>
|
||
<p class="timeline-desc">
|
||
工作室從代官山搬遷至澀谷，面積增加一倍，新增客戶簡報空間與攝影區。
|
||
<span>Moved from Daikanyama to a larger Shibuya studio with dedicated client briefing and photo area.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2024 -->
|
||
<div class="timeline-year">
|
||
<p class="timeline-year-label">2024</p>
|
||
|
||
<div class="timeline-item highlight">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Sep</div>
|
||
<div class="timeline-date-day">30</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-launch">Launch</span>
|
||
<h2 class="timeline-title">第 50 個專案里程碑</h2>
|
||
<p class="timeline-desc">
|
||
完成第 50 個交付專案，橫跨品牌識別、網站建置與印刷品設計三個主要服務領域。
|
||
<span>Delivered our 50th project across branding, web, and print — a four-year milestone.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Apr</div>
|
||
<div class="timeline-date-day">01</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-studio">Studio</span>
|
||
<h2 class="timeline-title">新成員 Yuki 加入工作室</h2>
|
||
<p class="timeline-desc">
|
||
視覺設計師 Yuki Nakamura 正式加入，工作室核心成員擴充至三人。
|
||
<span>Visual designer Yuki Nakamura joined — expanding the core team to three.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2022 -->
|
||
<div class="timeline-year">
|
||
<p class="timeline-year-label">2022</p>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Jun</div>
|
||
<div class="timeline-date-day">15</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-launch">Launch</span>
|
||
<h2 class="timeline-title">推出服務套餐制定價</h2>
|
||
<p class="timeline-desc">
|
||
為了讓中小型品牌更容易進入，正式推出 Starter、Studio、Enterprise 三級套餐定價。
|
||
<span>Launched tiered service packages (Starter / Studio / Enterprise) for clearer client access.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Feb</div>
|
||
<div class="timeline-date-day">28</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-collab">Collab</span>
|
||
<h2 class="timeline-title">首個海外客戶：臺灣 Nori Coffee</h2>
|
||
<p class="timeline-desc">
|
||
完成臺北精品咖啡品牌 Nori Coffee 的全套視覺識別設計，開啟工作室海外合作的第一頁。
|
||
<span>First overseas client — complete visual identity for Nori Coffee, Taipei.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2020 -->
|
||
<div class="timeline-year">
|
||
<p class="timeline-year-label">2020</p>
|
||
|
||
<div class="timeline-item highlight">
|
||
<div class="timeline-date">
|
||
<div class="timeline-date-month">Apr</div>
|
||
<div class="timeline-date-day">01</div>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<span class="timeline-tag tag-studio">Studio</span>
|
||
<h2 class="timeline-title">Studio Sample 正式成立</h2>
|
||
<p class="timeline-desc">
|
||
由設計師 Hiro 與前端工程師 Sato 共同在東京代官山創立，以「無框架、無廢話」為核心理念。
|
||
<span>Founded in Daikanyama, Tokyo by designer Hiro and engineer Sato — "no frameworks, no fluff."</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── 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>
|
||
|
||
</body>
|
||
</html>
|