-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (171 loc) · 10 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!doctype html>
<html data-input="mouse" lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GWPPZWQTT3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GWPPZWQTT3');
</script>
<meta charset="utf-8">
<title>Tyler Trotter</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property='og:title' content="Tyler Trotter's Portfolio"/>
<meta property='og:image' content="https://www.ttrotter.com/images/og-image.png"/>
<meta property='og:description' content="Summaries and images from different projects I've undertaken."/>
<meta property='og:url' content="https://www.ttrotter.com"/>
<link rel="icon" href="/favicon.png" sizes="any">
<link rel="stylesheet" href="https://use.typekit.net/oac5fdz.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lustria&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="bio">
<div class="bio__container">
<svg viewBox="0 0 38.25 100" class="bg2">
<polygon points="38.25,0 38.25,100 0,100" />
</svg>
<h1 class="bio__name">
<svg viewBox="0 0 500 3000" class="bg1">
<rect width="500" height="3000"/>
<rect width="150" height="3000" class="accent-block"/>
</svg>
<span hidden>Tyler Trotter</span>
<svg width="625" height="357" viewBox="0 0 625 357" class="tyler-trotter"><path d="M17.34 352.945v-90.7H0v-26.65h17.34v-39.09h35.1v39.11h16.91v26.65H52.44v90.7l-35.1-.02ZM84.37 352.945v-117.35h33v12.48h.42c6.13-12.48 15.86-16.49 29.39-16.49v35.31c-20.93.21-27.7 8-27.7 21.35v64.7H84.37ZM217.36 356.505c-35.73 0-63.22-26.43-63.22-62.38 0-36.37 28.12-62.37 63.22-62.37 35.31 0 63.22 26.43 63.22 61.95 0 36.8-27.91 62.8-63.22 62.8Zm28.12-62.38c0-15.64-11.84-29.6-28.33-29.6-15.44 0-27.91 13.53-27.91 29.6s12.26 29.6 28.12 29.6c16.49.04 28.12-13.91 28.12-29.56v-.04Z"/><path fill-rule="evenodd" d="M295.044 262v90.7l35.1.02v-90.7h16.92V262h17.97v90.7l35.1.02v-90.7h16.91v-26.65h-16.86v-39.11h-35.1v39.09h-18.833v.02h-16.107v-39.11h-35.1v39.09h-17.3V262h17.3Z" clip-rule="evenodd"/><path d="M453.96 304.955c1.9 13.32 13.11 22.2 27.49 22.2 9.51 0 15.64-3.6 21.35-11h36c-11.21 25.59-32.57 40.6-57.3 40.6a62.141 62.141 0 0 1-44.008-18.172 62.14 62.14 0 0 1-18.222-43.988c0-33.84 27.07-63 61.53-63 35.1 0 62 27.69 62 64.06a45.168 45.168 0 0 1-.84 9.31l-88-.01Zm53.7-23.69c-2.74-12.05-13.32-20.08-26.85-20.08-12.69 0-23.68 7.61-26.43 20.08h53.28ZM562 352.945v-117.35h33v12.48h.42c6.13-12.48 15.86-16.49 29.39-16.49v35.31c-20.93.21-27.7 8-27.7 21.35v64.7H562ZM177.61 157.15V66.44h-17.34V39.8h17.34V.68h35.1V39.8h16.92v26.64h-16.92v90.71h-35.1ZM257.32 196.26l18.61-45L232.37 39.8h37.43l23.47 68.08h.42L316.1 39.8h37.22l-58.81 156.46h-37.19ZM365.16 157.15V.68h35.09v156.47h-35.09ZM453.96 109.15c1.9 13.32 13.11 22.2 27.49 22.2 9.51 0 15.64-3.59 21.35-11h36c-11.29 25.59-32.61 40.59-57.35 40.59a62.128 62.128 0 0 1-62.17-62.16c0-33.83 27.07-63 61.53-63 35.1 0 62 27.7 62 64.07a45.072 45.072 0 0 1-.84 9.3h-88.01Zm53.71-23.68c-2.75-12.05-13.33-20.09-26.86-20.09-12.68 0-23.68 7.61-26.43 20.09h53.29ZM562 157.15V39.8h33v12.47h.42c6.13-12.47 15.86-16.49 29.39-16.49v35.31c-20.93.21-27.7 8-27.7 21.36v64.7H562Z"/></svg>
</h1>
<strong class="bio__tag">Product Designer</strong>
<div class="bio__copy">
<svg viewBox="0 0 15 150" class="bio-bg">
<rect width="15" height="150"/>
</svg>
<p>
Blazing trails to effective web products. Currently I’m leading the product design team at Cognito Forms.
</p>
</div>
</div>
</div>
<div class="projects">
<svg viewBox="0 0 38.25 100" class="bg3">
<polygon points="0,0 38.25,0 0,100" />
</svg>
<svg viewBox="0 0 38.25 100" class="bg4">
<polygon points="38.25,0 38.25,100 0,100" />
<rect class="mobile-accent" width="500" height="3000"/>
</svg>
<h2 class="selected-work-heading">Selected Work</h2>
<ol class="projects__list">
<li>
<a href="app-redesign">
<img src="images/cognito-app.png" alt="An illustration showing Cognito Form's form builder on desktop and a grid of submitted entries on mobile." width="1200" height="750" />
<h2>Cognito Forms App</h2>
<p>Enhanced the visual sophistication of a complex web application, extending a new design system to encompass the Cognito Forms app.</p>
<span class="project__cta">Check It Out</span>
</a>
</li>
<li>
<a href="the-ux-of-creating-new-views/">
<img src="images/views-cover.webp" width="1200" height="750" alt="Various UI elements used in different iterations of the design." />
<h2>The UX of Creating Views</h2>
<p>Led a focused effort to improve an interface for creating new views, addressing key usability issues and resulting in a 14 percentage point increase in view creation.</p>
<span class="project__cta">Check It Out</span>
</a>
</li>
<li>
<a href="a-design-system/">
<img src="images/concentric.png" width="1200" height="750" alt="Overlapping screenshots of Cognito Form's homepage and a content page." />
<h2>Concentric Design Language</h2>
<p>Oversaw a brand new look for Cognito Forms which contributed to a 68.5% YOY conversion rate jump in the first month after rollout.</p>
<span class="project__cta">Check It Out</span>
</a>
</li>
<li>
<a href="flexible-forms/">
<img src="images/cognito-form.png" width="1200" height="750" alt="An illustration of several mobile phones each containing different UI elements of a Cognito Form." />
<h2>Flexible Forms</h2>
<p>Rethought the UI of generated forms from scratch with a focus on improved responsiveness and accessibility.</p>
<span class="project__cta">Check It Out</span>
</a>
</li>
</ol>
</div>
<footer class="footer">
<div class="footer__container">
<svg viewBox="0 0 500 500" class="footer__bg">
<rect width="500" height="500"/>
</svg>
<div>
<p>
I’ve always enjoyed creating—games, an amusement park, logos, comics, dinners for my family, and of course web apps.
</p>
<p>
When not creating, I enjoy a good fat history book and/or a backpacking trip in the mountains.
</p>
</div>
<div class="links">
<a class="resume" href="/resume-detail-a.pdf" target="_blank">résumé</a>
<a href="https://www.linkedin.com/in/tyler-trotter-53b18b39/" class="icon-link" title="Linkedin">
<svg width="20" height="20"><g clip-path="url(#a)"><path fill="currentColor" d="M15.25 1.373H4.75A3.75 3.75 0 0 0 1 5.123v10.5a3.75 3.75 0 0 0 3.75 3.75h10.5a3.75 3.75 0 0 0 3.75-3.75v-10.5a3.75 3.75 0 0 0-3.75-3.75ZM7 15.623H4.75v-8.25H7v8.25ZM5.875 6.422a1.318 1.318 0 0 1-1.313-1.323c0-.73.588-1.323 1.313-1.323.724 0 1.313.593 1.313 1.323S6.6 6.422 5.875 6.422ZM16 15.623h-2.25V11.42c0-2.526-3-2.335-3 0v4.203H8.5v-8.25h2.25v1.324C11.797 6.757 16 6.614 16 10.554v5.069Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M1 1.373h18v18H1z"/></clipPath></defs></svg>
</a>
</div>
<img src="images/tyler-trotter-contrast.jpg" class="pic" alt="Tyler Trotter" />
</div>
</footer>
</div>
<script src="common.js"></script>
<script>
document.addEventListener('keyup', e => {
if (e.key === 'Escape')
removeSelection(e)
});
document.querySelectorAll('.project').forEach(project => {
project.addEventListener('click', e => handleProjectClick(e));
})
document.querySelectorAll('.project').forEach(project => {
project.addEventListener('keyup', e => {
if (e.key === 'Enter')
handleProjectClick(e)
});
})
document.querySelectorAll('.project__close').forEach(projectClose => {
console.log('close')
projectClose.addEventListener('click', e => {
e.stopPropagation();
removeSelection()
});
})
document.addEventListener('click', e => {
if (!e.target.closest('.projects'))
removeSelection();
})
function handleProjectClick(e) {
const projectsContainer = document.querySelector('.projects__list');
const newProject = e.target.closest('.project');
const id = newProject.getAttribute('id');
if (projectsContainer.getAttribute('data-active-cell') === id)
return;
removeSelection();
document.querySelector('.projects').classList.add('is-active');
newProject.classList.add('is-active');
projectsContainer.setAttribute('data-active-cell', id);
gtag('event', 'summary_view', {
page_title: 'Home#' + id,
page_location: 'https://ttrotter.com#' + id,
send_to: 'G-GWPPZWQTT3'
});
}
function removeSelection() {
const oldProject = document.querySelector('.project.is-active');
const projectsContainer = document.querySelector('.projects__list');
document.querySelector('.projects').classList.remove('is-active');
if (oldProject)
oldProject.classList.remove('is-active');
projectsContainer.removeAttribute('data-active-cell');
}
</script>
</body>
</html>