-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
346 lines (342 loc) · 16.8 KB
/
portfolio.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desi Quinn Creative - Portfolio</title>
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
<script src="https://kit.fontawesome.com/c081f77b94.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/index.css">
<script defer="defer" src="./js/header.js"></script>
</head>
<body>
<!-- Header -->
<header>
<!-- Navigation -->
<nav class="nav_bar">
<img class="logo" src="img/logo.png" alt="Desi Quinn Creative Logo"/>
<div class="nav_links drop_down">
<a href="./portfolio.html">Home</a>
<a href="#featured">Projects</a>
<a href="https://drive.google.com/file/d/1AghcWPWJ3VbjRRAgCdK7Q5GYce7c-JM9/view?usp=sharing"
target="_blank">
Resumé
</a>
<a href="#contact">Contact</a>
<a href="./login.html">Login</a>
<a href="./new_project.html"><button class="cta_button">Get A Website</button></a>
</div>
<div class="burger">
<div class="bar bar1"> </div>
<div class="bar bar2"> </div>
<div class="bar bar3"> </div>
</div>
</nav>
<!-- Hero -->
<div class="hero">
<img class="big_desi" src="img/dmorris_orange.png" alt="Desiree Morris"/>
<!-- <h1>Desiree Morris</h1> -->
<div class="tag_line">
<h1>
<span>Full Stack</span>
<span>Web Developer</span>
</h1>
<p>
<span>Not just pretty, but also</span>
<span>powerful web solutions</span>
<!-- <span>web solutions.</span> -->
</p>
</div>
</div>
</header>
<!-- Call To Action 1 -->
<div class="cta_one">
<div class="cta_text">
<p class="value">Increase the Visibility & Efficiency of Your Business</p>
<p class="action_stmt">Work with me to build better web solutions
that will help you provide a quality experience for more customers.</p>
</div>
<a href="./new_project.html"><button class="cta_button">Get Started</button></a>
</div>
<main>
<!-- My Story -->
<section class="port_intro">
<h2>Hello, I'm Desiree Morris</h2>
<h3>Full Stack Web Developer With an Eye For Design</h3>
<p>My granny introduced me to web development in the 90s. I was just 12 years old when I taught myself HTML and CSS.
Later I went to Western Carolina University and majored in Entrepreneurship and Graphic Design.</p>
<p>At Western Carolina University I landed my first job as a Junior Web Designer for
the university’s website. I also became the go-to person to design and maintain student organization and
department-specific websites. After 3 years I left that job and transferred to a different school.
I graduated with my bachelor’s degree in biology and began working in the medical field.
But, I never stopped building websites for friends and family as a hobby.</p>
<p>In 2018, I decided to leave my medical career behind and get serious about my first love,
web development. For two years I freelanced for small businesses. During that time I
decided to learn more, improve my skills, and become a Full Stack Web Developer. So, I enroll in Lambda School. </p>
<p>Lambda School is a 9-month Computer Science & Software Engineering Academy. I enrolled in the
Web Development & Computer Science track that provided me with an immersive hands-on
curriculum allowing me to become a skilled Full Stack Web Developer.</p>
</section>
<!-- Technology Skills -->
<section class="port_tech">
<h2>Technology Stack</h2>
<!-- <p>I specialize in the S.E.R.N. stack. In addition to SQL, Express, React, and
Node, I also have experience with the following technologies.</p> -->
<div class="tech_list">
<div class="tech_item">
<img src="img/HTML5.png" alt="HTML" />
<p>HTML</p>
</div>
<div class="tech_item">
<img src="img/CSS3.png" alt="CSS" />
<p>CSS</p>
</div>
<div class="tech_item">
<img src="img/javaScript.png" alt="JavaScript" />
<p>JavaScript</p>
</div>
<div class="tech_item">
<img src="img/sqlite.png" alt="SQL" />
<p>SQL</p>
</div>
<!-- <div class="tech_item">
<img src="img/express.png" alt="Express" />
<p>Express</p>
</div> -->
<div class="tech_item">
<img src="img/react.png" alt="React" />
<p>React</p>
</div>
<div class="tech_item">
<img src="img/nodeJS.png" alt="NodeJs" />
<p>NodeJs</p>
</div>
<div class="tech_item">
<img src="img/redux.png" alt="Redux" />
<p>Redux</p>
</div>
<div class="tech_item">
<img src="img/python.png" alt="Python" />
<p>Python</p>
</div>
<div class="tech_item">
<img src="img/less.png" alt="LESS" />
<p>LESS</p>
</div>
<div class="tech_item">
<img src="img/sass_logo.png" alt="SASS" />
<p>SASS</p>
</div>
</div>
<a id="featured"> </a>
</section>
<!-- Featured Projects (3) UI: Party Planner, FE: Foodie Fun App, BE: Droom?--> <hr/>
<section class="port_featured">
<h2>Featured Projects</h2>
<div class="featured_list">
<div class="featured_item">
<a href="https://homepartyplanner.netlify.app/index.html" target="_blank">
<img class="featured_img" src="img/party_planner.png" alt="Party Planner" />
</a>
<h3>
<a href="https://homepartyplanner.netlify.app/index.html" target="_blank">
Party Planner Marketing Website
</a>
</h3>
<p class="project_type">User Interface Project<p/>
<p class="tech_used">HTML5, CSS3, LESS, JavaScript (ES6), BootStrap</p>
<p class="description">Built a simple and responsive marketing website for the party planner app
which allows users to plan parties for their friends. Project completed with a team of 2 User Interface
Developers and 4 days to plan and build. Solely responsible for the design and development of the landing
page and the navigation bar.</p>
<a href="https://github.com/build-party-planner-project-week/BW-Party-Planner-UI-1" target="_blank" class="code_link">View The Code</a>
<!-- https://homepartyplanner.netlify.com/index.html
HTML5, CSS3, LESS, JavaScript (ES6), GitHub, BootStrap
https://github.com/build-party-planner-project-week/BW-Party-Planner-UI-1 -->
</div>
<div class="featured_item">
<a href="https://build-week-foodie-fun.github.io/UI/" target="_blank">
<img class="featured_img" src="img/foodie_fun_app.png" alt="Foodie Fun App" />
</a>
<h3>
<a href="https://build-week-foodie-fun.github.io/UI/" target="_blank">
Foodie Fun React App
</a>
</h3>
<p class="project_type">Front End Project</p>
<p class="tech_used">JavaScript(ES6), React, Redux, Formik, Axios, Jest</p>
<p class="description">Built an app that allows a user to save restaurants they’ve visited and add a review
so that they can remember their experience. Project completed with a team of 5 Front End React Developers and
4 days to plan and build. Solely responsible for state management, some design tweaks, and Ajax management.</p>
<a href="https://github.com/build-week-foodie-fun/FE" target="_blank" class="code_link">View The Code</a>
<!-- https://foodiefunapp.netlify.com/
JavaScript(ES6), CSS3, React, Redux, Formik, Axios, Jest
https://github.com/build-week-foodie-fun/FE -->
</div>
<div class="featured_item">
<a href="https://documenter.getpostman.com/view/8921227/SW7Z4ULY?version=latest" target="_blank">
<img class="featured_img" src="img/droom.png" alt="Droom" />
</a>
<h3>
<a href="https://documenter.getpostman.com/view/8921227/SW7Z4ULY?version=latest" target="_blank">
Droom Node API
</a>
</h3>
<p class="project_type">Back End Project</p>
<p class="tech_used">NodeJS, Sqlite3, Postgres, Bcrypt</p>
<p class="description">Served as the Team Lead for a cross-functional team. Built the backend for an app that allows
a user to swipe right to like a job listing and left to pass. It also allows a secondary user to create job listings
and swipe right to like a potential employee and left to pass. Backend completed in 2 days, Project completed in 4
days to plan and build. Solely responsible for building the entire backend as well as running daily standup meetings
and managing the project through time management.</p>
<a href="https://github.com/BW-Droom/backend" target="_blank" class="code_link">View The Code</a>
<!-- React, GitHub, Sqlite, Postgres, Bcrypt, Json Web Token, Knex
https://documenter.getpostman.com/view/8921227/SW7Z4ULY
https://github.com/BW-Droom/backend -->
</div>
<!-- <div class="featured_item">
<img class="featured_img" src="img/connect_our_kids.png" alt="Connect Our Kids" />
<h3>Connect Our Kids</h3>
<p>Full Stack Project</p>
<p>Google BigQuery, AWS Lambda, Serverless Framework, NodeJS, and React</p>
<p>Worked with a cross-functional team to build "Impact Dashboard", a green-field web application
that solves a specific problem for social workers.</p> -->
<!-- Google BigQuery, AWS Lambda, Serverless Framework, NodeJS, and React -->
<!-- </div> -->
</div>
</section>
<!-- Technology Skills -->
<!-- <section class="port_tech">
<h2>Technology Stack</h2> -->
<!-- <p>I specialize in the S.E.R.N. stack. In addition to SQL, Express, React, and
Node, I also have experience with the following technologies.</p> -->
<!-- <div class="tech_list">
<div class="tech_item">
<img src="img/HTML5.png" alt="HTML" />
<p>HTML</p>
</div>
<div class="tech_item">
<img src="img/CSS3.png" alt="CSS" />
<p>CSS</p>
</div>
<div class="tech_item">
<img src="img/javaScript.png" alt="JavaScript" />
<p>JavaScript</p>
</div>
<div class="tech_item">
<img src="img/sqlite.png" alt="SQL" />
<p>SQL</p>
</div> -->
<!-- <div class="tech_item">
<img src="img/express.png" alt="Express" />
<p>Express</p>
</div> -->
<!-- <div class="tech_item">
<img src="img/react.png" alt="React" />
<p>React</p>
</div>
<div class="tech_item">
<img src="img/nodeJS.png" alt="NodeJs" />
<p>NodeJs</p>
</div>
<div class="tech_item">
<img src="img/redux.png" alt="Redux" />
<p>Redux</p>
</div>
<div class="tech_item">
<img src="img/python.png" alt="Python" />
<p>Python</p>
</div>
<div class="tech_item">
<img src="img/less.png" alt="LESS" />
<p>LESS</p>
</div>
<div class="tech_item">
<img src="img/sass_logo.png" alt="SASS" />
<p>SASS</p>
</div>
</div>
</section> -->
<!-- Other Case Studies & Personal Project -->
<!-- <section>
<h3>Case Studies, Experiments, & Personal Projects</h3>
<p>The following is a list of the most recent projects and experiments.
Click on the image to view a more detailed desciption of each one.</p>
<img src="img/#" alt="Party Planner" />
<img src="img/#" alt="Wedding Planner" />
<img src="img/#" alt="Foodie Fun App" />
<img src="img/#" alt="Secret Family Recipes" />
<img src="img/#" alt="Impact Dashboard" />
<img src="img/#" alt="Droom" />
<img src="img/#" alt="Ride for Life" />
<img src="img/#" alt="Crazy Bus Driver" />
<img src="img/#" alt="Lambda Treasure Hunt" />
<img src="img/#" alt="Trendsetter Virtual Solutions" />
<img src="img/#" alt="Project 11" />
<img src="img/#" alt="Project 12" />
</section> -->
<!-- Call To Action 2 -->
<section class="cta_two">
<a id="hire_me"></a>
<h2>Ready To Work With Me?</h2>
<p>Partner with me on a new project to increase the visibility and efficiency of your business.</p>
<div class="cta_two_buttons">
<!-- <a href="./hire_me.html"><button class="cta_button_1">Hire Me</button></a> -->
<a href="./new_project.html"><button class="cta_button">Get Started</button></a>
</div>
</section>
<!-- Contact Form -->
<a id="contact"></a>
<section class="contact_section">
<div class="contact_info">
<h2>Contact Info</h2>
<p><i class="fas fa-map-marker-alt"></i>Charlotte, NC</p>
<p>
<i class="fas fa-phone-alt"></i>
<a href="tel:704-412-8043">
(704) 412-8043
</a>
</p>
<p>
<i class="fas fa-envelope"></i>
<a href="mailto:yourfriends@desiquinncreative.com">
yourfriends@desiquinncreative.com
</a>
</p>
<!-- <p>linkedin.com/in/desiree-morris</p> -->
</div>
<div class="contact_form">
<h3 class="form_title">Send Me A Message</h3>
<form class="port_form" action="https://formspree.io/xyydgjpg" method="post">
<input type="text" name="name" placeholder=" Name" required/>
<input type="email" name="email" placeholder=" E-mail" required/>
<input type="text" name="website" placeholder=" Website"/>
<textarea name="message" placeholder="Your message ..."></textarea>
<div class="checkbox">
<input type="checkbox" id="checkbox_1" name="optin" value="Yes"/>
<label for="checkbox_1">
Send updates, tips, and tools to my email that help me improve
the visibility and efficiency of my business.
</label>
</div>
<div class="form_buttons">
<button type="reset" name="reset">Clear</button>
<button class="cta_button" type="submit" name="submit">Send</button>
</div>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="social_icons">
<a href="https://www.linkedin.com/in/desiree-morris/" target="_blank"><i class="fab fa-linkedin" title="Linked In"></i></a>
<a href="https://twitter.com/desi_quinn" target="_blank"><i class="fab fa-twitter" title="Twitter"></i></a>
<a href="https://github.com/desiquinn" target="_blank"><i class="fab fa-github" title="GitHub"></i></a>
<a href="https://www.facebook.com/desiquinncreative" target="_blank"><i class="fab fa-facebook" title="Facebook"></i></a>
<a href="https://www.instagram.com/desiquinncreative" target="_blank"><i class="fab fa-instagram" title="Instagram"></i></a>
</div>
<p class="copyright"><i class="far fa-copyright"></i> Copyright Desi Quinn Creative</p>
</footer>
</body>
</html>