-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
268 lines (257 loc) · 18.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allison&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="photos/logo2.png" />
<title>Leeran Farin</title>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg fixed-top bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand mx-5" href="#">Leeran Joseph Farin</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navBar">
<ul class="navbar-nav justify-content-center align-items-center">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#experience">Experience</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" target="_blank" href="https://docs.google.com/document/d/1NZen5lGhwf2h_fG7_C0whTtdSeAobjtJHnOO8va0zQU/edit?usp=sharing"><i class="far fa-file-alt"></i> Résumè</a></li>
</ul>
</div>
</div>
</nav>
<main data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<section id="welcome">
<div class="m-0 center">
<h1 class="display-1 text-center m-2 m-sm-5">Welcome!</h1>
<img class="img-fluid rounded my-sm-3 my-0" src="./photos/picture.JPG" alt="profile pic"/>
<div class="d-flex flex-row justify-content-center social m-5">
<a class="mx-5" target="_blank" href="https://github.com/leeran7"><p ><i class="fab fa-github social-logo"></i></p></a>
<a class="mx-5" target="_blank" href="https://www.linkedin.com/in/lfarin/"><p><i class="fab fa-linkedin social-logo"></i></p></a>
<a class="mx-5" target="_blank" href="https://twitter.com/LeeranF"><p ><i class="fab fa-twitter social-logo"></i></p></a>
<a class="mx-5" target="_blank" href="https://www.instagram.com/leeran_farin/"><p ><i class="fab fa-instagram social-logo"></i></p></a>
<a class="mx-5" target="_blank" href="https://www.facebook.com/leeranf"><p ><i class="fab fa-facebook social-logo"></i></p></a>
</div>
<div class="d-flex flex-row justify-content-center">
<p class="text-center mx-2 text"><b>Computer Science Student</b></p>
<p class="text-center mx-5 text">|</p>
<p class="text-center mx-2 text"><b>Future Software Engineer</b></p>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="center col-lg-12">
<h1 class="display-1">A little about me</h1>
</div>
<div class="py-0 py-lg-3 mt-5 console">
<p>> Leeran.location</p>
<p><• <span class="result">"Staten Island, NY"</span></p>
<p>> Leeran.major</p>
<p><• <span class="result">"Computer Science"</span></p>
<p>> Leeran.graduationDate</p>
<p><• <span class="result">"December 2022"</span></p>
<p>> Leeran.experience</p>
<p><• <a class="link" target="_blank" href="https://docs.google.com/document/d/1NZen5lGhwf2h_fG7_C0whTtdSeAobjtJHnOO8va0zQU/edit?usp=sharing"><span class="result">"Resume.docx"</span></a> //click me</p>
<p>> Leeran.hobbies</p>
<p><• (7) [ <span class="result">"Reptiles"</span>, <span class="result">"Code"</span>, <span class="result">"Technology"</span>, <span class="result">"NBA"</span>, <span class="result">"UFC"</span>, <span class="result">"Pickles"</span>, <span class="result">"Real Estate"</span> ]</p>
<p>> <span class="animated">|</span></p>
</div>
<div class="about-me justify-content-center d-lg-flex mt-3 p-2">
<div class="col-lg-6 col-md-12 p-3">
<p>A young sales professional that has a passion for animals, self-improvement, and technology. My first interaction with a computer was setting one up at the age of 6 and creating my first email on a dial-up connection. Ever since then technology has always been something I have loved and followed. Following the cell phone industry and how it evolved over the last 10 years has proven to me that technology is not just the present, but it is the future.</p>
</div>
<div class="col-lg-6 col-md-12 p-3">
<p>At 18, I was in my second year of college and decided to get my Real Estate License. Within a year of working rentals in the heart of Midtown NYC, I cracked into the top 10 salesmen for the month, out of close to 200 agents in the company at the time being among the youngest. From there, I chose to go with my true passion, learning more in-depth about the things I love, Computers. </p>
</div>
</div>
</div>
</div>
</section>
<section id="experience">
<div class="row bg-light p-4">
<div class="d-flex col-lg-12 justify-content-center">
<h1 class="display-1 dark-text">Experience</h1>
</div>
</div>
<!-- <div class="container"> -->
<div class="row d-flex">
<div class="col-lg-6 col-sm-12 job-item bg-light dark-text order-1 container center">
<h2>Verizon Wireless</h2>
<div class="card-body">
<p class="dark-text">Engage customers in conversation and determine their wireless needs providing solutions from an extensive line of Verizon products and services.</p>
<p class="dark-text">Emphasize service or product features and benefits, discussing credit terms, quoting prices, and preparing sales order reports and forms.</p>
<p class="dark-text"> Utilize proven sales methods to prospect, qualify and close sales while building customer relationships both in person and over the telephone via regular follow-up calls.</p>
</div>
<p class="dark-text">Sales Associate, Staten Island, NY</p>
</div>
<div class="col-lg-6 col-sm-12 job-item bg-dark light-text order-2 container center ">
<h2>Empire Lube</h2>
<div class="card-body">
<p>Managed mechanic shop to run efficiently and productively by ensuring all client relationships were handled in a professional, timely and friendly manner</p>
<p>Received vehicles for customer repairs and updated customers on the status of their repairs.</p>
<p>Coordinated with business accounts and posted all charges to appropriate accounts</p>
</div>
<p>Assistant Manager, Staten Island, NY</p>
</div>
<div class="col-lg-6 col-sm-12 job-item bg-light dark-text order-lg-4 order-3 container center ">
<h2>Caliber Associates</h2>
<div class="card-body">
<p class="dark-text">Managed multi-family residential properties and demonstrated the features and benefits of available homes to prospective clients.</p>
<p class="dark-text">Promoted sales and rentals of properties through advertisements, open houses, cold calling and participation in multiple listing services.</p>
<p class="dark-text">Prepared daily listings, market research, procuring and nurturing relationships with clients, management and landlords</p>
</div>
<p class="dark-text">Licensed Real Estate Salesperson, Brooklyn, NY</p>
</div>
<div class="col-lg-6 col-sm-12 job-item bg-dark light-text order-lg-3 order-4 container center ">
<h2>Freehold Estates</h2>
<div class="card-body">
<p class="light-text">Prepared daily listings, market research, procuring and nurturing relationships with clients, management and landlords.</p>
<p class="light-text">Built and maintained client relationships through personal client attention and tenacious follow-up.</p>
<p class="light-text">Qualified renters to ensure they match landlord and building income and financial requirements.</p>
</div>
<p class="light-text">Licensed Real Estate Salesperson, New York, NY</p>
</div>
</div>
<div class="row bg-light p-4">
<div class="d-flex col-lg-12 justify-content-center">
<h1 class="display-1 dark-text">Projects</h1>
</div>
</div>
<div class="row d-flex">
<div class="col-lg-8 col-sm-12 job-item bg-dark order-md-3 light-text container center">
<h2>Post Covid Ally (CTP Hackathon)</h2>
<div class="card-body">
<p ></p>
<p >Created an automated Ally in a team of 3 to help connect students together along with mental health resources post pandemic.</p>
<p >Designed the UI using React along with Material-UI to create a responsive webpage on all platforms.</p>
<p >Utilized Firebase authentication to create a Sign-in-with-google button for easy account setup.</p>
</div>
<p>Aug 23<sup>rd</sup>-Aug 27<sup>th</sup></p>
</div>
<div class="col-lg-6 col-sm-12 job-item bg-light order-lg-1 order-md-2 dark-text container center">
<h2>The Modern JavasScript Bootcamp</h2>
<div class="card-body">
<p class="dark-text" >Built an Ecommerce website using ES6 JavaScript, Node & Express with Signup/Signin functionality.</p>
<p class="dark-text">Created a database paired with Mongoose to store users for Authentication, with different repositories for items and carts associated with a particular customer, updated dynamically using Async/Await.</p>
<p class="dark-text">Utilized Salting & Hashing with password for Authentication security.</p>
</div>
<p class="dark-text" >Jan 2020 - Mar 2020</p>
</div>
<div class="col-lg-6 col-sm-12 job-item bg-dark light-text order-md-1 container center">
<h2>Yelpcamp</h2>
<div class="card-body">
<p>Structured website using HTML5 and CSS. Paired with Bootstrap Framework utilizing flexbox, ES5 version of JavaScript and jQuery to create a responsive webpage along with a landing page.</p>
<p>Implemented Restful APIs by C.R.U.D standard, using Express.js, tested using Postman software.</p>
<p>Utilized Mongoose to create Schemas, interacting with a MongoDB database to store data of different campgrounds.</p>
</div>
<p>Nov 2019 - Jan 2020</p>
</div>
</div>
<div class="row bg-dark p-4 associations">
<div class="d-flex col-lg-12 justify-content-center">
<h1 class="display-1 pb-3 light-text">Associations</h1>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-3 col-s-12 job-item job-item-small bg-dark light-text flex-grow-1 center">
<h2>CUNY 2x</h2>
<p >College of Staten Island</p>
<p >August 2021 - Present</p>
</div>
<div class="col-md-4 col-sm-12 job-item flex-grow-1 bg-light dark-text flex-grow-0 center">
<h2>CUNY Tech Prep</h2>
<p class="dark-text">Software Development Fellow</p>
<p class="dark-text">Learn in-demand technologies like React, Node + Express, and PostgreSQL as well as industry best practices for design, implementation, and deployment such as MVC, version control with Git/GitHub, agile & Scrum with Trello and Slack, test driven development, and CI/CD.</p>
<p class="dark-text">July 2021 - Present</p>
</div>
<div class="col-md-3 col-sm-12 job-item job-item-small order-2 bg-dark light-text flex-grow-1 center">
<h2>Hack-A-Project</h2>
<p >College of Staten Island</p>
<p >June 2021 - Present</p>
</div>
<div class="col-lg-12 job-item-small bg-light dark-text order-4 container center">
<h2>Skills</h2>
<p class="dark-text"><b>Technologies: </b>React, React-Native, Mongoose, MongoDB, SQL, Data Structures, C.R.U.D, Git/GitHub, OS X</p>
<p class="dark-text"><b>Languages: </b>JavaScript, C++, HTML, CSS, NodeJS, ExpressJS, Java</p>
</div>
</div>
</section>
<section id="contact">
<div class="form-group container">
<div class="row">
<div class="col-lg-12 center">
<h1 class="display-1 mb-5">Contact Me</h1>
<div class="d-flex flex-row justify-content-center social my-3">
<a class="mx-5" target="_blank" href="https://github.com/leeran7"><p ><i class="fab fa-github social-logo"></i></p></a>
<a class="mx-5" target="_blank" href="https://www.linkedin.com/in/lfarin/"><p ><i class="fab fa-linkedin social-logo"></i></p></a>
<a class="mx-5" target="_blank" href="https://twitter.com/LeeranF"><p ><i class="fab fa-twitter social-logo"></i></p></a>
<a class="mx-5" target="_blank" href="https://www.instagram.com/leeran_farin/"><p><i class="fab fa-instagram social-logo"></i></p></a>
<a class="mx-5" target="_blank" href="https://www.facebook.com/leeranf"><p ><i class="fab fa-facebook social-logo"></i></p></a>
</div>
<div class="pt-3">
<h3 class="display-3 pb-3">Use link or form below</h3>
<h3 class="display-3"><u>Personal:</u> <a class="link" href="mailto:[email protected]">[email protected]</a></h3>
<h3 class="display-3"><u>School:</u> <a class="link" href="mailto:[email protected]">[email protected]</a></h3>
<h3 class="display-3 pb-2"><u>Real Estate:</u> <a class="link" href="mailto:[email protected]">[email protected]</a></h3>
</div>
</div>
</div>
<div class="row px-4">
<div id="email_status" class="center"></div>
</div>
<form class="d-lg-flex flex-fill pt-4" id="form" method="POST" action="https://formspree.io/f/xeqvvnnr">
<div class="col-lg-6 col-md-12 m-2">
<input class="form-control" required id="name" name="name" placeholder="Name *"/>
<input class="form-control" required id="email" name="email" placeholder="Email *"/>
<input class="form-control" id="phone" name="phone" placeholder="Phone Number" />
</div>
<div class="col-lg-6 col-md-12 m-2">
<textarea class="form-control" id="message" name="message" required placeholder="Message *"></textarea>
<button class="btn btn-secondary form-control" type="submit">Submit</button>
</div>
</form>
</div>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
let form = document.getElementById("form");
async function handleSubmit(event) {
event.preventDefault();
let status = document.getElementById("email_status");
let data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).then(response => {
status.innerHTML = "Success!";
status.classList.add("success");
form.reset()
}).catch(error => {
status.innerHTML = "Oops! There was a problem submitting your form"
status.classList.add("error");
});
}
form.addEventListener("submit", handleSubmit)
</script>
</body>
</html>