-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (141 loc) · 16.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>natalie stroud</title>
<meta name="viewport" content="width=device-width">
<meta name="Description" content="Natalie's portfolio website made in Bootstrap 4.3.1. Containing contact information and various projects.">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>natalie stroud.</h1>
<hr>
<div class="mb-5">
<a href="https://github.com/natastro" aria-label="Natalie's Github profile" target="_blank" rel="noreferrer"><i class="fab fa-github fa-2x my-3" style="color:black;"></i></a>
<a href="https://dev.to/_nataliestroud" aria-label="Natalie's dev.to profile" target="_blank" rel="noreferrer"><i class="fab fa-dev fa-2x my-3" style="color:black;"></i></a>
<a href="https://www.linkedin.com/in/natalie-a-stroud/" aria-label="Natalie's LinkedIn" target="_blank" rel="noreferrer"><i class="fab fa-linkedin fa-2x my-3" style="color:black;"></i></a>
<a href="mailto:[email protected]" aria-label="Link to email Natalie"><i class="far fa-envelope fa-2x" style="color:black;"></i></a>
</div>
<svg id="fb414a8b-d0ff-4841-818a-532ec941ba8d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="355" height="350" viewBox="0 0 583.9043 652"><title>modern professional</title><circle cx="137.03198" cy="553.16387" r="14.92017" fill="#650e05" opacity="0.4"/><circle cx="109.41853" cy="560.28992" r="10.46639" fill="#650e05" opacity="0.4"/><path d="M839.05005,473.26123A255.4403,255.4403,0,0,0,821.148,248.49384L413.04785,305l391.09027-81.50568A254.56224,254.56224,0,0,0,602.04785,124c-140.83264,0-255,114.16736-255,255a257.18949,257.18949,0,0,0,2.37335,34.7973Z" transform="translate(-308.04785 -124)" fill="#f2f2f2"/><path d="M364.09235,470.8103C400.95038,566.27441,493.58374,634,602.04785,634c101.778,0,189.61694-59.63409,230.51453-145.86108Z" transform="translate(-308.04785 -124)" fill="#f2f2f2"/><circle cx="106" cy="112" r="12" fill="#3f3d56"/><circle cx="538" cy="252" r="12" fill="#650e05"/><rect x="105" y="339" width="20" height="20" fill="#650e05"/><path d="M576.04785,317s33-14.37945,48.5.81027S583.04785,328,576.04785,317Z" transform="translate(-308.04785 -124)" fill="#3f3d56"/><path d="M633.03015,248.80469c-11.08984-18.73841-33.03021-19.6117-33.03021-19.6117s-21.37964-2.734-35.09454,25.80481c-12.78339,26.60053-30.42609,52.28388-2.84034,58.51087L567.04785,298l3.08582,16.66327a107.93429,107.93429,0,0,0,11.80291.20172c29.54212-.9538,57.67652.27905,56.77063-10.3219C637.503,290.45062,643.70081,266.83478,633.03015,248.80469Z" transform="translate(-308.04785 -124)" fill="#2f2e41"/><ellipse cx="294.5" cy="398" rx="56" ry="13" fill="#3f3d56"/><rect x="593.47388" y="683.50021" width="54.14795" height="1.99959" transform="translate(-356.83712 -76.37339) rotate(-4.22916)" fill="#2f2e41"/><rect x="566.54805" y="669.58729" width="1.99959" height="22.82542" transform="translate(-610.71498 726.10779) rotate(-61.18921)" fill="#2f2e41"/><rect x="288.5" y="543.5" width="18" height="2" fill="#2f2e41"/><polygon points="241.498 650.568 239.502 650.432 254.502 418.432 256.498 418.568 241.498 650.568" fill="#2f2e41"/><polygon points="315.501 650.549 305.501 422.549 307.499 422.451 317.499 650.451 315.501 650.549" fill="#2f2e41"/><rect x="651.04766" y="544.10828" width="2.00039" height="230.78345" transform="translate(-360.12854 -68.08069) rotate(-4.72229)" fill="#2f2e41"/><path d="M648.54785,588.5s-14,26-23,26-8,17-6,21,7,13-1,26c-2.7944,4.54089-2.29452,9.69184-.4608,14.47262,5.13784,13.3951,25.12393,9.33685,24.48633-4.99562q-.01054-.237-.02553-.477c-1-16,7-41,15-47s15-22,15-22Z" transform="translate(-308.04785 -124)" fill="#ffb8b8"/><path d="M552.54785,582.5s14,26,23,26,8,17,6,21-7,13,1,26c2.7944,4.54089,2.29452,9.69184.4608,14.47262-5.13784,13.3951-25.12392,9.33685-24.48633-4.99562q.01054-.237.02553-.477c1-16-7-41-15-47s-15-22-15-22Z" transform="translate(-308.04785 -124)" fill="#ffb8b8"/><path d="M563.54785,454.5l-6,13s-88,29-80,63,47,87,53,85,38-8,39-25-23-47-23-47l33-30,48.02035-1,40.97965,31s-43,38-24,53,47,25,51,19,49-95,42-103-78-38-78-38l-19-27-74-4Z" transform="translate(-308.04785 -124)" fill="#2f2e41"/><path d="M581.54785,289.5s5,33-5,37,20,21,20,21h17l11-23s-10-18-4-35S581.54785,289.5,581.54785,289.5Z" transform="translate(-308.04785 -124)" fill="#ffb8b8"/><path d="M581.54785,289.5s5,33-5,37,20,21,20,21h17l11-23s-10-18-4-35S581.54785,289.5,581.54785,289.5Z" transform="translate(-308.04785 -124)" opacity="0.1"/><path d="M574.54785,317.5s11,12,13,14,11,13,30-3,21,3,21,3v120s-16-7-29,0-40-2-40-2l-5-124Z" transform="translate(-308.04785 -124)" fill="#d0cde1"/><path d="M581.89324,317.5s-9.34539-4-17.34539,0-36,24-34,33,28,72,10,102-21,38-21,38l44-23s34-21,31-34S581.89324,317.5,581.89324,317.5Z" transform="translate(-308.04785 -124)" fill="#3f3d56"/><path d="M621.55965,317.5s20.9882,2,21.9882,4,31.5,10.5,29.5,19.5-29.5,89.5-17.5,104.5,32,36,25,38-19-3-31,0-40-22-37-49S612.57144,324.5,621.55965,317.5Z" transform="translate(-308.04785 -124)" fill="#3f3d56"/><path d="M571.54785,508.5v10s-5,23,11,22,6-28,6-28l-1-9Z" transform="translate(-308.04785 -124)" fill="#ffb8b8"/><path d="M616.54785,509.5s-11,23,0,25,19-13,19-17S616.54785,509.5,616.54785,509.5Z" transform="translate(-308.04785 -124)" fill="#ffb8b8"/><polygon points="272.5 650.524 270.5 650.476 276.5 420.476 278.5 420.524 272.5 650.524" fill="#2f2e41"/><ellipse cx="323" cy="152" rx="2" ry="4" fill="#ffb8b8"/><ellipse cx="264" cy="152" rx="2" ry="4" fill="#ffb8b8"/><path d="M648.54785,330.5s25,0,24,10-34,182-34,182-14-13-26-10Z" transform="translate(-308.04785 -124)" fill="#3f3d56"/><path d="M551.54785,333.5s-25,5-25,20,36,159,41,159,24-3,24-8S551.54785,333.5,551.54785,333.5Z" transform="translate(-308.04785 -124)" fill="#3f3d56"/><path d="M557.04785,363l22.5,87.991S569.04785,374,557.04785,363Z" transform="translate(-308.04785 -124)" opacity="0.2"/><path d="M644.56486,350.63621,621.809,465.6798S629.08188,357.27242,644.56486,350.63621Z" transform="translate(-308.04785 -124)" opacity="0.2"/><circle cx="293.5" cy="152.5" r="29" fill="#ffb8b8"/><polygon points="320.079 122.998 298.403 111.644 268.47 116.289 262.277 143.642 277.693 143.049 282 133 282 142.884 289.114 142.61 293.242 126.611 295.823 143.642 321.112 143.126 320.079 122.998" fill="#2f2e41"/><rect x="10" y="650" width="546" height="2" fill="#2f2e41"/><path d="M772.63086,774.01953l-2-.03906a463.83471,463.83471,0,0,1,7.09961-66.28711c8.64844-46.88086,23.0293-77.66992,42.74316-91.51172l1.14844,1.63672C775.57031,650.15234,772.6543,772.78418,772.63086,774.01953Z" transform="translate(-308.04785 -124)" fill="#2f2e41"/><path d="M797.63086,773.541l-2-.03907c.043-2.21484,1.293-54.41406,21.84277-68.84179l1.14844,1.63672C798.90137,720.14258,797.64063,773.00879,797.63086,773.541Z" transform="translate(-308.04785 -124)" fill="#2f2e41"/><circle cx="525" cy="483" r="10" fill="#650e05"/><circle cx="520" cy="570" r="10" fill="#650e05"/><path d="M792.96963,623.99461c1.87935,12.004-3.01891,22.74063-3.01891,22.74063s-7.94529-8.72581-9.82464-20.72985,3.0189-22.74063,3.0189-22.74063S791.09027,611.99057,792.96963,623.99461Z" transform="translate(-308.04785 -124)" fill="#2f2e41"/><path d="M825.6568,653.14836c-11.49295,3.9422-22.91878.98962-22.91878.98962s7.20793-9.34414,18.70088-13.28634,22.91879-.98962,22.91879-.98962S837.14975,649.20616,825.6568,653.14836Z" transform="translate(-308.04785 -124)" fill="#2f2e41"/><path d="M826.02605,729.3095a31.134,31.134,0,0,1-16.06421.69365,28.37377,28.37377,0,0,1,29.172-10.0063A31.134,31.134,0,0,1,826.02605,729.3095Z" transform="translate(-308.04785 -124)" fill="#2f2e41"/><polygon points="2 192 0 192 0 62 128 62 128 64 2 64 2 192" fill="#2f2e41"/><polygon points="583.904 192 581.904 192 581.904 64 455.904 64 455.904 62 583.904 62 583.904 192" fill="#2f2e41"/><polygon points="2 302 0 302 0 432 128 432 128 430 2 430 2 302" fill="#2f2e41"/><polygon points="583.904 302 581.904 302 581.904 430 455.904 430 455.904 432 583.904 432 583.904 302" fill="#2f2e41"/><rect x="36" y="123" width="140" height="2" fill="#3f3d56"/><rect x="74" y="105" width="2" height="18.5" fill="#3f3d56"/><rect x="135" y="105" width="2" height="18.5" fill="#3f3d56"/><rect x="414" y="264" width="140" height="2" fill="#3f3d56"/><rect x="452" y="246" width="2" height="18.5" fill="#3f3d56"/><rect x="513" y="246" width="2" height="18.5" fill="#3f3d56"/><rect x="45" y="358" width="140" height="2" fill="#3f3d56"/><rect x="83" y="340" width="2" height="18.5" fill="#3f3d56"/><rect x="144" y="340" width="2" height="18.5" fill="#3f3d56"/></svg>
</div>
</div>
</div>
<section class="container-fluid px-0">
<div class="row align-items-center content mx-2 my-2">
<div class="col-md-6 order-2 order-md-1">
<img src="nosilence.jpg" alt="No Silence preview" class="img-fluid">
</div>
<div class="col-md-6 text-center order-1 order-md-2">
<div class="row justify-content-center mx-1 my-1">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h4>No Silence</h4>
<p>A collective of resources to aid the Black community.</p>
<p>Used:
<i class="fab fa-bootstrap"></i></p>
<a href="https://nosilence.space/" aria-label="View No Silence" target="_blank" rel="noreferrer"><button class="btn btn-light">View</button></a>
<a href="https://github.com/natastro/nosilence.space" aria-label="No Silence Github Repository" target="_blank" rel="noreferrer"><button class="btn btn-light"><i class="fab fa-github"></i> Github</button></a>
</div>
</div>
</div>
</div>
<div class="row align-items-center content mx-2 my-2">
<div class="col-md-6 text-center">
<div class="row justify-content-center mx-1 my-1">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h4>Stroke Recovery 101</h4>
<p>A blog created as a tool to help my mom with stroke recovery. Now tells the story of being her caregiver as she suffered from two strokes.</p>
<p>Used:
<i class="fab fa-bootstrap"></i></p>
<a href="https://stroke-recovery-101.com/" aria-label="Stroke Recovery 101 Website" target="_blank" rel="noreferrer"><button class="btn btn-light">View</button></a>
</div>
</div>
</div>
<div class="col-md-6">
<img src="stroke-recovery.jpg" alt="Stroke Recovery 101 thumbnail" class="img-fluid">
</div>
</div>
<div class="row align-items-center content mx-2 my-2">
<div class="col-md-6 order-2 order-md-1">
<img src="100doc.jpg" alt="100 Days of Code thumbnail" class="img-fluid">
</div>
<div class="col-md-6 text-center order-1 order-md-2">
<div class="row justify-content-center mx-1 my-1">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h4>#100DaysOfCode</h4>
<p>A journal in progress to track the things I learn and review such as HTML, CSS, Bootstrap and JavaScript.</p>
<p>Used:
<i class="fab fa-bootstrap"></i></p>
<a href="https://www.natalieastroud.com/100days/day1.html" aria-label="Natalie's 100 Days of Code blog" target="_blank" rel="noreferrer"><button class="btn btn-light">View</button></a>
<a href="https://github.com/natastro/100DaysOfCode-Journal" aria-label="Natalie's 100 Days of Code Github Repository" target="_blank" rel="noreferrer"><button class="btn btn-light"><i class="fab fa-github"></i> Github</button></a>
</div>
</div>
</div>
</div>
<div class="row align-items-center content mx-2 my-2">
<div class="col-md-6 text-center">
<div class="row justify-content-center mx-1 my-1">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h4>Breeze Cart</h4>
<p>An eCommerce/grocery app that selects nearby stores and provides accessibility setings when you first sign up. Will contain a feature for in store "street view" and the option to pay with EBT/WIC.</p>
<p>Used:
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i></p>
<a href="http://www.natalieastroud.com/breeze-cart/index.html" aria-label="Breeze Cart landing page" target="_blank" rel="noreferrer"><button class="btn btn-light">View</button></a>
<a href="https://github.com/natastro/breeze-cart-site-app" aria-label="Breeze Cart landing page Github repository" target="_blank" rel="noreferrer"><button class="btn btn-light"><i class="fab fa-github"></i> Github</button></a>
<a href="http://www.natalieastroud.com/breeze-cart-ux.html" aria-label="Breeze Cart User Experience Process" target="_blank" rel="noreferrer"><button class="btn btn-light mx-1 my-1">App: UX Process</button></a>
</div>
</div>
</div>
<div class="col-md-6">
<img src="breezeCart2.jpg" alt="Breeze Cart thumbnail" class="img-fluid">
</div>
</div>
<div class="row align-items-center content mx-2 my-2">
<div class="col-md-6 order-2 order-md-1">
<img src="techForm.jpg" alt="Technician Form thumbnail" class="img-fluid">
</div>
<div class="col-md-6 text-center order-1 order-md-2">
<div class="row justify-content-center mx-1 my-1">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h4>Technician Form</h4>
<p>Small project built for Project Administrator position. This is a form/app idea for technicians to use in the field for setting ETAs, checking into site, sending updates onsite, checking out of site, ordering parts, or sending in closing notes.</p>
<p>Used:
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i></p>
<a href="http://www.natalieastroud.com/tech-form/techForm.html" aria-label="Technician Form" target="_blank" rel="noreferrer"><button class="btn btn-light">View</button></a>
<a href="https://github.com/natastro/tech-form" aria-label="Technician Form Github Repository" target="_blank" rel="noreferrer"><button class="btn btn-light"><i class="fab fa-github"></i> Github</button></a>
</div>
</div>
</div>
</div>
<div class="row align-items-center content mx-2 my-2">
<div class="col-md-6 text-center">
<div class="row justify-content-center mx-1 my-1">
<div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
<h4>xoxo, natalie</h4>
<p>My first project that I've built in Webflow. Inspired by a design found on Pinterest, all photos from Unsplash. </p>
<p>Used: Webflow</p>
<a href="https://xoxo-natalie.webflow.io/" aria-label="xoxo Natalie Webflow site" target="_blank" rel="noreferrer"><button class="btn btn-light">View</button></a>
</div>
</div>
</div>
<div class="col-md-6">
<img src="xoxonatalie.jpg" alt="xoxo Natalie Webflow thumbnail" class="img-fluid">
</div>
</div>
</section>
<div class="row about mt-5">
<div class="col-lg-12">
<hr>
<h3>about.</h3>
<p>I am a skilled Web Accessibility Specialist and CPACC (Certified Professional in Accessibility Core Compentencies) certified. Currently, I love to learn about accessibility, data science, and bioinformatics. I also contribute my internationalization (i18n) and accessibility (a11y) skills to open source projects on GitHub.</p>
</div>
</div>
</body>
</html>