-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
284 lines (268 loc) · 14.1 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
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>My Portfolio Website</title>
<!-- Meta Tags -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Og Tags -->
<meta property="og:url" content="https://rohtihm.netlify.app/" />
<meta property="og:type" content="Personal Portfolio" />
<meta property="og:title" content="My Portfolio Website" />
<meta property="og:description" content="The My Portfolio Website is a Amazing🚀 Website About Me Rohith M!!" />
<meta property="og:image" content="/Images/Profile_Pic.png" />
<!-- Twitter Tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@RohithM0009" />
<meta name="twitter:title" content="My Portfolio Website" />
<meta name="twitter:description" content="The My Portfolio Website is a Amazing🚀 Website About Me Rohith M!!" />
<meta name="twitter:image" content="/Images/Profile_Pic.png" />
<!-- Link Tags -->
<link rel="stylesheet" href="https://unpkg.com/open-props" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="shortcut icon" type="image/x-icon" href="/Images/Light_Icon.svg" id="faviconTag_home" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Roboto&display=swap" rel="stylesheet" />
<!-- Script Tags -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="//code.tidio.co/bo7ojrr3a3sjwj3r8wtpg8llxeyvhw0m.js" defer></script>
<script src="https://kit.fontawesome.com/6fb54d94e0.js" crossorigin="anonymous"></script>
</head>
<body>
<center>
<div id="Home"></div>
<!-- Nav Bar Code -->
<header>
<a class="brand">My Portfolio Website</a>
<nav>
<ul class="nav__links content-center">
<li><a href="#About">About Me</a></li>
<li><a href="#Hobbies">Hobbies</a></li>
<li><a href="#Skills">Skills</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#Videos">Videos</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<a class="cta" href="#">Home</a>
<p class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close">×</a>
<div class="overlay__content">
<li><a href="#About">About Me</a></li>
<li><a href="#Hobbies">Hobbies</a></li>
<li><a href="#Skills">Skills</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#Videos">Videos</a></li>
<li><a href="#Contact">Contact</a></li>
</div>
</div>
<!-- Main Content -->
<main id="main-content">
<!-- Home Section -->
<section id="home-s" class="pb-0">
<canvas id="canv" width="32" height="32"></canvas>
<div class="hero">
<img src="/Images/Profile_Pic.png" alt="Profile Pic" class="border-2 border-black border-solid w-80 mt-[95px] mb-[50px]" />
<h1 class="font-semibold text-4xl">Rohith M</h1>
<h3 class="font-medium text-xl">I'm a</h3>
<span>
<h3 class="animate__animated animate__bounce animate__slow animate__infinite font-medium text-xl">Developer</h3>
<span id="About"></span>
</span>
</div>
</section>
<!-- About Section -->
<section id="about-s" class="bg-gradient-to-r from-yellow-200 via-green-200 to-green-500">
<h2 class="animate__animated animate__pulse animate__slow animate__infinite heading">About Me</h2>
<p class="content-para">
Hello👋 My Name Is Rohith M, I am A Young Developer And Love To Create Apps And Websites On My Own. I Live In Bangalore, India and I Am Studying in 7th Grade ICSE at Bangalore
International Academy. I was Born On 9 January
<span id="Hobbies"></span>
</p>
</section>
<!-- Hobbies Section -->
<section id="hobbies-s" class="bg-gradient-to-r from-blue-100 via-blue-300 to-blue-500">
<h2 class="animate__animated animate__pulse animate__slow animate__infinite heading">My Hobbies</h2>
<center>
<img src="/Images/Hobby_gif.gif" id="gif_coding" />
</center>
<p class="content-para">
My hobby is coding and programming in my free time. Whenever I get free time, I turn on my computer and think about what apps I can make. Then I Open the coding platform and begin
coding. When I am bored, I start making YouTube videos on coding. I learned to code when I was 10-year-old. I know some coding languages like HTML, JS, and CSS. I use some coding
platforms like Visual Studio, CodePen, and Thunkable. <span id="ht"></span>
<span id="Skills"></span>
</p>
</section>
<!-- Skills Section -->
<section id="skills-s" class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400">
<h2 class="animate__animated animate__pulse animate__slow animate__infinite heading"></h2>
<h2 class="animate__animated animate__pulse animate__slow animate__infinite heading">My Skills</h2>
<center>
<img src="/Images/Rubiks_Gif.gif" id="gif_rubiks" />
</center>
<p class="content-para">
One Of my Skills Is that I Can solve a 3X3 Rubiks Cube Very Fast. I love solving Rubiks Cubes. I First Learned how to solve a Rubik's Cube When I Was 10-Years-Old. My Fastest Cube
Solving Record Till Now is 52 seconds. I have made more Than 1000+ Solves.
<span id="Projects"></span>
</p>
</section>
<!-- Projects Section -->
<section id="projects-s" class="bg-gradient-to-r from-green-300 via-yellow-300 to-pink-300">
<h2 class="animate__animated animate__pulse animate__slow animate__infinite heading">My Projects</h2>
<ul>
<li class="projects_items"><a href="https://rohith0009.github.io/GlitchyFi/" target="_blank"> GlitchyFi </a></li>
<li class="projects_items"><a href="https://rohith0009.github.io/Music-Player/" target="_blank"> Music Player </a></li>
<li class="projects_items"><a href="https://github.com/Rohith0009/Tic-Tac-Toe/raw/master/installer/Tic%20Tac%20Toe%20Setup.exe" target="_blank"> Tic Tac Toe </a></li>
<li class="projects_items"><a href="https://rohith0009.github.io/About-Windows-10/" target="_blank"> About Windows 10 </a></li>
<span id="Videos"></span>
<li class="projects_items"><a href="https://rohith0009.github.io/Basic-Calculator/" target="_blank"> Basic Calculator </a></li>
</ul>
</section>
<!-- Videos Section -->
<section id="videos-s" class="bg-gradient-to-r from-green-200 to-green-500">
<h2 class="animate__animated animate__pulse animate__slow animate__infinite heading">My Videos</h2>
<h3 class="i-frame_heading" style="font-size: xx-large">1. Introduction To Python </h3>
<div class="iframe-container">
<iframe
src="https://www.youtube.com/embed/2SxwHHacLQ0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<br />
<hr />
<h3 class="i-frame_heading" style="font-size: xx-large">2. Top 10 VS Code Extensions </h3>
<div class="iframe-container">
<iframe
src="https://www.youtube.com/embed/syzgyy4hU0M"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<br />
<hr>
<h3 class="i-frame_heading" style="font-size: xx-large">3. Introduction To HTML, CSS And JS | Part 2</h3>
<div class="iframe-container">
<iframe
src="https://www.youtube.com/embed/X8pL0302-Wc"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<br />
<hr />
<h3 class="i-frame_heading" style="font-size: xx-large">4. Introduction To HTML, CSS And JS | Part 1</h3>
<div class="iframe-container">
<iframe
src="https://www.youtube.com/embed/W8oR-GJYGes"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<br />
<hr />
<a href="https://www.youtube.com/channel/UC8Zx1CqdlBFz2Aovv7OI11Q" target="_blank"> Click Here To View All The Videos In My Channel </a>
<hr />
<a href="https://www.youtube.com/channel/UC8Zx1CqdlBFz2Aovv7OI11Q?sub_confirmation=1" target="_blank"> Click Here To Subscribe to My Channel </a>
<br />
<span id="Contact"></span>
<br />
</section>
<!-- Contact Section -->
<section id="contact-s">
<h2 class="animate__animated animate__pulse animate__slow animate__infinite heading" style="color: black">Contacts</h2>
<div class="contact_div">
<div class="contact_items">
<a href="mailto:[email protected]" target="_blank">
<span style="color: limegreen"><i class="fa-solid fa-envelope fa-xl"> </i></span>
<h3 class="contact_label" style="color: limegreen">[email protected]</h3>
</a>
<br />
</div>
<div class="contact_items">
<a href="https://discord.gg/bkpZymmXyA" target="_blank">
<span style="color: #5662f6"><i class="fa-brands fa-discord fa-xl"></i></span>
<h3 class="contact_label" style="color: #5662f6">Rohith M#0709</h3>
</a>
<br />
</div>
<div class="contact_items">
<a href="https://twitter.com/RohithM0009" target="_blank">
<span style="color: #1da1f2"><i class="fa-brands fa-twitter fa-xl"></i></span>
<h3 class="contact_label" style="color: #1da1f2">RohithM0009</h3>
</a>
<br />
</div>
<div class="contact_items">
<a href="https://github.com/Rohith0009" target="_blank">
<span style="color: black"><i class="fa-brands fa-github fa-xl"></i></span>
<h3 class="contact_label" style="color: black">@Rohith0009</h3>
</a>
<br />
</div>
<div class="contact_items">
<a href="https://t.me/Rohith0009" target="_blank">
<span style="color: #1a91cd"><i class="fa-brands fa-telegram fa-xl"></i></span>
<h3 class="contact_label" style="color: #1a91cd">Rohith0009</h3>
</a>
<br />
</div>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<h3 class="footer-text">Rohith M</h3>
<p class="footer-text">Thank You For Visiting My Website Be Sure To Check The Links Below!</p>
<ul class="socials">
<li>
<a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC8Zx1CqdlBFz2Aovv7OI11Q" target="_blank"><i class="fa-brands fa-youtube"></i></a>
</li>
<li>
<a href="https://twitter.com/RohithM0009" target="_blank"><i class="fa-brands fa-twitter"></i></a>
</li>
<li>
<a href="https://github.com/Rohith0009" target="_blank"><i class="fa-brands fa-github"></i></a>
</li>
<li>
<a href="https://discord.gg/bkpZymmXyA" target="_blank"><i class="fa-brands fa-discord"></i></a>
</li>
<li>
<a href="/website-history.html"><i class="fa fa-history"></i></a>
</li>
</ul>
</div>
<div class="footer-bottom">
<p>©2022 Rohith's Tech. Designed by Rohith M</p>
</div>
</footer>
<!-- Extra Content -->
<script type="text/javascript">
$(".nc").click(function () {
$(".navbar-collapse").collapse("hide");
});
</script>
<script src="main.js"></script>
<!-- ***End Of Code*** -->
</center>
</body>
</html>
</html>