-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
336 lines (324 loc) · 34.1 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
328
329
330
331
332
333
334
335
336
<!DOCTYPE html>
<html lang="en">
<head>
<link href="./styles/css/reset.css" rel="stylesheet" type="text/css"/>
<link href="./styles/css/all.css" rel="stylesheet"/>
<link href="./styles/css/styles.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@300;700&display=swap" rel="stylesheet"/>
<!-- favicon links -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175792251-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-175792251-1');
</script>
<meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="JJOYMtD6g3iGfXxc-wnXpLRKwr3T95F1bGCp_SURxOg" name="google-site-verification"/>
<meta content="Brandon, LeBoeuf, BrandonLeBoeuf_, brandon-leboeuf, Portland Web Developer, Knoxville, freelance, software engineer, react, next.js, ecommerce, e-commerce, vue.js, javascript, communication" name="keywords"/>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
<meta content="Portland-based freelance web developer and software engineer. Specializing in building portfolio sites, e-commerce, blogs, and apps using React, Next.js, Vue.js, Shopify, among others for local small businesses in Oregon. Brandon works closely with his clients in the pacific-northwest to build and design beautiful, responsive, professional sites using modern web technologies." name="description"/>
<!-- Facebook Meta Tags -->
<meta content="https://www.facebook.com/brandon.leboeuf.14/" property="og:url"/>
<meta content="website" property="og:type"/>
<meta content="Brandon LeBoeuf" property="og:title"/>
<meta content="https://brandon-leboeuf.com/og-image.png" property="og:image"/>
<meta content="Portland-based freelance web developer and software engineer. Specializing in building portfolio sites, e-commerce, blogs, and apps using React, Next.js, Vue.js, Shopify, among others for local small businesses in Oregon. Brandon works closely with his clients in the pacific-northwest to build and design beautiful, responsive, professional sites using modern web technologies." property="og:description"/>
<!-- Twitter Meta Tags -->
<meta content="https://brandon-leboeuf.com" property="twitter:url"/>
<meta content="summary_large_image" name="twitter:card"/>
<meta content="BrandonLeBoeuf_" name="twitter:title"/>
<meta content="https://brandon-leboeuf.com/og-image.png" name="twitter:image"/>
<meta content="Portland-based freelance web developer and software engineer. Specializing in building portfolio sites, e-commerce, blogs, and apps using React, Next.js, Vue.js, Shopify, among others for local small businesses in Oregon. Brandon works closely with his clients in the pacific-northwest to build and design beautiful, responsive, professional sites using modern web technologies." name="twitter:description"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>Brandon LeBoeuf - Web Developer based in Portland, OR</title>
</head>
<body>
<section id="top"></section>
<header class="headroom dropEnabled" id="header">
<div class="drop">
<h1>
<a href="#top">Brandon LeBoeuf</a>
</h1>
<h2>Software Engineer</h2>
</div>
<nav class="drop" id="drop">
<ul id="menuBtns">
<li>
<a href="#top">Home</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<!-- <li>
<a href="/about">Services</a>
</li> -->
<li>
<a href="/code">Code</a>
</li>
<li>
<a href="#contact">Connect</a>
</li>
</ul>
</nav>
<a aria-label="Open main menu" class="menu-toggle" href="#main-menu" id="main-menu-toggle">
<span class="sr-only">Open main menu</span>
<span aria-hidden="true" class="fa fa-bars"></span>
</a>
</header>
<main>
<section class="hero fadein">
<div class="hero_div">
<h1>Web Developer. Designer. Engineer.</h1>
<!-- <p class="hero_about">I am a developer focusing on website and ecommerce creation for small buissness. I am always excited for a new challenge and never stop learning!</p> -->
<p class="hero_about">
I specialize in building beautiful custom websites that are as unique as you are!
</p>
<p class="hero_about">
If you're ready to share your work and elevate your online presence, I can help you create a portfolio page, blog, or e-commerce site, that will make it easier for you to reach and connect with clients. We can work closely together to find a way for you to showcase your products and services.
</p>
<div class="hero_btn_div">
<a class="hero_btn" href="#projects">Portfolio</a>
<a class="hero_btn" href="#about">About Me</a>
<a class="cta-btn" href="#contact">Let's Work Together</a>
</div>
</div>
<img src='./styles/img/KrisLeBoeuf-FosterLane-6519.jpg' alt="Photo of Brandon LeBoeuf" class="hero_img fadein" />
</section>
<section id="code">
<div class="examples-text">
<p>
Here are a few examples of my work. If you would like to see more, check out my
<i class="fab fa-github"></i>
<a href="https://github.com/brandonleboeuf" target="_blank" rel="noopener noreferrer">Github page.</a>
</p>
</div>
<div class="codeSandbox">
<a href="https://honorhoney.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/honor-landing-page.png" alt="Screenshot of HonorHoney.com landing page" /></a>
<a href="https://gravelerc.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/gravel-process.png" alt="Screenshot of Gravelerc.com processes page" /></a>
<a href="https://www.cryptoratingcouncil.com/" target="_blank" rel="noopener noreferrer"><img src="./styles/img/CRC-landing.png" alt="Screenshot of crypto rating council landing page" /></a>
<!-- <a href="https://fosterlaneshop.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/foster_lane_contact.png" alt="Screenshot of Fosterlaneshop.com landing page" /></a> -->
<a href="https://gravelerc.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/gravel-landing.png" alt="Screenshot of Gravelerc.com landing page" /></a>
<!-- <a href="https://fosterlaneshop.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/fosterlane_homePage.png" alt="Screenshot of Fosterlaneshop.com home page" /></a> -->
<a href="https://gravelerc.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/gravel-about.png" alt="Screenshot of Gravelerc.com about page" /></a>
<a href="https://honorhoney.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/honor-about.png" alt="Screenshot of HonorHoney.com about page" /></a>
<a href="https://gravelerc.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/gravel-solutions-page.png" alt="Screenshot of Gravelerc.com solutions page" /></a>
<a href="https://gravelerc.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/gravel-form.png" alt="Screenshot of Gravelerc.com form" /></a>
<a href="https://www.cryptoratingcouncil.com/" target="_blank" rel="noopener noreferrer"><img src="./styles/img/CRC-about.png" alt="Screenshot of of cryptoratingcouncil.com about page" /></a>
<!-- <a href="https://fosterlaneshop.com" target="_blank" rel="noopener noreferrer"><img src="./styles/img/fosterlaneShop_shop.png" alt="Screenshot of Fosterlaneshop.com ecommerce section" /></a> -->
</section>
<section class="resume content" id="main">
<div id="about">
<!-- <img alt="picture of Brandon LeBoeuf" class="animate-left" loading="lazy" src="./styles/img/rsz_3profile_pic.jpg"/>
<div class="crc-left"></div> -->
<!-- <p>
I am a Portland, Oregon based Web Developer specelizing in the establishment of buisness' online presence through <em>website design, consistant comunication</em></strong> and utalzation of modern web technologies.
</p> -->
<!-- <p>
I specialize in building beautiful custom websites that are as unique as you are! If you're ready to share your work and elevate your online presence, I can help you create a portfolio page, blog, or e-commerce site, that will make it easier for you to reach and connect with clients. We can work closely together to find a way for you to showcase your products and services.
</p>
<p class="cta">
If you have a project in mind, I'd love to talk about all the possibilities!
</p>
<div class="cta-div ">
<a class="cta-btn" href="#contact">Let's Work Together</a>
</div> -->
<!-- <p class="examples-text"> -->
<p>
A little more about me...
</p>
<p>
I love to learn and am continuously pushing myself to grow as a software engineer.
<!-- I have over a decade of experience in both managing and training teams of 40+ people and have learned how to successfully navigate difficult situations. These past roles have allowed me to gain experience in developing my ability to see from different perspectives and find ways to manage and address individual needs.</p> -->
<p>
I work with tech like React and Next.js to quickly build responsive sites that give extreme flexibility with layout and functionality. I use Content Management Systems that allow you to interact with and update content as you need, and utilize APIs (like those from Shopify or WordPress) to give you the functionality you want while maintaining full creative control over the look and feel of your site.
</p>
<p>
You can usually find me trying to create or build something... whether it be brewing my own beer, playing piano, making bread, or building web applications; I get joy from being creative and find reward in the growth/struggle!
</p>
</div>
<div class="skills">
<h2>Tools I Work With Daily</h2>
<div class="skills-grid animate-right">
<div class="skill">
<svg role="img" version="1.0" viewbox="0 0 49 55" xmlns="http://www.w3.org/2000/svg">
<path aria-label="I am proficient in using HTML5" d="M0 0H48.125L43.7479 49.4152L24.0098 55L4.38396 49.4129L0 0ZM16.1127 22.3438L15.581 16.115L38.6329 16.1219L39.16 10.1131L8.965 10.1063L10.5646 28.4625H31.4783L30.7313 36.3138L24.0625 38.1563L17.2906 36.3L16.8598 31.4646H10.8808L11.6371 41.0231L24.0625 44.346L36.3894 41.0392L38.0944 22.346H16.1127V22.3438Z" fill="#F06235"></path>
</svg>
<h3>HTML</h3>
</div>
<div class="skill">
<svg role="img" version="1.0" viewbox="0 0 49 55" xmlns="http://www.w3.org/2000/svg">
<path aria-label="I am proficient in using CSS" d="M0.75 0H48.875L44.4979 49.4152L24.7598 55L5.13167 49.4129L0.75 0ZM39.9146 10.1131L9.71042 10.1063L10.1985 16.115L33.4017 16.1196L32.8173 22.3438H17.6006L18.1506 28.2402H32.3177L31.479 36.3138L24.8102 38.1563L18.036 36.3L17.6052 31.4646H11.624L12.2885 40.299L24.8125 44.2017L37.1256 40.6954L39.9146 10.1154V10.1131Z" fill="#299EFA"></path>
</svg>
<h3>CSS</h3>
</div>
<div class="skill">
<svg role="img" version="1.0" viewbox="0 0 55 60" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H60V60H0V0Z" fill="#F7DF1E"></path>
<path d="M15.7763 50.1404L20.3677 47.3616C21.2536 48.9321 22.0594 50.2611 23.9923 50.2611C25.845 50.2611 27.0134 49.5364 27.0134 46.7173V27.5459H32.6517V46.797C32.6517 52.6369 29.2284 55.2952 24.2339 55.2952C19.7234 55.2952 17.1052 52.9592 15.776 50.1399" fill="black"></path>
<path aria-label="I am proficient in using JavaScript" d="M35.7143 49.5361L40.3052 46.8781C41.5139 48.8517 43.0847 50.3016 45.8634 50.3016C48.1999 50.3016 49.6896 49.1335 49.6896 47.5224C49.6896 45.5892 48.1591 44.9044 45.5815 43.7771L44.1722 43.1724C40.1041 41.441 37.4058 39.266 37.4058 34.6746C37.4058 30.4456 40.6277 27.2234 45.6623 27.2234C49.2469 27.2234 51.8245 28.4721 53.677 31.7344L49.2867 34.5539C48.3199 32.8221 47.2732 32.1375 45.6621 32.1375C44.0107 32.1375 42.9635 33.1847 42.9635 34.5539C42.9635 36.2454 44.0107 36.9305 46.4271 37.9777L47.8366 38.5817C52.6296 40.636 55.328 42.7301 55.328 47.442C55.328 52.5171 51.3408 55.2959 45.9841 55.2959C40.7484 55.2959 37.3652 52.7989 35.7141 49.5364" fill="black"></svg>
<h3>JavaScript</h3>
</div>
<div class="skill">
<svg role="img" version="1.0" viewbox="0 0 60 55" xmlns="http://www.w3.org/2000/svg">
<path aria-label="I am proficient in using React" d="M49.3308 17.8086C48.6923 17.5831 48.0483 17.3742 47.3996 17.1821C47.5086 16.7238 47.6089 16.271 47.6979 15.8262C49.1599 8.52152 48.2042 2.63676 44.9397 0.69922C41.8096 -1.15824 36.6908 0.778584 31.5211 5.40944C31.0116 5.86665 30.5134 6.33703 30.027 6.82014C29.7013 6.49889 29.37 6.18387 29.033 5.87525C23.6148 0.923804 18.184 -1.16306 14.923 0.780031C11.7958 2.64328 10.8698 8.17536 12.186 15.0981C12.317 15.7838 12.4648 16.4658 12.6295 17.1437C11.8607 17.3686 11.119 17.6079 10.4091 17.8626C4.0567 20.1422 0 23.7146 0 27.4201C0 31.2471 4.35505 35.0858 10.9713 37.4134C11.5077 37.6013 12.0486 37.7755 12.5934 37.9357C12.4164 38.6658 12.2593 39.4009 12.1223 40.14C10.8675 46.9426 11.8474 52.344 14.9661 54.1954C18.1873 56.1074 23.5937 54.1423 28.8579 49.4058C29.2848 49.0208 29.7022 48.6248 30.1099 48.2183C30.6367 48.7414 31.1775 49.2493 31.7318 49.7414C36.8312 54.2576 41.8673 56.0813 44.983 54.2248C48.2011 52.3073 49.2471 46.5048 47.8892 39.4453C47.7822 38.8922 47.6623 38.3419 47.5294 37.7948C47.9091 37.679 48.2818 37.5598 48.645 37.4358C55.5233 35.0904 59.9986 31.2983 59.9986 27.4201C59.9986 23.701 55.8109 20.1046 49.3308 17.8086V17.8086ZM47.839 34.9319C47.5109 35.0436 47.1744 35.1514 46.8312 35.2564C46.0719 32.7821 45.0472 30.1512 43.7931 27.4328C44.9898 24.7793 45.9751 22.182 46.7131 19.7239C47.3269 19.9068 47.9225 20.0995 48.4967 20.3029C54.0489 22.2703 57.4355 25.1788 57.4355 27.4201C57.4355 29.8072 53.778 32.9063 47.839 34.9319V34.9319ZM45.3749 39.9576C45.9753 43.0791 46.0609 45.9015 45.6632 48.108C45.306 50.0907 44.5874 51.4124 43.6987 51.9419C41.808 53.0684 37.7644 51.6041 33.4035 47.7416C32.888 47.2841 32.3849 46.8119 31.8949 46.3256C33.5856 44.4225 35.2752 42.2102 36.9242 39.7531C39.8248 39.4882 42.565 39.055 45.05 38.4637C45.1724 38.972 45.2811 39.4704 45.3749 39.9576V39.9576ZM20.4548 51.7472C18.6075 52.4185 17.1362 52.4378 16.2467 51.91C14.3542 50.7866 13.5674 46.4496 14.6406 40.6321C14.7682 39.9447 14.9142 39.261 15.0786 38.5819C17.5362 39.1416 20.2566 39.5439 23.1639 39.7866C24.8242 42.1909 26.5625 44.4008 28.3144 46.336C27.9421 46.7068 27.561 47.0681 27.1714 47.4196C24.8434 49.5139 22.5107 50.9999 20.4548 51.7472V51.7472ZM11.8005 34.9172C8.87487 33.8879 6.45876 32.5503 4.8027 31.0906C3.31445 29.779 2.5633 28.4766 2.5633 27.4201C2.5633 25.1713 5.82033 22.3031 11.2528 20.3538C11.9121 20.1174 12.602 19.8942 13.318 19.6848C14.069 22.1984 15.0538 24.8266 16.2423 27.4842C15.0383 30.1812 14.0394 32.8513 13.2813 35.3946C12.7839 35.248 12.2902 35.0888 11.8005 34.9172V34.9172ZM14.7015 14.5913C13.574 8.66023 14.3228 4.18617 16.2074 3.06326C18.2145 1.86725 22.653 3.57249 27.3312 7.84801C27.6363 8.12745 27.9364 8.41255 28.2314 8.70317C26.4882 10.6299 24.7658 12.8233 23.1203 15.2134C20.2985 15.4826 17.5974 15.9149 15.114 16.4941C14.961 15.8636 14.8235 15.2292 14.7015 14.5915V14.5913ZM40.5823 21.1691C39.9957 20.1263 39.3874 19.0965 38.7577 18.0807C40.672 18.3299 42.5062 18.6606 44.2286 19.0649C43.7116 20.7708 43.067 22.5542 42.3084 24.3828C41.7539 23.2998 41.1784 22.2284 40.5823 21.1691V21.1691ZM30.0281 10.5886C31.2103 11.9069 32.3943 13.3787 33.5589 14.9756C31.1965 14.8607 28.8301 14.8603 26.4676 14.9741C27.6333 13.3919 28.8275 11.9221 30.0281 10.5886ZM19.4063 21.1872C18.8176 22.238 18.2529 23.3027 17.7125 24.3806C16.9662 22.5586 16.3276 20.767 15.8061 19.0369C17.5179 18.6427 19.3435 18.3204 21.2456 18.0758C20.6089 19.0979 19.9956 20.1352 19.4063 21.187V21.1872ZM21.3002 36.9519C19.335 36.7262 17.4821 36.4205 15.7707 36.037C16.3004 34.276 16.9531 32.4463 17.7155 30.5852C18.258 31.6639 18.8251 32.7293 19.4163 33.7805C20.0243 34.8612 20.6538 35.9197 21.3002 36.9519ZM30.0989 44.4373C28.8839 43.0883 27.6722 41.5958 26.4889 39.9907C27.6378 40.037 28.8089 40.0607 29.9993 40.0607C31.2222 40.0607 32.4311 40.0324 33.621 39.9779C32.4527 41.612 31.2731 43.1066 30.0989 44.4373ZM42.3325 30.4902C43.1345 32.3717 43.8105 34.1918 44.3472 35.9226C42.6077 36.3313 40.7294 36.6603 38.7504 36.9047C39.3846 35.8699 39.9987 34.8223 40.5923 33.7624C41.1959 32.6851 41.7761 31.5941 42.3325 30.4902V30.4902ZM38.3722 32.4444C37.4633 34.0694 36.5034 35.6635 35.4939 37.2243C33.6652 37.3576 31.8325 37.4238 29.9993 37.4228C28.1321 37.4228 26.3159 37.363 24.5671 37.2462C23.5312 35.6891 22.553 34.0921 21.6344 32.4588H21.6346C20.7204 30.8342 19.8665 29.1744 19.0746 27.483C19.8644 25.7913 20.7158 24.1307 21.6269 22.5048L21.6267 22.505C22.5374 20.8787 23.5079 19.2886 24.5359 17.7381C26.3202 17.5992 28.1499 17.5268 29.9991 17.5268H29.9993C31.8569 17.5268 33.689 17.5999 35.4728 17.7398C36.4904 19.288 37.4547 20.8726 38.3637 22.4908C39.2778 24.1131 40.1405 25.7656 40.9502 27.4456C40.1488 29.1428 39.2889 30.8101 38.3722 32.4444V32.4444ZM43.6595 2.98461C45.6685 4.17725 46.4499 8.98661 45.1876 15.2935C45.107 15.6959 45.0165 16.1057 44.9181 16.5214C42.4286 15.9299 39.7256 15.4901 36.8956 15.2168C35.2471 12.8004 33.5387 10.6036 31.8239 8.70172C32.2733 8.25581 32.7334 7.82147 33.2038 7.39909C37.6334 3.43161 41.7733 1.86508 43.6595 2.98461V2.98461ZM29.9993 21.9056C32.9582 21.9056 35.357 24.3746 35.357 27.4201C35.357 30.4656 32.9582 32.9345 29.9993 32.9345C27.0404 32.9345 24.6416 30.4656 24.6416 27.4201C24.6416 24.3746 27.0404 21.9056 29.9993 21.9056V21.9056Z" fill="#00D8FF"></path>
</svg>
<h3>React</h3>
</div>
<div class="skill">
<svg role="img" version="1.0" width="82" height="40" viewbox="0 0 150 75" xmlns="http://www.w3.org/2000/svg">
<path d="M34.992 23.495h27.855v2.219H37.546v16.699h23.792v2.219H37.546v18.334h25.591v2.219H34.992v-41.69zm30.35 0h2.96l13.115 18.334 13.405-18.334L113.055.207 83.1 43.756l15.436 21.429H95.46L81.417 45.683 67.316 65.185h-3.018L79.85 43.756 65.343 23.495zm34.297 2.219v-2.219h31.742v2.219h-14.623v39.47h-2.554v-39.47H99.64zM.145 23.495h3.192l44.011 66.003L29.16 65.185 2.814 26.648l-.116 38.537H.145v-41.69zm130.98 38.801c-.523 0-.914-.405-.914-.928 0-.524.391-.929.913-.929.528 0 .913.405.913.929 0 .523-.385.928-.913.928zm2.508-2.443H135c.019.742.56 1.24 1.354 1.24.888 0 1.391-.535 1.391-1.539v-6.356h1.391v6.362c0 1.808-1.043 2.849-2.77 2.849-1.62 0-2.732-1.01-2.732-2.556zm7.322-.08h1.379c.118.853.95 1.395 2.149 1.395 1.117 0 1.937-.58 1.937-1.377 0-.685-.521-1.097-1.708-1.377l-1.155-.28c-1.62-.38-2.36-1.166-2.36-2.487 0-1.602 1.304-2.668 3.26-2.668 1.82 0 3.15 1.066 3.23 2.58h-1.354c-.13-.828-.85-1.346-1.894-1.346-1.1 0-1.832.53-1.832 1.34 0 .642.472 1.01 1.64 1.284l.987.243c1.838.43 2.596 1.178 2.596 2.53 0 1.72-1.33 2.799-3.453 2.799-1.987 0-3.323-1.029-3.422-2.637z" fill="#000" fill-rule="nonzero"></path>
</svg>
<h3>Next.js</h3>
</div>
<div class="skill">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><g fill="#e10098"><path d="m57.468 302.66-14.376-8.3 160.15-277.38 14.376 8.3z"/><path d="m39.8 272.2h320.3v16.6h-320.3z"/><path d="m206.348 374.026-160.21-92.5 8.3-14.376 160.21 92.5zm139.174-241.079-160.21-92.5 8.3-14.376 160.21 92.5z"/><path d="m54.482 132.883-8.3-14.375 160.21-92.5 8.3 14.376z"/><path d="m342.568 302.663-160.15-277.38 14.376-8.3 160.15 277.38zm-290.068-195.163h16.6v185h-16.6zm278.4 0h16.6v185h-16.6z"/><path d="m203.522 367-7.25-12.558 139.34-80.45 7.25 12.557z"/><path d="m369.5 297.9c-9.6 16.7-31 22.4-47.7 12.8s-22.4-31-12.8-47.7 31-22.4 47.7-12.8c16.8 9.7 22.5 31 12.8 47.7m-278.6-160.9c-9.6 16.7-31 22.4-47.7 12.8s-22.4-31-12.8-47.7 31-22.4 47.7-12.8c16.7 9.7 22.4 31 12.8 47.7m-60.4 160.9c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.8 9.6-38.1 3.9-47.7-12.8m278.6-160.9c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.7 9.6-38.1 3.9-47.7-12.8m-109.1 258.8c-19.3 0-34.9-15.6-34.9-34.9s15.6-34.9 34.9-34.9 34.9 15.6 34.9 34.9c0 19.2-15.6 34.9-34.9 34.9m0-321.8c-19.3 0-34.9-15.6-34.9-34.9s15.6-34.9 34.9-34.9 34.9 15.6 34.9 34.9-15.6 34.9-34.9 34.9"/></g></svg>
<h3>GraphQL</h3>
</div>
<div class="skill">
<svg fill="none" role="img" viewbox="-10 0 60 60">
<path d="M10 60C15.52 60 20 55.52 20 50V40H10C4.48 40 0 44.48 0 50C0 55.52 4.48 60 10 60Z" fill="#0ACF83"></path>
<path d="M0 30C0 24.48 4.48 20 10 20H20V40H10C4.48 40 0 35.52 0 30Z" fill="#A259FF"></path>
<path d="M0 10C0 4.48 4.48 0 10 0H20V20H10C4.48 20 0 15.52 0 10Z" fill="#F24E1E"></path>
<path d="M20 0H30C35.52 0 40 4.48 40 10C40 15.52 35.52 20 30 20H20V0Z" fill="#FF7262"></path>
<path aria-label="I am proficient in using Figma" d="M40 30C40 35.52 35.52 40 30 40C24.48 40 20 35.52 20 30C20 24.48 24.48 20 30 20C35.52 20 40 24.48 40 30Z" fill="#1ABCFE"></path>
</svg>
<h3>Figma</h3>
</div>
<div class="skill">
<svg role="img" version="1.0" viewbox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
<path aria-label="I am proficient in using Git" d="M58.8684 27.3267L32.6719 1.1315C31.1641 -0.377168 28.7173 -0.377168 27.2077 1.1315L21.7678 6.57135L28.6685 13.4721C30.2721 12.9302 32.111 13.2937 33.3893 14.572C34.6737 15.8585 35.0346 17.7131 34.4796 19.3218L41.13 25.9724C42.739 25.4181 44.5955 25.7767 45.8805 27.0639C47.6766 28.8592 47.6766 31.769 45.8805 33.5655C44.0841 35.3622 41.1743 35.3622 39.3769 33.5655C38.0259 32.2131 37.6922 30.2292 38.3761 28.5649L32.1741 22.3628L32.1734 38.684C32.623 38.9063 33.0336 39.1999 33.3893 39.5535C35.1853 41.3488 35.1853 44.2588 33.3893 46.0567C31.5928 47.8525 28.6816 47.8525 26.8877 46.0567C25.0917 44.2588 25.0917 41.3491 26.8877 39.5538C27.3181 39.1232 27.8296 38.7821 28.3927 38.5504V22.0771C27.8288 21.847 27.317 21.5057 26.8877 21.0738C25.527 19.7149 25.1998 17.7182 25.897 16.0474L19.0945 9.24416L1.13203 27.2055C-0.377344 28.7156 -0.377344 31.1627 1.13203 32.6716L27.3291 58.8672C28.8373 60.3761 31.2837 60.3761 32.7937 58.8672L58.8682 32.7932C60.3771 31.2838 60.3771 28.8353 58.8682 27.3267" fill="#DE4C36"></path>
</svg>
<h3>Git</h3>
</div>
<div class="skill">
<svg role="img" version="1.0" viewbox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
<path d="M42.7192 59.6711C43.1985 59.858 43.7111 59.9443 44.2252 59.9246C44.7393 59.9048 45.2438 59.7795 45.7073 59.5563L58.1092 53.5889C58.7479 53.2814 59.2868 52.7998 59.664 52.1996C60.0411 51.5993 60.2411 50.9048 60.241 50.1959V9.73224C60.2411 9.02337 60.0411 8.32888 59.6639 7.72867C59.2868 7.12845 58.7479 6.6469 58.1092 6.33941L45.7076 0.371768C45.0068 0.0345642 44.2186 -0.0764627 43.4519 0.0540552C42.6853 0.184573 41.9782 0.550181 41.4284 1.10027L17.6866 22.7605L7.3449 14.9104C6.87841 14.5563 6.30267 14.3767 5.71758 14.4027C5.13249 14.4287 4.57497 14.6588 4.14175 15.0529L0.82498 18.0701C-0.268721 19.0648 -0.269902 20.7855 0.822145 21.7818L9.79073 29.9641L0.822145 38.146C-0.269902 39.1426 -0.268721 40.863 0.82498 41.858L4.14175 44.875C4.57494 45.2692 5.13245 45.4992 5.71754 45.5253C6.30263 45.5513 6.87838 45.3718 7.3449 45.0177L17.6866 37.1674L41.4284 58.8276C41.7955 59.1953 42.2351 59.4825 42.7192 59.6711V59.6711ZM45.191 16.2895L27.1763 29.9641L45.191 43.6384V16.2895V16.2895Z" fill="white"></path>
<path d="M58.1459 6.34796L45.7344 0.37205C45.0334 0.0345742 44.2449 -0.0766892 43.478 0.053657C42.711 0.184003 42.0035 0.549514 41.4534 1.09961L0.822512 38.1454C-0.270244 39.142 -0.268827 40.8624 0.825346 41.8573L4.14424 44.8743C4.57782 45.2686 5.13568 45.4987 5.72111 45.5247C6.30654 45.5508 6.88263 45.3712 7.34952 45.017L56.2783 7.89827C57.9198 6.65315 60.2776 7.82386 60.2776 9.88418V9.74008C60.2775 9.03135 60.0775 8.33702 59.7004 7.73694C59.3233 7.13686 58.7845 6.65541 58.1459 6.34796V6.34796Z" fill="#0065A9"></path>
<path d="M58.1459 53.5785L45.7344 59.5544C45.0334 59.8918 44.2449 60.0031 43.478 59.8727C42.711 59.7424 42.0035 59.3769 41.4534 58.8269L0.822512 21.7811C-0.270244 20.7848 -0.268827 19.0641 0.825346 18.0694L4.14424 15.0522C4.57785 14.658 5.13572 14.4279 5.72115 14.4019C6.30658 14.3759 6.88266 14.5555 7.34952 14.9097L56.2783 52.0282C57.9198 53.2733 60.2776 52.1026 60.2776 50.0421V50.1864C60.2775 50.8951 60.0774 51.5895 59.7004 52.1895C59.3233 52.7896 58.7845 53.2711 58.1459 53.5785V53.5785Z" fill="#007ACC"></path>
<path d="M45.6954 59.5592C44.9943 59.8964 44.2057 60.0075 43.4387 59.877C42.6717 59.7466 41.9641 59.381 41.4139 58.8309C42.8032 60.2199 45.1788 59.236 45.1788 57.2711V2.66288C45.1788 0.697997 42.8032 -0.285861 41.4139 1.10335C41.9641 0.553212 42.6716 0.187609 43.4386 0.0570997C44.2057 -0.0734092 44.9943 0.0376251 45.6954 0.374848L58.1048 6.34249C58.7438 6.64977 59.283 7.13124 59.6603 7.73147C60.0377 8.33171 60.2379 9.02631 60.2379 9.73532V50.1992C60.2379 51.646 59.4087 52.9651 58.1048 53.592L45.6954 59.5594V59.5592Z" fill="#1F9CF0"></path>
<path aria-label="I am proficient in using VSCode" d="M42.7191 59.6704C43.1984 59.8573 43.711 59.9436 44.2251 59.9238C44.7392 59.9041 45.2437 59.7787 45.7073 59.5556L58.1088 53.588C58.7476 53.2806 59.2866 52.799 59.6638 52.1988C60.041 51.5986 60.241 50.9041 60.241 50.1952V9.73155C60.241 9.02268 60.041 8.32819 59.6638 7.72797C59.2867 7.12776 58.7478 6.6462 58.1091 6.33871L45.707 0.370837C45.0063 0.0336872 44.2181 -0.0773103 43.4515 0.0532065C42.6849 0.183723 41.9778 0.5493 41.4281 1.09934L17.6865 22.7598L7.34481 14.9097C6.87832 14.5556 6.30258 14.376 5.71749 14.402C5.1324 14.428 4.57488 14.6581 4.14166 15.0522L0.824888 18.0694C-0.268813 19.0641 -0.269994 20.7848 0.822054 21.7812L9.79064 29.9634L0.822054 38.1453C-0.269994 39.1419 -0.268813 40.8623 0.824888 41.8573L4.14166 44.8743C4.57485 45.2685 5.13236 45.4985 5.71745 45.5246C6.30254 45.5506 6.87829 45.3711 7.34481 45.017L17.6865 37.1667L41.4281 58.8269C41.7953 59.1946 42.2349 59.4818 42.7191 59.6704V59.6704ZM45.1909 16.2886L27.1762 29.9634L45.1909 43.6377V16.2888V16.2886Z" fill-opacity="0.25" fill="url(#paint0_linear)"></path>
</svg>
<h3>VSCode</h3>
</div>
</div>
</div>
</section>
<section class="content row animate-left" id="projects">
<div class="puppet-wrap">
<img class="puppet" src="./styles/img/puppet.svg"/>
</div>
<div class="projects" id="projects">
<h2>Projects</h2>
<p class="projects-about">I've been very fortunate to work on some amazing projects and with some really great people.</p>
<ul>
<li>
<a href="https://www.gravelerc.com" target="_blank" rel="noopener noreferrer" class="projects-title">gravelerc.com</a>
<p>Dynamic human resource and project management consulting group.</p>
<p>Built Gravelerc.com utilizing modern technology and working closely with clients to execute the vision. Worked with the initial concept to designed, prototype, and deploy.</p>
</li>
<li>
<a href="https://www.honorhoney.com" target="_blank" rel="noopener noreferrer" class="projects-title">honorhoney.com</a>
<p>Chicago based group who source and distribute local honey to raise money for non-profits. Each month they focus on a different organization to support.</p>
<p>Worked with React and TypeScript to quickly build, test, and deploy. This project was on a very tight deadline and I was able to quickly integrate their design and functionality.</p>
</li>
<li>
<a href="https://fosterlaneshop.com" target="_blank" rel="noopener noreferrer" class="projects-title">fosterlaneshop.com</a>
<p>Beautiful E-commerce site offering thoughtfully curated goods.</p>
<p>Built with Shopify and liquid (customer-facing template language).</p>
</li>
<li>
<a href="https://www.realthread.com" target="_blank" rel="noopener noreferrer" class="projects-title">realthread.com</a>
<p>Industry-leading printing company with a high traffic site who are driven to make quality custom t-shirts that feature compelling messages and beautiful designs.</p>
<p>Built out the campaigns page and to create features to help capture new clients and drive e-commerce sales.</p>
</li>
<li>
<a href="https://thefurrow.tv" target="_blank" rel="noopener noreferrer" class="projects-title">thefurrow.tv</a>
<p>Creatives intent on bringing brands and stories to life. They believe in building beautiful, entertaining, and clean content by mixing creativity with what is concrete.</p>
<p>Update legacy code, implement new features, and ensure all protected content remained secure.</p>
</li>
<li>
<a href="https://www.cryptoratingcouncil.com/" target="_blank" rel="noopener noreferrer" class="projects-title">cryptoratingcouncil.com</a>
<p>A diverse group of leading crypto businesses committed to the responsible growth and maturation of cryptocurrency markets and related financial infrastructure and trading services.</p>
<p>Designed and built the site from the ground up. Used Webflow to implemented a custom CMS to allow the client to dynamically manage content.</p>
</li>
</ul>
</div>
</section>
<section class="form-wraper" id="contact">
<div class="intro">
<p>
If you’re interested in working together, let’s talk about your needs and we’ll create a custom proposal for you.
</p>
</div>
<form data-netlify="true" method="POST" name="contact">
<fieldset>
<legend>
<i class="far fa-paper-plane"></i>
</legend>
<div class="form-body">
<div class="input_feilds">
<div class="label">
<label for="first_name" aria-label="First Name" hidden>First Name</label>
<input id="first_name" name="first_name" type="text" placeholder="First Name" required/>
<label for="last_name" aria-label="Last Name" hidden>Last Name</label>
<input id="last_name" name="last_name" type="text" placeholder="Last Name" required/>
<select name="capacity" id="capacity-select">
<option value="" disabled selected>Select your option</option>
<option value="New Build">New Build</option>
<option value="Design">Design</option>
<option value="Design & Development">Design & Development</option>
<option value="App Development">App Development</option>
<option value="Consulting">Consulting</option>
</select>
</div>
<div class="label">
<label for="Website" aria-label="Website" hidden>Current Website</label>
<input id="Website" name="Website" type="text" placeholder="Website"/>
<label for="email" aria-label="Website" hidden>Your Email:</label>
<input id="email" name="email" type="email" placeholder="Email" required/>
</div>
</div>
<fieldset>
<legend>Let's Talk</legend>
<label for="message"></label>
<textarea cols="70" id="message" name="message" rows="10" required></textarea>
</fieldset>
</div>
</fieldset>
<button class="submit-btn" type="submit">Send</button>
</form>
</section>
<footer>
<div>
<a href="mailto:[email protected]">
<i class="far fa-paper-plane"></i>
</a>
<a href="https://twitter.com/BrandonLeBoeuf_">
<i class="fab fa-twitter-square"></i>
</a>
<a href="https://www.instagram.com/brandonleb/">
<i class="fab fa-instagram"></i>
</a>
<a href="https://github.com/brandonleboeuf">
<i class="fab fa-github"></i>
</a>
</div>
<div id="copyright">
<h5><a href="tel:6265296691">626 529 6691</a></h5>
<h5><a href="mailto:[email protected]">[email protected]</a></h5>
</div>
<h6>Copyright © 2020 Brandon Eugene LeBoeuf. All rights reserved.</h6>
</footer>
</main>
<script src="https://unpkg.com/headroom.js"></script>
<script src="./scripts/dropdown.js"></script>
</body>
</html>