-
Notifications
You must be signed in to change notification settings - Fork 0
/
mywork.html
263 lines (263 loc) · 9.63 KB
/
mywork.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
<!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" />
<meta
name="description"
content="Projects Portfolio, HTML5, CSS, JavaScript created by front end developer student Michelle Wegler"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&family=Xanh+Mono&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/818262a977.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<link href="src/portfolio.css" rel="stylesheet" type="text/css" />
<title>Front End Developer - Michelle Wegler Projects</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html"
><img src="img/a_cat.jpg" alt="logo" class="img-fluid logo-nav"
/></a>
<button
class="navbar-toggler navbar-light bg-light"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" title="About">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="mywork.html" title="My Work"
>My Work</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html#contact" title="Contact"
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="hero">
<h1 class="mt-5">My Work</h1>
<h2>Projects</h2>
</div>
<div class="col-sm text-center mb-3">
<img
src="img/homepage.png"
alt="Website image with HTML, CSS and JS"
class="img-fluid p-2 shadow rounded border-img"
id="mywork-image"
/>
</div>
</div>
<div class="border-container">
<div class="container background-color">
<div class="row">
<div class="col-md-6">
<h3 class="mt-3 mb-3">Catalog App</h3>
<p>
The Catalog App is a website about cats with information about
cats, links to blogs and articles about cats, a questionnaire and
cat pictures, both my own cats as well as cat pictures generated
by API. The website consists of HTML5, CSS (with Font Awesome, and
Bootstrap), JavaScript (with jquery, JSDelivr and Vue), and Python
(with Flask and Jinja). The app was the final project for the
HarvardX online course CS50 - Introduction to Computer Science.
</p>
<div class="mb-5 mt-5">
<a
href="https://youtu.be/vHbue3Ikbig"
target="_blank"
rel="noopener noreferrer"
class="primary-link btn"
>Video Demo Catalog App</a
>
</div>
</div>
<div class="col-md-6 mt-3 mb-5">
<img
src="img/catalog-app.jpg"
class="img-fluid rounded"
alt="Catalog App"
/>
</div>
</div>
<div class="row">
<div class="col">
<img
src="img/smirre-training.jpg"
class="img-fluid rounded"
alt="Smirre Training App"
/>
</div>
<div class="col-sm-4">
<h3>Training App</h3>
<p>
The Training App provides personal training sessions for cats and
inspirational examples of exercises. The website consists of
HTML5, CSS, and JavaScript.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="mb-3 mt-5">Weather App</h3>
<p>
The Weather App has a search engine and uses API from
https://openweathermap.org/ to show the current weather. The app
shows the current temperature in Celsius with the option to
convert to the current temperature in Fahrenheit for the searched
city. A description and weather icon is provided for the current
weather. A forecast is shown for the searched city for six days
with a high and low temperature in Celsius and a weather icon for
each day. The first weather app was built using JavaScript and the
same app was then rebuilt using React.
</p>
<div
class="navigation-links d-flex justify-content-center mt-3 mb-3"
>
<a
href="https://benevolent-cranachan-251295.netlify.app"
target="_blank"
rel="noopener noreferrer"
class="primary-link btn btn mr-5"
>Launch JavaScript Weather App</a
>
<!-- <a
href="https://benevolent-pegasus-583b14.netlify.app"
target="_blank"
rel="noopener noreferrer"
class="secondary-link btn"
>Launch React Weather App</a
> -->
</div>
</div>
<div class="col-md-6 mt-5">
<img
src="img/weather-app.jpg"
class="img-fluid rounded"
alt="Weather App"
/>
</div>
</div>
<div class="row mt-5">
<div class="col">
<img
src="img/dictionary.jpg"
class="img-fluid rounded p-10 mb-3"
alt="Dictionary"
/>
</div>
<div class="col-sm-4">
<h3 class="mb-3 mt-5">Dictionary App</h3>
<p>
The React Dictionary App has a search engine and uses API
integration with https://dictionaryapi.dev/ and
https://www.pexels.com/api/. The app shows the meaning and
examples of words and also displays images of the searched word.
Background image from https://unsplash.com/ and illustration from
https://undraw.co/. HTML, CSS, JavaScript with React.
</p>
<!-- <div class="mb-5 mt-5">
<a
href="https://stellar-blancmange-8882b8.netlify.app/"
target="_blank"
rel="noopener noreferrer"
class="primary-link btn"
>Launch Dictionary App</a
>
</div> -->
</div>
</div>
</div>
</div>
<div class="navigation-links d-flex justify-content-center mt-3 mb-3">
<a href="about.html" class="primary-link btn mr-5">About me</a>
<a href="contact.html#contact" title="Contact" class="secondary-link btn"
>Contact me</a
>
</div>
<a href="#"><p class="text-center link">To the top</p></a>
<footer>
<div class="container">
<div class="footer-container">
<div class="d-flex justify-content-center">
<div class="ml-5 mt-3">
<a href="index.html">
<img src="img/a_cat.jpg" alt="Logo, black cat" class="logo"
/></a>
<span class="logoTextSpan ml-3 mr-5"
>Michelle Wegler 2022, open source</span
>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="d-flex mt-3 mb-3">
<a
href="https://www.linkedin.com/in/michellewegler/"
title="Linkedin Profile"
target="_blank"
rel="noopener noreferrer"
><i class="fa-brands fa-linkedin" aria-hidden="true"></i
><span class="sr-only">Linkedin</span></a
>
</div>
<div class="d-flex mr-5 mt-3 mb-3">
<a
href="https://github.com/smirrebinx/Responsive-Portfolio.git"
title="Github Profile"
target="_blank"
rel="noopener noreferrer"
><i class="fab fa-github" aria-hidden="true"></i
><span class="sr-only">Github</span></a
>
</div>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>