-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
327 lines (324 loc) · 20.5 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Import 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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!--Import stylesheets-->
<link rel="stylesheet" href="./src/css/home-page/home-page.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=dark_mode,light_mode" />
<title>Jordan Walker - Software Engineer</title>
</head>
<body>
<header>
<nav class="nav-container">
<div class="logo-container">
<a href="./index.html">
<span class="logo-text">Jordan Walker</span>
</a>
</div>
<ul class="nav-list">
<a href="./index.html">
<li class="nav-list-item">Home</li>
</a>
<a href="#featured-projects">
<li class="nav-list-item">Projects</li>
</a>
<a href="./src/assets/files/jwalker_resume.pdf" download>
<li class="nav-list-item">Resume</li>
</a>
</ul>
</nav>
</header>
<main>
<div class="banner-container">
<div class="clock-container">
<div class="time">
<span class="hrs"></span>
<span class="divider active">:</span>
<span class="minutes"></span>
<span class="meridiem"></span>
<span class="time-zone">EST</span>
</div>
</div>
</div>
<section class="introduction">
<div class="name-container">
<h2 class="greeting">Hey, I'm Jordan</h2>
<div class="intro-icons">
<span class="email">[email protected]</span>
<a href="https://github.com/PRISM-EXE">
<div class="icon-container" id="github-icon-container">
<svg id="github-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#f0f0f0" fill="none">
<path d="M6.51734 17.1132C6.91177 17.6905 8.10883 18.9228 9.74168 19.2333M9.86428 22C8.83582 21.8306 2 19.6057 2 12.0926C2 5.06329 8.0019 2 12.0008 2C15.9996 2 22 5.06329 22 12.0926C22 19.6057 15.1642 21.8306 14.1357 22C14.1357 22 13.9267 18.5826 14.0487 17.9969C14.1706 17.4113 13.7552 16.4688 13.7552 16.4688C14.7262 16.1055 16.2043 15.5847 16.7001 14.1874C17.0848 13.1032 17.3268 11.5288 16.2508 10.0489C16.2508 10.0489 16.5318 7.65809 15.9996 7.56548C15.4675 7.47287 13.8998 8.51192 13.8998 8.51192C13.4432 8.38248 12.4243 8.13476 12.0018 8.17939C11.5792 8.13476 10.5568 8.38248 10.1002 8.51192C10.1002 8.51192 8.53249 7.47287 8.00036 7.56548C7.46823 7.65809 7.74917 10.0489 7.74917 10.0489C6.67316 11.5288 6.91516 13.1032 7.2999 14.1874C7.79575 15.5847 9.27384 16.1055 10.2448 16.4688C10.2448 16.4688 9.82944 17.4113 9.95135 17.9969C10.0733 18.5826 9.86428 22 9.86428 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</a>
<a href="https://www.linkedin.com/in/jwalkerfx/">
<div class="icon-container" id="linkedin-icon-container">
<svg id="linkedin-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#f0f0f0"><path d="M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z"></path></svg>
</div>
</a>
</div>
</div>
<p class="summary">I'm a detail-oriented software engineer who discovered their love for developing user-centered applications while working as an FX Artist / Technical Director in the film and television industry. I now build products to help users tackle complex problems quickly and efficiently.</p>
</section>
<section class="technologies">
<h3>Technologies</h3>
<div class="technology-gallery">
<div class="technology-container" id="html-container">
<div class="technology-icon">
<img id="html-icon" src="./src/assets/imgs/home-page/icons/html5-icon.svg">
</div>
<span class="technology-name">HTML</span>
</div>
<div class="technology-container" id="css-container">
<div class="technology-icon">
<img id="css-icon" src="./src/assets/imgs/home-page/icons/css-icon.svg">
</div>
<span class="technology-name">CSS</span>
</div>
<div class="technology-container" id="javascript-container">
<div class="technology-icon">
<img id="javascript-icon" src="./src/assets/imgs/home-page/icons/javascript-icon.svg">
</div>
<span class="technology-name">JavaScript</span>
</div>
<div class="technology-container" id="typescript-container">
<div class="technology-icon">
<img id="typescript-icon" src="./src/assets/imgs/home-page/icons/typescriptlang-icon.svg">
</div>
<span class="technology-name">TypeScript</span>
</div>
<div class="technology-container" id="node-container">
<div class="technology-icon">
<img id="node-icon" src="./src/assets/imgs/home-page/icons/nodejs-icon.svg">
</div>
<span class="technology-name">Node.js</span>
</div>
<div class="technology-container" id="mongo-container">
<div class="technology-icon">
<img id="mongo-icon" src="./src/assets/imgs/home-page/icons/mongodb-icon.svg">
</div>
<span class="technology-name">MongoDB</span>
</div>
<div class="technology-container" id="mongo-container">
<div class="technology-icon">
<img id="mongo-icon" src="./src/assets/imgs/home-page/icons/expressjs-icon-002.svg">
</div>
<span class="technology-name">Express.js</span>
</div>
<div class="technology-container" id="mongo-container">
<div class="technology-icon">
<img id="mongo-icon" src="./src/assets/imgs/home-page/icons/reactjs-icon.svg">
</div>
<span class="technology-name">React</span>
</div>
<div class="technology-container" id="mongo-container">
<div class="technology-icon">
<img id="mongo-icon" src="./src/assets/imgs/home-page/icons/js_redux-icon.svg">
</div>
<span class="technology-name">Redux</span>
</div>
<div class="technology-container" id="mongo-container">
<div class="technology-icon">
<img id="mongo-icon" src="./src/assets/imgs/home-page/icons/git-scm-icon.svg">
</div>
<span class="technology-name">Git</span>
</div>
<div class="technology-container" id="mongo-container">
<div class="technology-icon">
<img id="mongo-icon" src="./src/assets/imgs/home-page/icons/postgresql-icon.svg">
</div>
<span class="technology-name">PostgresSQL</span>
</div>
</div>
</section>
<section class="experience">
<h3>Experience</h3>
<div class="experience-container">
<div class="position">
<div class="bullet-point">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(240,240,240,1)"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>
</div>
<div class="position-info">
<div class="title-container">
<h4 class="job-title">Senior FX Technical Director</h4>
<span class="date">2023 - 2024</span>
</div>
<span class="company">Sony Pictures Imageworks</span>
<br>
<ul class="description-list">
<li><p>Designed and implemented a customizable simulation system using VEX (a language loosely based on C, and takes ideas from C++ as well as RenderMan's shading language).</p></li>
<li><p>Built procedural systems to optimize workflows, reduce iteration times, and ensure scalability, demonstrating problem-solving and automation skills.</p></li>
<li><p>Collaborated cross-functionally with artists and technical teams to align creative goals with technical solutions, enhancing team efficiency and project outcomes.</p></li>
</ul>
</div>
</div>
<br>
<div class="position">
<div class="bullet-point">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(240,240,240,1)"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>
</div>
<div class="position-info">
<div class="title-container">
<h4 class="job-title">FX Technical Director</h4>
<span class="date">2022 - 2023</span>
</div>
<span class="company">FuseFX</span>
<br>
<ul class="description-list">
<li><p>Engineered intuitive, artist-friendly tools for generating detailed procedural effects, emphasizing automation, usability, and creative flexibility.</p></li>
<li><p>Created modular systems for handling complex simulations, emphasizing scalability and performance.</p></li>
<li><p>Integrated solutions into production pipelines, streamlining processes and improving efficiency.</p></li>
</ul>
</div>
</div>
<br>
<div class="position">
<div class="bullet-point">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(240,240,240,1)"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>
</div>
<div class="position-info">
<div class="title-container">
<h4 class="job-title">FX Technical Director</h4>
<span class="date">2021 - 2022</span>
</div>
<span class="company">Moving Picture Company (MPC)</span>
<br>
<ul class="description-list">
<li><p>Contributed to the development of a modular library of smoke simulations, incorporating tools for retiming, density adjustments, and transformations, showcasing skills in creating scalable and reusable systems.</p></li>
<li><p>Engineered solutions for large-scale and small-scale particle and volume simulations, demonstrating expertise in data management, computational optimization, and algorithmic problem-solving.</p></li>
<li><p>Collaborated with cross-disciplinary teams to integrate custom simulation tools into production pipelines, ensuring technical consistency and efficiency.</p></li>
</ul>
</div>
</div>
</div>
</section>
<section class="projects">
<h3 id="featured-projects">Featured Projects</h3>
<div class="project-gallery">
<section class="project" id="project-001">
<div class="project-filter" id="filter-001">
<div class="project-info">
<h5 class="project-title">Pokédex</h5>
<div class="project-technologies">
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/javascript-icon-002.svg">
<h6>JavaScript</h6>
</div>
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/nodejs-icon-002.svg">
<h6>Node.js</h6>
</div>
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/expressjs-icon-002.svg">
<h6>Express</h6>
</div>
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/css-icon-002.svg">
<h6>CSS</h6>
</div>
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/html5-icon-002.svg">
<h6>HTML</h6>
</div>
</div>
<div class="last-row">
<p class="project-description">
Website allowing users to search and get stats for their favorite pokemon.
</p>
<div class="project-icon-container">
<a href="https://prism-pokedex.onrender.com/">
<h6 class="link-title">Visit</h6>
</a>
<span>|</span>
<a href="https://github.com/PRISM-EXE/pokedex">
<h6 class="link-title source-link">Source</h6>
</a>
</div>
</div>
</div>
</div>
</section>
<br>
<section class="project" id="project-002">
<div class="project-filter" id="filter-002">
<div class="project-info">
<h5 class="project-title">Ro Sham Bo!</h5>
<div class="project-technologies">
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/javascript-icon-002.svg">
<h6>JavaScript</h6>
</div>
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/css-icon-002.svg">
<h6>CSS</h6>
</div>
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/html5-icon-002.svg">
<h6>HTML</h6>
</div>
</div>
<div class="last-row">
<p class="project-description">
Website allowing users to challenge the computer to a game of Ro Sham Bo (Rock Paper Scissors). Website tracks and keeps record of players wins, losses, and draws.
</p>
<div class="project-icon-container">
<a href="https://prism-exe.github.io/ro-sham-bo/">
<h6 class="link-title">Visit</h6>
</a>
<span>|</span>
<a href="https://github.com/PRISM-EXE/ro-sham-bo">
<h6 class="link-title source-link">Source</h6>
</a>
</div>
</div>
</div>
</div>
</section>
<br>
<section class="project" id="project-003">
<div class="project-filter" id="filter-003">
<div class="project-info">
<h5 class="project-title">jwalker.dev</h5>
<div class="project-technologies">
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/javascript-icon-002.svg">
<h6>JavaScript</h6>
</div>
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/css-icon-002.svg">
<h6>CSS</h6>
</div>
<div class="tech-info">
<img class="project-icon" src="./src/assets/imgs/home-page/icons/html5-icon-002.svg">
<h6>HTML</h6>
</div>
</div>
<div class="last-row">
<p class="project-description">
My personal portfolios website.
</p>
<div class="project-icon-container">
<a href="https://prism-exe.github.io/jwalker/">
<h6 class="link-title">Visit</h6>
</a>
<span>|</span>
<a href="https://github.com/PRISM-EXE/jwalker">
<h6 class="link-title source-link">Source</h6>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</main>
<script class="current-time" rel="text/javascript" src="./src/features/current-time/current-time.js"></script>
</body>
</html>