-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
226 lines (225 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Adding crossorigin="anonymous" for safety and for decreasing the cache size cached by the service worker. -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Jithin J Joshi, Web Developer residing in India, Portfolio Website Homepage" />
<meta name="google-site-verification" content="npYtFYyvpWnZFlWpoG0d4zjNeW3ZKkJCQU7aPsOLR9s" />
<title>Jithin J Joshi - Web Developer | Portfolio</title>
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0e5080">
<link rel="stylesheet" href="/styles/css/style.css" />
<link rel="stylesheet" href="/styles/css/nav.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
<link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/images/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Gluten&family=Montserrat:wght@800&family=Lato&family=Playfair+Display:wght@600&family=Poppins&family=Roboto&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" crossorigin="anonymous" />
<noscript><link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Gluten&family=Montserrat:wght@800&family=Lato&family=Playfair+Display:wght@600&family=Poppins&family=Roboto&display=swap"></noscript>
<link rel="stylesheet" href="/styles/css/chrome.css" />
<meta name="google-site-verification" content="Ry7JA8ZfQ6i6g4BrSfohZt24E39AidG0qvGOasuvGkM" />
<meta property="og:image" content="https://mrjithin.netlify.app/images/screenshot.png">
<meta property="og:title" content="Jithin J Joshi | Web Developer" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1302" />
<meta property="og:image:height" content="1250" />
</head>
<body>
<script src="/scripts/register.js" async></script>
<script src="/scripts/form.js" defer></script>
<script src="/scripts/ham.js" defer></script>
<script src="/scripts/scroll.js" defer></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script defer src="https://www.googletagmanager.com/gtag/js?id=G-7TK4XESS66" crossorigin="anonymous"></script>
<header>
<nav class="desktop">
<a href="." id="logo-a"><img id="logo" src="/images/logo.svg" alt="J-logo" /></a>
<div class="ham" aria-label='navigation button' role="button">
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">My Skills</a></li>
<li><a href="#projects">My Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<nav id="mobile" class="off">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">My Skills</a></li>
<li><a href="#projects">My Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<h1><span id="hi">Hi,</span>I'm <span id="name" class="shadow-pop-sm">Jithin</span><span id="passion">I make things for the Web.</span></h1>
<svg class="arrows">
<path class="a1" d="M0 0 L30 32 L60 0"></path>
<path class="a2" d="M0 20 L30 52 L60 20"></path>
<path class="a3" d="M0 40 L30 72 L60 40"></path>
</svg>
</header>
<main>
<section id="about">
<h2>About</h2>
<hr />
<p>Hello, my name is Jithin J Joshi. Making things for the web is something I'm quite passionate about. I currently reside in India. My fascination with the Web began in 2020, when I attempted to create a website on viruses (not computer viruses) based on the coronavirus. I'm still learning new things and will continue to do so for the rest of my life.</p>
<div id="quot-cont">
<blockquote>
<p>“Anyone who stops learning is old, whether at twenty or eighty. Anyone who keeps learning stays young.”</p>
<footer>- Henry Ford</footer>
</blockquote>
</div>
</section>
<section id="skills">
<h2>My Skills</h2>
<hr />
<!-- <section class="skill-cont">
<p class="skill">JavaScript</p>
<div class="bar">
<div class="inner-bar js"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">CSS</p>
<div class="bar">
<div class="inner-bar css"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">SCSS</p>
<div class="bar">
<div class="inner-bar scss"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">Semantic HTML</p>
<div class="bar">
<div class="inner-bar html"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">TypeScript</p>
<div class="bar">
<div class="inner-bar ts"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">Node.js</p>
<div class="bar">
<div class="inner-bar njs"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">Git</p>
<div class="bar">
<div class="inner-bar git"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">Markdown</p>
<div class="bar">
<div class="inner-bar md"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">BootStrap 4</p>
<div class="bar">
<div class="inner-bar bs"></div>
</div>
</section>
<section class="skill-cont">
<p class="skill">PWA</p>
<div class="bar">
<div class="inner-bar pwa"></div>
</div>
</section>-->
<!-- <section class="skill-cont"><p class="skill"></p><div class="bar"><div class="inner-bar"></div></div></section>
<section class="skill-cont"><p class="skill"></p><div class="bar"><div class="inner-bar"></div></div></section>
<section class="skill-cont"><p class="skill"></p><div class="bar"><div class="inner-bar"></div></div></section>
<section class="skill-cont"><p class="skill"></p><div class="bar"><div class="inner-bar"></div></div></section>
<section class="skill-cont"><p class="skill"></p><div class="bar"><div class="inner-bar"></div></div></section> -->
<ul class="skill">
<li>JavaScript<div class="bar"><div class="inner-bar"></div></div></li>
<li>TypeScript<div class="bar"><div class="inner-bar"></div></div></li>
<li>CSS<div class="bar"><div class="inner-bar"></div></div></li>
<li>SCSS<div class="bar"><div class="inner-bar"></div></div></li>
<li>Semantic HTML<div class="bar"><div class="inner-bar"></div></div></li>
<li>Node.js<div class="bar"><div class="inner-bar"></div></div></li>
<li>Git<div class="bar"><div class="inner-bar"></div></div></li>
<li>Bootstrap<div class="bar"><div class="inner-bar"></div></div></li>
<li>PWA<div class="bar"><div class="inner-bar"></div></div></li>
<li>MarkDown<div class="bar"><div class="inner-bar"></div></div></li>
<li>Googling<div class="bar"><div class="inner-bar"></div></div></li>
</ul>
</section>
<section id="projects">
<h2>Some of my Projects</h2>
<hr />
<p>This section will be filled in the near future. Do check back later.</p>
</section>
<section id="contact">
<h2>Get in Touch</h2>
<hr />
<div id="social">
<a href="https://github.com/mrjithin/"><img src="/images/social/github.svg" alt="GitHub" /></a>
<a href="https://codepen.io/valoruz/"><img src="/images/social/codepen.svg" alt="CodePen" /></a>
<a href="https://reddit.com/user/"><img src="/images/social/reddit.svg" alt="Reddit" /></a>
</div>
<br />
<div class="super-cont">
<div class="container-contact2">
<div class="wrap-contact2">
<form class="contact2-form validate-form" action="https://formspree.io/f/mrgrvlal" method="POST" name="contact">
<span class="contact2-form-title">
Contact Me
</span>
<div class="wrap-input2 validate-input" data-validate="Name is required">
<label for="form-name">Your Name</label>
<input class="input2" id="form-name" type="text" name="name">
<span class="focus-input2" data-placeholder="NAME"></span>
</div>
<div class="wrap-input2 validate-input" data-validate="Valid email is required: ex@abc.xyz">
<label for="form-email">Your Email ID</label>
<input class="input2" type="email" id="form-email" name="email">
<span class="focus-input2" data-placeholder="EMAIL"></span>
</div>
<div class="wrap-input2 validate-input" data-validate="Message is required">
<label for="form-message">Your Message</label>
<textarea id="form-message" class="input2" name="message"></textarea>
<span class="focus-input2" data-placeholder="MESSAGE"></span>
</div>
<div class="container-contact2-form-btn">
<div class="wrap-contact2-form-btn">
<div class="contact2-form-bgbtn"></div>
<button class="contact2-form-btn" disabled>
Send Your Message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>This website was completely built on mobile without the help of any code editors, written and designed with ❤️ by Jithin J Joshi.</p>
<small>© <span id="year">2021</span>, Jithin J Joshi, All Rights Reserved.</small>
</footer>
<script crossorigin="anonymous">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7TK4XESS66');
</script>
</body>
</html>