-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
294 lines (281 loc) · 17.8 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
<!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">
<meta name="description" content="Sabrina Becker's web developer portfolio.">
<title>Sabrina Becker</title>
<!--CSS and Normalize links-->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--Links to Google Fonts and Font Awesome-->
<link href="https://fonts.googleapis.com/css?family=ABeeZee%7CDelius%7CCaveat:400,700%7CBitter:400,700&display=swap" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<!--Links to Favicon-->
<link rel="icon" href="favicon.ico">
<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">
</head>
<body>
<header>
<nav>
<ul>
<li>
<a tabindex="0" class="nav-links selected js-nav-home" aria-label="Link to open home page"><i class="fas fa-home" aria-hidden="true"></i></a>
</li>
<li>
<a tabindex="0" class="nav-links selected js-nav-about">About</a>
</li>
<li>
<a tabindex="0" class="nav-links selected js-nav-portfolio">Portfolio</a>
</li>
<li>
<a tabindex="0" class="nav-links selected js-nav-contact">Contact</a>
</li>
</ul>
</nav>
</header>
<main>
<section role="banner">
<div class="home js-home">
<div class="intro">
<h1>I'm Sabrina.</h1>
<h2>A WEB DEVELOPER.</h2>
</div>
<div class="glow-light1"></div>
<div class="glow-light2"></div>
<div class="glow-light3"></div>
<div class="glow-light4"></div>
<div class="glow-light5"></div>
<div class="glow-light6"></div>
<div class="glow-light7"></div>
<div class="glow-light8"></div>
<div class="glow-light9"></div>
<div class="glow-light10"></div>
<div class="glow-light11"></div>
<div class="glow-light12"></div>
<div class="glow-light13"></div>
</div>
</section>
<section>
<div class="about-info js-about">
<h1>Hello there!</h1>
<p>
I completed a full stack web development program at Bloc.
I really enjoyed my learning experience as well as helping and sharing ideas with my peers.
I love being able to use my creativity in designing websites.
I like problem solving and being able to exercise my skills with the many challenges I have encountered so far on my journey.
I also like joining teams to create new projects together and to pursue improving each other.
</p>
<p>
My curiosity in coding began when I volunteered in a study as a requirement for my psychology lecture in university about three years ago.
The study involved us learning how to code in JavaScript for beginners.
After the study, I wanted to learn more because I love learning about how things work in our world.
Then after university, I started to pick up coding again as I became interested in how hacking works and started to learn a little bit about Python.
</p>
<p>
When I'm not coding, I help volunteer teaching tennis or play tennis with friends.
I’ve been playing tennis since I was very young and I can’t live without it.
My other interests include: hiking, cooking, drawing, yoga, travel, and turtles.
</p>
</div>
</section>
<section>
<div class="portfolio-info js-portfolio">
<h1 class="portfolio-title">MY PROJECTS</h1>
<div class="project-markdown">
<img class="project-image-markdown"
src="images/markdownapp.png"
alt="Screenshot of Markdown Editor project">
<h2>Markdown Editor</h2>
<div class="technology">
<h3 class="tech-heading">Technologies:</h3>
<span class="tech">React.js</span>
<span class="tech">JavaScript</span>
<span class="tech">React-Ace</span>
<span class="tech">React-Showdown</span>
<span class="tech">HTML5</span>
<span class="tech">CSS3</span>
</div>
<p class="project-description">
I participated in my first hackathon with Mintbean!
We had about 3-4 hours to make our own Markdown editors.
Any edits made in the editor can be viewed live.
The editor's background and font colors can be changed with different themes.
I learned about new libraries and had fun creating with React for this project.
I got to connect with new people and see everyone's projects at the end.
</p>
<!--Buttons Here-->
<div class="buttons">
<a href="https://markdown-editor.sbecka81111.now.sh/" target="_blank"><span>Live App</span></a>
<a href="https://github.com/sbecka/markdown-editor" target="_blank"><span>GitHub</span></a>
</div>
</div>
<div class="project-tallyit">
<div class="portfolio-image-tallyit">
<img class="project-image-tallyit"
src="images/mobliestatspg.png"
alt="Screenshot of Tally it app's game statistics page">
</div>
<h2>Tallyit</h2>
<div class="technology">
<h3 class="tech-heading">Technologies:</h3>
<span class="tech">React.js</span>
<span class="tech">Jest</span>
<span class="tech">JavaScript</span>
<span class="tech">Node.js</span>
<span class="tech">Express.js</span>
<span class="tech">Knex.js </span>
<span class="tech">PostgreSQL</span>
<span class="tech">Postgrator</span>
<span class="tech">Moment.js</span>
<span class="tech">React Scroll</span>
<span class="tech">React Minimal Pie Chart</span>
<span class="tech">Supertest</span>
<span class="tech">Mocha</span>
<span class="tech">Chai</span>
<span class="tech">HTML5</span>
<span class="tech">CSS3</span>
</div>
<p class="project-description">
I was inspired by a friend and their family who have game nights every week.
I thought it would be nice to create an app for them to see their game scores and progress for each game they played.
I created this app for families and groups of friends who want to keep track of their game scores and results.
A user creates a group name to sign up and login with to save their scores and results.
A score sheet is made for new games and can be edited.
Player names can be added and their scores can be edited and updated.
Each game will have their own statistics page of the player scores and can be deleted.
</p>
<!--Buttons Here-->
<div class="buttons">
<a href="https://tallyit.now.sh/" target="_blank"><span>Live App</span></a>
<a href="https://github.com/sbecka/tallyit-app" target="_blank"><span>GitHub</span></a>
</div>
</div>
<div class="project-journal">
<div class="portfolio-image-journal">
<img class="project-mobile-journal" src="images/my-journals-pg.jpg" alt="Screenshot of Traveling Journal's user home page">
</div>
<h2>Traveling Journal</h2>
<div class="technology">
<h3 class="tech-heading">Technologies:</h3>
<span class="tech">React.js</span>
<span class="tech">Jest</span>
<span class="tech">JavaScript</span>
<span class="tech">Node.js</span>
<span class="tech">Express.js</span>
<span class="tech">Knex.js </span>
<span class="tech">PostgreSQL</span>
<span class="tech">Postgrator</span>
<span class="tech">Moment.js</span>
<span class="tech">Airbnb Datepicker</span>
<span class="tech">React Minimal Pie Chart</span>
<span class="tech">Supertest</span>
<span class="tech">Mocha</span>
<span class="tech">Chai</span>
<span class="tech">HTML5</span>
<span class="tech">CSS3</span>
</div>
<p class="project-description">
I love to travel, but I have trouble remembering all the things I did.
I wanted to have one place to keep all my thoughts and make my experiences more memorable instead of taking hundreds of pictures.
Therefore, I made this travel journal app for travelers and adventurers to write about any places they have been to and their current trips.
A user can sign up and keep track of all their journal posts in their home page.
Users can add, edit, or delete their journal posts.
They can click on journal posts to read a journal page's content.
The journal pages also have a comment section below the content for all users to make comments.
The discover page allows users to read and comment on all the journal posts from all users of the app.
</p>
<!--Buttons Here-->
<div class="buttons">
<a href="https://traveling-journal.now.sh/" target="_blank"><span>Live App</span></a>
<a href="https://github.com/sbecka/traveling-journal-app" target="_blank"><span>GitHub</span></a>
</div>
</div>
<div class="project project-hike">
<div class="portfolio-images-hike">
<img class="project-image-hike" src="images/hike-trails-mobile (1).png" alt="Screenshot of Hike by Sun's trail results">
<img class="project-image-hike" src="images/hike-to-do-list (1).png" alt="Screenshot of Hike by Sun's to do list section">
</div>
<h2>Hike by Sun</h2>
<div class="technology">
<h3 class="tech-heading">Technologies:</h3>
<span class="tech">JavaScript</span>
<span class="tech">jQuery</span>
<span class="tech">Hiking Project API</span>
<span class="tech">Location IQ API</span>
<span class="tech">HTML Geolocation API</span>
<span class="tech">HTML5</span>
<span class="tech">CSS3</span>
<span class="tech">Sass</span>
</div>
<p class="project-description">
After traveling to Sedona, AZ, my love of hiking and being one with nature grew.
There aren't many hiking places where I live currently or at least that's what I thought.
After discovering the Hiking Project API, I found several trails in my area that I didn't know had existed!
Also, I realized I could help hikers figure out how long the sun would be out because you don't want to be lost when it gets dark.
I created this app to use the Hiking Project API along with other APIs to get hiking trails and sunrise and sunset times for any location.
Hikers and anyone exploring the world can search for trails in different cities or places to add to their to do list section.
Users also choose a date to get sunrise and sunset times for that place.
The sun times and the daytime's length will appear on the side of to do list section which the user can use as reference to plan out that day.
</p>
<!--Buttons Here-->
<div class="buttons">
<a href="https://sbecka.github.io/hike-by-sun/" target="_blank"><span>Live App</span></a>
<a href="https://github.com/sbecka/hike-by-sun" target="_blank"><span>GitHub</span></a>
</div>
</div>
<div class="project quiz-project">
<div class="portfolio-images">
<img class="project-image" src="images/Final-Score-Halloween-Quiz-Small-Screen.png" alt="Screenshot of Halloween Quiz App Final Score Page">
</div>
<h2>Halloween Quiz App</h2>
<div class="technology">
<h3 class="tech-heading">Technologies:</h3>
<span class="tech">JavaScript</span>
<span class="tech">jQuery</span>
<span class="tech">HTML5</span>
<span class="tech">CSS3</span>
<span class="tech">Sass</span>
</div>
<p class="project-description">
Halloween is my favorite holiday.
I always dress up as a witch because of Sabrina the Teenage Witch.
Halloween was happening in a couple of weeks at the time of this project, and I knew I wanted to honor my favorite holiday.
I created a fun Halloween trivia quiz for my friends and family to take and test their knowledge.
Users will get a response to the answers they choose and get their final score at the end of the quiz.
Question number and user’s score is tracked at the top of the quiz.
The quiz can be restarted if the user wants to retake the quiz.
</p>
<!--Buttons Here-->
<div class="buttons">
<a href="https://sbecka.github.io/halloween-quiz-app/" target="_blank"><span>Live App</span></a>
<a href="https://github.com/sbecka/halloween-quiz-app" target="_blank"><span>GitHub</span></a>
</div>
</div>
</div>
</section>
<section>
<div class="contact-info js-contact">
<h1>Get In Touch</h1>
<p>Feel free to contact me by email or view my links below.</p>
<ul class="contact-links">
<li><span><i class="fas fa-envelope contact-icon" aria-hidden="true"></i> Email: </span><a href="mailto:sbecka8@gmail.com" aria-label="Link to open your email and send an email to Sabrina Becker's email address">sbecka8@gmail.com</a></li>
<li><span><i class="fab fa-linkedin contact-icon" aria-hidden="true"></i> LinkedIn: </span><a href="https://www.linkedin.com/in/sabrina-dev-becker/" target="_blank" aria-label="Link to open Sabrina Becker's Linked In profile">sabrina-dev-becker</a></li>
<li><span><i class="fab fa-github contact-icon" aria-hidden="true"></i></a> GitHub: </span><a href="https://github.com/sbecka" target="_blank" aria-label="Link to open Sabrina Becker's GitHub profile">sbecka</a></li>
<li><span><i class="fab fa-instagram contact-icon" aria-hidden="true"></i></a> Blog: </span><a href="https://www.instagram.com/cookincoding/" target="_blank" aria-label="Link to open Sabrina Becker's Instagram blog about cooking and coding">cookincoding</a></li>
</ul>
</div>
</section>
</main>
<footer>
<p id="copyright"></p>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>