-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
330 lines (322 loc) · 19.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/style.css" />
<title>Asa Kahn - Web Developer</title>
</head>
<body>
<nav class="FloatNavbar">
<div class="NavbarOuter">
<div class="NavbarContainer">
<div class="NavbarLogoNameContainer">
<a onclick="closeNavbarOnClick()" href="#HeroBannerContainer" id="nav-logo-name">
<img src="./img/logo-orange.webp" alt="Asa Kahn Logo"/>
<h2>Asa Kahn</h2>
</a>
</div>
<button class="NavbarExpandButton" onclick="navbarExpand()">
<span class="NavbarHamburgerLine"></span>
<span class="NavbarHamburgerLine"></span>
<span class="NavbarHamburgerLine"></span>
</button>
<ul class="NavbarLinksContainer">
<li class="NavbarLink"><a href="#HeroBannerContainer">Home</a></li>
<li class="NavbarLink"><a href="#AboutSection">About</a></li>
<li class="NavbarLink"><a href="#WorkSection">Experience</a></li>
<li class="NavbarLink"><a href="#ProjectsSection">Projects</a></li>
<li class="NavbarLink"><a href="#ContactSection">Contact</a></li>
</ul>
</div>
</div>
<div class="NavbarExtendedContainer" id="NavbarExtendedContainer">
<li onclick="closeNavbarOnClick()" class="NavbarLink"><a href="#HeroBannerContainer">Home</a></li>
<li onclick="closeNavbarOnClick()" class="NavbarLink"><a href="#AboutSection">About</a></li>
<li onclick="closeNavbarOnClick()" class="NavbarLink"><a href="#WorkSection">Experience</a></li>
<li onclick="closeNavbarOnClick()" class="NavbarLink"><a href="#ProjectsSection">Projects</a></li>
<li onclick="closeNavbarOnClick()" class="NavbarLink"><a href="#ContactSection">Contact</a></li>
</div>
</nav>
<section id="HeroBannerContainer" class="HeroBannerContainer">
<div class="HeroText">
<h2>Hi there!</h2>
<h1 id="who-am-i"></h1>
<h4>based in the NYC Metro Area.</h4>
<div id="arrow-btn">
<i class="bi bi-arrow-down"></i>
</div>
</div>
</section>
<section id="AboutSection" class="AboutSection">
<div class="AboutContainer">
<h1>About Me</h1>
<p>
I am a highly skilled and motivated web developer passionate about creating responsive and user-friendly websites.<br/><br/>
I graduated from Rutgers University with a Bachelor's degree in Computer Science and minored in Mathematics. This combination of education and experience has given me a strong foundation in programming and problem-solving, which I apply to every project I work on.<br/><br/>
I am particularly interested in responsive web development and am well-versed in the latest technologies and best practices for creating mobile-responsive websites. I am also experienced in developing Android applications using <b>Java</b>.<br/><br/>
My technical skills include an in-depth knowledge of <b>HTML, CSS, JavaScript, React.js, Node.js, and PHP</b> for web development, which I use to create dynamic and engaging user interfaces optimized for performance and accessibility. I am also familiar with various other tools and technologies, including <b>Git and MySQL</b>, which allow me to create robust and scalable applications.<br/><br/>
With my technical skills and problem-solving abilities, I am confident I can help bring your next project to life.
</p>
</div>
</section>
<section id="WorkSection" class="WorkSection">
<div class="WorkContainer">
<h1>Work Experience</h1>
<div class="WorkShowcaseContainer">
<div class="WorkShowcaseInfo">
<h1>ConceptCru</h1>
<a target="_blank" href="https://conceptcru.com/">ConceptCru.com</a>
<br><br>
<p>I founded a Website and Digital Design Studio from scratch, offering my web design and technical skills to build websites for my clients.</p>
</div>
<a target="_blank" href="https://conceptcru.com/">
<img src="./img/conceptCru.png" alt="ConceptCru Website Design Showcase" />
</a>
</div>
<br><br><br>
<div class="WorkShowcaseContainer">
<div class="WorkShowcaseInfo">
<h1>Raise Your Pinky Event Staffing</h1>
<a target="_blank" href="https://raiseyourpinkyevents.com/">RaiseYourPinkyEvents.com</a>
<br><br>
<p>Designed a website for an event catering business in the Northern New Jersey region.</p>
</div>
<a target="_blank" href="https://raiseyourpinkyevents.com/">
<img src="./img/ryp.png" alt="Raise Your Pinky Event Staffing Website Design Showcase" />
</a>
</div>
</div>
</section>
<section id="ProjectsSection" class="ProjectsSection">
<div class="ProjectsContainer">
<h1 class="ProjectSectionTitle">Projects</h1>
<div class="ProjectShowcase">
<h3>LIFX Lights Control • Chrome/Firefox Extension</h2>
<a href="/lifx" target="_blank">LIFX Lights Control Website</a>
<h4>HTML, CSS, JavaScript</h3>
<ul>
<li>Created a Chrome/Firefox extension to easily control LIFX's lamps straight from the browser!</li>
<li>Fetches data from LIFX's API to get the current state of each lamp, like brightness, color, power is on/off.</li>
<li>Sends data via LIFX's API to control each individual lamp or all of them at once.</li>
<li>Coded in Vanilla JS, HTML, and CSS</li>
</ul>
<div class="ProjectImagesContainer">
<div onClick="toggleModal(35)" class="image-box-vert">
<img class="image-img-vert" src="./lifx/img/app.png" loading="lazy"/>
<div class="image-title-vert">Main App</div>
</div>
<div onClick="toggleModal(36)" class="image-box-vert">
<img class="image-img-vert" src="./lifx/img/example.png" loading="lazy"/>
<div class="image-title-vert">App as Extension</div>
</div>
<div onClick="toggleModal(37)" class="image-box-vert">
<img class="image-img-vert" src="./lifx/img/fullApp1.png" loading="lazy"/>
<div class="image-title-vert">Multiple Lights 1</div>
</div>
<div onClick="toggleModal(38)" class="image-box-vert">
<img class="image-img-vert" src="./lifx/img/fullApp2.png" loading="lazy"/>
<div class="image-title-vert">Multiple Lights 2</div>
</div>
</div>
</div>
<br><br><br>
<!--
<div class="ProjectShowcase">
<h3>React.js "ShareMe" Social Media Website</h2>
<a href="https://glistening-sherbet-1f8c07.netlify.app/" target="_blank">ShareMe Project Link</a>
<h4>HTML, CSS, JavaScript, React.js, Node.js</h3>
<ul>
<li>Developed a responsive mock social media website that’s similar to Pinterest using React.js and the backend being Node.js.</li>
<li>Implemented a “Login with Google” button to login to the website.</li>
<li>Website shows a Masonry Grid Layout of ‘pins’ (images/components), with options to search for different results by keyword or category.</li>
<li>Users can create and post new ‘pins.’ Users are also able to comment on another user’s pin.</li>
<li>The website is hosted on Netlify and holds persistent data by communicating to <a href="https://sanity.io" target="_blank">Sanity.io</a>’s API, which is a backend storage service.</li>
</ul>
<div class="ProjectImagesContainer">
<div onClick="toggleModal(28)" class="image-box">
<img class="image-img" src="./img/reactShareMeProject/loginPage.png" loading="lazy"/>
<div class="image-title">Login Page</div>
</div>
<div onClick="toggleModal(29)" class="image-box">
<img class="image-img" src="./img/reactShareMeProject/frontPage.png" loading="lazy"/>
<div class="image-title">Front Page</div>
</div>
<div onClick="toggleModal(30)" class="image-box">
<img class="image-img" src="./img/reactShareMeProject/frontPageMobile.png" loading="lazy"/>
<div class="image-title">Front Page Mobile</div>
</div>
<div onClick="toggleModal(31)" class="image-box">
<img class="image-img img-stretch" src="./img/reactShareMeProject/searchResults.png" loading="lazy"/>
<div class="image-title">Search Results</div>
</div>
<div onClick="toggleModal(32)" class="image-box">
<img class="image-img" src="./img/reactShareMeProject/postPage.png" loading="lazy"/>
<div class="image-title">Pin Details Page</div>
</div>
<div onClick="toggleModal(33)" class="image-box">
<img class="image-img" src="./img/reactShareMeProject/profilePage.png" loading="lazy"/>
<div class="image-title">User Profile Page</div>
</div>
<div onClick="toggleModal(34)" class="image-box">
<img class="image-img" src="./img/reactShareMeProject/upload.png" loading="lazy"/>
<div class="image-title">Upload Pin Page</div>
</div>
</div>
</div>
<br><br><br>
-->
<div class="ProjectShowcase">
<h3>React.js Movie Project</h2>
<h4>HTML, CSS, JavaScript, React.js, Node.js, and MySQL</h3>
<ul>
<li>Developed a responsive movie website using the frontend framework React.js with the backend being Node.js.</li>
<li>Utilizes an API to fetch the movies from <a target="_blank" href="https://themoviedb.org/">TheMovieDB.org</a></li>
<li>Created infinite scroll effect which fetches for new list of movies to display. And created a search bar to search by movie title.</li>
<li>Implemented a registration and login systems which interact with the Node.js backend using MySQL</li>
<li>Logged in users, will have a “Recently Watched” section displayed like Netflix.</li>
<li>Uses HTML, CSS, MySQL, and Javascript</li>
</ul>
<div class="ProjectImagesContainer">
<div onClick="toggleModal(0)" class="image-box">
<img class="image-img" src="./img/react_movie_project/frontPage_noLogin.png" loading="lazy"/>
<div class="image-title">Front Page</div>
</div>
<div onClick="toggleModal(1)" class="image-box">
<img class="image-img" src="./img/react_movie_project/movieInfoPage.png" loading="lazy"/>
<div class="image-title">Video Page</div>
</div>
<div onClick="toggleModal(2)" class="image-box">
<img class="image-img" src="./img/react_movie_project/loginRegister.png" loading="lazy"/>
<div class="image-title">Login/Register Form</div>
</div>
<div onClick="toggleModal(3)" class="image-box">
<img class="image-img img-stretch" src="./img/react_movie_project/editAccount.png" loading="lazy"/>
<div class="image-title">Edit Account</div>
</div>
<div onClick="toggleModal(4)" class="image-box">
<img class="image-img" src="./img/react_movie_project/frontPage_Login.png" loading="lazy"/>
<div class="image-title">Logged In, Recently Watched Section</div>
</div>
</div>
</div>
<br><br><br>
<div class="ProjectShowcase">
<h3>Clock4Fold - Android App</h2>
<a target="_blank" href="https://play.google.com/store/apps/details?id=com.asakahn.clock4fold">PlayStore Link</a>
<h4>Java/Kotlin</h3>
<ul>
<li>Originally coded in Java, then changed codebase to Kotlin.</li>
<li>Designed to be used for the folding phones by Samsung.</li>
<li>The app displays the current time and adapts to any screen state with many options to change the appearance.</li>
<li>Uploaded the app to the Google Playstore.</li>
</ul>
<div class="ProjectImagesContainer">
<div onClick="toggleModal(10)" class="image-box">
<img class="image-img" src="./img/Clock4Fold/1.jpg" loading="lazy"/>
<div class="image-title">Outer Display Horizontal</div>
</div>
<div onClick="toggleModal(11)" class="image-box">
<img class="image-img" src="./img/Clock4Fold/2.jpg" loading="lazy"/>
<div class="image-title">Inner Display Half-Folded</div>
</div>
<div onClick="toggleModal(12)" class="image-box">
<img class="image-img" src="./img/Clock4Fold/3.jpg" loading="lazy"/>
<div class="image-title">Inner Display Laptop Mode</div>
</div>
<div onClick="toggleModal(13)" class="image-box">
<img class="image-img" src="./img/Clock4Fold/4.jpg" loading="lazy"/>
<div class="image-title">Inner Display Full Display</div>
</div>
<div onClick="toggleModal(14)" class="image-box">
<img class="image-img" src="./img/Clock4Fold/5.jpg" loading="lazy"/>
<div class="image-title">Settings Page</div>
</div>
</div>
</div>
<br><br><br>
<div class="ProjectShowcase">
<h3>E-Commerce Website Project</h2>
<h4>HTML, CSS, PHP, and MySQL</h3>
<ul>
<li>Implemented an E-Commerce website with an integrated shopping cart system from scratch as part of my class’s final project.</li>
<li>Site Admin can dynamically add new products, and have it displayed on the front-page.</li>
<li>Users can add products to cart, edit the cart by updating the quantity or removing products and finally, checkout.</li>
<li>Utilized HTML, CSS, and PHP. Developed with MySQL as the database service.</li>
</ul>
<div class="ProjectImagesContainer">
<div onClick="toggleModal(5)" class="image-box">
<img class="image-img" src="./img/productPageProject/products1.png" loading="lazy"/>
<div class="image-title">Hoodies Page</div>
</div>
<div onClick="toggleModal(6)" class="image-box">
<img class="image-img" src="./img/productPageProject/products2.png" loading="lazy"/>
<div class="image-title">Sweatshirts Page</div>
</div>
<div onClick="toggleModal(7)" class="image-box">
<img class="image-img" src="./img/productPageProject/itemInCart.png"loading="lazy"/>
<div class="image-title">Items in Cart</div>
</div>
<div onClick="toggleModal(8)" class="image-box">
<img class="image-img img-stretch" src="./img/productPageProject/processed.png"loading="lazy"/>
<div class="image-title">Checkout page</div>
</div>
<div onClick="toggleModal(9)" class="image-box">
<img class="image-img img-stretch" src="./img/productPageProject/emptyCart.png" loading="lazy"/>
<div class="image-title">Empty Cart</div>
</div>
</div>
</div>
</div>
</section>
<section id="ContactSection" class="ContactSection">
<div class="ContactContainer">
<h1 class="ContactSectionTitle">Contact Me</h1>
<div class="ContactCards">
<div class="ContactCard">
<div class="ContactCardTitle">
<i class="bi-linkedin"></i>
LinkedIn
</div>
<div class="ContactCardLink">
<a target="_blank" href="https://www.linkedin.com/in/asa-kahn/">Asa Kahn</a>
</div>
</div>
<div class="ContactCard">
<div class="ContactCardTitle">
<i class="bi-github"></i>
Github
</div>
<div class="ContactCardLink">
<a target="_blank" href="https://github.com/asakahn">@asakahn</a>
</div>
</div>
<div class="ContactCard">
<div class="ContactCardTitle">
<i class="bi-envelope"></i>
Email
</div>
<div class="ContactCardLink">
<a target="_blank" href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
</div>
</section>
<div onClick="toggleModal(-1)" id="image-modal">
<div id="image-modal-holder">
<div id="image-hold">
<div class="center-image">
<img id="image-hold-img" src="./img/react_movie_project/frontPage_noLogin.png" loading="lazy"/>
</div>
<h2 id="image-hold-title">Front Page</h2>
<p id="image-hold-desc">Little small description...</p>
</div>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>