HTML portfolio site

A responsive type studio portfolio gives visitors a home page, two detailed specimen pages, and an about page. Tokay serves the plain HTML and CSS as one Web Service.

Last updated

Use this example when your site is already a folder of pages and styles. The fictional studio relies on system fonts and CSS shapes, so you can publish it immediately and replace the content at your own pace.

Runtime
Static HTML
Framework
None
Service types
Web Service
Resources
None
Required secrets
None

What it does

The home page introduces Northline Type Studio and links to the Field Note Serif and Relay Sans specimens.

Each specimen gets its own page with sample text, character details, and layouts that adapt to a narrow screen.

The About page explains the fictional studio and keeps the same navigation across the site.

Deploy it

Bring this folder to Tokay any way you like. Paste or upload it in the dashboard, push it with git, or hand it to your AI agent along with our agent instructions. Tokay figures out the rest.

Working in Claude, ChatGPT, VS Code, or another MCP client? Connect the Tokay MCP server and ask your agent to deploy this example. It signs in through your browser, so there is no token to paste.

New to Tokay? The getting started guide walks you through your first deploy.

Try it

  1. Open both specimen pages and resize your browser until the layout becomes a single column.
  2. Change the studio name or a color in the source, then deploy again.
  3. Follow the navigation on the live site and confirm your update appears on every page you changed.

How it works

You can work on the site without a build tool or JavaScript framework. Tokay detects the static entry page and serves these four HTML files with their shared stylesheet directly.

Secrets

The portfolio needs no secrets. Every font and visual comes from the browser or this folder.

Grow from here

Browse the Tokay examples catalog when your site needs forms, saved data, or server code.

Source code

Download ZIP GitHub

about.html Raw 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="About fictional type designer Mara Vale.">
  <title>About · Mara Vale</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a class="mark" href="index.html">MV</a>
    <nav aria-label="Main navigation">
      <a href="serif-study.html">Field Note Serif</a>
      <a href="sans-study.html">Relay Sans</a>
      <a aria-current="page" href="about.html">About</a>
    </nav>
  </header>
  <main>
    <section class="about">
      <p class="eyebrow">About the studio</p>
      <h1>I make type for the moments language becomes an object.</h1>
      <div class="about-copy">
        <p>Mara Vale is a fictional independent type designer based near a windy coast. The studio works with publishers, museums, and small teams who care about how words feel in the hand.</p>
        <p>This sample portfolio uses system fonts. Every visual comes from HTML and CSS, so the project can travel without image files or font licenses.</p>
      </div>
    </section>
  </main>
  <footer class="site-footer"><a href="mailto:studio@example.com">Start a conversation</a></footer>
</body>
</html>

index.html Raw 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="The type design portfolio of Mara Vale.">
  <title>Mara Vale · Type designer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a class="mark" href="index.html">MV</a>
    <nav aria-label="Main navigation">
      <a href="serif-study.html">Field Note Serif</a>
      <a href="sans-study.html">Relay Sans</a>
      <a href="about.html">About</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <p class="eyebrow">Independent type designer</p>
      <h1>Letters for reading slowly and living with daily.</h1>
      <p class="intro">I draw useful type with a little grain left in it. My practice moves between editorial families, signs, and custom lettering.</p>
    </section>
    <section class="project-grid" aria-label="Selected typefaces">
      <a class="project serif" href="serif-study.html">
        <span class="project-label">Field Note Serif</span>
        <strong>Abg</strong>
        <span>Text family · 12 styles</span>
      </a>
      <a class="project sans" href="sans-study.html">
        <span class="project-label">Relay Sans</span>
        <strong>R42</strong>
        <span>Display family · 8 styles</span>
      </a>
    </section>
  </main>
  <footer class="site-footer">
    <p>Available for commissions and thoughtful conversations.</p>
    <a href="mailto:studio@example.com">studio@example.com</a>
  </footer>
</body>
</html>

sans-study.html Raw 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A specimen for the fictional Relay Sans typeface.">
  <title>Relay Sans · Mara Vale</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="sans-page">
  <header class="site-header">
    <a class="mark" href="index.html">MV</a>
    <nav aria-label="Main navigation">
      <a href="serif-study.html">Field Note Serif</a>
      <a aria-current="page" href="sans-study.html">Relay Sans</a>
      <a href="about.html">About</a>
    </nav>
  </header>
  <main>
    <section class="specimen-head relay-head">
      <p class="eyebrow">Relay Sans</p>
      <h1>Clear at speed.</h1>
      <p>A sturdy display face drawn for timetables, cultural programs, wayfinding, and the people already running late.</p>
    </section>
    <section class="relay-board" aria-label="Timetable specimen">
      <div><strong>08:12</strong><span>North Harbor</span><em>Platform 2</em></div>
      <div><strong>09:05</strong><span>Orchard Road</span><em>On time</em></div>
      <div><strong>10:40</strong><span>Grand Library</span><em>Platform 6</em></div>
    </section>
    <section class="giant-type" aria-label="Large type specimen">Rr<br>42</section>
  </main>
  <footer class="site-footer"><a href="index.html">Back to selected work</a></footer>
