byjp.me
I get told to shut up a lot by my friend. This is the microsite that documents this in detail.
shutup.jp
postcards
microsite
1<!doctype html>
2<html class="no-js" lang="">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="x-ua-compatible" content="ie=edge">
6 <title>Shut up, JP</title>
7 <meta name="description" content="A collection of postcards sent to me by my friend, Claire, inviting me to 'shut up' from many places and in many languages over many years.">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <meta name="keywords" content="postcards,art,insults,language,microsite">
10 <meta property="og:image" content="/og-image.jpg" />
11 <link rel="author" href="https://www.byjp.me">
12 <link rel="canonical" href="https://shutup.jp">
13 <link rel="stylesheet" href="postcard.css">
14 <link rel="stylesheet" href="shutup.css">
15 <link rel="alternate" type="application/rss+xml" href="/feed.xml" title="Shut up JP">
16 </head>
17 <body>
18 <section class="explain">
19 <p>One day, after months of silence, my friend <a href="https://www.instagram.com/claire.durrant88/">Claire</a> sent me a text message of only 3 words:</p>
20 <h1>Shut up JP</h1>
21 <p>Knowing my <a href="https://www.byjp.me/posts/thoughts-on-postcards/" target="_blank">love of postcards</a>, she started sending me this invaluable advice by mail too — from every country she visited, and in every language the friendly (and presumably deeply confused) locals helped her write in.</p>
22 <p>More than a decade later and, apparently, I've <em>still</em> not got the message.</p>
23 <cite><a target="_blank" href="https://www.byjp.me">JP</a></cite>
24 </section>
25 <section class="worldmap" id="map">
26 {{ worldMap .Countries .Postcards }}
27 </section>
28
29 {{ range .Postcards }}
30 <figure id="{{.Name}}">
31 <input type="checkbox" id="postcard-{{.Name}}">
32 <label for="postcard-{{.Name}}">
33 <div class="postcard flip-{{ .Meta.Flip }} {{ if gt .Meta.Physical.FrontDimensions.PxHeight .Meta.Physical.FrontDimensions.PxWidth }}portrait{{ else }}landscape{{ end }}" style="--postcard: url('{{ .Name }}.postcard.webp'); --aspect-ratio: {{ .Meta.Physical.FrontDimensions.PxWidth }} / {{ .Meta.Physical.FrontDimensions.PxHeight }}">
34 <img src="{{ .Name }}.postcard.webp" loading="lazy" alt="{{ .Meta | altText }}" width="500px">
35 <div class="shadow"></div>
36 </div>
37 </label>
38
39 <figcaption>
40 <div class="title">
41 {{- with .Meta.Location }}<span>{{ .Name }}</span>{{ end -}}
42 {{- with .Meta.SentOn }} <time datetime="{{ . }}">{{ .Format "January 2, 2006" }}</time>{{ end -}}
43 </div>
44 <div class="transcription">{{- .Meta.Back.Transcription | annotate -}}</div>
45 </figcaption>
46 </figure>
47 {{ end }}
48
49 <section class="explain">Shut up Claire.</section>
50 </body>
51</html>