-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
281 lines (261 loc) · 16.6 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
<!doctype html>
<html lang=en-US>
<head>
<meta name="google-site-verification" content="buthsBZ2q6Ex7q3QolrK3ufyvA0nrdt7ntp6w1ZVJzM" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Hydrovolter</title>
<link rel="icon" type="image/x-icon" href="/assets/HydroSimple192.png">
<meta content="width=device-width,height=device-height,initial-scale=1" name=viewport>
<link href=/manifest.json rel=manifest>
<meta content=Hydrovolter name=og:site_name>
<meta content="Hydrovolter's Website" name=title>
<meta content="Hey there, I'm Hydro (Hydrovolter) and this is my portfolio!" name=description>
<meta content=#00F6F4 name=theme-color>
<meta content=summary_large_image name=twitter:card>
<meta content=/assets/HydroSimple512.png name=og:image>
</head>
<body>
<div class=section style=left:0;top:0 id=center>
<div class=container>
<div id=profile>
<div id=profile-avatar-container>
<img src=assets/HydroSimple512.png alt="My avatar" height=128px id=profile-avatar width=128px>
<div class=circle style=display:none id=profile-avatar-status-container>
<img class=circle src=/assets/status/offline.svg id=profile-avatar-status>
</div>
</div>
<a rel="noopener noreferrer" style=display:none target=_blank id=profile-activity>
<div id=profile-activity-assets>
<img height=98px id=profile-activity-large-image width=98px style=display:none>
<div class=circle style=display:none id=profile-activity-small-image-container>
<img class=circle id=profile-activity-small-image>
</div>
</div>
<div id=profile-activity-content>
<h3 id=profile-activity-name></h3>
<p id=profile-activity-details></p>
<p id=profile-activity-state></p>
<div id=profile-activity-bar-container style=display:none>
<div id=profile-activity-bar></div>
</div>
</div>
</a>
</div>
<h1>Hydrovolter</h1>
<p>
<img class=emoji src=assets/wave.svg alt="Wave emoji"> Hey there, I'm Hydro (Hydrovolter) and this is my portfolio!
</p>
<div id=social-desktop>
<a alt="Hydrovolter on GitHub" class="hover social-desktop-container" href=https://github.com/Hydrovolter rel="noopener noreferrer" style=background-color:#000 target=_blank>
<img class=social-desktop-icon src=assets/socials/github.svg alt="GitHub Logo">
</a>
<a alt="@hydrovolter on Discord" class="hover social-desktop-container" href=https://discord.com/users/958298682044866631 rel="noopener noreferrer" style="background-color:rgb(72 80 171)" target=_blank>
<img class=social-desktop-icon src=assets/socials/discord.svg alt="Discord Logo">
</a>
<a alt="Hydrovolter on YouTube" class="hover social-desktop-container" href=https://www.youtube.com/@hydrovolter rel="noopener noreferrer" style="background-color:rgb(155 42 42)" target=_blank>
<img class=social-desktop-icon src=assets/socials/youtube.svg alt="YouTube Logo">
</a>
<a alt="Hydrovolter on Twitch" class="hover social-desktop-container" href=https://twitch.tv/Hydrovolter rel="noopener noreferrer" style="background-color:rgb(112 60 191)" target=_blank>
<img class=social-desktop-icon src=assets/socials/twitch.svg alt="Twitch Logo">
</a>
<a alt="u/Hydrovolter on Reddit" class="hover social-desktop-container" href=https://reddit.com/u/Hydrovolter rel="noopener noreferrer" style="background-color:rgb(217 87 40)" target=_blank>
<img class=social-desktop-icon src=assets/socials/reddit.svg alt="Reddit Logo">
</a>
<a alt="Hydrovolter on Spotify" class="hover social-desktop-container" href=https://open.spotify.com/user/3kogdp4la37u7pd7rugded814 rel="noopener noreferrer" style="background-color:rgb(30 145 70)" target=_blank>
<img class=social-desktop-icon src=assets/socials/spotify.svg alt="Spotify Logo">
</a>
</div>
<p id=social-mobile>
<a alt="Hydrovolter on GitHub" class=social-mobile-container href=https://github.com/Hydrovolter>
<img class=emoji src=assets/socials/github.svg alt="GitHub Logo">
<b>Hydrovolter</b>
</a>
<a alt="@hydrovolter on Discord" class=social-mobile-container href=https://discord.com/users/958298682044866631>
<img class=emoji src=assets/socials/discord.svg alt="Discord Logo">
<b>@Hydrovolter</b>
</a>
<a alt="Hydrovolter on Youtube" class=social-mobile-container href=https://www.youtube.com/@hydrovolter>
<img class=emoji src=assets/socials/youtube.svg alt="YouTube Logo">
<b>Hydrovolter</b>
</a>
<a alt="Hydrovolter on Twitch" class=social-mobile-container href=https://twitch.tv/Hydrovolter>
<img class=emoji src=assets/socials/twitch.svg alt="Twitch Logo">
<b>Hydrovolter</b>
</a>
<a alt="u/Hydrovolter on Reddit" class=social-mobile-container href=https://reddit.com/u/Hydrovolter>
<img class=emoji src=assets/socials/reddit.svg alt="Reddit Logo">
<b>u/Hydrovolter</b>
</a>
<a alt="Hydrovolter on Spotify" class=social-mobile-container href=https://open.spotify.com/user/3kogdp4la37u7pd7rugded814>
<img class=emoji src=assets/socials/spotify.svg alt="Spotify Logo">
<b>Hydrovolter</b>
</a>
</div>
<p id=guide></p>
</div>
<div class=section style=top:-100%;left:0;visibility:hidden id=top>
<div class=container>
<h1>About Me</h1>
<a alt="Music" class="hover card" rel="noopener noreferrer" style=background-color:rgba(29,91,138,.25) target=_blank> <!-- Href Edit -->
<img class="circle card-icon" src=assets/projects/MusicIcon.png alt="Music Icon">
<div class=card-content>
<h3>Music</h3>
<p>
Plays Piano (1st instrument) and Oboe (2nd instrument). Grade 8 both instruments. Musical taste and can compose music.
</p>
</div>
</a>
<a alt="Coding" class="hover card" href=https://github.com/hydrovolter rel="noopener noreferrer" style=background-color:rgba(8,15,138,.25) target=_blank>
<img class="circle card-icon" src=assets/projects/CodeIcon.svg alt="Coding Icon">
<div class=card-content>
<h3>Coding</h3>
<p>
Beginner. Codes in HTML, Javascript, and Python. Been intrigued in Coding since 2019, and started developing around 2020. Codes a lot of Front-End web development, Bots (mainly Discord), and some small projects/useful utilities.
</p>
</div>
</a>
<a alt="Fast Facts" class="hover card" rel="noopener noreferrer" style=background-color:rgba(171,55,206,.25) target=_blank>
<img class="circle card-icon" src=assets/projects/MagnifyingGlass.png alt="Fast Facts">
<div class=card-content>
<h3>Fast Facts</h3>
<p> • From UK | 🇬🇧
<br>• Community Management
<br>• Tech Enthusiast
<br>• Musician
<br>• Loves to converse
</p>
</div>
</a>
</div>
</div>
<div class=section style=top:100%;left:0;visibility:hidden id=bottom>
<div class=container style="width:calc(100% - 20vmin);height:50%">
<h1>Contact</h1>
<input alt="Contact form email" class=form-input id=form-email maxlength=100 placeholder=Email>
<input alt="Contact form subject" class=form-input id=form-subject maxlength=100 placeholder=Subject>
<textarea alt="Contact form content" class=form-input id=form-content maxlength=1000 placeholder=Content></textarea>
<button alt="Submit contact form" id=form-submit>Submit!</button>
</div>
</div>
<div class=section style=left:-100%;top:0;visibility:hidden id=left>
<div class="container">
<h1>Blog</h1>
</div>
<div class=container>
<!--
<a alt="Blog Title Blog" class="hover card" href=/blog/example/ rel="noopener noreferrer" style=background-color:rgba(29,91,138,.25) target=_blank>
<img class="circle card-icon" src=/assets/blog/blog.png alt="Blog Icon">
<div class=card-content>
<h3>
Blog Title
</h3>
<p>Blog Description</p>
</div>
</a>
-->
<a alt="Typing Test User Guide Blog" class="hover card" href=/blog/typing/ rel="noopener noreferrer" style=background-color:rgba(101,99,255,.25) target=_blank>
<img class="circle card-icon" src=/assets/blog/typing/typingicon.png alt="Typing Test Blog Icon">
<div class=card-content>
<h3>
Typing Test User Guide
</h3>
<p>How to use my Typing Test website</p>
</div>
</a>
<a alt="What is a 404 Error Blog" class="hover card" href=/blog/404/ rel="noopener noreferrer" style=background-color:rgba(243,62,62,.25) target=_blank>
<img class="circle card-icon" src=/assets/blog/404/404Icon.png alt="404 Icon">
<div class=card-content>
<h3>
What is a 404 Error?
</h3>
<p>When you surf the web you see them, and wonder: "What really are they?"</p>
</div>
</a>
<a alt="Snowflake Deconstructor Guide Blog" class="hover card" href=/blog/snowflakeguide/ rel="noopener noreferrer" style=background-color:rgba(141,139,238,.25) target=_blank>
<img class="circle card-icon" src=/assets/snowflake/Snowflake.png alt="Snowflake Blog Icon">
<div class=card-content>
<h3>
Snowflake Deconstructor Guide
</h3>
<p>How to use my Discord Snowflake Deconstructor</p>
</div>
</a>
</div>
</div>
<div class=section style=left:100%;top:0;visibility:hidden id=right>
<div class=container>
<h1>Development</h1>
<a alt="AGM SYS" class="hover card" href=https://discord.gg/ysH9hcb6ZD rel="noopener noreferrer" style=background-color:rgba(94,173,238,.25) target=_blank>
<img class="circle card-icon" src=/agm/AGMSYS.png alt="AGM Logo">
<div class=card-content>
<h3>
AGM SYS
<img class=badge src=/assets/badges/javascript.svg alt="Made with JavaScript">
</h3>
<p>An all-in-one custom Discord bot for A Good Mix</p>
</div>
</a>
<a alt="AGM Stereo" class="hover card" href=https://discord.gg/ysH9hcb6ZD rel="noopener noreferrer" style=background-color:rgba(44,205,211,.25) target=_blank>
<img class="circle card-icon" src=/agm/AGMStereo.png alt="AGM Logo">
<div class=card-content>
<h3>
AGM Stereo
<img class=badge src=/assets/badges/javascript.svg alt="Made with JavaScript">
</h3>
<p>A fully fleshed out custom music Discord bot for A Good Mix</p>
</div>
</a>
<a alt="Typing Test" class="hover card" href=/typing/ rel="noopener noreferrer" style=background-color:rgba(101,99,255,.25) target=_blank>
<img class="circle card-icon" src=/assets/blog/typing/typingicon.png alt="Typing Test Logo">
<div class=card-content>
<h3>
Typing Test
<img class=badge src=/assets/badges/html.svg alt="Made with HTML">
<img class=badge src=/assets/badges/css.svg alt="Made with CSS">
<img class=badge src=/assets/badges/javascript.svg alt="Made with JavaScript">
</h3>
<p>A sleek, simple, modern typing website with customizable themes</p>
</div>
</a>
<a alt="Portfolio" class="hover card" href="" rel="noopener noreferrer" style=background-color:rgba(168,142,129,.25) target=_blank>
<img class="circle card-icon" src=/assets/HydroSimple512.png alt="Hydrovolter Icon">
<div class=card-content>
<h3>
My Portfolio <img class=badge src=/assets/badges/html.svg alt="Made with HTML">
<img class=badge src=/assets/badges/css.svg alt="Made with CSS">
<img class=badge src=/assets/badges/javascript.svg alt="Made with JavaScript">
</h3>
<p>
Hey, that's this!
</p>
</div>
</a>
<a alt="Blog" class="hover card" href="" rel="noopener noreferrer" style=background-color:rgb(90,191,231,.25) target=_blank>
<img class="circle card-icon" src=/assets/projects/BlogIcon.png alt="Blog Icon">
<div class=card-content>
<h3>
My Blog <img class=badge src=/assets/badges/html.svg alt="Made with HTML">
<img class=badge src=/assets/badges/css.svg alt="Made with CSS">
<img class=badge src=/assets/badges/javascript.svg alt="Made with JavaScript">
</h3>
<p>
A (work in progress) Blog for me to write random stuff about
</p>
</div>
</a>
<a alt="Snowflake Deconstructor" class="hover card" href=/snowflake/ rel="noopener noreferrer" style=background-color:rgba(0,238,255,.25) target=_blank>
<img class="circle card-icon" src=/assets/snowflake/Snowflake.png alt="Snowflake Deconstructor Icon">
<div class=card-content>
<h3>
Snowflake Deconstructor <img class=badge src=/assets/badges/html.svg alt="Made with HTML">
<img class=badge src=assets/badges/css.svg alt="Made with CSS">
<img class=badge src=/assets/badges/javascript.svg alt="Made with JavaScript">
</h3>
<p>
A website which deconstructs Discord Snowflakes
</p>
</div>
</a>
</div>
</div>