-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
189 lines (171 loc) · 13.1 KB
/
index.html
File metadata and controls
189 lines (171 loc) · 13.1 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caleb Winters</title>
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link rel="stylesheet" href="css/typography.css">
<!-- Fonts -->
<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=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<!-- SEO -->
<meta name="description" content="All-around product designer specializing in user experience and front-end code">
<meta name="author" content="Caleb Winters">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<!-- Open Graph -->
<meta property="og:title" content="Caleb Winters">
<meta property="og:description" content="All-around product designer specializing in user experience and front-end code">
<meta property="og:url" content="https://calebwinters.com">
<meta property="og:type" content="website">
<meta property="og:image" content="https://calebwinters.com/images/favicon/social-thumb.png">
<meta property="og:image:alt" content="Caleb Winters">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Caleb Winters">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@cmwinters">
<meta name="twitter:creator" content="@cmwinters">
<meta name="twitter:title" content="Caleb Winters">
<meta name="twitter:description" content="All-around product designer specializing in user experience and front-end code">
<meta name="twitter:image" content="https://calebwinters.com/images/favicon/social-thumb.png">
<!-- Analytics -->
<script defer src="https://cloud.umami.is/script.js" data-website-id="dad075b9-c02a-4dd9-a37e-e5899f1a20c3"></script>
</head>
<body data-bs-theme="light">
<div class="container py-5">
<header class="row align-items-center justify-content-md-center">
<div class="col-8">
<div class="row">
<div class="col-auto"><img src="images/caleb-avatar.jpeg" alt="A head shot of Caleb Winters smiling. Caleb is a white man with short brown hair and blue eyes, wearing a gray t-shirt" width="80px" class="img-thumbnail rounded-circle mb-3"></div>
<div class="col-lg-6">
<h1 class="mb-0">Caleb Winters</h1>
<p class="lead text-secondary">Senior Product Designer</p>
</div>
</div>
</div>
</header>
<article class="row justify-content-md-center">
<div class="col-md-8">
<p>Hello, I'm Caleb. I'm an all-around product designer specializing in user experience and front-end code. I have a strong background working on developer experience products. I've also designed products for PMs and administrators.</p>
<p>Most recently I worked at GitHub where I helped to ship GitHub Projects, repository rules and properties, GitHub Marketplace, and more.</p>
<p>
<a href="mailto:winters.caleb@gmail.com">Email me</a> if you'd like to work with me. 😊
</p>
</div>
</article>
<hr class="col-12 col-md-8 mx-auto my-5"/>
<article class="row justify-content-md-center mb-big">
<div class="col-md-8 mb-3">
<h2>GitHub Projects</h2>
<p>I helped design a 0-1 project management app that replaced the legacy <a href="https://github.blog/changelog/2024-05-23-sunset-notice-projects-classic/">Projects Classic</a>. Started from scratch. Worked with PMs and engineers to shape, design, ship, and iterate on the app. Introduced custom fields and draft issues. Helped design some custom components that were later modified and added to our design system, <a href="https://primer.style/">Primer</a>.</p>
</div>
<div class="col-12 col-lg-9">
<img src="images/projects-table.png" alt="This image shows a project management table for 'Octo Arcade Invaders - Release'. It is divided into three sections 'Prototype', 'Beta', and 'Launch'. Each task has a cell for 'Assignees', 'Status', and 'Size'." class="img-fluid mb-4">
<img src="images/projects-board.png" alt="This is a project management board view. It has three columns 'Backlog', 'In progress', 'Done'. Each column has tasks displayed as cards. Each card has the title and assorted metadata." class="img-fluid mb-4">
<img src="images/projects-menus.png" alt="This images shows some assorted popover menus from GitHub Projects. 'Layout' for configuring view settings and choosing between table, board, and roadmap layouts. 'Edit option' for configuring enum options and choosing a color. There is a column menu for sorting, filtering, or hiding the column. There are also two menus that show moments from creating a custom field. A custom field can be 'text', 'number', 'date', 'single select', or 'iteration'" class="img-fluid mb-4">
</div>
</article>
<article class="row justify-content-md-center mb-big">
<div class="col-md-8 mb-3">
<h2>Repository Governance</h2>
<p>Designed and shipped features to help enterprise admins manage repository policy at scale. I helped to design and ship custom properties and repository rulesets. Worked with engineering to deliver a user experience that aligned with our API.</p>
</div>
<div class="col-12 col-lg-9">
<img src="images/repos-props.png" alt="This image shows three different pieces of the Repository Properties UI. First there's a 'New property' form with fields for name, description, and type. 'Multi-select' is selected as the type, and there is a list below to add multi-select value options. Second, there is a form for setting property values on a repository. It's a list of four properties. Each property label has a dropdown button underneath it that can be used to select a value. Third, there is a filter dialog. The dialog has a filter input a the top. The input is focused and the autocomplete menu is open. The autocomplete menu shows the names of several custom properties." class="img-fluid mb-4">
<img src="images/repos-rules.png" alt="This image shows three pieces of the rulesets UI. First there is a list of rulesets. At the top there's a page header that says 'Rulesets' with a trailing button that says 'New ruleset'. Each list item has a ruleset title and an icon to indicate its enforcement status. Second, there's a repository picker with two sections. The top section allows you to choose your repository targeting criteria. The dropdown button for this is open and there's a single-select menu visible with options for 'All repositories', 'Only selected repositories', 'Repositories matching a filter', and 'Repositories matching a name'. The menu overlays the bottom row of the repository picture, hiding its contents. Third, there's a checklist of several branch rules. About half the rules are checked. Some examples of these rules are 'restrict creations', 'restrict updates', and 'restrict deletions'." class="img-fluid mb-4">
</div>
</article>
<article class="row justify-content-md-center mb-big">
<div class="col-md-8 mb-3">
<h2>Repository Design Refresh</h2>
<p>Refactored the design of the repository index, commits, and branches pages to align with Primer</p>
</div>
<div class="col-12 col-lg-9">
<img src="images/repos-index.png" alt="This image shows a list of repositories with a search bar at the top. Each list item has a repository title, description, topic tags, an activity sparkline, and some supplementary metadata." class="img-fluid mb-4">
<img src="images/repos-commits.png" alt="This image shows a list of commits arranged on a timeline. The timeline has points for dates. For each date, there is a list of commits nested underneath. Each list item has a commit message, commit author, a verification badge, a link to the commit SHA, and a code icon button." class="img-fluid mb-4">
<img src="images/repos-branches.png" alt="This image shows a data table with branch names. The `main` branch appears in a second, separate table up at the top. Each table has columns for 'branch', 'updated at', 'check status', 'behind | ahead', and 'pull request'. Each row also has two trailing icon buttons. There is a trashcan button for deleting a branch. There is a horizontal kebab button for opening an action menu" class="img-fluid mb-4">
</div>
</article>
<article class="row justify-content-md-center mb-big">
<div class="col-md-8 mb-3">
<h2>GitHub Marketplace</h2>
<p>Worked on self-service tools for developers to manage their Marketplace listings. Led a design refresh of the Marketplace to update the visual design and introduce GitHub Actions to the Marketplace.</p>
</div>
<div class="col-12 col-lg-9">
<img src="images/marketplace-index.png" alt="This image shows an index page for an app marketplace. At the top there is a decorative header with a search bar. On the left there is a sidebar menu with categories such as 'API management', 'Chat', and 'Code quality'. At the top of the main area there is a section called 'Featured Apps' that has four applications displayed on large colorful tiles. Below this, there's a section called 'Trending'. Here there's a simpler list of apps displayed in a two-column grid." class="img-fluid mb-4">
<img src="images/marketplace-show.png" alt="This image shows a marketplace listing for the application 'Slack+GitHub'. There's a big call to action button that says 'Set up a plan'. On the left there's an avatar for the app, a 'verified by GitHub' line, and some additional metadata. The main section is on the right. It has a longform application description and an image gallery." class="img-fluid mb-4">
</div>
</article>
<section class="row justify-content-md-center">
<div class="col-md-8">
<h2>Experience</h2>
<div class="row mt-4">
<div class="col-md-3 text-mono text-secondary">2015—2025</div>
<div class="col-md-9">
<p class="mb-0">Senior Product Designer @ <a href="https://github.com/">GitHub</a></p>
<!-- <span class="text-secondary text-small">Remote</span> -->
</div>
</div>
<div class="row mb-4 mt-4">
<div class="col-md-3 text-mono text-secondary">2014—2015</div>
<div class="col-md-9">
<p class="mb-0">Founding Designer @ <a href="https://www.producthunt.com/products/screenbeacon">Screenbeacon</a></p>
<!-- <span class="text-secondary text-small">Santa Cruz, CA</span> -->
</div>
</div>
<div class="row mb-4 mt-4">
<div class="col-md-3 text-mono text-secondary">2012—2014</div>
<div class="col-md-9">
<p class="mb-0">Senior Designer @ <a href="https://zurb.com/">ZURB</a></p>
<!-- <span class="text-secondary text-small">Campbell, CA</span> -->
</div>
</div>
<div class="row mt-4">
<div class="col-md-3 text-mono text-secondary">2010—2012</div>
<div class="col-md-9">
<p class="mb-0">Software Designer @ <a href="https://digitalcorps.bsu.edu/">Digital Corps</a></p>
<!-- <span class="text-secondary text-small">Muncie, IN</span> -->
</div>
</div>
</div>
</section>
<hr class="col-12 col-md-8 mx-auto my-5"/>
<section class="row justify-content-md-center">
<div class="col-md-8">
<h2>Education</h2>
<div class="row mt-4">
<div class="col-md-3 text-mono text-secondary">2006—2010</div>
<div class="col-md-9">
<p class="mb-0">BFA, Visual Communications @ <a href="https://bsu.edu/">Ball State University</a></p>
<span class="text-secondary text-small">Muncie, IN</span>
</div>
</div>
</div>
</section>
<hr class="col-12 col-md-8 mx-auto my-5"/>
<footer class="row justify-content-md-center mb-5">
<div class="col-md-8">
<h2>Contact</h2>
<div class="row mt-4">
<!-- <div class="col-md-3 text-mono text-secondary">Contact</div> -->
<div class="col-md-9">
<a href="mailto:winters.caleb@gmail.com">Email</a>
<a class="mx-3" href="https://linkedin.com/in/calebwinters">LinkedIn</a>
<a href="https://github.com/cmwinters">GitHub</a>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>