-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (158 loc) · 8.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stephen Ouldhouse - Developer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
</head>
<body>
<div class="ui segment pageLoader">
<div class="ui active dimmer">
<div class="ui text loader">Loading</div>
</div>
<p></p>
</div>
<div class="contentWrapper">
<!-- backend content -->
<div class="welcomeContainer">
<!-- navabar -->
<div id="navbarContainer">
<ul class="navbarUl">
<li class=navbarLink><a href="#backend">Backend</a></li>
<li class=navbarLink><a id="projectScroll" href="#project">Fullstack Work</a></li>
<li class=navbarLink><a href="ouldhouseResume.pdf">Resume</a></li>
</ul>
</div>
<!-- Welcome Header -->
<h1 class="fade-in one">Hello,</h1>
<h2 class="fade-in two">I'm Stephen.</h2>
<h3 class="fade-in three" id="fullStack">Full Stack Developer</h3><br><br>
<div class="socialMediaLinks">
<div class="fade-in three">
<a id="githubLink" class="link" href="https://github.com/botanicalpilot">
<i class="fab fa-github fa-lg"></i>
</a>
<a id="mailLink" class="link" href="#">
<i id="openModel" class="fas fa-envelope fa-lg"></i>
</a>
<a id="linkedInLink" class="link" href="https://www.linkedin.com/in/ouldhouse/">
<i class="fab fa-linkedin-in fa-lg"></i>
</a></div>
</div>
</div>
<div id="emailModal" class="modal">
<div class="modal-content">
<span class="close-button"><i class="fas fa-window-close fa-lg"></i></span>
<form action="https://formspree.io/xzbgwgda" method="POST" >
<h1 id="customPlantTitle" >Get in Touch</h1>
<input name="name" id="modalForm" type="text" placeholder="Name" required><br>
<input name="email" id="modalForm" type="email" placeholder="Email" required><br>
<input name="message" id="contactMessage" type="text" placeholder="Your message" required><br>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
<!-- projects content -->
<div id="project"class="project">
<h1>Fullstack Apps</h1>
<div class='gibber'>
<a href="https://gibber-app.herokuapp.com/">
<div class="gibberPhoto"></div>
</a>
<div class="gibberContent">
<a href="https://gibber-app.herokuapp.com/">
<h2 class="projectTitle">Gibber</h2>
</a>
<p>Gibber takes its name from Gibberellins, a group of plant hormones that regulate plant developmental processes.
<p>Each year I miss sowing seeds in time for my garden - either because I forget or because I miss my sowing window. After constantly referencing an old gardening calendar I was inspired to make my own app to solve the issue.<br>
</p>
<p>Users on Gibber can search for crops by common or scientific names. Results from the API indicate if the crop should be only grown once per season or may be grown in succession. Users may select crops according to their desired planting method (sown indoors, sown directly, or planted as starts).<br>
</p>
<p>Selected crops are included on a secondary list where users may export the planting dates and helpful information to their personal online calendars. Planting dates will also appear on Gibber’s on screen calendar.
</p>
</p>
<h2>Technologies Used</h2>
<ul>
<li>JavaScript</li><br>
<li>Node.js</li><br>
<li>Express</li>
<li>Babel + Webpack</li>
<li>HTML/CSS</li>
</ul>
<br>
<a id="gibberLink" class="link" href="https://github.com/botanicalpilot/gibber">
<i class="fab fa-github fa-lg"></i>
</a>
</div>
</div>
<div>
<div id="yardsBio">
<a href="http://botanicalpilot.pythonanywhere.com/">
<div id="yardsPhoto"></div>
</a>
<div id="yardsBioContent">
<a href="http://botanicalpilot.pythonanywhere.com/">
<h2 class="projectTitle">Yards Biodiversity</h2>
</a>
<p>Plants and algae are the anchors of Earth's Food Web. Without this group of organisms ecosystems cannot function. Planting native and diverse groups of plants while eliminating invasive species can have major ecological impacts both in cities and our rural landscapes.</p>
<p>Yards Biodiversity aims to give users the ability to assess the plant biodiversity in their very own backyards.</p>
<p> Users may search for plants in the application's API, then add plants to their "Biome" - a list of all the plants the user has selected. Users may also create custom plant entries that will be added to their Biome. Using information from the USDA Yards Biodiversity determines the ratio of native, nonnative, or invasive plants in a users Biome. This application can give individuals a better understanding of the flora diversity in their immediate area or be used as a landscape planning tool.</p>
<h2>Log in and try it out</h2>
<p>Test username: test</p>
<p>Password: tryitout!</p>
<br>
<h2>Technologies Used</h2>
<ul>
<li>Django</li><br>
<li>Django Rest Framework</li><br>
<li>Python</li><br>
<li>JavaScript</li><br>
<li>Vue.js</li><br>
<li>HTML/CSS</li>
</ul>
<br>
<a id="yardsLink" class="link" href="https://github.com/botanicalpilot">
<i class="fab fa-github fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
<!-- About Me -->
<div id="backend"class="backend">
<div class="backendContent" id="backendContent">
<h1>Backend</h1>
<div id="thallusContent">
<h2 class="backendTitle">thallusAPI</h2>
<p>Rest API built with Node.js, Express, MongoDB, and deployed to Heroku.</p>
<p>Utilized by the app Gibber</p>
<br>
<a id="gibberLink" class="link" href="https://github.com/botanicalpilot/gibber">
<i class="fab fa-github fa-lg"></i>
</a>
<br>
</div>
<div id='#yardsAPIContent'></div>
<br>
<h2 class="backendTitle" id="yardsAPITitle">yardsAPI</h2>
<p>Rest API built with Django REST framework.</p>
<p>Utilized by the app Yards Biodiversity</p>
<br>
<a id="gibberLink" class="link" href="https://github.com/botanicalpilot/gibber">
<i class="fab fa-github fa-lg"></i>
</a>
<br><br>
</div>
</div>
</div>
<script>
</script>
</div>
<script src="main.js"></script>
</body>
</html>