-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
543 lines (517 loc) · 29.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
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Kate Ives - Software Engineer - Full Stack Web Developer</title>
<meta name="title" content="Kate Ives - Software Engineer - Full Stack Web Developer - Front End Web Developer Baton Rouge">
<meta name="description" content="Hi! I'm Kate, a front end web developer and software engineer based in Baton Rouge, Louisiana. Check out my portfolio to see my recent projects.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.kateives.com/">
<meta property="og:title" content="Kate Ives - Software Engineer - Full Stack Web Developer">
<meta property="og:description" content="Hi! I'm Kate, your next software engineer. Check out my portfolio to see my recent projects.">
<meta property="og:image" content="https://www.kateives.com/assets/Kate-Ives-Card.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.kateives.com/">
<meta property="twitter:title" content="Kate Ives - Software Engineer - Full Stack Web Developer">
<meta property="twitter:description" content="Hi! I'm Kate, your next software engineer. Check out my portfolio to see my recent projects.">
<meta property="twitter:image" content="https://www.kateives.com/assets/Kate-Ives-Card.png">
<!--Favicon-->
<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">
<!--Preload Font-->
<link rel="preload" as="font" href="/assets/webfonts/PlusJakartaSans-Bold.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/assets/webfonts/PlusJakartaSans-Regular.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/assets/webfonts/PlusJakartaSans-SemiBold.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/assets/webfonts/PlusJakartaSans-ExtraBold.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/assets/webfonts/PlusJakartaSans-SemiBold.woff" type="font/woff2" crossorigin="anonymous">
<!--Stylsheets-->
<link href="/node_modules/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/animate.css/animate.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/aos/dist/aos.css">
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.css">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<!--NAVBAR-->
<header>
<nav class="navbar navbar-expand-lg navbar-togglable text-white bg-black fixed-top">
<div class="container">
<a class="navbar-brand d-lg-none" href="./index.html">
<h3 class="fs-4">Kate Ives</h3></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"><span class="text-gradient">Menu</span>
<i class="bi bi-list text-primary fs-3"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#hero">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
<a class="navbar-brand d-none d-lg-flex mx-lg-auto" href="./index.html"><h3 class="fs-4">Kate Ives</h3></a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--Hero-->
<section class="bg-black text-white pt-5 pb-2 min-vh-100" id="hero">
<div class="container">
<div class="row pt-4 align-items-center">
<div class="col-12 col-lg-6">
<h1 class="mb-4 text-center display-1 pt-lg-6" data-aos="fade"
data-aos-offset="300" data-aos-easing="ease-in-sine">
<span class="text-gradient gradient-fix">KATE IVES
</span>
</h1>
<h2 class="text-center" data-aos="fade-zoom-in" data-aos-easing="ease-in-sine"
data-aos-delay="300"
data-aos-offset="0">Software Engineer</h2>
<p class="text-center fs-4 py-2" data-aos="fade-zoom-in" data-aos-easing="ease-in-sine"
data-aos-delay="300"
data-aos-offset="0">
I'm a Full Stack Web Developer - let's build something awesome together.
</p>
<div class="row justify-content-center gap-2">
<a class="btn-gradient text-white m-1" href="#contact">
Contact Me
</a>
<a class="gradient-fix glow-on-hover m-1 text-center" href="#projects">
View Projects
</a>
</div>
</div>
<div class="col-12 col-lg-6">
<lottie-player src="/data.json" background="transparent" speed="1" loop autoplay></lottie-player>
</div>
</div>
<div class="text-center pt-2">
<a href="#services"><i class="bi bi-arrow-down fs-2"></i></a>
</div>
</div>
</section>
<!--Services-->
<section class="min-vh-100 py-5" id="services" data-aos="fade" data-aos-duration="5000"
data-aos-easing="ease-in-sine">
<div class="container">
<div class="row">
<h6 class="text-center"><span class="text-gradient">//SERVICES</span></h6>
<h2 class="text-center pt-4 pb-6 display-4 w-75 mx-auto">Solving business problems, one website at a time.</h2>
<div class="row px-2 mx-auto justify-content-center">
<div class="col-md-12 col-lg-4 services-bg px-2 justify-content-center">
<img src="/assets/undraw_scrum_board_re_wk7v.svg" class="img-fluid rounded-4 p-3" style="height: 300px">
<div class="my-4 align-self-end">
<h5 class="fs-3">Strategy</h5>
<p class="fs-5">Are you happy with your current website? Are you starting a new business? Whether you need a brand new website or simply a site refresh, I'll develop a clear strategy and timeline for updating your web presence.
</p>
</div>
</div>
<div class="col-md-12 col-lg-4 services-bg px-2 justify-content-center">
<img src="/assets/undraw_web_devices_re_m8sc.svg" class="img-fluid rounded-4 p-3" style="height: 300px;">
<div class="my-4 align-self-end">
<h5 class="fs-3">Responsive Design</h5>
<p class="fs-5">My development process places a high priority on building websites that look great and function smoothly across a variety of devices and platforms.</p>
</div>
</div>
<div class="col-md-12 col-lg-4 services-bg px-2 justify-content-center">
<img src="/assets/undraw_creative_draft_vb5x.svg" class="img-fluid rounded-4 p-3" style="height: 300px">
<div class="my-4 align-self-end">
<h5 class="fs-3">Branding</h5>
<p class="fs-5">Do you need to update your logo or branding? I can help ensure your branding is modern and consistent across your digital presence.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Skills-->
<section class="bg-black py-10 text-start" id="skills">
<div class="container text-white">
<div class="row">
<div class="col-sm-12 col-md-6" data-aos="fade-right"
data-aos-duration="6000"
data-aos-easing="ease-in-sine">
<h6><span class="text-gradient">//SKILLS</span></h6>
<h2 class="text-white py-4 mx-auto display-4"> My tech stack includes a variety of programming and design tools.</h2>
<p class="fs-4">I am always working to improve my existing skills by building new projects.</p>
<p class="fs-4">Check out what I'm up to on <a href="https://github.com/KateIvesDev">Github</a>.</p>
</div>
<div class="col-sm-12 col-md-6 text-center pt-5" data-aos="fade" data-aos-duration="6000"
data-aos-easing="ease-in-sine">
<div class="row py-2 background-gradient">
<div class="col-3 py-2 mx-auto">
<i class="fa-brands fa-html5 fs-1"></i>
<p>HTML5</p>
</div>
<div class="col-3 py-2 mx-auto">
<i class="fa-brands fa-css3-alt fs-1"></i>
<p>CSS3</p>
</div>
<div class="col-3 py-2 mx-auto">
<i class="fa-brands fa-sass fs-1"></i>
<p>Sass</p>
</div>
</div>
<div class="row py-2 background-gradient">
<div class="col-3 py-2 mx-auto">
<i class="fa-brands fa-bootstrap fs-1"></i>
<p>Bootstrap</p>
</div>
<div class="col-3 py-2 mx-auto">
<i class="fa-brands fa-js fs-1"></i>
<p>JavaScript</p>
</div>
<div class="col-3 py-2 mx-auto">
<i class="fa-brands fa-node-js fs-1"></i>
<p>Node.js</p>
</div>
</div>
<div class="row py-2 background-gradient">
<div class="col-3 py-2 mx-auto">
<i class="fa-brands fa-react fs-1"></i>
<p>React</p>
</div>
<div class="col-3 py-2 mx-auto">
<img src="/assets/icons8-adobe-illustrator.svg">
<p>Illustrator</p>
</div>
<div class="col-3 py-2 mx-auto">
<img src="/assets/icons8-adobe-photoshop.svg">
<p>Photoshop</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--CTA-->
<section class="container-fluid">
<div class="row background-gradient text-white text-center py-4">
<h2>
<a href="#contact" class="fs-1 text-white">
Let's work together <i class="bi bi-arrow-up-right"></i>
</a>
</h2>
</div>
</section>
<!--Projects-->
<section class="bg-black py-8 text-center min-vh-100" id="projects">
<div class="container" data-aos="fade" data-aos-duration="5000"
data-aos-easing="ease-in-sine">
<h6><span class="text-gradient">//PROJECTS</span></h6>
<h2 class="text-white py-2 mx-auto pt-4 pb-6 display-4">Moving your business forward with technology, design and problem-solving.</h2>
<div class="row text-center" data-aos="fade" data-aos-duration="5000"
data-aos-easing="ease-in-sine">
<div class="col-md-12 col-lg-6">
<div class="card mx-2 my-4">
<div class="card-body">
<img src="/assets/quiz.gif" class="img-fluid project-image">
<h4 class="card-title mt-4">Quizzical React App</h4>
<h5>Website Design, Responsive Design</h5>
<h6 class="text-gradient">HTML5, CSS, ReactJS</h6>
<p class="card-text">A mobile-responsive quiz application using the Open Trivia API.</p>
<div class="row justify-content-center gap-2">
<a href="https://kateivesdev.github.io/quizzical/" target="_blank" class="btn-gradient">Live Preview</a>
<a href="https://github.com/KateIvesDev/quizzical" class="btn-clear-gradient gradient-fix">View Code</a>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6">
<div class="card mx-2 my-4">
<div class="card-body">
<img src="/assets/emilysayssit.gif" class="img-fluid project-image">
<h4 class="card-title mt-4">Pet Sitter Business Website</h4>
<h5>Website Design, Responsive Design</h5>
<h6 class="text-gradient">Wordpress</h6>
<p class="card-text">A mobile-responsive Wordpress site for a local small business.</p>
<div class="row justify-content-center gap-2">
<a href="https://www.emilysayssit.com" target="_blank" class="btn-gradient">Live Preview</a>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center" data-aos="fade" data-aos-duration="5000"
data-aos-easing="ease-in-sine">
<div class="col-md-12 col-lg-6">
<div class="card mx-2 my-4">
<div class="card-body">
<img src="/assets/devfest.gif" class="img-fluid project-image">
<h4 class="card-title mt-4">DevFest Baton Rouge - Event Website</h4>
<h5>Website Design, Responsive Design</h5>
<h6 class="text-gradient">HTML5, Tailwind CSS, ReactJS</h6>
<p class="card-text">A mobile-responsive website for a local tech conference, utilizing the Sessionize API.</p>
<div class="row justify-content-center gap-2">
<a href="https://www.devfestbr.com" target="_blank" class="btn-gradient">Live Preview</a>
<a href="https://github.com/KateIvesDev/DevFest-Template" class="btn-clear-gradient gradient-fix">View Code</a>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 ">
<div class="card m-2 my-4">
<div class="card-body">
<img src="/assets/space.gif" class="img-fluid project-image">
<h4 class="card-title mt-4">Space Tourism Website</h4>
<h5>Website Design, Responsive Design</h5>
<h6 class="text-gradient">HTML5, Tailwind, JavaScript, React</h6>
<p class="card-text">A space tourism website built with React.</p>
<div class="row justify-content-center gap-2 ">
<a href="https://cerulean-tarsier-4703cc.netlify.app/" class="btn-gradient">Live Preview</a>
<a href="https://github.com/KateIvesDev/Space-Tourism" class="btn-clear-gradient gradient-fix">View Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center" data-aos="fade" data-aos-duration="5000"
data-aos-easing="ease-in-sine">
<div class="col-md-12 col-lg-6">
<div class="card mx-2 my-4">
<div class="card-body">
<img src="/assets/rest-demo.jpg" class="img-fluid project-image">
<h4 class="card-title mt-4">Pho Kitchen - Restaurant Website</h4>
<h5>Website Design, Responsive Design</h5>
<h6 class="text-gradient">HTML5, CSS3, Sass, JavaScript, Bootstrap</h6>
<p class="card-text">A mobile-responsive restaurant website.</p>
<div class="row justify-content-center gap-2">
<a href="https://pho-kitchen.netlify.app/" target="_blank" class="btn-gradient">Live Preview</a>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 ">
<div class="card m-2 my-4">
<div class="card-body">
<img src="/assets/salon-demo.png" class="img-fluid project-image">
<h4 class="card-title mt-4">Hudson Salon - Hair Salon Website</h4>
<h5>Website Design, Responsive Design</h5>
<h6 class="text-gradient">HTML5, CSS3, Sass, JavaScript, Bootstrap</h6>
<p class="card-text">A mobile-responsive hair salon website.</p>
<div class="row justify-content-center gap-2 ">
<a href="https://hudson-salon.netlify.app/" class="btn-gradient">Live Preview</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--ABOUT-->
<section class="container-fluid pt-8 pb-6 min-vh-100 about" id="about" data-aos="fade" data-aos-duration="5000"
data-aos-easing="ease-in-sine">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8">
<h6><span class="text-gradient">//ABOUT ME</span></h6>
<h2 class="pt-4 pb-3 display-4">I'm a <span class="text-gradient gradient-fix"><strong>Full Stack Web Developer</strong></span> focused on building modern and responsive websites for companies of all sizes.</h2>
</div>
<div class="col-sm-12 col-md-4 p-2">
<div class="border-gradient-circle mx-auto" data-aos="fade" data-aos-duration="5000"
data-aos-easing="ease-in-sine">
</div>
</div>
<div class="row">
<p class="fs-5">I am a software engineer with a background in law, business and non-profit management. I have a unique understanding of the challenges facing businesses small and large. I am passionate about using technology and design to solve those challenges and accelerate business growth.
<p class="fs-5"> My web development process is focused on understanding your needs, strategizing to create an achievable plan and turning your vision into a modern digital experience that will turn leads into customers and build your brand.</p>
<p class="fs-5">In my free time, you will find me doing home improvement projects, spoiling my dog, listening to vinyl with my husband or <a href="https://gdg.community.dev/gdg-baton-rouge" class="crimson">organizing a Google Developer Group tech meetup!</a></p>
<h3>I'm currently accepting new freelance clients. <a href="#contact" class="text-reset">Send me a message</a> below to talk more about your project.</h3>
</div>
</div>
</div>
</section>
<!--CONTACT-->
<section class="container-fluid py-10 min-vh-100" id="contact">
<div class="row justify-content-center bg-black mx-3 mx-lg-6 text-white rounded-4">
<div class="col-med-12 col-lg-6 p-5">
<h2 class="display-3">Let's Connect</h2>
<p class="fs-5 py-4">Need a developer for your next project or startup? Have a problem you are trying to solve? Just want to talk more about tech? Let's connect! Send me a message here or connect with me on social.</p>
<div class="fs-2 my-2"><a href="https://github.com/KateIvesDev" class="hover-text-gradient">Github</a></div>
<div class="fs-2 my-2"><a href="https://www.linkedin.com/in/kateivesdev">LinkedIn</a></div>
<div class="fs-2 my-2"><a href="https://www.twitter.com/kateivesdev">Twitter</a></div>
<div class="fs-2 my-2"><a href="https://www.polywork.com/kateives">Polywork</a></div>
</div>
<div class="col-med-12 col-lg-6 p-md-5 pb-sm-2">
<form name="contact" method="POST" netlify-honeypot="bot-field"
data-netlify="true" class="bg-white text-black fs-4 p-4 rounded-4 my-2">
<div>
<h2 class="display-6">Send a Message</h2>
<p class="honey">
<input name="bot-field" autocomplete="off"/>
</p>
</div>
<p>
<input type="text" name="name" placeholder="Name" class="p-1 w-100" required/>
</p>
<p>
<input type="email" name="email" placeholder="Email" class="p-1 w-100" required/>
</p>
<p>
<input type="phone" name="phone" placeholder="Phone" class="p-1 w-100" required/>
</p>
<p>
<input type="text" name="company" placeholder="Company" class="p-1 w-100" required/>
</p>
<p>
<textarea type="text" name="message" placeholder="Message" class="p-1 w-100" required></textarea>
</p>
<p>
<button type="submit" class="btn-gradient w-100">Send</button>
</p>
</form>
</div>
</div>
</section>
<!--FOOTER-->
<footer class="bg-black py-5">
<div class="container-fluid">
<div class="row px-sm-4 px-lg-8">
<div class="col-12 col-lg-6 my-2">
<!-- Heading -->
<h5 class="text-primary fs-3">
Kate Ives
</h5>
<!-- Text -->
<p class="text-white fs-4">
I'm a Full Stack Web Developer dedicated to building modern and responsive websites.
</p>
<div class="d-flex py-4">
<div>
<a href="https://github.com/kateivesdev">
<svg fill="url(#grad1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="60px" height="60px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #fff; " />
<stop offset="100%" style="stop-color: #fff; " />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%" >
<stop offset="20%" style="stop-color: #b16cea; " />
<stop offset="60%" style="stop-color: #ff5e69; " />
<stop offset="80%" style="stop-color: #ff8a56; " />
<stop offset="100%" style="stop-color: #ffa84b; " />
</linearGradient>
</defs>
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"/></svg>
</a>
</div>
<div>
<a href="https://www.linkedin.com/in/kateivesdev" class="footer-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="60px" height="60px" fill="url(#grad1)">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #fff; " />
<stop offset="100%" style="stop-color: #fff; " />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%" >
<stop offset="20%" style="stop-color: #b16cea; " />
<stop offset="60%" style="stop-color: #ff5e69; " />
<stop offset="80%" style="stop-color: #ff8a56; " />
<stop offset="100%" style="stop-color: #ffa84b; " />
</linearGradient>
</defs>
<path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M10.496,8.403 c0.842,0,1.403,0.561,1.403,1.309c0,0.748-0.561,1.309-1.496,1.309C9.561,11.022,9,10.46,9,9.712C9,8.964,9.561,8.403,10.496,8.403z M12,20H9v-8h3V20z M22,20h-2.824v-4.372c0-1.209-0.753-1.488-1.035-1.488s-1.224,0.186-1.224,1.488c0,0.186,0,4.372,0,4.372H14v-8 h2.918v1.116C17.294,12.465,18.047,12,19.459,12C20.871,12,22,13.116,22,15.628V20z"/>
</svg>
</a>
</div>
<div>
<a href="https://www.twitter.com/kateivesdev">
<svg fill="url('#grad1')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="60px" height="60px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #fff; " />
<stop offset="100%" style="stop-color: #fff; " />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%" >
<stop offset="20%" style="stop-color: #b16cea; " />
<stop offset="60%" style="stop-color: #ff5e69; " />
<stop offset="80%" style="stop-color: #ff8a56; " />
<stop offset="100%" style="stop-color: #ffa84b; " />
</linearGradient>
</defs>
<path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M21.464,12.535 c0.006,0.133,0.009,0.265,0.009,0.397c0,4.068-3.095,8.756-8.756,8.756c-1.739,0-3.356-0.509-4.717-1.383 c0.241,0.029,0.486,0.042,0.735,0.042c1.443,0,2.769-0.491,3.821-1.318c-1.347-0.025-2.484-0.915-2.875-2.137 c0.188,0.036,0.381,0.055,0.579,0.055c0.281,0,0.554-0.038,0.811-0.108c-1.408-0.282-2.469-1.526-2.469-3.017 c0-0.013,0-0.026,0-0.039c0.415,0.231,0.889,0.369,1.394,0.385c-0.825-0.551-1.369-1.494-1.369-2.561 c0-0.565,0.151-1.094,0.416-1.547c1.518,1.862,3.786,3.088,6.343,3.216c-0.052-0.225-0.079-0.46-0.079-0.701 c0-1.699,1.378-3.078,3.077-3.078c0.885,0,1.685,0.374,2.246,0.972c0.701-0.139,1.36-0.394,1.955-0.747 c-0.23,0.719-0.718,1.321-1.354,1.703c0.622-0.074,1.215-0.239,1.768-0.484C22.588,11.559,22.067,12.1,21.464,12.535z"/></svg>
</a>
</div>
</div>
</div>
<div class="col-12 col-lg-6 my-2">
<!-- Heading -->
<h5 class="text-xs text-primary fs-3">
Subscribe to My Newsletter
</h5>
<!-- Input -->
<!-- Begin Mailchimp Signup Form -->
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://kateives.us14.list-manage.com/subscribe/post?u=481fcd25ac9cef67ac481c82e&id=2789cc40a8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="indicates-required"></div>
<div class="mc-field-group mailchimp-form py-2 my-4 border-bottom border-primary">
<span class="material-icons text-gradient">
mail_outline
</span>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email">
</div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_481fcd25ac9cef67ac481c82e_2789cc40a8" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn-gradient">
</div>
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<div class="row mx-auto justify-content-center text-center text-white" style="width: 90%">
<!-- Copyright -->
<hr class="hr-sm me-3 mt-5" style="height: 1px;"> © 2023 Kate Ives. All Rights Reserved.</hr>
<p>Made with ❤️ in Baton Rouge, LA.</p>
</div>
</div>
</footer>
<!--MAIN JS FILE-->
<script src="/js/main.js"></script>
<!--LOTTIE FILES-->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<!-- Popper.js-->
<script src="/node_modules/@popperjs/dist/cjs/popper.js"></script>
<!-- BOOTSTRAP JS-->
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!--AOS JS-->
<script src="/node_modules/aos/dist/aos.js"></script>
<script>
AOS.init();
</script>
<!--MAILCHIMP-->
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</body>
</html>