/
index.html
139 lines (111 loc) · 8.57 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
135
136
137
138
139
<html>
<head>
<title>Yee Machine Projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="favicons/manifest.json">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<script src="typed.js"></script>
<script src="main.js"></script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-83985733-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<container class="page1">
<h3 class="logo folded right processed title flipthis-highlight" data-max_flow="3" data-max_lines="3" style="padding: 28vw 15vw 28vw 5vw;">
<div class="line"><p class="yeeshadow" style="margin-top:-0.8em"> </p><p class="red">Yee</p></div>
<div class="line"><p class="yeeshadow" style="margin-top:-0.8em">Yee</p><p class="red">Machine</p></div>
<div class="line"><p class="yeeshadow" style="margin-top:-0.8em">Machine</p><p class="red">Projects</p></div></div>
<div class="line"><p class="yeeshadow" style="margin-top:-0.8em">Projects</p></div>
</h3>
</container>
<container class="projects">
<div class="mobilepage" style="z-index:9999">
<object class="animate" id="svgObject5" type="image/svg+xml" data="birdbug.svg">Your browser does not support SVGs</object>
<div class="mobiledesc"><h3>Bird-Bug Script</h3><p>An ongoing digitization and archive of a 2000 year old Chinese script that had its origins on bronze vessels and tablets.</p><a href="https://yeemachine.com/birdbug">GO</a></div>
</div>
<div class="mobilepage">
<object class="animate" id="svgObject3" type="image/svg+xml" data="spacex.svg">Your browser does not support SVGs</object>
<div class="mobiledesc"><h3>Space X Protoype</h3><p>A redesign of the Space X website with an emphasis on information hierarchy. Prototyped using Invision and recorded.</p><a href="https://vimeo.com/196500130">GO</a></div>
</div>
<div class="mobilepage">
<div class="emotions" ><p >[ <span class="element"></span> ]</p></div>
<div class="mobiledesc"><h3>Watson X Wayback</h3><p>A mashup between Wayback Machine's resources and IBM Watson's tone analyzer that looks at the tone of any given website for changes in language over time.</p><a href="http://watsonwayback.com">GO</a></div>
</div>
<div class="mobilepage">
<object class="animate" id="svgObject4" type="image/svg+xml" data="map.svg">Your browser does not support SVGs</object>
<div class="mobiledesc"><h3>Railways Hack</h3><p>Front-end mockup of a transit app to solve the problem of unreliable MTA subway updates. By installing low cost beacons on and in the train stations, crowd-sourced data would allow for near instant notifications of delays and traffic. Demoed at the 2016 Facebook Global Hackathon.</p><a href="https://yeemachine.github.io/railways.fish/">GO</a></div>
</div>
<div class="mobilepage">
<object class="animate" id="svgObject2" type="image/svg+xml" data="sound.svg">Your browser does not support SVGs</object>
<div id="glitchcontainer"><p class="glitch"data-text="Click to Begin">Click to Begin</p></div>
<div class="mobiledesc"><h3>Digital Biome</h3><p>An in-browser soundscape populated with found and recorded voice samples using three.js. Use the 'WASD' keys and mouse to explore. Press space to shoot.</p><a href="http://richyee.com/">GO</a></div>
</div>
<div class="mobilepage">
<object class="animate" id="svgObject" type="image/svg+xml" data="logo.svg">Your browser does not support SVGs</object>
<div class="mobiledesc"><h3>Yee Machine</h3><p>Exploring what it means to brand oneself, the projects displayed on this page are a mix of completed and concept works.</p><a href="http://yeemachine.com">GO</a></div>
</div>
<div class="mobilepage">
<object class="animate" id="svgObject6" type="image/svg+xml" data="loading.svg">Your browser does not support SVGs</object>
<div class="mobiledesc"><h3>Graphic Design</h3><p>An assortment of graphic design work consisting of posters, icons, and logos.</p><a href="http://yeemachine.com/design">GO</a></div>
</div>
<div class="description" style="position:fixed;right:3.6vw;top:42.5vh;margin-top:-10vw;margin-left:0vw;width:15vw;height:20vw;display:flex;align-items:flex-end;justify-content:flex-start;font-size:16px;"><p></p></div>
</container>
<container class="page2">
<container style="display:flex;flex-direction:column;align-items:flex-start;margin-top:-10vw">
<h3 class="logo folded nav processed flipthis-highlight" data-max_flow="3" data-max_lines="3" style="margin: -3vw 0 0 7vw;">
<a href="https://yeemachine.com/birdbug" target="_blank" class="line timeline1" ><p class="yeehover timeline" style="margin-top:-0.8em"> </p><p class="blue1">Bird-Bug Script</p></a>
<div class="line"><p class="yeehover timeline" style="margin-top:-0.8em">Bird-Bug Script</p></div>
</h3>
<h3 class="logo folded nav processed flipthis-highlight" data-max_flow="3" data-max_lines="3" style="margin: -.5vw 0 0 7vw;left:-4vw;">
<a href="https://vimeo.com/196500130" target="_blank" class="line space1"><p class="yeehover space" style="margin-top:-0.8em"> </p><p class="blue2">spacex proto</p></div></a>
<div class="line"><p class="yeehover space" style="margin-top:-0.8em">spacex proto</p></div>
</h3>
<h3 class="logo folded nav processed flipthis-highlight" data-max_flow="3" data-max_lines="3" style="margin: -.5vw 0 0 7vw;left:-8vw;">
<a href="http://watsonwayback.com" target="_blank" class="line watson1"><p class="yeehover watson" style="margin-top:-0.8em"> </p><p class="blue3">watson wayback</p></div></a>
<div class="line"><p class="yeehover watson" style="margin-top:-0.8em">watson wayback</p></div>
</h3>
<h3 class="logo folded nav processed flipthis-highlight" data-max_flow="3" data-max_lines="3" style="margin: -.5vw 0 0 7vw;left:-12vw;">
<a href="https://yeemachine.github.io/railways.fish/" target="_blank" class="line railways1"><p class="yeehover railways" style="margin-top:-0.8em"> </p><p class="blue4">railways hack</p></div></a>
<div class="line"><p class="yeehover railways" style="margin-top:-0.8em">railways hack</p></div>
</h3>
<h3 class="logo folded nav processed flipthis-highlight" data-max_flow="3" data-max_lines="3" style="margin: -.5vw 0 0 7vw;left:-16vw;">
<a href="http://richyee.com/biome" target="_blank" class="line sound1"><p class="yeehover sound" style="margin-top:-0.8em"> </p><p class="blue5">Digital Biome</p></div></a>
<div class="line"><p class="yeehover sound" style="margin-top:-0.8em">Digital Biome</p></div>
</h3>
<h3 class="logo folded nav processed flipthis-highlight" data-max_flow="3" data-max_lines="3" style="margin: -.5vw 0 0 7vw;left:-20vw;">
<a href="http://yeemachine.com/brand" target="_blank" class="line yee1"><p class="yeehover yee" style="margin-top:-0.8em"> </p><p class="blue6">Yee machine</p></div></a>
<div class="line"><p class="yeehover yee" style="margin-top:-0.8em">Yee machine</p></div>
</h3>
<h3 class="logo folded nav processed flipthis-highlight" data-max_flow="3" data-max_lines="3" style="margin: -.5vw 0 0 7vw;left:-24vw;">
<a href="http://yeemachine.com/design" target="_blank" class="line graphic1"><p class="yeehover graphic" style="margin-top:-0.8em"> </p><p class="blue7">Graphic Design</p></div></a>
<div class="line"><p class="yeehover graphic" style="margin-top:-0.8em">Graphic Design</p></div>
</h3>
</container>
</container>
<container class="page3">
<a href="mailto:rich@yeemachine.com" target="_blank" class="logo folded right supporting contactC processed flipthis-highlight" data-max_flow="3" data-max_lines="3" >
<div class="line"><p class="yeeshadow yeeshadow2 contact" style="margin-top:-0.8em"> </p><p class="red red2">Contact</p></div>
<div class="line"><p class="yeeshadow yeeshadow2 contact" style="margin-top:-0.8em">Contact</p></div>
</a>
</container>
</body>
</html>