-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbase.html
227 lines (203 loc) · 14.6 KB
/
base.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
<!DOCTYPE html>
<html>
<head>
<title>Taraneh BigBow</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="static/styles.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="container-fluid">
<div id="header"></div>
<div id="full-screen">
<div id="toolbar">
<div class="circle red-circle">x</div>
<div class="circle yellow-circle">-</div>
<div class="circle green-circle"><></div>
<div class="nav-links">
<a class="links" id="intro-reroute-btn" href="#intro">Intro Screen</a>
<a class="links" id="about-me-reroute-btn" href="#about-me">About Me</a>
<a class="links" id="projects-reroute-btn" href="#projects">My Projects</a>
<a class="links" id="contact-reroute-btn" href="#contact">Contact Me</a>
</div>
</div>
<div id="body">
<!-- <div id="triangle-bottomright"></div> -->
<div id="intro" class="sections">
<div class="css-typing">
<p>taraneh: ~ $ Hello I am Taraneh BigBow</p>
<p>taraneh: ~ $ I live in San Francisco</p>
<p>taraneh: ~ $ I am a software engineer
<!-- <p>taraneh: ~ $ Click About Me, My Projects or Contact -->
<span id="cursor-1"> | </span></p>
<div class="terminal">
<p id="about-me-terminal" >taraneh: cd home/about-me</p>
<p id="project-terminal" >taraneh: cd home/projects</p>
<p id="contact-terminal" >taraneh: cd home/contact</p>
<span id="cursor-2"> | </span>
</div>
</div>
</div>
<div id="about-me" class="sections">
<div class="row">
<div class="col-xs-3" id="profile-pic">
<img src="static/img/profile-pic.jpg"/>
<h3>Hi, I am Taraneh <br>(but you can call me Tara)</h3>
</div>
<div class="col-xs-9" id="about-me-speech">
<div class="headers">
<h1>Hello There!</h1>
</div>
<ul>
<li>I am so excited you're here! </li><br><br>
<li>I am from Oklahoma and am very proud to be half Native American from the Kiowa Tribe. There aren't a lot of Natives in tech and one of my biggest goals is to get more exposure to the natives of all tribes so a career in tech can become possible!</li>
<br><br>
<li>I was awarded a full scholarship from Facebook and I have graduated from Hackbright in September 2016.</li>
<br><br>
<li>I am very passionate about the backend and am focused learning as much as I can. However, the frontend is pretty amazing. I had so much fun creating this site!</li><br><br>
<li>Feel free to reach out. Virtual high fives</li>
</ul>
</div>
</div>
</div>
<div id="projects" class="sections">
<div class="headers">
<h1 id="project-font">My Projects</h1>
</div>
<div id="project-table" class="row">
<div id="warn-me-sooner" class="col-xs-6">
<div class="project-title">
<h3>Warn me Sooner</h3>
</div>
<div class="project-photo">
<img src="static/img/warn-me-sooner.png"/>
<p>Warn Me Sooner is my first project built as a Hackbright Student. It is a social networking site for weather updates in Oklahoma.</p>
<p>Severe storms are very common in Oklahoma. The best way to get the most current update is by texting with friends on their current location and status, and gauging from there what to expect. Many times, updates from your Facebook page are more accurate than listening to the news. <br><br>Warn Me, Sooner uses Python in the backend, a Postgres database, flask for the framework, and javascript on the frontend<br> It uses Zipasaur API to seed the database, Wunderground API for the alerts. Darksky API for the weekly forcast and Google Maps for the location marker.</p>
<a href="https://github.com/tarzioo/weather_app"><p>Github Repo</p></a>
</div>
</div>
<div id="factcrunch" class="col-xs-6">
<div class="project-title">
<h3>Factcrunch</h3>
</div>
<div class="project-photo">
<img src="static/img/factcrunch.png"/>
<p>Factcrunch was built by a team of 4 during the 2016 SF TechCrunch hackathon.</p>
<p>This was my first hackathon. I am very happy that I was able to join a team that had great communication and encouragement. I really enjoyed the opportunity to work as a team</p>
<p>We used IBM's Watson to convert speech to text to process statements being made in real time. Using Amazon Alexa, we created a trigger for users to initiate a search on the most recent thing they heard. Alexa then communicates with an API service we built with nodeJS and express, that queries trusted and vetted news articles from Politifact with a custom google searrch to determine a ruling for the statement. Alexa's voice then instantly responds with a ruling and summary of the statement.
<a href="http://devpost.com/software/factcrunch"><p>More info on Devpost</p></a>
</div>
</div>
</div>
</div>
<div id="contact" class="sections">
<div class="headers">
<h1>Say Hi Or Keep in Contact</h1>
</div>
<div id="logos" class="logos">
<a href="https://github.com/tarzioo"><img src="static/img/github.png"/></a>
<a href="https://www.linkedin.com/in/bigbow"><img src="static/img/linkedin.png"/></a>
<a href="https://www.instagram.com/tarzioo/"><img src="static/img/instagram.png"/></a>
<a href="https://twitter.com/tarzioo"><img src="static/img/twitter_final.png"/></a>
<a href="https://codepen.io/tarzioo/"><img src="static/img/codepen.png"/></a>
</div>
<div id="email"><h3>Taraneh.BigBow@gmail.com</h3></div>
</div>
</div>
</div>
<div id="keyboard">
<div class="empty-row">
<div id="ventilation"></div>
</div>
<div id="keyboard-grid">
<div class="keys row-one small-text"><p>esc</p></div>
<div class="keys row-one small-text"><p>☀</p></div>
<div class="keys row-one small-text"><p>☼</p></div>
<div class="keys row-one small-text"><p>▫▫▫</p></div>
<div class="keys row-one small-text"><p>☷</p></div>
<div class="keys row-one small-text"><p>☼</p></div>
<div class="keys row-one small-text"><p>☼</p></div>
<div class="keys row-one small-text"><p>◂◂</p></div>
<div class="keys row-one small-text"><p>▸</p></div>
<div class="keys row-one small-text"><p>▸▸</p></div>
<div class="keys row-one small-text"><p>🔇</p></div>
<div class="keys row-one small-text"><p>🔊</p></div>
<div class="keys row-one small-text"><p>🔈</p></div>
<div class="keys row-one small-text"><p>⊗</p></div>
<div class="keys row-two"><p>~ `</p></div>
<div class="keys row-two"><p>1 !</p></div>
<div class="keys row-two"><p>2 @</p></div>
<div class="keys row-two"><p>3 #</p></div>
<div class="keys row-two"><p>4 $</p></div>
<div class="keys row-two"><p>5 %</p></div>
<div class="keys row-two"><p>6 ^</p></div>
<div class="keys row-two"><p>7 &</p></div>
<div class="keys row-two"><p>8 *</p></div>
<div class="keys row-two"><p>9 (</p></div>
<div class="keys row-two"><p>0 )</p></div>
<div class="keys row-two"><p>- _</p></div>
<div class="keys row-two"><p>+ =</p></div>
<div class="keys row-two small-key"><p>delete</p></div>
<div class="keys row-three medium-key"><p>tab</p></div>
<div class="keys row-three"><p>Q</p></div>
<div class="keys row-three"><p>W</p></div>
<div class="keys row-three"><p>E</p></div>
<div class="keys row-three"><p>R</p></div>
<div class="keys row-three"><p>T</p></div>
<div class="keys row-three"><p>Y</p></div>
<div class="keys row-three"><p>U</p></div>
<div class="keys row-three"><p>I</p></div>
<div class="keys row-three"><p>O</p></div>
<div class="keys row-three"><p>P</p></div>
<div class="keys row-three"><p>{ [</p></div>
<div class="keys row-three"><p>} ]</p></div>
<div class="keys row-three"><p>\ |</p></div>
<div class="keys row-four large-key keyboard-link"><p><a id="project-btn" href="#projects">Projects</a></p></div>
<div class="keys row-four"><p>A</p></div>
<div class="keys row-four"><p>S</p></div>
<div class="keys row-four"><p>D</p></div>
<div class="keys row-four"><p>F</p></div>
<div class="keys row-four"><p>G</p></div>
<div class="keys row-four"><p>H</p></div>
<div class="keys row-four"><p>J</p></div>
<div class="keys row-four"><p>K</p></div>
<div class="keys row-four"><p>L</p></div>
<div class="keys row-four"><p>; :</p></div>
<div class="keys row-four"><p>" '</p></div>
<div class="keys row-four large-key"><p>return</p></div>
<div class="keys row-five extra-large-key"><p>shift</p></div>
<div class="keys row-five"><p>Z</p></div>
<div class="keys row-five"><p>X</p></div>
<div class="keys row-five"><p>C</p></div>
<div class="keys row-five"><p>V</p></div>
<div class="keys row-five"><p>B</p></div>
<div class="keys row-five"><p>N</p></div>
<div class="keys row-five"><p>M</p></div>
<div class="keys row-five"><p>< ,</p></div>
<div class="keys row-five"><p>> .</p></div>
<div class="keys row-five"><p>? /</p></div>
<div class="keys row-five extra-large-key keyboard-link"><p><a id="contact-btn" href="#contact">Contact Me</a></p></div>
<div class="keys row-six"><p>fn</p></div>
<div class="keys row-six"><p>control</p></div>
<div class="keys row-six"><p>option</p></div>
<div class="keys row-six command-key"><p>⌘</p></div>
<div class="keys row-six space-bar keyboard-link"><p><a id="about-me-btn" href="#about-me">About Me</a></p></div>
<div class="keys row-six command-key"><p>⌘</p></div>
<div class="keys row-six"><p>option</p></div>
<div class="keys row-six left-right-arrow small-text"><p>◄</p></div>
<div class="keys row-six up-down-arrow "><p>▲▼</p></div>
<div class="keys row-six left-right-arrow small-text"><p>►</p></div>
<div class="touchpad"></div>
</div>
</div>
<div id="keyboard-bottom">
<div id="keyboard-tab"></div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="static/computer.js"></script>
</body>
</html>