-
Notifications
You must be signed in to change notification settings - Fork 0
/
works.html
16 lines (12 loc) · 16.4 KB
/
works.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<!-- <link rel="icon" href="/favicon.png" />-->
<link rel="icon" href="/faviconNew.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shuffleUnofficial</title>
<script type="module" crossorigin="" src="/assets/app-d317e521.js"></script>
<link rel="stylesheet" href="/assets/index-fd7b8fe9.css">
<link rel="modulepreload" crossorigin="" href="/assets/SectionView-3a0e7560.js"><link rel="modulepreload" crossorigin="" href="/assets/LinkFigure-984a5390.js"><link rel="stylesheet" href="/assets/LinkFigure-9e83d095.css"><meta name="description" content="graphic & typeface design studio in shanghai. we make typeface as A narrative."><meta name="copyright" content="© 2023 shuffleUnofficial"><meta name="build-time" content="2023-03-24T17:30:48.000Z"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@atelier_anchor"><meta name="twitter:title" content="shuffleUnofficial"><meta name="twitter:description" content="graphic & typeface design studio in shanghai. we make typeface as A narrative."><meta property="og:type" content="website"><meta property="og:url" content="https://dddoh.github.io/"><meta property="og:title" content="shuffleUnofficial"><meta property="og:description" content="graphic & typeface design studio in shanghai. we make typeface as A narrative."></head>
<body>
<div id="app" data-server-rendered="true"><div class="relative mx-auto flex min-h-[max(100vh,480px)] min-w-[320px] max-w-[1800px] flex-col px-4 sm:flex-row sm:gap-16 lg:px-8"><header class="sticky top-0 z-10 h-fit bg-white py-4 dark:bg-black sm:mb-[var(--footer-height)] lg:py-8 tall:mb-0" style="--footer-height:0px;"><div class="flex items-center justify-between"><a href="/" class="block w-32 sm:w-40"><picture><source srcset="/assets/shuffle-unofficial.dark-cd7fbca5.svg" media="(prefers-color-scheme: dark)"><img src="/assets/shuffle-unofficial.light-3673b317.svg" alt="atelierAnchor" width="333.42" height="125.06"></picture></a><button class="font-anicons text-4xl font-normal text-primary duration-400 vf-['TIME'_1] before:content-['A'] aria-expanded:vf-['TIME'_100] sm:hidden" aria-label="Toggle navigation" aria-expanded="false"></button></div><nav style="display:none;" class="absolute max-h-48 w-full overflow-hidden bg-white dark:bg-black sm:relative sm:!block" data-v-4e8505cb=""><ul class="my-2 sm:mt-4 sm:mb-0" data-v-4e8505cb=""><!--[--><li class="text-3xl"><a href="/publications" class="">publications</a></li><li class="text-primary text-3xl"><a aria-current="page" href="/works" class="router-link-active router-link-exact-active">works</a></li><li class="text-3xl"><a href="/typefaces" class="">typefaces</a></li><li class="text-3xl"><a href="/dash" class="">dash</a></li><li class="text-3xl"><a href="/about" class="">about</a></li><!--]--></ul></nav></header><main class="relative w-full grow sm:py-4 lg:py-8"><div class="flex flex-col gap-4 md:gap-8"><!--[--><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/dangxia-tiu" class="">This is Us</a></h2><div>Visual identity, motion graphic</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>Dangxia Channel</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Willie Liu</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Willie Liu, Money Su, Leove Li</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/dangxia-tiu" class="group overflow-hidden sm:h-full" title="This is Us" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/dangxia-tiu/dangxia-tiu-1.webp" alt="dangxia-tiu-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/vip" class="">Virtual Immunization Project</a></h2><div>Graphic design, motion graphic</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>Sicheng Wang</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Nagisa Chen</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/vip" class="group overflow-hidden sm:h-full" title="Virtual Immunization Project" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/vip/vip-1.webp" alt="vip-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/double-win" class="">Double Win</a></h2><div>Visual identity</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>Double Win</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Lead agency">LA</abbr></dt><dd>LxU</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Type director">TD</abbr></dt><dd>Willie Liu</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Willie Liu, Nagisa Chen</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/double-win" class="group overflow-hidden sm:h-full" title="Double Win" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/double-win/double-win-1.webp" alt="double-win-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/receipt-poster" class="">Receipt Poster</a></h2><div>Graphic design</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Nagisa Chen</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Willie Liu, Nagisa Chen</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/receipt-poster" class="group overflow-hidden sm:h-full" title="Receipt Poster" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/receipt-poster/receipt-poster-1.webp" alt="receipt-poster-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/ambitful" class="">Ambitful</a></h2><div>Visual identity</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>Ambitful</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Nagisa Chen</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Nagisa Chen</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/ambitful" class="group overflow-hidden sm:h-full" title="Ambitful" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/ambitful/ambitful-1.webp" alt="ambitful-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/out-of-mountain" class="">Out of Mountain</a></h2><div>Book design</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>Guiyang WOW</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Nagisa Chen</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Nagisa Chen, Zhiqian Li</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/out-of-mountain" class="group overflow-hidden sm:h-full" title="Out of Mountain" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/out-of-mountain/out-of-mountain-1.webp" alt="out-of-mountain-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/agt" class="">Arcade Game Typography</a></h2><div>Translation</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Translator">T</abbr></dt><dd>Willie Liu</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Editor">E</abbr></dt><dd>Xiyao Du</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Telos</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Publisher">P</abbr></dt><dd>Telos</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/agt" class="group overflow-hidden sm:h-full" title="Arcade Game Typography" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/agt/agt-1.webp" alt="agt-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/kuusi" class="">Kuusi Sans Scented Candle</a></h2><div>Graphic design</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>3type</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Nagisa Chen</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Nagisa Chen, Denise Dou</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/kuusi" class="group overflow-hidden sm:h-full" title="Kuusi Sans Scented Candle" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/kuusi/kuusi-1.webp" alt="kuusi-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/g3" class="">Glyphs 3 Event</a></h2><div>Motion design, graphic design</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>Glyphs</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Nagisa Chen</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Nagisa Chen, Leove Li</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/g3" class="group overflow-hidden sm:h-full" title="Glyphs 3 Event" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/g3/g3-1.webp" alt="g3-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/black-box" class="">Dinkie Bitmap Black Box</a></h2><div>Product design</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>3type</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Nagisa Chen</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Nagisa Chen, Willie Liu</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/black-box" class="group overflow-hidden sm:h-full" title="Dinkie Bitmap Black Box" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/black-box/black-box-1.webp" alt="black-box-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/psa" class="">PSA Model</a></h2><div>Product design</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>PSA</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Willie Liu</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Willie Liu</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/psa" class="group overflow-hidden sm:h-full" title="PSA Model" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/psa/psa-1.webp" alt="psa-1" width="1920" height="1440"></picture></a><!--]--></div></article><article class="flex flex-col gap-4 md:flex-row md:gap-8 items-center gap-0"><div class="md:w-1/3 md:min-w-[256px] md:shrink-0"><!--[--><!--[--><div><div class="mb-4"><h2 class="text-2xl"><a href="/works/freds-inside" class="">Freds Inside</a></h2><div>Motion graphic</div></div><dl><!--[--><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Client">CL</abbr></dt><dd>Candybook</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Art director">AD</abbr></dt><dd>Willie Liu</dd></div><div class="flex"><dt class="w-8 flex-shrink-0 after:content-[':']"><abbr title="Designer">D</abbr></dt><dd>Willie Liu</dd></div><!--]--></dl></div>z <!--]--><!--]--></div><div class="flex grow flex-col gap-4"><!--[--><a href="/works/freds-inside" class="group overflow-hidden sm:h-full" title="Freds Inside" data-v-7db2c7f2=""><picture data-v-7db2c7f2=""><img src="/works/freds-inside/freds-inside-1.webp" alt="freds-inside-1" width="1920" height="1440"></picture></a><!--]--></div></article><!--]--></div></main><footer class="relative z-10 pt-6 pb-4 sm:absolute sm:bottom-0 lg:py-8 sm:tall:fixed"><div class="transition-opacity"><h2 class="mb-2 text-3xl">contact</h2><address class="not-italic"><!--[--><!--[-->15A, Lane 141<br><!--]--><!--[-->Xing’an Road<br><!--]--><!--[-->Huangpu District<br><!--]--><!--[-->Shanghai, China<br><!--]--><!--]--><a href="mailto:[email protected]">[email protected]</a></address></div><div class="WeChatQrCode absolute bottom-12 transition-opacity lg:bottom-16 opacity-0"><img src="https://open.weixin.qq.com/qr/code?username=atelierAnchor" alt="atelierAnchor" width="400" height="400" class="h-32 w-32 -translate-x-2 translate-y-2 dark:translate-x-0 dark:translate-y-0"></div><ul class="flex gap-2"><!--[--><li><a href="https://twitter.com/atelier_anchor" title="Twitter" target="_blank" rel="noopener noreferrer">tw</a></li><li><a href="https://www.instagram.com/atelier_anchor" title="Instagram" target="_blank" rel="noopener noreferrer">ins</a></li><li><a href="https://weibo.com/u/7568137725" title="Weibo" target="_blank" rel="noopener noreferrer">wb</a></li><!--]--><li><button title="WeChat" class="QrCodeToggler">wx</button></li></ul></footer></div></div>
</body></html>