-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
216 lines (202 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Stefanie Koenig</title>
<!-- Facebook social share open graph (og) properties to customize what you share-->
<meta property="og:url" content="http://stefaniekoenig.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Stefanie Koenig" />
<meta property="og:description" content="Check out the portfolio of Stefanie Koenig, a web developer based in Los Angeles" />
<meta property="og:image" content="http://stefaniekoenig.com/images/caliapp.png" />
<!-- LinkedIn SDK -->
<!-- <script type="text/javascript" src="//platform.linkedin.com/in.js">
//Create an api key in LinkedIn for the site and update the current test one and store it as an environmental variable
api_key: 75fsw3ae849102
authorize: true
onLoad: onLinkedInLoad
</script> -->
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Allura|Alex+Brush|Forum|Nixie+One|Lustria|Italianno|Italiana|Stalemate|Vast+Shadow|Dynalight|Jacques+Francois+Shadow' rel='stylesheet' type='text/css'> <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid no-pad full-screen-container" id="index-banner">
<nav class="light-blue lighten-1 name-font" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo name-font">SK</a>
<ul class="right hide-on-med-and-down">
<li><a href="#projects">WORK</a></li>
<li><a href="images/StefanieKoenigResume.pdf" target="_blank">RESUME</a></li>
<li><a href="#contact-info">CONTACT</a></li>
</ul>
<ul id="nav-mobile" class="side-nav name-font">
<li><a href="#projects">WORK</a></li>
<li><a href="images/StefanieKoenigResume.pdf" target="_blank">RESUME</a></li>
<li><a href="#contact-info">CONTACT</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<br><br>
<h1 class="header center orange-text name-font">Stefanie Koenig</h1>
<div class="row center">
<h5 class="header col s12 light name-font">Web developer with a passion for art and languages</h5>
</div>
<div class="row center">
<a href="#projects" class="btn-floating btn-large waves-effect waves-light"><i class="fa fa-chevron-down"></i></a>
</div>
<br><br>
</div>
<div class="container-fluid slider-container full-screen-container">
<a id="projects"><h3 class="center dark-text">Recent Work</h3></a>
<div class="slider valign-wrapper">
<ul class="slides">
<li>
<!-- <div class="no-pad-bot project-border valign-wrapper"> -->
<div class="row center">
<h4 class="header center orange-text col s12 light name-font">Dots & Boxes Game</h4>
</div>
<div class="row">
<div class="col s6 m6 l6">
<img src="images/dotsboxes.png" />
</div>
<div class="col s6 m6 l6">
<p>
A two-player game in which players take turns connecting dots to complete boxes. A player can complete a box started by the other player.
When a player completes a box, he/she gets another turn. The player with the most completed boxes wins.
</p>
<p>
Built with HTML, CSS, JavaScript, and jQuery in a one-week sprint.
</p>
<a class="waves-effect waves-light btn" href="http://stefkoenig.github.io/" target="_blank">Project Site</a>
<a class="waves-effect waves-light btn" href="https://github.com/stefkoenig/stefkoenig.github.io" target="_blank">GitHub</a>
</div>
</div>
</li>
<li>
<!-- <div class="no-pad-bot project-border valign-wrapper"> -->
<div class="row center">
<h4 class="header center orange-text col s12 light name-font">Il Foro Romano (The Roman Forum)</h4>
</div>
<div class="row">
<div class="col s6 m6 l6">
<img src="images/ilforo.png" />
</div>
<div class="col s6 m6 l6">
<p>
A forum for Italophiles to share their love for the Italian language and culture, organize local meetups, find language partners, and more.
Users can view posted content without signing up, but must sign up and log in to post, comment on posts, and upvote or downvote posts.
</p>
<p>
Built with Ruby on Rails, PostgreSQL, HTML, CSS, and Bootstrap in a one-week sprint.
</p>
<a class="waves-effect waves-light btn" href="https://il-foro.herokuapp.com/" target="_blank">Project Site</a>
<a class="waves-effect waves-light btn" href="https://github.com/stefkoenig/il_foro" target="_blank">GitHub</a>
</div>
</div>
<!-- </div> -->
</li>
<li>
<!-- <div class="no-pad-bot project-border valign-wrapper"> -->
<div class="row center">
<h4 class="header center orange-text col s12 light name-font">Spark</h4>
</div>
<div class="row">
<div class="col s6 m6 l6">
<img src="images/spark.png" />
</div>
<div class="col s6 m6 l6">
<p>
Get introduced to new potential areas of interest through randomly generated TED Talks.
Sign up and log in to see local Meetup groups in your area where you can further explore the topic introduced in the TED Talk.
</p>
<p>
Built in a team of three in a one-week sprint using MongoDB, Express, Node.js, HTML, CSS, Bootstrap, the YouTube API, the Meetup API, and Ajax.
</p>
<a class="waves-effect waves-light btn" href="https://spark-wdi-app.herokuapp.com/" target="_blank">Project Site</a>
<a class="waves-effect waves-light btn" href="https://github.com/djmcquillan/WDIProject3" target="_blank">GitHub</a>
</div>
</div>
<!-- </div> -->
</li>
<li>
<!-- <div class="no-pad-bot project-border valign-wrapper"> -->
<div class="row center">
<h4 class="header center orange-text col s12 light name-font">CaliApp</h4>
</div>
<div class="row">
<div class="col s6 m6 l6">
<img src="images/caliapp.png" />
</div>
<div class="col s6 m6 l6">
<p>
A crowd-sourced travel planning tool for those looking to visit or explore California. Users can see user-recommended destinations on a map and can log in
to add destinations of their own and to save destinations to their profile.
</p>
<p>
Built in a team of two in a one-week sprint using MEAN stack (MongoDB, Express, Angular.js, Node.js), HTML, CSS, Bootstrap, and the Google Maps API.
</p>
<a class="waves-effect waves-light btn" href="https://caliapp.herokuapp.com/#/maps" target="_blank">Project Site</a>
<a class="waves-effect waves-light btn" href="https://github.com/stefkoenig/WDIProject4/tree/development" target="_blank">GitHub</a>
</div>
</div>
<!-- </div> -->
</li>
</ul>
</div>
</div>
<footer class="page-footer orange project-border">
<div class="container">
<div class="row">
<div class="col m3 s6 l3">
<img class="circle mug" src="images/IMG_8933.JPG" alt="Stefanie Koenig's picture" />
</div>
<div class="col m6 s6 l6">
<h5 class="white-text">Hi, I'm Stef!</h5>
<p class="grey-text text-lighten-4">
I'm a full-stack web developer with a passion for art and languages and a background in international higher education. I'm a recent transplant to LA from the East Coast (NJ > Boston). When I'm not coding, you can find me studying Italian, listening to podcasts, cooking, or hiking. Want to work together or talk about a shared interest?
</p>
</div>
<div class="col m3 l3 s6 offset-s6">
<a id="contact-info"><h5 class="white-text">Let's Connect!</h5>
<ul>
<li class="contact-buttons"><a class="white-text" href="mailto:stefanie.l.koenig@gmail.com" target="_blank"><i class="fa fa-envelope-o fa-2x"></i></a></li>
<li class="contact-buttons"><a class="white-text" href="http://www.linkedin.com/in/stefaniekoenig" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a></li>
<li class="contact-buttons"><a class="white-text" href="http://www.github.com/stefkoenig" target="_blank"><i class="fa fa-github fa-2x"></i></a></li>
</ul>
</a>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col m6 s6 l6">
Made by <a class="orange-text copyright-text">Stefanie Koenig ©2016</a>
</div>
<!-- <div class="col m1 s2 social-share fb-share">
<div class="fb-share-button" data-href="http://stefaniekoenig.com" data-layout="button"></div>
</div>
<div class="col m1 s2">
<div class="g-plus social-share" data-action="share" data-annotation="none"></div>
</div>
<div class="col m1 s2">
<script type="IN/Share" data-url="http://stefaniekoenig.com"></script>
</div> -->
</div>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src="js/app.js"></script>
<!-- Google+ -->
<!-- <script src="https://apis.google.com/js/platform.js" async defer></script> -->
</body>
</html>