</body>
</html>

serif-study.html Raw 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A specimen for the fictional Field Note Serif typeface.">
  <title>Field Note Serif · Mara Vale</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="serif-page">
  <header class="site-header">
    <a class="mark" href="index.html">MV</a>
    <nav aria-label="Main navigation">
      <a aria-current="page" href="serif-study.html">Field Note Serif</a>
      <a href="sans-study.html">Relay Sans</a>
      <a href="about.html">About</a>
    </nav>
  </header>
  <main>
    <section class="specimen-head">
      <p class="eyebrow">Field Note Serif</p>
      <h1>Quiet pages still have a pulse.</h1>
      <p>Made for essays, recipes, correspondence, and every margin that collects a pencil note.</p>
    </section>
    <section class="alphabet" aria-label="Alphabet specimen">
      <p>Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm</p>
      <p>Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
      <p>0123456789 &amp; ?! “ ”</p>
    </section>
    <section class="specimen-columns">
      <article>
        <h2>Small text</h2>
        <p>The ferry leaves before the market wakes. Crates settle against the deck while the first cups of coffee pass from hand to hand.</p>
      </article>
      <article>
        <h2>Display</h2>
        <p class="display-line">Meet me where the road bends.</p>
      </article>
    </section>
  </main>
  <footer class="site-footer"><a href="index.html">Back to selected work</a></footer>
</body>
</html>

style.css Raw 

:root {
  color: #171714;
  background: #eeeade;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; }

a { color: inherit; }

.site-header,
.site-footer,
main {
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid #171714;
}

.mark {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  text-decoration: none;
  font-weight: 700;
}

nav { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; }
nav a { text-underline-offset: 0.25rem; }
nav a:not([aria-current="page"]) { text-decoration: none; }

.hero { padding: 8rem 0 5rem; }
.eyebrow { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; }
.hero h1, .about h1 { max-width: 14ch; margin: 0; font: 400 clamp(3.5rem, 10vw, 8.5rem)/0.9 Georgia, serif; letter-spacing: -0.055em; }
.intro { max-width: 46rem; margin: 2rem 0 0 auto; font-size: clamp(1.1rem, 2.5vw, 1.6rem); line-height: 1.45; }

.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: 6rem; }
.project { min-height: 30rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; border: 1px solid #171714; text-decoration: none; }
.project strong { align-self: center; font-size: clamp(6rem, 17vw, 13rem); font-weight: 400; }
.project.serif { background: #d8eecc; }
.project.serif strong { font-family: Georgia, serif; }
.project.sans { color: #f8f2e4; background: #4b28cc; }
.project-label { font-weight: 700; }

.specimen-head { padding: 7rem 0 4rem; }
.specimen-head h1 { max-width: 13ch; margin: 0; font: 400 clamp(4rem, 13vw, 10rem)/0.88 Georgia, serif; letter-spacing: -0.06em; }
.specimen-head > p:last-child { max-width: 38rem; margin: 2rem 0 0 auto; font-size: 1.35rem; line-height: 1.45; }
.alphabet { padding: 2rem 0; border-block: 1px solid; font: 400 clamp(2rem, 6vw, 5rem)/1.15 Georgia, serif; overflow-wrap: anywhere; }
.alphabet p { margin: 0.4rem 0; }
.specimen-columns { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; padding: 5rem 0 7rem; }
.specimen-columns h2 { font: inherit; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; }
.specimen-columns article:first-child p { font: 1.2rem/1.6 Georgia, serif; }
.display-line { margin: 0; font: 400 clamp(3rem, 8vw, 7rem)/0.95 Georgia, serif; }

.sans-page { color: #f2ff3d; background: #211d1f; }
.relay-head h1 { font-family: Arial, Helvetica, sans-serif; font-weight: 800; text-transform: uppercase; }
.relay-board { border-block: 1px solid; }
.relay-board div { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
.relay-board div:last-child { border-bottom: 0; }
.relay-board em { font-style: normal; }
.giant-type { padding: 4rem 0 7rem; font-size: clamp(10rem, 40vw, 35rem); font-weight: 800; line-height: 0.72; letter-spacing: -0.1em; }

.about { padding: 8rem 0 10rem; }
.about-copy { max-width: 42rem; margin: 4rem 0 0 auto; font: 1.25rem/1.55 Georgia, serif; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.5rem 3rem; border-top: 1px solid; }
.site-footer p { margin: 0; }

@media (max-width: 720px) {
  .site-header { align-items: flex-start; }
  nav { justify-content: flex-end; }
  .hero { padding-top: 5rem; }
  .project-grid, .specimen-columns { grid-template-columns: 1fr; }
  .project { min-height: 22rem; }
  .relay-board div { grid-template-columns: 5rem 1fr; }
  .relay-board em { grid-column: 2; }
  .site-footer { flex-direction: column; }
}

Built from revision 52c7b7f

Guide: Host a static HTML site