-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
134 lines (124 loc) · 6.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!--?xml version="1.0" encoding="UTF-8"?-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Julius Tarng — Independent Software Creative</title>
<meta name="Description" content="A short Web Page about Julius on the Internet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="Julius Tarng — Independent Software Creative">
<meta property="og:url" content="https://tarng.com">
<meta property="og:type" content="website">
<meta property="og:description" content="A short Web Page about Julius on the Internet">
<meta property="og:image" content="avvy-bald-grey.png">
<link type="text/css" rel="stylesheet" href="/style.css">
</head>
<body>
<img
src="avvy-bald-grey.png"
alt="Autobiographical cartoon animation of Julius banging his hands on a laptop."
class="me"
/>
<div
style="
z-index: 2;
position: fixed;
inset: 0;
pointer-events: none;
backdrop-filter: url(#displacementFilter);
-webkit-backdrop-filter: url(#displacementFilter);
transform: rotate(180deg);
"
></div>
<div
style="
z-index: 3;
position: fixed;
inset: 0;
top: auto;
height: 40px;
pointer-events: none;
background: linear-gradient(rgba(255, 255, 255, 0), white 90%);
"
></div>
<svg
viewBox="0 0 2000 2000"
xmlns="http://www.w3.org/2000/svg"
style="
position: fixed;
z-index: -1;
inset: 0;
min-width: 1440px;
opacity: 1;
filter: saturate(4);
"
>
<filter id="turbulenceOnly" x="0" y="0" width="100%" height="100%">
<feTurbulence
baseFrequency="0.001"
numOctaves="1"
seed="12024"
result="turb"
></feTurbulence>
<!-- <feComponentTransfer in="turb">
<feFuncR type="gamma" amplitude="1" exponent="6" offset="0"></feFuncR>
<feFuncG type="gamma" amplitude="12" exponent="3" offset="0"></feFuncG>
<feFuncB type="gamma" amplitude="10" exponent="1" offset="0"></feFuncB>
</feComponentTransfer> -->
</filter>
<rect
x="0"
y="0"
width="100%"
height="100%"
style="filter: url(#turbulenceOnly)"
></rect>
</svg>
<svg viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg" style="display: none">
<filter id="displacementFilter" x="0%" y="0%" width="100%" height="100%">
<feTurbulence
type="turbulence"
baseFrequency="0.003"
numOctaves="1"
result="turbulence"
/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" />
</filter>
</svg>
<h1>
<span style="letter-spacing: -0.07em">J</span>ulius
<span style="letter-spacing: -0.13em">T</span>a<span
style="letter-spacing: -0.04em"
>r</span
>ng
</h1>
<h2>I run a <a href="https://read.cv/teams/toolshop" target="_blank" rel="noopener">software imagineering studio</a>, prototyping ambitious new software like</h2>
<ol>
<li>collaborative mapmaking <span class="at">@</span> <a href="https://felt.com" target="_blank" rel="noopener">Felt</a></li>
<li>developer tooling <span class="at">@</span> <a href="https://thebrowser.company" target="_blank" rel="noopener">The Browser Company</a></li>
<li>multiplayer scrapbooking <span class="at">@</span> <a href="https://sprout.place" target="_blank" rel="noopener">Sprout</a></li>
<li><p>highly gestural interactions and animations, image processing pipelines, practical shaders, layout algorithms</p>
<p><em>⌁ Email julius at tarng dot com for 2023 projects</em></p></li>
</ol>
<h2>Elsewhere I</h2>
<ol>
<li>tweet dumb thoughts on <a href="https://twitter.com/tarngerine" target="_blank" rel="noopener">Twitter</a> (say hi!)</li>
<li>teach <a href="https://www.youtube.com/channel/UC7KUkMHVfmnxCibm-oFzLPw/videos" target="_blank" rel="noopener">computing concepts for designers</a></li>
<li>build <a href="https://github.com/tarngerine" target="_blank" rel="noopener">tools</a> and make <a href="https://tarngerine.itch.io" target="_blank" rel="noopener">video games</a></li>
<li>shitpost tools like <a href="https://www.theverge.com/2019/2/5/18212228/twitter-tokimeki-spark-joy-marie-kondo-konmari" target="_blank" rel="noopener">Tokimeki Unfollow</a> and <a href="https://www.theverge.com/2021/12/2/22814267/jack-dorsey-block-square-company-generator-profile" target="_blank" rel="noopener">blockify yourself</a></li>
<li>hide out at the library, reading <a href="http://goodreads.com/tarngerine" target="_blank" rel="noopener">books</a></li>
<li>try to <a href="notes.html">learn stuff</a></li>
<li><span style="font-size: 1.5em">🀇🀏🀐🀘🀙🀡🀀🀁🀂🀃🀄︎︎🀅🀆🀆</span></li>
</ol>
<h2>In the past, I</h2>
<ol>
<li>studied Industrial Design & HCI at Carnegie Mellon</li>
<li>designed objects at Smart Design like <a href="https://www.amazon.com/gp/product/B00A2KD8LQ" target="_blank" rel="noopener">this OXO spatula</a></li>
<li>explored community building and online discourse systems in <a href="https://www.theverge.com/2012/10/15/3490670/branch-redesign" target="_blank" rel="noopener">Branch</a>, <a href="https://www.theverge.com/2013/11/21/5129772/potluck-2-messaging-app-for-the-news" target="_blank" rel="noopener">Potluck</a> and <a href="https://newsroom.fb.com/news/2014/10/introducing-rooms/" target="_blank" rel="noopener">Rooms</a></li>
<li>hacked on <a href="https://medium.com/facebook-design/a-month-designing-in-vr-62474aef1f1c" target="_blank" rel="noopener">virtual reality</a> and photographed <a href="https://medium.com/facebook-design/photographing-diverse-hands-at-facebook-3229ea76f94" target="_blank" rel="noopener">a bunch of hands</a></li>
<li>started and led the <a href="https://twitter.com/tarngerine/status/1108038641819893760" target="_blank" rel="noopener">design tooling and infrastructure</a> team for Facebook, Instagram, Oculus, and WhatsApp</li>
<li>scaled the design team and shaped new <a href="https://webflow.com/blog/accessibility-at-webflow" target="_blank" rel="noopener">accessibility</a> and <a href="https://webflow.com/blog/announcing-logic-beta" target="_blank" rel="noopener">no-code initiatives</a> at Webflow</li>
</ol>
<div class="seal">唐<br />昱</div>
</body>
</html>