-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
223 lines (212 loc) · 12 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nina Hahne | Portfolio</title>
<meta name="title" property="og:title" content="Nina Hahne | Portfolio">
<meta name="description" property="og:description" content="Portfolio website">
<meta name="image" property="og:image" content="https://ninahahne.rocks/images/Portfolio_preview_linkedin.png">
<meta name="url" property="og:url" content="https://ninahahne.rocks">
<meta name="author" content="Nina Hahne">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="./favicon.ico">
<!-- <link href="https://fonts.googleapis.com/css?family=Changa:400,600" rel="stylesheet"> -->
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- FontAwesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<aside class="left-sidebar">
<div class="sidebar">
<div class="profile-info">
<img class="profile-pic" src="./images/nina_profile.jpg" alt="Portrait of Nina Hahne" />
<h1 class="name">NINA HAHNE</h1>
<h2 class="desc">FULL STACK <br>WEB DEVELOPER</h2>
<span><i class="fas fa-map-marker-alt mr-2" data-fa-transform="grow-3"></i>Berlin, Germany</span>
</div>
<div class="contact">
<a href="mailto:ninamariehahne@gmail.com"><i class="far fa-envelope" data-fa-transform="grow-2"></i>nina.marie.hahne@gmail.com</a>
<a href="https://www.linkedin.com/in/ninahahne/" target="_blank"><i class="fab fa-linkedin-in"></i>linkedin.com/in/ninahahne</a>
<a href="https://github.com/NinaHahne" target="_blank"><i class="fab fa-github-alt"></i>github.com/ninahahne</a>
<a href="https://ninahahne.rocks"><i class="fas fa-globe"></i>ninahahne.rocks</a>
</div>
</div>
</aside>
<main>
<!-- my projects -->
<div class="portfolio">
<h1>PORTFOLIO</h1>
</div>
<div class="project">
<div class="first-box">
<div class="img-box">
<img src="./projects/AllThatStuff_start-menu.png" alt="social network preview">
</div>
<h3>AllThatStuff</h3>
<h4>Multiplayer word association game</h4>
</div>
<div class="second-box">
<div class="project-info">
<div class="features">
<h5>Features</h5>
<ul>
<li>Game lobby:<br>
Players can either host or join a game</li>
<li>Players take turns:<br>
One player "builds" a word while the other players guess what it is</li>
<li>Select and drag&drop elements to make the other players guess a word</li>
<li>Live update of moving elements for all players</li>
</ul>
</div>
<div class="technologies">
<h5>Technologies</h5>
<p>HTML5, CSS3, JavaScript, jQuery, Socket.IO</p>
</div>
</div>
<a class="github" href="https://github.com/NinaHahne/all-that-stuff_v3" target="_blank"><i class="fab fa-github-alt"></i>View on GitHub</a>
<a class="btn live" href="http://www.allthatstuff.fun/" target="_blank">
<img src="./projects/flower.ico" alt="pink flower">
<span>play now</span>
<img src="./projects/banana.png" alt="banana">
</a>
</div>
</div>
<div class="project social-network">
<div class="first-box">
<div class="img-box">
<img src="./projects/thePond_welcome.png" alt="">
</div>
<h3>thePond</h3>
<h4>Social network</h4>
</div>
<div class="second-box">
<div class="project-info">
<div class="features">
<h5>Features</h5>
<ul>
<li>Connect with users</li>
<li>Chat with other users online</li>
<li>Modify profile information</li>
</ul>
</div>
<div class="technologies">
<h5>Technologies</h5>
<p>HTML5, CSS3, JavaScript, React, Node.js/Express,
PostgreSQL, AWS, Socket.IO</p>
</div>
</div>
<a class="github" href="https://github.com/NinaHahne/the-pond" target="_blank"><i class="fab fa-github-alt"></i>View on GitHub</a>
</div>
</div>
<div class="project imageboard">
<div class="first-box">
<div class="img-box">
<img src="./projects/Imageboard_overview.png" alt="imageboard preview">
</div>
<h3>Imageboard - Gallery of Sloths</h3>
<h4>Instagram-like gallery</h4>
</div>
<div class="second-box">
<div class="project-info">
<div class="features">
<h5>Features</h5>
<ul>
<li>Allows users to upload images along with a title and a
description</li>
<li>other users can leave comments on each
image</li>
</ul>
</div>
<div class="technologies">
<h5>Technologies</h5>
<p>HTML5, CSS3, JavaScript, Vue.js, Node.js/Express,
PostgreSQL, AWS</p>
</div>
</div>
<a class="github" href="https://github.com/NinaHahne/imageboard-sloths" target="_blank"><i class="fab fa-github-alt"></i>View on GitHub</a>
</div>
</div>
<div class="project petition">
<div class="first-box">
<div class="img-box">
<img src="./projects/petition_register.png" alt="petition preview">
</div>
<h3>Petition - Stop Headwind</h3>
<h4>Authenticated petition website</h4>
</div>
<div class="second-box">
<div class="project-info">
<div class="features">
<h5>Features</h5>
<ul>
<li>sign the petition by drawing your signature on a canvas</li>
<li>see other signers (name, age, city)</li>
<li>edit profile info</li>
<li>delete your signature</li>
</ul>
</div>
<div class="technologies">
<h5>Technologies</h5>
<p>HTML5, CSS3, JavaScript, Handlebars, Node.js/Express,
PostgreSQL</p>
</div>
</div>
<a class="github" href="https://github.com/NinaHahne/petition-stop-headwind" target="_blank"><i class="fab fa-github-alt"></i>View on GitHub</a>
<a class="btn live" href="https://stopheadwind.herokuapp.com/" target="_blank">
<img src="./projects/ban-headwind.png" alt="stop headwind symbol">
<span>sign the petition</span>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/google/223/bicyclist_1f6b4.png" alt="bicyclist">
</a>
<!-- <p>
for a world without headwind on bike lanes
</p> -->
</div>
</div>
<div class="project connect-four">
<div class="first-box">
<div class="img-box">
<img src="./projects/connect-four.png" alt="connect four preview">
</div>
<h3>Connect Four - Apples vs. Oranges</h3>
<h4>Connect four game for 2 players</h4>
</div>
<div class="second-box">
<div class="project-info">
<div class="technologies">
<h5>Technologies</h5>
<p>HTML5, CSS3, JavaScript</p>
</div>
</div>
<a class="github" href="https://github.com/NinaHahne/connect-four" target="_blank"><i class="fab fa-github-alt"></i>View on GitHub</a>
<a class="btn live" href="https://ninahahne.github.io/connect-four/" target="_blank">🍏 play now 🍊</a>
</div>
</div>
<div class="project spotify-search">
<div class="first-box">
<div class="img-box">
<img src="./projects/spotify-search_tom-waits.png" alt="spotify search preview">
</div>
<h3>Spotify Search</h3>
<h4>Spotify API search interface</h4>
</div>
<div class="second-box">
<div class="project-info">
<div class="technologies">
<h5>Technologies</h5>
<p>HTML5, CSS3, JavaScript</p>
</div>
</div>
<a class="github" href="https://github.com/NinaHahne/spotify-search" target="_blank"><i class="fab fa-github-alt"></i>View on GitHub</a>
<a class="btn live" href="https://ninahahne.github.io/spotify-search/" target="_blank">search 🎶 now</a>
</div>
</div>
</main>
<!-- <aside class="right-sidebar">Sidebar</aside> -->
<!-- <footer>Footer</footer> -->
</div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>