-
Notifications
You must be signed in to change notification settings - Fork 0
/
extras-new.html
164 lines (148 loc) · 8.69 KB
/
extras-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
<!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>Extras - Jason</title>
<link rel="stylesheet" href="public/styles.css">
<link rel="stylesheet" href="public/styles2.css">
</head>
<style>
/* https://codepen.io/mftaskin/pen/poKGVQq */
.glitchtext {
text-shadow: 2px 0 0 rgba(255, 0, 60, 0.3), -2px 0 0 rgba(255, 255, 255, 0.3);
}
.glitchtext-anim {
animation: glitchtext 300ms linear infinite;
}
@keyframes glitchtext {
0% {
text-shadow: 2px 0 0 rgba(255, 0, 60, 0.3), -2px 0 0 rgba(255, 255, 255, 0.3);
}
20% {
text-shadow: 0 0 0 rgba(255, 0, 60, 0.3), -2px -1px 0 rgba(255, 255, 255, 0.3);
}
40% {
text-shadow: -2px -2px 0 rgba(255, 0, 60, 0.3),
2px 1px 0 rgba(255, 255, 255, 0.3);
}
60% {
text-shadow: -1px 2px 0 rgba(255, 0, 60, 0.3), 0 0 0 rgba(255, 255, 255, 0.3);
}
80% {
text-shadow: 2px -1px 0 rgba(255, 0, 60, 0.3), 2px 2px 0 rgba(255, 255, 255, 0.3);
}
100% {
text-shadow: 2px 0 0 rgba(255, 0, 60, 0.3), -2px 0 0 rgba(255, 255, 255, 0.3);
}
}
</style>
<body class="bg-primary">
<nav class="pulseshadow bg-primary fixed 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">
<img src="assets/jiji.jpg" style="height:2.3rem;" alt="Jiji" title="Jiji">
<div class="">
<a class="brand-text text-2xl font-bold text-white lg:text-3xl hover:text-gray-300 lg:pl-10 glitchtext glitchtext-anim" 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="index-new.html" class="mt-2 lg:mt-0 lg:mx-4 hover: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="#" class="nav-under_current 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:[email protected]" 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-7xl">
<div> -->
<!-- Banner from HyperUI https://www.hyperui.dev/components/marketing/banners -->
<section class="bg-primary text-white">
<div
class="mx-auto max-w-screen-xl px-4 py-32 mt-10 lg:flex lg:h-3\/6 lg:items-center"
>
<div class="mx-auto max-w-3xl text-center">
<h1
class="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-3xl font-extrabold text-transparent sm:text-5xl"
>
Stuff I Like
<span class="sm:block"> on the Internet. </span> <br>
<span class="sm:block font-light"> ᓚᘏᗢ </span>
</h1>
<p class="mx-auto mt-4 max-w-xl text-gray-300 font-light sm:text-xl sm:leading-relaxed">
plus a few other things, + even more extra
</p>
<!-- <div class="mt-8 flex flex-wrap justify-center gap-4">
<a
class="block w-full rounded border border-blue-600 bg-blue-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-white focus:outline-none focus:ring active:text-opacity-75 sm:w-auto"
href="/get-started"
>
Get Started
</a>
<a
class="block w-full rounded border border-blue-600 px-12 py-3 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring active:bg-blue-500 sm:w-auto"
href="/about"
>
Learn More
</a>
</div> -->
</div>
</div>
</section>
<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>