-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
317 lines (314 loc) · 21.7 KB
/
index.html
File metadata and controls
317 lines (314 loc) · 21.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shreyash Singh | Full-Stack Developer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light" id="topnav">
<a class="navbar-brand" id="name-logo" href="#">
<img id="logo-img" src="./img/name-logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcollapse">
<div class="navbar-nav ml-auto">
<a data-aos='fade-down' class="nav-item nav-link active" href="#cover">Home</a>
<a data-aos='fade-down' class="nav-item nav-link" href="#about">About</a>
<a data-aos='fade-down' class="nav-item nav-link" href="#tech">Tech</a>
<a data-aos='fade-down' class="nav-item nav-link" href="#projects">Projects</a>
</div>
</div>
</nav>
<div id="cover">
<div class="overlay">
<h1 data-aos='fade-left' class="display-1">Hello, I'm Shreyash</h1>
<h1 data-aos='fade-left' class="display-3">Welcome to my Website</h1>
</div>
</div>
<div id="about" class="section">
<h1 data-aos='fade-right' class="section-heading">About Me</h1>
<div class="container d-flex flex-column align-items-center py-5">
<h1 data-aos='fade-up' class="display-3">Shreyash Kumar Singh</h1>
<h1 data-aos='fade-up' class="display-4">
I'm a
<span class="display-4" id="traits" traits='["Full-Stack Developer", "Competitive Programmer", "Sports Buff", "Musician"]'></span>
</h1>
<hr>
<div id="intro" class="pt-5">
<div class="row">
<div class="col-lg-5 mb-4 mb-md-0 col img-col">
<div data-aos='fade-right' class="img-fluid rounded-circle" alt="Profile Image" id="profile-img"></div>
</div>
<div data-aos='fade-left' class="col-lg-7 col">
<div class="lead">
<strong class="lead">Date of Birth : </strong>
1 January 2001
</div>
<div class="lead">
<strong class="lead">Phone : </strong>
+91 7459861775
</div>
<div class="lead">
<strong class="lead">City : </strong>
Varanasi, India
</div>
<div class="lead">
<strong class="lead">Email : </strong>
shreyashsingh17@gmail.com
</div>
<div class="lead">
<strong class="lead">Education : </strong>
Electrical & Electronics Engineering Undergraduate
</div>
<div class="lead">
<strong class="lead">Institution : </strong>
Indian Institute of Technology, Varanasi
</div>
</div>
</div>
<div data-aos='fade-right' id="about-me" class="py-5">
<h1 class="text-center">Who am I?</h1>
<hr class="subsection-hr">
<p class="lead">
I'm a self-taught programmer currently pursuing my B.Tech degree from Indian Institute of Technology, Varanasi in Electrical & Electronics Engineering. I have a great interest in the tech field and love to learn constatly about various new technologies & stuff. I love developing elegant looking websites with a clean and presentable design, a user friendly interface and a well structured code.
</p>
<p class="lead">
Apart from web development, I also have an interest in Competitive Programming. Other than coding, I love singing, playing the guitar, watching and playing football, and also writing
</p>
</div>
<div data-aos='fade-left' id="connect">
<h1 class="text-center">Connect with Me</h1>
<hr class="subsection-hr">
<div id="connect-links">
<div class="row">
<div class="text-center">
<a href="https://www.linkedin.com/in/shreyash-singh-33a68318b">
<img src="./img/linkedin.png" alt="Linkedin" class="connect-icon">
</a>
<a href="https://github.com/cyborg7459">
<img src="./img/github.png" alt="Github" class="connect-icon">
</a>
<a href="https://www.facebook.com/shreyash.kumarsingh.5">
<img src="./img/facebook.png" class="connect-icon" alt="Facebook">
</a>
<a href="https://www.instagram.com/sks_0101/">
<img src="./img/insta.png" class="connect-icon" alt="Instagram">
</a>
<a href="https://wa.me/917459861775">
<img src="./img/whatsapp.png" alt="Whatsapp" class="connect-icon">
</a>
<a href="mailto:shreyash.ksingh.cd.eee19@itbhu.ac.in">
<img src="./img/gmail.png" alt="Gmail" class="connect-icon">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tech" class="section">
<h1 class="section-heading">Tech Details</h1>
<div class="container">
<div class="row py-5">
<div data-aos="fade-up" class="col-lg-6 mb-4 mb-md-0">
<h1 class="text-center">What I Know</h1>
<hr class="subsection-hr">
<h3>Front-End Development</h3>
<p class="lead mb-0">Skilled in building elegant looking sites from scratch, using Bootstrap as CSS Framework. Proficient in Vanilla Javascript and a beginner in ReactJS. I'm a top CSS Developer at Sourcer.io and have developed the UI/UX for the startup Bambinos.in</p>
<p class="lead">I build fully responsive sites, accessible and compatible for all screen sizes.</p>
<h3>Full-Stack Development</h3>
<p class="lead mb-0">I use the MERN Stack, and built sites following RESTful routing with a well structured and organised code</p>
<p class="lead">In the learning phase for PHP</p>
<p class="lead text-center pt-4">
<a href="#" class="lead mb-4" id="resume-btn">
<img src="./img/resume.png" class="mr-3 img-fluid btn-img btn-img-lg" alt="">
View my Resume
</a>
</p>
</div>
<div data-aos="fade-up" class="col-lg-6">
<h1 class="text-center mt-5 mt-lg-0">My Tech Stack</h1>
<hr class="subsection-hr">
<p class="lead text-center">A list of the various languages, frameworks and utilities that I use</p>
<div class="text-center">
<img class="tech-logo" src="https://cdn.svgporn.com/logos/c-plusplus.svg" alt="C++">
<img class="tech-logo" src="https://cdn.svgporn.com/logos/python.svg" alt="Python">
<img class="tech-logo" src="https://cdn.svgporn.com/logos/html-5.svg" alt="HTML-5">
<img class="tech-logo" src="https://cdn.svgporn.com/logos/css-3.svg" alt="CSS-3">
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/bootstrap.svg" alt="Bootstrap">
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/javascript.svg" alt="Javascript">
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/react.svg" alt="react">
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/nodejs.svg" alt="nodeJS">
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/firebase.svg" alt=firebase>
<img class="tech-logo" src="https://cdn.svgporn.com/logos/jquery.svg" alt="jquery">
<img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/redux.svg" alt="redux">
<img class="tech-logo" src="https://cdn.svgporn.com/logos/mongodb.svg" alt="mongodb">
</div>
</div>
</div>
</div>
</div>
<div id="projects" class="section">
<h1 data-aos='fade-right' class="section-heading">My Projects</h1>
<div class="container py-5">
<h1 data-aos='zoom-in' class="display-4 text-center">A look at some of the things I've built so far...</h1>
<div id="project-cards-region" class="py-5">
<div class="row">
<div class="col-md-6 col-xl-3">
<div data-aos='zoom-in-up' class="card">
<div class="card-header p-0">
<img src="./img/fashionvilla1.png" class="card-img-top">
</div>
<div class="card-body">
<h2 class="card-title text-center">Fashionvilla</h2>
<hr class="subsection-hr mb-3">
<p class="lead used-skills">ReactJS | Redux | Firebase | SASS | StripeJS</p>
<p class="lead">Large-scale E-commerce app built using React as Javascript Framework and Redux for state management, along with Firebase Authentication and Dummy Stripe Payemnts</p>
<p class="lead text-danger"> <strong class="lead">NOTE : </strong> This site is not mobile-friendly as of yet</p>
<div class="py-3 d-flex justify-content-around">
<a href="https://github.com/cyborg7459/Fashionvilla" class="card-btn"><img src="./img/code.png" class="img-fluid btn-img" title="Go to Github Repository"> View Code</a>
<a href="https://fashionvilla.herokuapp.com/" class="card-btn"><img src="./img/website.png" class="img-fluid btn-img" title="View Site" alt="Code"> Site</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div data-aos='zoom-in-up' class="card">
<div class="card-header p-0">
<img src="./img/yelpcamp.png" class="card-img-top">
</div>
<div class="card-body">
<h2 class="card-title text-center">YelpCamp</h2>
<hr class="subsection-hr mb-3">
<p class="lead used-skills">NodeJS | Express | MongoDB | Passport JS | EJS | RESTful routing</p>
<p class="lead">Created a full-stack campsite sharing application using NodeJS with Express as framework, and MongoDB as database. Has basic CRUD facility and user authentication using PassportJS</p>
<div class="py-3 d-flex justify-content-around">
<a href="https://github.com/cyborg7459/yelpcampdeployed" class="card-btn"><img src="./img/code.png" class="img-fluid btn-img" alt="Code"> View Code</a>
<a href="https://immense-harbor-74512.herokuapp.com/" class="card-btn"><img src="./img/website.png" class="img-fluid btn-img" alt="Code"> Site</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div data-aos='zoom-in-up' class="card">
<div class="card-header p-0">
<img src="./img/mealfinder2.png" class="card-img-top">
</div>
<div class="card-body">
<h2 class="card-title text-center">MealFinder</h2>
<hr class="subsection-hr mb-3">
<p class="lead used-skills">Fetch API | Asynchronous JS | Bootstrap</p>
<p class="lead">Search for meals using their key ingredients and get their entire recipe</p>
<div class="py-3 d-flex justify-content-around">
<a href="https://github.com/cyborg7459/MealFinder" class="card-btn"><img src="./img/code.png" class="img-fluid btn-img" alt="Code"> View Code</a>
<a href="https://cyborg7459.github.io/MealFinder/" class="card-btn"><img src="./img/website.png" class="img-fluid btn-img" alt="Code"> Site</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div data-aos='zoom-in-up' class="card">
<div class="card-header p-0">
<img src="./img/speakup.png" class="card-img-top">
</div>
<div class="card-body">
<h2 class="card-title text-center">SpeakUp</h2>
<hr class="subsection-hr mb-3">
<p class="lead used-skills">Web Speech API | Speech Synthesis | Vanilla javascript</p>
<p class="lead">A text-to-speech web application built for speech impaired people to communicate with others</p>
<div class="py-3 d-flex justify-content-around">
<a href="https://github.com/cyborg7459/speakUp" class="card-btn"><img src="./img/code.png" class="img-fluid btn-img" alt="Code"> View Code</a>
<a href="https://cyborg7459.github.io/speakUp/" class="card-btn"><img src="./img/website.png" class="img-fluid btn-img" alt="Code"> Site</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div data-aos='zoom-in-up' class="card">
<div class="card-header p-0">
<img src="./img/calenderjs.png" class="card-img-top">
</div>
<div class="card-body">
<h2 class="card-title text-center">CalenderJS</h2>
<hr class="subsection-hr mb-3">
<p class="lead used-skills">Vanilla Javascript | HTML5 | CSS</p>
<p class="lead">Date Picking Calender Library built from scratch using Vanilla Javascript</p>
<div class="py-3 d-flex justify-content-around">
<a href="https://github.com/cyborg7459/CalenderJS" class="card-btn"><img src="./img/code.png" class="img-fluid btn-img" alt="Code"> View Code</a>
<a href="https://cyborg7459.github.io/CalenderJS/" class="card-btn"><img src="./img/website.png" class="img-fluid btn-img" alt="Code"> Site</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div data-aos='zoom-in-up' class="card">
<div class="card-header p-0">
<img src="./img/githubfinder2.png" class="card-img-top">
</div>
<div class="card-body">
<h2 class="card-title text-center">Github Finder</h2>
<hr class="subsection-hr mb-3">
<p class="lead used-skills">Fetch API | Github API</p>
<p class="lead">Using the Github API to fetch the data and repositories of Github users</p>
<div class="py-3 d-flex justify-content-around">
<a href="https://github.com/cyborg7459/Githubfinder" class="card-btn"><img src="./img/code.png" class="img-fluid btn-img" alt="Code"> View Code</a>
<a href="https://cyborg7459.github.io/Githubfinder/" class="card-btn"><img src="./img/website.png" class="img-fluid btn-img" alt="Code"> Site</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div data-aos='zoom-in-up' class="card">
<div class="card-header p-0">
<img src="./img/patatap.png" class="card-img-top">
</div>
<div class="card-body">
<h2 class="card-title text-center">Circles.io</h2>
<hr class="subsection-hr mb-3">
<p class="lead used-skills">PaperJS | HTML Canvas</p>
<p class="lead">A just-for-fun interactive, Patatap like site built using PaperJS</p>
<div class="py-3 d-flex justify-content-around">
<a href="https://github.com/cyborg7459/Patatap" class="card-btn"><img src="./img/code.png" class="img-fluid btn-img" alt="Code"> View Code</a>
<a href="https://cyborg7459.github.io/Patatap/" class="card-btn"><img src="./img/website.png" class="img-fluid btn-img" alt="Code"> Site</a>
</div>
</div>
</div>
</div>
</div>
</div>
<h1 class="display-4 text-center">...and many more small-scale projects</h1>
</div>
</div>
<div id="footer" class="section">
<h3 class="text-center">Designed and Developed by Shreyash Kumar Singh</h3>
<hr>
<p class="mb-0 lead text-center">Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik" class="lead text-white">Freepik</a> from <a href="https://www.flaticon.com/" class="lead text-white" title="Flaticon">www.flaticon.com</a></p>
<p class="lead text-center">Name Logo designed at <a href="https://www.freelogodesign.org" class="text-white lead">https://www.freelogodesign.org</a> </p>
<hr>
<p class="text-center mb-0"><a href="https://github.com/cyborg7459/MyWebsite" class="lead text-white">View source code for this site</a></p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/main.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration : 1000,
mirror : true,
easing : 'ease-in-out'
});
</script>
</body>
</html>