-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
273 lines (253 loc) · 15 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio | Rakesh Roshan</title>
<meta name="author" content="Rakesh Roshan">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A website that helps others know about me and my works.">
<meta name="keywords" content="Rakesh Roshan, Front-End Developer, HTML, CSS, JavaScript, Web Developer Portfolio, Responsive Design, UI/UX Design">
<meta property="og:type" content="website">
<meta property="og:title" content="Portfolio | Rakesh Roshan">
<meta property="og:url" content="https://rakeshroshan.netlify.app">
<meta property="og:description" content="A website that helps others know about me and my works.">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" id="favicon" type="image/x-image" href="assets/images/favicon.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="assets/libs/animate.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap" media="print" onload="this.media='all'" crossorigin>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
</head>
<body oncontextmenu="return false">
<!----- Preloader Section ----->
<div class="loader" id="loading">
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
<span class="loading">LOADING...</span>
</div>
<!----- Navbar Section ----->
<nav class="navbar">
<div class="max-width">
<img src="assets/images/logo.webp" class="img-logo animate__animated animate__swing" alt="Website Logo" width="200" height="200" data-wow-duration="1.4s" data-wow-iteration="2">
<!-- <img src="assets/images/logo.webp" class="img-logo" alt="Website Logo" width="200" height="200"> -->
<ul class="menu">
<li><a href="#home" class="menu-btn active">HOME</a></li>
<li><a href="#about" class="menu-btn">ABOUT ME</a></li>
<li><a href="#skills" class="menu-btn">SKILLS</a></li>
<li><a href="#education" class="menu-btn">EDUCATION</a></li>
<li><a href="#experience" class="menu-btn">EXPERIENCES</a></li>
<li><a href="#projects" class="menu-btn">PROJECTS</a></li>
<li><a href="#certificates" class="menu-btn">CERTIFICATES</a></li>
<li><a href="#contact" class="menu-btn">CONTACT</a></li>
</ul>
<div class="menu-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/>
</svg>
</div>
</div>
</nav>
<!----- Home Section ----->
<div class="home-wrapper">
<canvas id="canvas"></canvas>
<section class="home" id="home">
<div class="max-width">
<div class="home-text">
<div class="text-1">Hello,</div>
<div class="text-2">My name is <span>Rakesh Roshan</span></div>
<div class="text-3">I am <span class="typing">A C++ Coder</span></div>
<a href="assets/Rakesh_Roshan_Resume.pdf" target="_blank" draggable="false">
<button class="wow animate__animated animate__flip" data-wow-duration="1.5s">DOWNLOAD RESUME</button>
</a>
</div>
<div class="home-image">
<img src="assets/images/home.webp" alt="Home Image" width="600" height="615">
</div>
</div>
</section>
</div>
<!----- About Me Section ----->
<section class="about" id="about">
<div class="title"><span>About Me</span></div>
<div class="max-width">
<div class="about-content">
<div class="column left wow animate__animated animate__zoomIn" data-wow-offset="190" data-tilt>
<img src="assets/images/about/man.webp" alt="Profile Photo" width="334" height="334" fetchpriority="high">
</div>
<div class="column right">
<div class="topic wow animate__animated animate__backInLeft" data-wow-offset="190"><b><span>Hello there...!! Welcome to My Portfolio.</span></b></div>
<div class="topic wow animate__animated animate__backInLeft" data-wow-offset="190"><b><span>My name is Rakesh Roshan.</span></b></div>
<p class="wow animate__animated animate__bounceInRight" data-wow-offset="190" data-wow-delay="0.2s">
I am an Associate Software Engineer at OpenText, originally from Bokaro Steel City, Jharkhand. I hold a B.Tech in Computer Science Engineering from Lovely Professional University.<br>
I completed my schooling at Holy Cross School, Bokaro (CBSE, 92%) and my Intermediate at D.A.V. Public School, Bokaro (84%).<br>
Beyond work, I enjoy playing badminton and listening to devotional and Bollywood music. My short-term goal is to enhance my technical skills and contribute effectively to my organization. In the long term, I aspire to excel as a Software Engineer, making impactful contributions to a leading organization.
</p>
<div class="media-icons wow animate__animated animate__bounceInRight" data-wow-delay="0.3s">
<a href="https://rakesh9100.bio.link/" target="a"><img src="assets/images/about/all-links.svg" alt="Bio Link" width="60" height="60"></a>
<a href="https://www.linkedin.com/in/rakesh-roshan-9100/" target="b"><img src="assets/images/about/linkedin.svg" alt="LinkedIn" width="60" height="60"></a>
<a href="https://github.com/Rakesh9100" target="c"><img src="assets/images/about/github.svg" alt="GitHub" width="60" height="60"></a>
<a href="mailto:roshanrakesh7362@gmail.com" target="d"><img src="assets/images/about/gmail.svg" alt="Gmail" width="60" height="60"></a>
<a href="https://www.facebook.com/rakesh6203/" target="e"><img src="assets/images/about/facebook.svg" alt="Facebook" width="60" height="60"></a>
<a href="https://www.instagram.com/rakesh250602/" target="f"><img src="assets/images/about/instagram.svg" alt="Instagram" width="60" height="60"></a>
</div>
</div>
</div>
</div>
</section>
<!----- Skills Section ----->
<section class="skills" id="skills">
<div class="title"><span>My Skills</span></div>
<div class="text"><span>Learning how to learn is life's most important skill.</span></div>
<div class="skill-boxes" id="skill-boxes">
<!-- Skills will be loaded here dynamically -->
</div>
</section>
<!----- Education Section ----->
<section class="education" id="education">
<div class="title"><span>My Education</span></div>
<div class="text"><span>Education is the most powerful weapon which we can use to change the world.</span></div>
<div class="education-boxes">
<div class="box">
<div class="image wow animate__animated animate__rollIn" data-wow-offset="100">
<a aria-label="LPU" href="https://www.lpu.in/" target="a">
<img src="assets/images/education/LPU.webp" alt="LPU" width="300" height="200" loading="lazy">
</a>
</div>
<div class="content">
<h3>B.Tech CSE</h3>
<h4>2020-24</h4>
<p>I did my Bachelor of Technology in Computer Science and Engineering from Lovely Professional University with 8.48 CGPA.</p>
</div>
</div>
<div class="box">
<div class="image wow animate__animated animate__rollIn" data-wow-offset="100">
<a aria-label="DAV" href="http://dav4bokaro.org/dav4_newsite/" target="b">
<img src="assets/images/education/DAV.webp" alt="DAV" width="300" height="200" loading="lazy">
</a>
</div>
<div class="content">
<h3>Intermediate (12th)</h3>
<h4>2018-20</h4>
<p>I did my Intermediate in Science stream from Dayanand Anglo Vedic Public School (CBSE), Bokaro and secured 84%.</p>
</div>
</div>
<div class="box">
<div class="image wow animate__animated animate__rollIn" data-wow-offset="100">
<a aria-label="HCS" href="https://www.holycrossbokaro.com/" target="c">
<img src="assets/images/education/HCS.webp" alt="HCS" width="300" height="200" loading="lazy">
</a>
</div>
<div class="content">
<h3>Matriculation (10th)</h3>
<h4>2017-18</h4>
<p>I did my matriculation from Holy Cross School, Bokaro which is CBSE affiliated and secured the merit with 92%.</p>
</div>
</div>
</div>
</section>
<!------ Experiences Section ----->
<section class="experience" id="experience">
<div class="title"><span>My Experiences</span></div>
<div class="text"><span>Experience is the teacher of all things.</span></div>
<div class="experience-boxes" id="experience-boxes">
<!-- Experiences will be loaded here dynamically -->
</div>
</section>
<!----- Projects Section ----->
<section class="projects" id="projects">
<div class="title"><span>My Projects</span></div>
<div class="text"><span>A creative project is a moving target. You never end up where you start.</span></div>
<div class="max-width">
<div class="project-content" id="project-content">
<!-- Projects will be loaded here dynamically -->
</div>
</div>
</section>
<!----- Certificates Section ----->
<section class="certificates" id="certificates">
<div class="title"><span>My Certificates</span></div>
<div class="text"><span>Earning a certificate or degree, or both, after high school opens the door to countless economic opportunities.</span></div>
<div class="certificate-boxes" id="certificate-boxes">
<!-- Certificates will be loaded here dynamically -->
</div>
</section>
<!----- Contact Section ----->
<section class="contact" id="contact">
<div class="title"><span>Contact Me</span></div>
<div class="text"><span>When we Contact each other, we Change each other. We are constantly making each other.</span></div>
<div class="max-width">
<p class="wow animate__animated animate__heartBeat" data-wow-offset="250">Let's Get Connected!!</p>
<div class="contact-content">
<div class="column right">
<form name="Contact Submission" autocomplete="off" netlify>
<div class="fields">
<div class="field name">
<input type="text" id="name" name="Name" autocomplete="name" placeholder="Name" required>
<label for="name" class="visually-hidden">Name</label>
</div>
<div class="field email">
<input type="email" id="email" name="Email" autocomplete="email" placeholder="Email" required>
<label for="email" class="visually-hidden">Email</label>
</div>
</div>
<div class="field">
<input type="text" id="subject" name="Subject" placeholder="Subject" required>
<label for="subject" class="visually-hidden">Subject</label>
</div>
<div class="field textarea">
<textarea id="message" cols="30" rows="10" name="Message" placeholder="Your Message. . . . ." required></textarea>
<label for="message" class="visually-hidden">Message</label>
</div>
<div class="button-area">
<button type="submit" class="wow animate__animated animate__zoomIn" aria-label="Submit">SEND MESSAGE</button>
</div>
</form>
</div>
<div class="column left">
<img class="wow animate__animated animate__backInRight" src="assets/images/contact.png" width="2000" height="2000" loading="lazy" alt="Contact Image"></img>
</div>
</div>
</div>
</section>
<!----- Footer Section ----->
<footer>
Created By <a href="https://github.com/Rakesh9100" target="_blank">Rakesh Roshan</a> ❤️ | © <span id="current-year"></span>: All Rights Reserved
</footer>
<!----- Scroll to Top Button ----->
<div id="progress">
<span id="progress-value">↑</span>
</div>
<!----- Custom Cursor ----->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<!----- Script for icons ----->
<script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
<!----- Third-party libraries ----->
<script src="assets/libs/wow.js" defer></script>
<script src="assets/libs/vanilla-tilt.js" defer></script>
<!----- Main script ----->
<script src="script.js"></script>
</body>
</html>