-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
241 lines (230 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Priyanshu Kashyap</title>
<!-- CSS Styles -->
<link rel="stylesheet" href="styles/navbar.css">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/about.css">
<link rel="stylesheet" href="styles/skills.css">
<link rel="stylesheet" href="styles/projects.css">
<link rel="stylesheet" href="styles/contact.css">
<link rel="stylesheet" href="styles/responsive.css">
<!-- Font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Gogle fonts -->
<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=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header id="header">
<div class="logo">
<a href="#" id="logo">Portfolio.</a>
</div>
<input type="checkbox" id="check">
<label for="check" class="mainicon">
<i class="fa-solid fa-bars" id="menu-icon"></i>
</label>
<ul class="nav-list">
<li class="nav-option"><a href="#home">Home</a></li>
<li class="nav-option"><a href="#about">About</a></li>
<li class="nav-option"><a href="#skills">Skills</a></li>
<li class="nav-option"><a href="#projects">Projects</a></li>
<li class="nav-option"><a href="#contact">Contact</a></li>
</ul>
</header>
<!-- HOME SECTION -->
<section class="home" id="home">
<div class="main">
<div class="information">
<h3 id="hi">Hi I'm</h3>
<!-- <h1>PRIYANSHU <br><span>KASHYAP</span></h1> -->
<h1>PRIYANSHU</h1>
<h1 id="title">KASHYAP</h1>
<div class="web-developer">
<span>W</span><span>e</span><span>b </span><span> </span><span>D</span><span>e</span><span>v</span><span>e</span><span>l</span><span>o</span><span>p</span><span>e</span><span>r</span>
</div>
<div class="h-btns">
<button class="h-btn" id="resume-btn">Resume</buttona>
<button class="h-btn" id="projects-btn">Projects</button>
</div>
<div class="social-medias">
<div class="facebook-icon">
<a href="https://www.facebook.com/profile.php?id=61550769088682&mibextid=ZbWKwL" target="_blank"><i class="fa-brands fa-facebook-f" style="color: #ffffff;"></i></a>
</div>
<div class="twitter-icon">
<a href="https://x.com/Priyanshu_k_05?s=09" target="_blank"><i class="fa-brands fa-twitter" style="color: white;"></i></a>
</div>
<div class="instagram-icon">
<a href="https://www.instagram.com/priyanshu._.kashyap_" target="_blank"><i class="fa-brands fa-instagram" style="color: #ffffff;"></i></a>
</div>
<div class="linkedin-icon">
<a href="https://www.linkedin.com/in/priyanshu-kashyap-8196a928a?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" target="_blank"><i class="fa-brands fa-linkedin-in" style="color: #ffffff;"></i></a>
</div>
<div class="github-icon social-media-icon">
<a href="https://github.com/7rikster" target="_blank"><i class="fa-brands fa-github" style="color: #ffffff;"></i></a>
</div>
</div>
</div>
<div class="home-image">
<div class="bg-outer">
<img src="images/profile_pic.jpg" alt="">
</div>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about" id="about">
<h3>Get to know</h3>
<h2>About Me</h2>
<div class="about-container">
<div class="about-image">
<img src="images/about_image.jpg" alt="" id="about-image">
</div>
<div class="about-info">
<p>I am a Computer Science and Engineering Undergraduate of NIT Silchar
I am learning full stack Web development and trying to improve my problem solving
skills through Competitive Programming. I have done DSA in C++ and trying make a better version of myself day by day.
<br><br>
My hobbies include playing outdoor sports, mobile and pc games, travelling, listening to music and ofcourse coding.
<br><br>
I am a friendly person, so I would love it if you smile at me incase our paths cross someday.
</p>
<button class="a-btn">Download CV</button>
</div>
</div>
</section>
<!-- SKILLS SECTION -->
<section class="skills" id="skills">
<h3 id="know-about">Know about</h3>
<h2>My Skills</h2>
<div class="skills-container">
<div class="skills-cards" id="web-developing">
<i class="fa-solid fa-desktop"></i>
<h3>Web Developing</h3>
<p>I am a full stack web developer. I have done 120+ projects and also contributed to open source.</p>
</div>
<div class="skills-cards" id="python">
<i class="fa-brands fa-python"></i>
<h3>Python Programming</h3>
<p>I am an intermediate in python progamming and have done many projects in Machine Learning.</p>
</div>
<div class="skills-cards" id="photography">
<i class="fa-solid fa-camera"></i>
<h3>Photography</h3>
<p>I am a nature admirer and like to capture the moments of beauty and happiness.</p>
</div>
<div class="skills-cards" id="sports">
<i class="fa-solid fa-futbol"></i>
<h3>Sports</h3>
<p>I also play various outdoor sports such as Football, Cricket etc. I am also a district level swimmer.</p>
</div>
<div class="skills-cards" id="coding">
<i class="fa-solid fa-code"></i>
<h3>Coding</h3>
<p>I love coding. I am an intermediate in Competitive Programming and participated in many hackathons.</p>
</div>
<div class="skills-cards" id="app-developing">
<i class="fa-brands fa-android"></i>
<h3>Android Developing</h3>
<p>I know Android Development and have build two apps. I am currently working on another project.</p>
</div>
</div>
</section>
<!-- PROJECTS SECTION -->
<section class="projects" id="projects">
<h2>My Projects</h2>
<h3>In the past 2 years I have done the following projects</h3>
<div class="projects-container">
<div class="project-card" id="spotify-clone">
<div class="project-info">
<h4>Spotify Clone</h4>
<p>I have made a Spotify clone using just HTML and CSS.</p>
</div>
</div>
<div class="project-card" id="profile-card">
<div class="project-info">
<h4>Profile Card</h4>
<p>Made a Profile Card with my name, photo and link to all of my social medias.</p>
</div>
</div>
<div class="project-card" id="city-xplorer">
<div class="project-info">
<h4>City Xplorer</h4>
<p>Made a website where you can explore differet cities along with various tourist attractions, events etc.</p>
</div>
</div>
<div class="project-card" id="python-sql">
<div class="project-info">
<h4>Database</h4>
<p>Made a Database Management System for student' records using python and sql in 12th standard.</p>
</div>
</div>
<div class="project-card" id="portfolio">
<div class="project-info">
<h4>Portfolio</h4>
<p>Made my own responsive Portfolio website using HTML, CSS and Javascripts.</p>
</div>
</div>
<div class="project-card" id="simon-says">
<div class="project-info">
<h4>Simon Says</h4>
<p>I have build a fully functional Simon Says game using HTML, CSS and Javascript.</p>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section class="contact" id="contact">
<div class="contact-container">
<div class="contact-info">
<h3>CONTACT</h3>
<p id="feel-free">Feel free to reach out to me if you need any help.</p>
<div class="quick-contact">
<h2>QUICK CONTACT</h2>
<p><i class="fa-solid fa-phone"></i>+91-8763645182</p>
<p><i class="fa-solid fa-envelope"></i>webdeveloper@gmail.com</p>
<p><i class="fa-solid fa-location-dot"></i>NIT Silchar, Assam, 788010</p>
<p><i class="fa-solid fa-clock"></i>Monday to Friday 10 AM to 8 PM</p>
</div>
<div class="social-medias">
<div class="facebook-icon social-media-icon">
<a href="https://www.facebook.com/profile.php?id=61550769088682&mibextid=ZbWKwL" target="_blank"><i class="fa-brands fa-facebook-f" style="color: #ffffff;"></i></a>
</div>
<div class="twitter-icon social-media-icon">
<a href="https://x.com/Priyanshu_k_05?s=09" target="_blank"><i class="fa-brands fa-x-twitter" style="color: #ffffff;"></i></a>
</div>
<div class="instagram-icon social-media-icon">
<a href="https://www.instagram.com/priyanshu._.kashyap_" target="_blank"><i class="fa-brands fa-instagram" style="color: #ffffff;"></i></a>
</div>
<div class="linkedin-icon social-media-icon">
<a href="https://www.linkedin.com/in/priyanshu-kashyap-8196a928a?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" target="_blank"><i class="fa-brands fa-linkedin-in" style="color: #ffffff;"></i></a>
</div>
<div class="github-icon social-media-icon">
<a href="https://github.com/7rikster" target="_blank"><i class="fa-brands fa-github" style="color: #ffffff;"></i></a>
</div>
</div>
</div>
<div class="contact-form">
<h3>CONTACT FORM</h3>
<form action="#">
<input type="text" placeholder="Your Full Name" class="contact-inputs" id="full-name" name="full-name">
<input type="text" placeholder="Your Email" class="contact-inputs" id="email" name="email">
<textarea cols="30" rows="10" placeholder="Write Your Message" class="contact-inputs" id="message" name="input-message"></textarea>
<button id="send-message" type="submit">Send Message</button>
</form>
</div>
</div>
</section>
<footer class="footer" id="footer">
<h4>THANKS FOR VISITING</h4>
<p>Back to top <a href="#home"><i class="fa-solid fa-arrow-up"></i></a></p>
</footer>
<!-- Link to Javascript -->
<script src="app.js"></script>
</body>
</html>