-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
443 lines (430 loc) · 24 KB
/
index.html
File metadata and controls
443 lines (430 loc) · 24 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
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Keshav Goyal - Portfolio">
<title>Keshav Goyal | Portfolio</title>
<link rel="icon" href="https://cdn3d.iconscout.com/3d/free/thumb/free-user-account-3d-icon-png-download-4715753.png" type="image/png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Full Page Canvas Background -->
<canvas id="codeCanvas"></canvas>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<div class="nav-brand">
<a href="#home">
<span class="brand-icon">K</span>
<span class="brand-text">Keshav Goyal</span>
</a>
</div>
<ul class="nav-menu">
<li><a href="#home" class="nav-link"><i class="fas fa-home"></i> Home</a></li>
<li><a href="#about" class="nav-link"><i class="fas fa-user"></i> About</a></li>
<li><a href="#skills" class="nav-link"><i class="fas fa-code"></i> Skills</a></li>
<li><a href="#experience" class="nav-link"><i class="fas fa-briefcase"></i> Experience</a></li>
<li><a href="#projects" class="nav-link"><i class="fas fa-project-diagram"></i> Projects</a></li>
<li><a href="#contact" class="nav-link"><i class="fas fa-envelope"></i> Contact</a></li>
</ul>
<div class="nav-actions">
<a href="https://github.com/keshav-pec" target="_blank" class="nav-social" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/keshavgoyalpec/" target="_blank" class="nav-social" aria-label="LinkedIn">
<i class="fab fa-linkedin"></i>
</a>
<a href="#contact" class="btn-nav">Hire Me</a>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">Hi, I'm <span class="highlight">Keshav Goyal</span></h1>
<p class="hero-subtitle">Full Stack Developer | CSE Student @PEC | Problem Solver</p>
<p class="hero-description">A learner who is passionate about Problem solving, building scalable web applications and creating seamless user experiences with modern technologies.</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">Get In Touch</a>
<a href="#projects" class="btn btn-secondary">View Work</a>
</div>
<div class="social-links">
<a href="https://www.linkedin.com/in/keshavgoyalpec/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin hero-link"></i></a>
<a href="https://github.com/keshav-pec" target="_blank" aria-label="GitHub"><i class="fab fa-github hero-link"></i></a>
<a href="mailto:keshavpec24@gmail.com" aria-label="Email"><i class="fas fa-envelope hero-link"></i></a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="about-content">
<div class="about-text">
<p>Hello! I'm Keshav Goyal, a Computer Science student and full-stack developer who enjoys building practical, user-friendly, and scalable web applications.</p>
<p>I am passionate about learning modern technologies, strengthening core computer science concepts, and solving real-world problems through clean and efficient code.</p>
<p>Along with development, I actively participate in technical communities and competitive programming to continuously improve my problem-solving and collaboration skills.</p>
<div class="about-details">
<div class="detail-item">
<i class="fas fa-map-marker-alt"></i>
<span>Location: Patiala, Punjab, India</span>
</div>
<div class="detail-item">
<i class="fas fa-graduation-cap"></i>
<span>B.Tech CSE, Punjab Engineering College, Chandigarh (2024-2028) | CGPA: 8.52</span>
</div>
<div class="detail-item">
<i class="fas fa-school"></i>
<span>DAV Public School, Patiala | Class XII: 89.4% | Class X: 97.2%</span>
</div>
<div class="detail-item">
<i class="fas fa-briefcase"></i>
<span>Full Stack Developer | Problem Solver (Java)</span>
</div>
</div>
</div>
<div class="about-image">
<div class="image-wrapper">
<img src="https://avatars.githubusercontent.com/u/216517574?v=4" alt="Keshav Goyal" loading="lazy" decoding="async">
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills">
<div class="container">
<h2 class="section-title">Skills & Technologies</h2>
<div class="skills-grid">
<div class="skill-category">
<h3><i class="fas fa-laptop-code"></i> Programming Languages</h3>
<div class="skill-tags">
<span class="skill-tag">Java</span>
<span class="skill-tag">C++</span>
<span class="skill-tag">Python</span>
<span class="skill-tag">JavaScript</span>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-globe"></i> Web Development</h3>
<div class="skill-tags">
<span class="skill-tag">MERN Stack</span>
<span class="skill-tag">ReactJS</span>
<span class="skill-tag">Node.js</span>
<span class="skill-tag">Express.js</span>
<span class="skill-tag">REST APIs</span>
<span class="skill-tag">MongoDB</span>
<span class="skill-tag">MVC Framework</span>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-brain"></i> CS Fundamentals</h3>
<div class="skill-tags">
<span class="skill-tag">Data Structure and Algorithms</span>
<span class="skill-tag">Object Oriented Programming</span>
<span class="skill-tag">Operating Systems</span>
<span class="skill-tag">Computer Networks</span>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-tools"></i> Tools & Technologies</h3>
<div class="skill-tags">
<span class="skill-tag">Git</span>
<span class="skill-tag">GitHub</span>
<span class="skill-tag">VS Code</span>
</div>
</div>
<div class="skill-category">
<h3><i class="fas fa-trophy"></i> Competitive Programming</h3>
<div class="skill-tags">
<span class="skill-tag">Problem Solving in Java</span>
<span class="skill-tag">CodeChef ⭐️⭐️ (1578)</span>
<span class="skill-tag">Codeforces Pupil (1205)</span>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="experience">
<div class="container">
<h2 class="section-title">Experience</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Freelance Frontend Developer</h3>
<h4>Rohindia OPC</h4>
<p class="timeline-date"><i class="fas fa-calendar"></i> Oct 2025 - Nov 2025</p>
<ul>
<li>Worked directly on industry-grade live products as a frontend contributor.</li>
<li>Built and improved user-facing features for <strong>CafeLamhey</strong> (blogging and interaction platform).</li>
<li>Contributed to <strong>Lamhistan</strong>, an event management application, with responsive and intuitive UI components.</li>
<li>Collaborated on production-focused workflows and delivery timelines.</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Open-Source Contributor & Hacktoberfest'25 Recognition</h3>
<h4>acm-fun & Algovisualizer</h4>
<p class="timeline-date"><i class="fas fa-calendar"></i> October 2025</p>
<ul>
<li>Made <strong>6+</strong> meaningful open-source contributions across frontend and backend tasks.</li>
<li>Implemented responsive design enhancements in React.js based interfaces.</li>
<li>Developed and refined game logic and improved REST API behavior for better performance.</li>
<li>Collaborated through issues and PR discussions to ship practical improvements.</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h3>Technical Community Leadership</h3>
<h4>PEC University of Technology</h4>
<p class="timeline-date"><i class="fas fa-calendar"></i> August 2024 - Present</p>
<ul>
<li>Implementation Body member at <strong>PEC-ACM-CSS</strong>, actively contributing to technical initiatives.</li>
<li>Delivered an interactive <strong>GitHub training session</strong> to 35+ PEC students with quizzes and collaborative exercises.</li>
<li>Core Committee Member at <strong>Women Empowerment Cell, PEC</strong>.</li>
<li>Foundational member at <strong>Speed Cubing Club, PEC</strong>.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<div class="container">
<h2 class="section-title">Featured Projects</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-image">
<img src="images/Screenshot 2026-03-21 at 17.59.05.png" alt="NeoSetu" loading="lazy" decoding="async">
<div class="project-overlay">
<a href="https://neosetu.vercel.app/" class="project-link" target="_blank" title="Live Demo"><i class="fas fa-external-link-alt"></i></a>
<a href="https://github.com/keshav-pec" class="project-link" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-info">
<h3>NeoSetu - Video Conferencing Platform</h3>
<p>A comprehensive full-stack video conferencing application featuring real-time video calls, live chat functionality, and screen sharing capabilities. Built with MERN stack and deployed on cloud infrastructure.</p>
<div class="project-tags">
<span>React</span>
<span>Node.js</span>
<span>WebRTC</span>
<span>Socket.io</span>
<span>MongoDB</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="images/Screenshot 2026-03-21 at 18.02.50.png" alt="WanderLust" loading="lazy" decoding="async">
<div class="project-overlay">
<a href="https://wanderlust-org.vercel.app" class="project-link" target="_blank" title="Live Demo"><i class="fas fa-external-link-alt"></i></a>
<a href="https://github.com/keshav-pec" class="project-link" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-info">
<h3>WanderLust - Hotel Listing Platform</h3>
<p>A full-stack hotel listing and review platform where users can browse accommodations, read and write reviews, and make bookings. Features user authentication, CRUD operations, and responsive design.</p>
<div class="project-tags">
<span>React</span>
<span>Express</span>
<span>MongoDB</span>
<span>Node.js</span>
<span>Material-UI</span>
<span>REST API</span>
</div>
</div>
</div>
<!-- Hacktoberfest 2025 Contribution Card -->
<div class="project-card">
<div class="project-image">
<img src="https://hacktoberfest.com/_next/static/media/opengraph.6e804091.png" alt="Hacktoberfest 2025" loading="lazy" decoding="async">
<div class="project-overlay">
<a href="https://www.holopin.io/@keshavpec#badges" class="project-link" target="_blank" title="My Contributions"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
<div class="project-info">
<h3>Hacktoberfest '25 — Open Source Contributions</h3>
<p>Participated in Hacktoberfest 2025 by contributing to multiple open-source repositories across documentation, bug fixes, and feature requests. Focus areas: improving DX, writing tests, and fixing frontend accessibility issues.</p>
<div class="project-tags">
<span>Open Source</span>
<span>Documentation</span>
<span>Bug Fixes</span>
<span>Tests</span>
<span>Accessibility</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="GitHub Projects" loading="lazy" decoding="async">
<div class="project-overlay">
<a href="https://github.com" class="project-link" target="_blank" title="View All Projects"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-info">
<h3>More Projects on GitHub</h3>
<p>Explore my extensive collection of projects including DSA implementations in Python, C++, and Java, web development experiments, and contributions to open-source initiatives.</p>
<div class="project-tags">
<span>Python</span>
<span>C++</span>
<span>Java</span>
<span>DSA</span>
<span>Open Source</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Get In Touch</h2>
<div class="contact-content">
<div class="contact-text">
<p>I'm actively seeking internship opportunities for Summer 2026 in full-stack development roles. Open to discussing exciting projects, freelance work, or collaboration opportunities!</p>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<div>
<h4>Email</h4>
<a href="mailto:keshavpec24@gmail.com">keshavpec24@gmail.com</a>
</div>
</div>
<div class="contact-item">
<i class="fab fa-linkedin"></i>
<div>
<h4>LinkedIn</h4>
<a href="https://www.linkedin.com/in/keshavgoyalpec/" target="_blank">linkedin.com/in/keshavgoyalpec</a>
</div>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<div>
<h4>Location</h4>
<p>Patiala, Punjab, India</p>
</div>
</div>
</div>
</div>
<div class="contact-form">
<form id="contactForm">
<div class="form-group">
<input type="text" id="name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="text" id="subject" name="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<!-- Footer Brand -->
<div class="footer-section footer-brand-section">
<div class="footer-brand">
<span class="brand-icon">K</span>
<span class="brand-text">Keshav Goyal</span>
</div>
<p class="footer-tagline">Full Stack Developer specializing in MERN stack. Building innovative web solutions one line of code at a time.</p>
<div class="footer-social">
<a href="https://www.linkedin.com/in/keshavgoyalpec/" target="_blank" aria-label="LinkedIn">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://github.com/keshav-pec" target="_blank" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="mailto:keshavpec24@gmail.com" aria-label="Email">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<!-- Quick Links -->
<div class="footer-section">
<h4 class="footer-title">Quick Links</h4>
<ul class="footer-links">
<li><a href="#home"><i class="fas fa-chevron-right"></i> Home</a></li>
<li><a href="#about"><i class="fas fa-chevron-right"></i> About Me</a></li>
<li><a href="#skills"><i class="fas fa-chevron-right"></i> Skills</a></li>
<li><a href="#projects"><i class="fas fa-chevron-right"></i> Projects</a></li>
</ul>
</div>
<!-- Services -->
<div class="footer-section">
<h4 class="footer-title">Services</h4>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> Web Development</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Frontend Design</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Backend APIs</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Full Stack Solutions</a></li>
</ul>
</div>
<!-- Contact Info -->
<div class="footer-section">
<h4 class="footer-title">Get In Touch</h4>
<ul class="footer-contact">
<li>
<i class="fas fa-map-marker-alt"></i>
<span>Patiala, Punjab, India</span>
</li>
<li>
<i class="fas fa-envelope"></i>
<a href="mailto:keshavpec24@gmail.com">keshavpec24@gmail.com</a>
</li>
<li>
<i class="fas fa-graduation-cap"></i>
<span>PEC University of Technology</span>
</li>
<li>
<i class="fas fa-calendar"></i>
<span>Available for Internships 2026</span>
</li>
</ul>
</div>
</div>
<!-- Footer Bottom -->
<div class="footer-bottom">
<div class="footer-bottom-content">
<p>© 2025 Keshav Goyal. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<span class="separator">•</span>
<a href="#">Terms of Service</a>
<span class="separator">•</span>
<a href="#home">Back to Top <i class="fas fa-arrow-up"></i></a>
</div>
</div>
<p class="footer-credit">Designed & Built with <i class="fas fa-heart"></i> by Keshav Goyal</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>