-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
263 lines (238 loc) · 11 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
<html>
<head>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a5809f8554.js" crossorigin="anonymous"></script>
<title>Rishab Dugar</title>
<link rel="icon" type='image/x-icon' href="./img/logo2.png">
</head>
<body class="home">
<div id="circle" class="circle"></div>
<div id="bg-circles" class="bg-circle"></div>
<div class="projects-bg">
<div class="item">
<div class="content">
<div class="sub-heading">Track-it</div>
<div class="img">
<img src="./img/track-it.png" alt="Track-it">
</div>
<div class="text">A Task Tracking tool which allows you to assign tasks to others within your organisation.
Integreted with multi-factor authentication and authorisation.</div>
<div class="icons">
<a href="">
<i class="fa-brands fa-github" id="github-icon"></i>
</a>
<a href="">
<i class="fa-solid fa-earth-americas" id="web-icon"></i>
</a>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="sub-heading">laTours</div>
<div class="img">
<img src="./img/natours.png" alt="NaTours">
</div>
<div class="text">A Tours and Travel Website that helps you to find a suitable tour location along with trained tour guide and a tour group all in one place.</div>
<div class="icons">
<a href="">
<i class="fa-brands fa-github" id="github-icon"></i>
</a>
<a href="">
<i class="fa-solid fa-earth-americas" id="web-icon"></i>
</a>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="sub-heading">Random-words-API</div>
<div class="text">A simple API that gives out random words based on query from the client.</div>
<div class="icons">
<a href="">
<i class="fa-brands fa-github" id="github-icon"></i>
</a>
</div>
</div>
</div>
</div>
<!-- <div class="projects-bg">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div> -->
<div class="menu hoverables">
<div class="item hoverables active" id="home-btn">Home</div>
<div class="item hoverables" id="about-me-btn">About Me</div>
<div class="item hoverables" id="projects-btn">My Projects</div>
<a class="item hoverables" id="contact-btn" href="mailto: [email protected]">Contact Me</a>
</div>
<div class="home-page active" id="home-page">
<div class="section left">
<div class="text">
<div class="intro">Hey there, I am</div>
<div class="name">Rishab Dugar</div>
<div class="tags">Developer | Designer | Student</div>
<div class="bio">Merging Design with Technology since 2020</div>
</div>
</div>
<div class="section right">
<div class="content">
<img src="./img/profile_pic_blob.png" class="profile-img" alt="Rishab Dugar">
<img src="./img/about-me-blob.png" class="about-me-blob" id="about-me-blob" alt="">
</div>
</div>
<div class="social-panel hoverables">
<div class="item hoverables">
<i class="fa-brands fa-github-square"></i>
</div>
<div class="item hoverables">
<i class="fa-brands fa-linkedin"></i>
</div>
<div class="item hoverables">
<i class="fa-brands fa-instagram-square"></i>
</div>
<div class="item hoverables">
<i class="fa-brands fa-facebook-square"></i>
</div>
</div>
</div>
<div class="projects-page" id="projects-page">
<div class="title">My Projects</div>
<div class="content">
</div>
</div>
<div class="about-page" id="about-me-page">
<div class="section left">
</div>
<div class="section middle">
<div class="title">About Me</div>
<div class="part part1 text" id="about-me">
I am Rishab Dugar, a Kolkata-based Full-stack Web Developer and a student in Department of Mechanical Engineering from IIEST Shibpur. I excel in developing APIs all while using the complete REST architecture with increased focus on Authentication and Authorisation. I also love creating excellent and unique designs and animations for websites using Vanilla JS. </div>
<div class="part part2" id="value">
<div class="heading">Things I Value</div>
<div class="items">
<div class="item">
<div class="sub-heading">Efficient Design</div>
<div class="text">Design is all about communication with the User. Efficient design is the design which captures the essence of the brand all while keeping a direct line of communication with the User.</div>
</div>
<div class="item">
<div class="sub-heading">Transparency and Honesty</div>
<div class="text">Transparency is the key to Efficient design. It promotes the showcase of our entire design and development process to the client. Transparency also includes the clear potrayal of clients motives so the design can be distinctive.</div>
</div>
<div class="item">
<div class="sub-heading">Clean code</div>
<div class="text">Clean code means following all the best practices while coding, all while following the REST architecture. <br>
The strucuture should be such that any developer could pick up where i left without wasting time on understanding the structure. </div>
</div>
<div class="item">
<div class="sub-heading">Extensibility</div>
<div class="text">Any API should be such that it could be upgraded or downgraded without affecting other parts of the API. Every component should run independently. </div>
</div>
<div class="item">
<div class="sub-heading">Kindness, Honesty and Loyalty</div>
<div class="text">Writing all these together may not seem fair but these traits are so interconnected that writing about them seperately seemed too big of a challange to me. These are the most crucial part of any team or group. Without being Kind and Honest to eachother, we are just setting ourselves for failiure. </div>
</div>
</div>
</div>
<div class="part part3" id="development-process">
<div class="heading">
My development Process
</div>
<div class="items">
<div class="item">
<div class="sub-heading">Understanding the Idea</div>
<div class="text">Understanding the idea from POV of a normal user is very important to me. Clients wants/ needs will always be a priority.</div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="sub-heading">Outlining the Model suggested by the Client</div>
<div class="text">Outlining the model is a very important stage in development. Creating the model this early in development helps me make the most efficient pogram as possible.</div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="sub-heading">Developing the API based on the suggested Model</div>
<div class="text">Now the most important stage is the developement of the API. While following the REST architecture the API has to be made completely independent of the website so that the extensibility of the API could be maintained. <br>
The preliminary stage is then followed by a series of testing based on the outlines made by the client.
Only after passing all the tests that we move on to the next stage.</div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="sub-heading">Designing and prototyping the Website</div>
<div class="text">Keeping the target users in mind, I try to create the most efficient design possible. Accessibility, Resuability are always my main are of focus. After prototyping it, the design goes through a random user review test and only after getting the approval of the client does the design goes into production.</div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="sub-heading">Developing the Website</div>
<div class="text">I mostly use HTML/CSS but depending upon the circumstances I am also comfortable with pug/CSS. After the rough design is produced, it is tested thoroughly using the API and only after everything passes the quality checks, I move forward to the finer details of the design. </div>
</div>
<div class="item">
<div class="line"></div>
</div>
<div class="item">
<div class="sub-heading">Final Production</div>
<div class="text">Now that everything is ready to be produced, I deploy the Website and the API to the desired location.</div>
</div>
</div>
</div>
<div class="part part4" id="technologies">
<div class="heading">Technologies I Use</div>
<div class="items">
<div class="item sub-heading">Vanilla JS</div>
<div class="item sub-heading">HTML 5</div>
<div class="item sub-heading">CSS 3</div>
<div class="item sub-heading">Javascript</div>
<div class="item sub-heading">Bootstrap</div>
<div class="item sub-heading">Node Js</div>
<div class="item sub-heading">Express Js</div>
<div class="item sub-heading">Mongo DB</div>
<div class="item sub-heading">Mongoose </div>
<div class="item sub-heading">Figma</div>
<div class="item sub-heading">Pug</div>
<div class="item sub-heading">C/C++</div>
<div class="item sub-heading">Heroku</div>
<div class="item sub-heading">Firebase</div>
<div class="item sub-heading">Git</div>
<div class="item sub-heading">Github</div>
</div>
<div class="items">
<div class="item text">(PS: I am always open to learning new technology)</div>
</div>
</div>
<div class="part part5" id="contact-me">
<div class="heading">Get in touch</div>
<div class="items">
<div class="text item">I am currently open to work. You can always contact me for exiting Job oppurtunities or if you want to collaborate with me on some amazing project. </div>
<div class="item hoverables">
<a class="button secondary hoverables text" href="mailto: [email protected]">contact Me</a>
</div>
</div>
</div>
</div>
<div class="section right">
<div class="sub-menu">
<a class="item hoverables active" data-target="#about-me">About Me</a>
<a class="item hoverables" data-target="#value">Things I value</a>
<a class="item hoverables" data-target="#development-process">My developement Process</a>
<a class="item hoverables" data-target="#technologies">Technologies i use</a>
<a class="item hoverables" data-target="#contact-me">Contact Me</a>
</div>
</div>
</div>
</body>
<link rel="stylesheet" href="./style.css">
<script src="./style.js"></script>
</html>