-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-new.html
165 lines (142 loc) · 9.62 KB
/
index-new.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/site.webmanifest">
<title>Jason</title>
<link rel="stylesheet" href="public/styles.css">
<link rel="stylesheet" href="public/styles2.css">
<style>
html {
scroll-behavior: smooth;
}
</style>
</head>
<!-- Theme Colours
Sakura (secondary)
rgb(255, 144, 165)
#FF90A5
Dark Grey (primary)
rgb(32, 33, 36)
#202124
Secondary Complement (seccomplement) //lime-ish
rgb(170, 255, 144)
#aaff90
-->
<!-- Navbar is from Meraki UI https://merakiui.com/components/navbars -->
<!-- Icons from Bootstrap Icons https://icons.getbootstrap.com/ -->
<body class="bg-primary">
<nav class="pulseshadow bg-primary fixed z-20 focus-within:top-0 w-full h-auto">
<div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
<div class="lg:flex lg:items-center lg:justify-between">
<div class="flex items-center justify-between">
<div>
<a class="brand-text text-2xl font-bold text-white lg:text-3xl hover:text-gray-300 pl-10" href="index.html">Jaze</a>
</div>
<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button type="button" class="text-gray-200 hover:text-gray-400 focus:outline-none focus:text-gray-400" aria-label="toggle menu" onclick="toggleNavbar('social-collapse','navheadings')">
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
</svg>
</button>
</div>
</div>
</div>
<div id="navheadings" class="hidden lg:flex flex-col text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row items-center">
<a href="#" class="mt-2 lg:mt-0 lg:mx-4 text-seccomplement">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg></a>
<a href="projects-new.html" class="nav-under mt-2 lg:mt-0 lg:mx-4 hover:text-white">Projects</a>
<a href="about-new.html" class="nav-under mt-2 lg:mt-0 lg:mx-4 hover:text-white">About</a>
<!-- <a href="assets/CV__JasonJoby.pdf" target="_blank" class="mt-2 lg:mt-0 lg:mx-4 hover:text-secondary">CV</a> -->
<a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-secondary">CV</a>
<a href="extras-new.html" class="nav-under mt-2 lg:mt-0 lg:mx-4 hover:text-white">Extras</a>
</div>
<div id="social-collapse" class="hidden lg:flex justify-center mt-6 lg:flex lg:mt-0 lg:-mx-2">
<a href="https://www.linkedin.com/in/jason-joby/" class="mx-2 text-secondary hover:text-gray-200" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
<a href="https://github.com/ch3rryblossom" class="mx-2 text-secondary hover:text-gray-200" aria-label="Github">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<a href="mailto:jason.joby@students.iiserpune.ac.in" class="mx-2 text-secondary hover:text-gray-200"
aria-label="Email">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="" viewBox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
</svg>
</a>
<!-- <a href="#" class="mx-2 text-gray-300 hover:text-gray-300"
aria-label="Email">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
</path>
</svg>
</a> -->
</div>
</div>
</nav>
<section class="flex items-center justify-center h-screen text-white font-serif text-5xl">
<span class="text-secondary p-1 sm:p-8">hello!</span> <span class="p-1 sm:p-8">my name is jason joby. <br><br>
i'm {an RA at <a href = "https://sites.google.com/site/visionlabiisc/people" style="text-decoration: underline; text-decoration-color: rgb(73, 73, 73);">VisionLab, IISc</a>}</span>
<a href="#end"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="text-gray-500 hover:text-gray-300 bi bi-arrow-down-circle-fill absolute bottom-20 right-1/2" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
</svg></a>
</section>
<section class="flex items-center justify-center h-48 text-white font-serif text-5xl mb-20">
<div class="p-5">i'm interested in the intersection of <span class="text-secondary" id="hero-type"></span></div>
</section>
<section id="end" class="flex items-center justify-center h-12 text-sm font-light text-gray-400 mt-40">
made with <svg viewBox="0 0 1792 1792" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" style="height: 0.8rem;"><path d="M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26T145 952.5 77 855 23.5 734 0 596q0-220 127-344t351-124q62 0 126.5 21.5t120 58T820 276t76 68q36-36 76-68t95.5-68.5 120-58T1314 128q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z" fill="#e25555"></path></svg> by Jason, uses <a href="https://v2.tailwindcss.com/">tailwind</a>, <a href="https://www.typeitjs.com/">typit.js</a>, <a href="https://merakiui.com/">merakiui</a> <a href="https://github.com/ch3rryblossom/ch3rryblossom.github.io" data-bs-toggle="tooltip" title="and some more, comments in the source code :)"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg></a>
</section>
<p class="flex items-center justify-center text-sm font-light text-gray-400 m-2">
For a more 2000s experience, <a href="index.html" class="text-white hover:underline">click here to switch to my "retro" site</a> <3.
</p>
<p class="flex items-center justify-center text-sm font-light text-gray-400 m-3">
I like that webpage more now, so I doubt I'll keep this one updated.
</p>
<!-- Uses typeit.js -->
<script src="typeit-index.umd.js"></script>
<script>
new TypeIt('#hero-type', {
speed: 75,
loop: true,
breakLines: false,
deleteSpeed: 75,
})
.type("neuro")
.pause(500)
.delete()
.type("comp sci")
.pause(500)
.delete()
.type("maths")
.pause(500)
.delete()
.go();
</script>
<script>
function toggleNavbar(collapseID1, collapseID2) {
document.getElementById(collapseID1).classList.toggle("hidden");
document.getElementById(collapseID1).classList.toggle("flex");
document.getElementById(collapseID2).classList.toggle("hidden");
document.getElementById(collapseID2).classList.toggle("flex");
}
</script>
</body>
</html>