-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
352 lines (341 loc) · 15.3 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
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bashir Harrell</title>
<meta name="description" content="Personal Page">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128591111-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-128591111-1');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="images/favicon2.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Merriweather" rel="stylesheet">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<!--Navbar here-->
<nav>
<div id="menu" align="middle" class="animated bounce">
<a href="#about" class= "btn btn-navi">About</a>
<a href="#portfolio" class="btn btn-navi">Web Projects</a>
<a href="#artwork" class="btn btn-navi"> Artwork</a>
<a href="#contact" class="btn btn-navi">Contact</a>
<!-- <button id = "chiButton" display="none">Chinese</button>
</div> -->
</nav>
<!--end navbar, begin main content-->
<div class="container-fluid">
<main role = "main content">
<!--First Section "About"-->
<section id="about">
<div>
<p class="inline" id="about_text">
<span class='english'> My name is Bashir. I am a self-taught Frontend Developer
from the United States. I am proficient in Javascript/HTML/CSS and I have experience with Vue.js, jQuery, Node.js and Express. When I am not tinkering around on the computer,
I enjoy traveling with my lovely wife and learning new languages. I am a native Enlglish speaker and also speak
Japanese and Chinese (Mandarin).
<br>
<br>
I love learning new things and am always looking for
a new challenge. I push myself to learn something new everyday, and always enjoy sharing my knowledge with others.
I am currently working on building my skills in TypeScript, and UI Design. Please <a href="#contact">contact me </a>if you think I would be a good fit for your project or team.
</span>
<span class= 'chinese noDisplay'>我叫 Bashir. 我是个从美国来的住在北京的自学前端开发人员。不在电脑前面的时候我喜欢跟我的妻子理由也喜欢学习新语言。我的母语是英语，我会说日语和中文。我想接下来学习西班牙语.
我喜欢学习新事物，并且总是在寻找挑战。每天学习新事物， 每天f分享我的知识。我目前正致力于在React.js中构建我的技能。
</span>
</p>
</div>
</div>
</section>
<!--End "About" section-->
<!--Start "Web Projects" section -->
<section id="portfolio" align="middle">
<h2>
<span class='english'>Current Projects</span>
<span class='chinese noDisplay'>网络APP</span>
</h2>
<div class="band">
<div class="item-10 animated delay-2s fadeInLeftBig">
<a
href="https://bookofbash.github.io/travel-page-vue/"
class="card " >
<div class="thumb" style="background-image:url(images/travel.png)">
</div>
<article>
<h1>Travel App</h1>
<p>
<span class='english'>Travel landing page made using Vue.js.</span>
<span class='chinese noDisplay'></span>
</p>
</article>
</a>
</div>
<div class="item-10 animated delay-2s fadeInLeftBig">
<a
href="https://bookofbash.github.io/coffee-page-vue/"
class="card " >
<div class="thumb" style="background-image:url(images/coffee.png)">
</div>
<article>
<h1>Coffee Roasters</h1>
<p>
<span class='english'>Coffee roaster landing page made using Vue.js.</span>
<span class='chinese noDisplay'></span>
</p>
</article>
</a>
</div>
</div>
<br />
<h2>
<span class='english'>Web Portfolio</span>
<span class='chinese noDisplay'>网络APP</span>
</h2>
<div class="band">
<!-- <div class="item-8">
<a
href="https://damp-ocean-41275.herokuapp.com/"
class="card">
<div class="thumb" style="background-image:url(images/floricamp.jpg)">
</div>
<article>
<h1>FloriCamp</h1>
<p>Full-Stack Responsive Web Application made using Node, Express, MongoDB, and Bulma.css. Final Project for Web Development Bootcamp on Udemy</p>
</article>
</a>
</div> -->
<!-- <div class="item-10 animated delay-2s fadeInLeftBig">
<a
href="https://bookofbash.github.io/random-quotes-react/"
class="card " >
<div class="thumb" style="background-image:url(images/random-quotes-react.jpg)">
</div>
<article>
<h1>Design Quotes</h1>
<p>
<span class='english'>Quote generator made using React, SASS, and QuotesOnDesign API.</span>
<span class='chinese noDisplay'>用React.js SASS, 和 QuotesOnDesign API 引文发生器</span>
</p>
</article>
</a>
</div> -->
<div class="item-10 animated delay-2s fadeInLeftBig">
<a
href="https://sheltered-springs-89715.herokuapp.com/"
class="card " >
<div class="thumb" style="background-image:url(images/chat-app-image.jpg)">
</div>
<article>
<h1>Chat App</h1>
<p>
<span class='english'>Chat app made with Node.JS and express.</span>
<span class='chinese noDisplay'></span>
</p>
</article>
</a>
</div>
<div class="item-9 animated delay-2s fadeInLeftBig">
<a
href="https://bookofbash.github.io/randomName/"
class="card " >
<div class="thumb" style="background-image:url(images/randomName.jpg)">
</div>
<article>
<h1>Random Name Generator</h1>
<p>
<span class='english'>Made using jQuery ResponsiveVoice.js and the BehindtheName API.</span>
<span class='chinese noDisplay'>用jQuery, ResponsiveVoice.js 和 BehindtheName API 的随机名字生成器 </span>
</p>
</article>
</a>
</div>
<div class="item item-1 animated delay-2s fadeInRightBig">
<a
href="https://bookofbash.github.io/todolist/"
class="card">
<div class="thumb" style="background-image:url(images/todolist-s.png
)">
</div>
<article>
<h1>To-Do List<span class='chinese noDisplay'>待办事项清单</span></h1>
<p>
<span class='english'>Made using jQuery and Font-Awesome Firebase Realtime Database & Authentication.</span>
<span class='chinese noDisplay'>用jQuery, FontAwesome, & Google Firebase 数据库和认证的待办事项列表</span>
</p>
</article>
</a>
</div>
<div class="item-2 animated delay-2s fadeInRightBig">
<a
href="https://bookofbash.github.io/soundcolor/"
class="card">
<div class="thumb" style="background-image:url(images/soundcolor.jpg)">
</div>
<article>
<h1>SoundColor</h1>
<p>
<span class='english'>Patatap clone made using paper.js and howler.js.</span>
<span class='chinese noDisplay'></span>
</p>
</article>
</a>
</div>
<div class="item-3 animated delay-2s fadeInLeftBig">
<a
href="https://bookofbash.github.io/weatherapp/"
class="card">
<div class="thumb" style="background-image:url(images/weatherapp.jpg)">
</div>
<article>
<h1>Local Weather</h1>
<p>
<span class='english'>Web app made using jQuery,JSON, Free Geo IP, DarkSky and Skycons.</span>
<span class='chinese noDisplay'>用jQuery，JSON， Free Geo IP, DarkSky 和 Skycons 的网络APP</span>
</p>
</article>
</a>
</div>
<div class="item-4 animated delay-2s fadeInLeftBig">
<a href="https://bookofbash.github.io/quotegenerator"
class="card">
<div class="thumb" style="background-image: url(images/quotegenerator.png)">
</div>
<article>
<h1>Random Quote Generator</h1>
<p>
<span class='english'>This random quote generator was made using the Twitter API. Users can click to get a random quote and tweet it.</span>
<span class='chinese noDisplay'>用Twitter API的 引文发生器</span>
</p>
</article>
</a>
</div>
<div class="item-5 animated delay-2s fadeInRightBig">
<a href="https://bookofbash.github.io/wikipediaviewer/"
class="card">
<div class="thumb" style="background-image: url(images/wikipediaviewer.jpg)">
</div>
<article>
<h1>Wikipedia Viewer</h1>
<p>
<span class='english'>A web app made using the Wikipedia API for viewing the top 10 results of a wikipedia search.</span>
<span class='chinese noDisplay'>用Wikipedia API的 APP</span>
</p>
</article>
</a>
</div>
<div class="item-6 animated delay-2s fadeInRightBig">
<a href="https://bookofbash.github.io/twitchviewer"
class="card">
<div class="thumb" style="background-image: url(images/twitchviewer.jpg)">
</div>
<article>
<h1>Twitch Viewer</h1>
<p>
<span class='english'>Web app made using the Twitch API to display which streams are currently online.</span>
<span class='noDisplay chinese'>用Twitch API的 APP. 用户能看 直播在线态度。</span>
</p>
</article>
</a>
</div>
<div class="item-7 animated fadeInLeftBig">
<a href="https://bookofbash.github.io/colorpicker"
class="card">
<div class="thumb" style="background-image: url(images/colorpicker.jpg)">
</div>
<article>
<h1>Color Picker</h1>
<p>
<span class='english'>RGB Color picker game made with vanilla JS.</span>
<span class='chinese noDisplay'>用JavaScript的RGB Color Picker 游戏. </span>
</p>
</article>
</a>
</div>
<div class="item-10 animated fadeInLeftBig">
<a href="https://codepen.io/bookofbash/full/pQqgJz"
class="card">
<div class="thumb" style="background-image: url(images/ride_on.jpg)">
</div>
<article>
<h1>Ride in Style</h1>
<p>
<span class='english'>Product landing page made using CSS and HTML5.</span>
<span class='chinese noDisplay'>用HTML5和CSS的登陆页面. </span>
</p>
</article>
</a>
</div>
<div class="item-11 animated fadeInRightBig">
<a href="https://bookofbash.github.io/markdown"
class="card">
<div class="thumb" style="background-image: url(images/markdown.jpg)">
</div>
<article>
<h1>Markdown Previewer</h1>
<p>
<span class='english'>Markdown Previewer Made using React Hooks & Unsplash.</span>
<span class='chinese noDisplay'>中文. </span>
</p>
</article>
</a>
</div>
</div>
</section>
<!-- Artwork goes here-->
<section id="artwork" align="center">
<h2>Artwork</h2>
<div class="artwork">
<div class="item-art"><img class="art" data-src="./images/Finch.png"/></div>
<div class="item-art"><img class="art" data-src="./images/TheLight.png"/></div>
<div class="item-art"><img class="art" data-src="./images/chasingdream.png"/></div>
<div class="item-art"><img class="art" data-src="./images/chicken.png"/></div>
<div class="item-art"><img class="art" data-src="./images/DyingRose.png"/></div>
<div class="item-art"><img class="art" data-src="./images/earhart.png"/></div>
<div class="item-art"><img class="art" data-src="./images/Lincoln.png"/></div>
<div class="item-art"><img class="art" data-src="./images/LonelyFlower.png"/></div>
<div class="item-art"><img class="art" data-src="./images/MicCheck.png"/></div>
<div class="item-art"><img class="art" data-src="./images/Prometheus.png"/></div>
</div>
</section>
<!--End Portfolio section-->
<!--Start Contact section-->
<section id="contact">
<div class="wrapper">
<div class="row">
<div class="col">
<ul class ="social" align="middle">
<a href="http://twitter.com/bashtellastory"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="http://linkedin.com/in/bashirharrell"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="http://github.com/bookofbash"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="https://www.freecodecamp.org/bookofbash"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a>
<a href="https://codepen.io/bookofbash/"><i class="fa fa-codepen" aria-hidden="true"></i></a>
<a href="https://www.behance.net/bookofbash"><i class="fa fa-behance" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</section>
<!--End Contact section-->
</main>
</div>
<hr/>
<footer>
Created by Bashir Harrell
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>
<script>
const lazyLoad = new LazyLoad({
elements_selector: ".art"
})
</script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>