-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
327 lines (291 loc) · 17.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>G.H.SHARMA</title>
<link rel="icon" type="image/png" href="./media/FAVI.png">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loader">
<h1><span id="closures1">G.</span><span class="faders">OVIND</span> H.<SPAN class="faders">ARSH</SPAN> <span id="closures2">SHARMA</span></h1>
<div id="counter"> </div>
</div>
<div id="cursor"></div>
<!-- <div id="transition"></div> -->
<div id="landscapeMessage">Please rotate your phone and relaod</div>
<div id="main">
<div id="background">
<video id="videoBG" autoplay muted loop>
<source src="./media/mbBG (1).mp4" type="video/mp4">
<!-- Add additional video sources here for different formats -->
</video>
<div id="page1">
<div id="page1-content">
<nav id="navbar">
<button id="logo">G.H.SHARMA</button>
<div id="nav-allbtns">
<div id="navigate">
<a href="./about/about.html"><button class="nav-btns" id="aboutbtn" >ABOUT</button></a>
<a href="https://drive.google.com/file/d/1pjjT_wQGfQbs4FMHce6Vwxp3kL-cqh_1/view"><button class="nav-btns">RESUME</button></a>
</div>
<a href="mailto:govindharsh42@gmail.com" id="a-free"><button id="freelance">AVAILABLE FOR FREELANCE</button></a>
</div>
<div class="hamburger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</nav>
<div id="atPage">01//05 - SCROLL ↓
</div>
<div id="heroHead">
<h1><span>MULTI-</span></h1>
<h1>DISCIPLINARY</h1>
<h1>DEVELOPER</h1>
</div>
<div id="heroPara"> <p id="p1">CREATIVE THINKING AND
PROBLEM SOLVING ARE WHERE MY MIND
WANDERS</span>
<br></p>
<p id="p2"> USING
MY KNOWLEDGE AND PASSION TO DEVELOP AS MY
MEDIUM.</p></div>
<div id="downbox">
<div id="down">
<div id="arrow"> ↓</div>
</div>
</div>
</div>
</div>
<div id="page2">
<div class="line" id="line1"></div>
<div id="page2-content">
<div id="pagetop">
<p>02/</p>
<p id="pageintro">ABOUT</p>
<p>/05</p>
</div>
<div id="page2-main">
<div id="intro">
<p id="intropara">
<span>Hello, My name's Govind.
<br>
</span>
<span>I'm a Final year CS student and I build
<br></span>
<span>scalable web
applications<br></span>
<span> with
engaging user experiences.</span></p>
</div>
<div id="dp">
<div id="img-container-dp">
<img id="dp-img" src="./media/dp2.jpg" alt>
</div>
<div class="marquee">
<span>GOVIND HARSH SHARMA - GOVIND HARSH
SHARMA - GOVIND HARSH SHARMA - GOVIND
HARSH SHARMA - GOVIND HARSH SHARMA -
GOVIND HARSH SHARMA - GOVIND HARSH
SHARMA - GOVIND HARSH SHARMA - GOVIND
HARSH SHARMA - GOVIND HARSH SHARMA - GOVIND HARSH
SHARMA - GOVIND HARSH SHARMA - GOVIND
HARSH SHARMA - GOVIND HARSH SHARMA</span>
</div>
</div>
<a href="./about/about.html" id="learnbox"><div>
<div id="learncircle">
<div id="learntext"> Learn
<span>More ↗</span></div>
</div>
</div></a>
</div>
</div>
</div>
<div id="page3">
<div class="line" id="line2"></div>
<div id="page3-content">
<div id="pagetop">
<p>03/</p>
<p>PROJECTS</p>
<p>/05</p>
</div>
<div id="page3-top">
<div id="projectbox">
<a href="https://github.com/ghsharma?tab=repositories">
<div id="projectcircle">
<div id="projecttext"> Know
<span>More ↗</span></div>
</div>
</a>
</div>
<div id="page3-head">
<h2><span>Here are some selected projects that showcase </span><br>
<span>my passion for creating memorable web experience</span><br>
<span>and products.</span></h2>
</div>
</div>
<div class="wrapper">
<div class="container">
<input type="radio" name="slide" id="c1" checked>
<label for="c1" class="card">
<div class="row">
<div class="icon">1</div>
<div class="description">
<div class="des_data">
<div class="tag"><h4>PARAPOP</h4> <a href="https://parapop.pages.dev/" class="tag-btn">live at ↗</a></div>
<p>AI-based article summarizing application developed using ReactJS</p>
</div>
</div>
</div>
</label>
<input type="radio" name="slide" id="c2" >
<label for="c2" class="card">
<div class="row">
<div class="icon">2</div>
<div class="description">
<div class="des_data">
<div class="tag"> <h4>CURRENCY FLOW</h4> <a href="https://github.com/ghsharma/CurrencyFlow" class="tag-btn">live at ↗</a></div>
<p>Real-time, dynamic currency conversion for today or tomorrow.</p>
</div>
</div>
</div>
</label>
<input type="radio" name="slide" id="c3" >
<label for="c3" class="card">
<div class="row">
<div class="icon">3</div>
<div class="description">
<div class="des_data">
<div class="tag"><h4>श्रमिकMANTRA</h4> <a href="https://skillserve.pages.dev/" class="tag-btn">live at ↗</a></div>
<p> ReactJS webapp that serves as a platform for booking household services.</p>
</div>
</div>
</div>
</label>
<input type="radio" name="slide" id="c4" >
<label for="c4" class="card">
<div class="row">
<div class="icon">4</div>
<div class="description">
<div class="des_data">
<div class="tag"><h4>REJOUICE-UI-CLONE</h4> <a href="https://ghsharma.github.io/Rejouice_clone/" class="tag-btn">live at ↗</a></div>
<p>responsive UI mirroring REJOUICE's design for web USING GSAP.</p>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
<div id="page5">
<div class="line" id="line4"></div>
<div id="pagetop">
<p>04/</p>
<p>CERTIFICATIONS</p>
<p>/05</p>
</div>
<div id="page5-content">
<h2 id="certi_head"> <span>C</span> <span>E</span> <span>R</span> <span>T</span> <span>I</span> <span>F</span> <span>I</span> <span>C</span> <span>A</span> <span>T</span> <span>E</span> <span>S</span></h2>
<div class="page5-container" data-image="./media/ML.jpg">
<h3>Supervised Machine Learning - STANDFORD</h3>
<h3>January 2023</h3>
</div>
<div class="page5-container" data-image="./media/webdev.jpg">
<h3>MERN Stack Web-developement - UDEMY</h3>
<h3>April 2023</h3>
</div>
<div class="page5-container" data-image="./media/cSecurity.jpg">
<h3>Introduction to CyberSecurity - CISCO</h3>
<h3>July 2023</h3>
</div>
<div class="page5-container" data-image="./media/cloud.jpg">
<h3>Google Cloud and Generative AI - GOOGLE</h3>
<h3>November 2023</h3>
</div>
<div class="page5-container" data-image="./media/accenture.jpg">
<h3>Go for Gold contest - ACCENTURE</h3>
<h3>May 2024</h3>
</div>
<div class="page5-container" data-image="./media/gdsc.jpg">
<h3>Core team Member - GOOGLE DSC</h3>
<h3>August 2024</h3>
</div>
<div class="page5-container" data-image="./media/gssoc.jpg">
<h3>Mentor (Open Source) - GSSOC</h3>
<h3>August 2024</h3>
</div>
</div>
</div>
<div id="page6">
<div class="line" id="line5"></div>
<div id="pagetop">
<p>05/</p>
<p>LET'S CONNECT</p>
<p>/05</p>
</div>
<div id="page6-content">
<div id="connectbox">
<h2>GOT A PROJECT IN MIND?</h2>
<h1>LET'S CONNECT !</h1>
<div class="eyes">
<div class="eye">
<div class="ball"></div>
</div>
<div class="eye">
<div class="ball"></div>
</div>
</div>
</div>
<div id="socials">
<div class="social-div">
<a href="https://www.linkedin.com/in/govind-harsh-sharma/">
<h1>LINKEDIN</h1>
<h1>LINKEDIN</h1>
</a>
</div>
<div class="social-div">
<a href="https://www.instagram.com/geekwho.lifts/">
<h1>INSTAGRAM</h1>
<h1>INSTAGRAM</h1>
</a>
</div>
<div class="social-div">
<a href="https://twitter.com/GovindHarsh11">
<h1>TWITTER</h1>
<h1>TWITTER</h1>
</a>
</div>
<div class="social-div">
<a href="https://github.com/ghsharma">
<h1>GITHUB</h1>
<h1>GITHUB</h1>
</a>
</div>
</div>
<div id="message">
<h4> feel free to connect with me on social . </h4>
<h4> By GHS | ©2024 All rights reserved.</h4>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>