-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
303 lines (289 loc) · 12.5 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
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" 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" />
<meta name="author" content="Matthew Stead" />
<meta name="description" content="Freelance & Open Source Software Developer. I love all things coding" />
<meta name="keywords" content="freelance,programmer,developer,web dev,web developer," />
<meta property="og:title" content="matievisthekat ~ freelance developer" />
<meta property="og:url" content="https://matievisthekat.dev" />
<meta property="og:description" content="Freelance & Open Source Software Developer. I create all things coding. 4 years experience with dozens of different technologies" />
<meta property="og:image" content="https://matievisthekat.dev/img/preview.webp" />
<link rel="preload" href="fonts/raleway/cyrillic-ext.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/raleway/cyrillic.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/raleway/vietnamese.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/raleway/latin-ext.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="fonts/raleway/latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="icon" href="img/favicon.webp" type="image/webp" />
<link rel="stylesheet" href="css/prod/common/fonts.css" type="text/css" />
<link rel="stylesheet" href="css/prod/common/global.css" type="text/css" />
<link rel="stylesheet" href="css/prod/pages/index.css" type="text/css" />
<link rel="stylesheet" href="css/prod/components/age.css" type="text/css" />
<title>matievisthekat ~ freelance developer</title>
<script defer src="js/components/age.js"></script>
<script defer src="js/components/externalLink.js"></script>
<script defer src="js/pages/index.js"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"email": "matievisthekat@gmail.com",
"url": "https://matievisthekat.dev",
"image": "/img/me.webp",
"name": "Matthew Stead",
"givenName": "Matthew",
"additionalName": "Gareth",
"familyName": "Stead",
"gender": "Male",
"nationality": {
"@type": "https://schema.org/Country",
"name": "South Africa"
},
"jobTitle": "Freelancer",
"knowsAbout": [
"Next.js",
"React.js",
"Svelte",
"TypeScript",
"JavaScript",
"Ruby",
"Ruby on Rails",
"PostgreSQL",
"RESTful APIs"
],
"knowsLanguage": [
"English",
"Afrikaans",
"Svenska"
],
"owns": [
{
"@type": "https://schema.org/OwnershipInfo",
"name": "Spotify Playlist Generator",
"url": "https://spg.matievisthekat.dev",
"description": "Generate Spotify playlists based on audio features like valence, danceability, and energy"
}
]
}
</script>
</head>
<body>
<header>
<section id="intro">
<h1>matievisthekat</h1>
<p style="font-style: italic; font-weight: 400">
"The thing that excites me the most when I wake up every day is the fact that I can connect to people on the
other side of the world and build something completely unique and creative. Or maybe not unique or creative,
it makes no difference. I just enjoy making things with other people, that's where the real fun is at"
</p>
<p>
Hi there! My name is Matthew Stead, I'm a <span id="age">16</span> year old software developer currently
living in
<a
title="The South Africa wikipedia page"
href="https://en.wikipedia.org/wiki/South_Africa"
class="show-external"
>South Africa</a
>
</p>
<p>
I have been coding for ~5 years, although I have only been taking part in the open-source community for the
last ~3 years.
</p>
<p>
I am currently working on a couple different projects - all in different languages for some variety - and
engaging more in the open-source community!
</p>
<div>
<span style="display: block; margin-bottom: 5px">find me elsewhere!</span>
<div id="external-link-tooltips"></div>
<div id="external-links">
<a
data-title="GitHub"
href="https://github.com/matievisthekat"
rel="nofollow"
aria-label="My GitHub account"
>
<button tabindex="-1" id="github" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="44"
height="44"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#333"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
/>
</svg>
</button>
</a>
<a
data-title="LinkedIn"
href="https://linkedin.com/in/matievisthekat"
rel="nofollow"
aria-label="My LinkedIn account"
>
<button tabindex="-1" id="linkedin" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
class="linkedin-icon"
width="44"
height="44"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#0077b5"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="4" width="16" height="16" rx="2" />
<line x1="8" y1="11" x2="8" y2="16" />
<line x1="8" y1="8" x2="8" y2="8.01" />
<line x1="12" y1="16" x2="12" y2="11" />
<path d="M16 16v-3a2 2 0 0 0 -4 0" />
</svg>
</button>
</a>
<a
data-title="Hashnode"
href="https://hashnode.com/@matievisthekat"
rel="nofollow"
aria-label="My Hashnode account"
>
<button tabindex="-1" id="hashnode" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 337 337" fill="none">
<rect x="113" y="113" width="111" height="111" rx="55.5" fill="white" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M23.155 112.598c-30.873 30.874-30.873 80.93 0 111.804l89.443 89.443c30.874 30.873 80.93 30.873 111.804 0l89.443-89.443c30.873-30.874 30.873-80.93 0-111.804l-89.443-89.443c-30.874-30.873-80.93-30.873-111.804 0l-89.443 89.443zm184.476 95.033c21.612-21.611 21.612-56.651 0-78.262-21.611-21.612-56.651-21.612-78.262 0-21.612 21.611-21.612 56.651 0 78.262 21.611 21.612 56.651 21.612 78.262 0z"
fill="#2962FF"
/>
</svg>
</button>
</a>
<a
data-title="YouTube"
href="https://www.youtube.com/channel/UCMgFIRIW3WaAotLMqoFFTTw"
rel="nofollow"
aria-label="My YouTube account"
>
<button tabindex="-1" id="youtube" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="44"
height="44"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="#ff0000"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="3" y="5" width="18" height="14" rx="4" />
<path d="M10 9l5 3l-5 3z" />
</svg>
</button>
</a>
</div>
</div>
</section>
<section>
<div id="me">
<img
src="/img/me/450w.webp"
srcset="/img/me/225w.webp 225w, /img/me/450w.webp 450w, /img/me/550w.webp 550w"
sizes="(min-width: 600px): 550px, (max-width: 599px): 450px"
alt="my face"
/>
</div>
</section>
</header>
<main>
<section id="personal">
<h2>Get to know me a bit better</h2>
<div id="sections">
<section>
<div class="text">
<p>
I have a vast range of experience with many languages, but I primarily use TypeScript for
everyday coding. I used to use JavaScript and I have recently started coding with Rust and Ruby.
</p>
<p>I have created simple games with C# and the Unity framework.</p>
<p>
I tried React Native, but hated it with a passion. I moved onto Dart & Flutter and they reignited my
passion for mobile development.
</p>
<p>I dabbled in Minecraft (Spigot) plugins with Java, but it never really went anywhere.</p>
</div>
<div class="image">
<img
style="--shadow: var(--highlight)"
src="https://raw.githubusercontent.com/matievisthekat/matievisthekat/master/overall-languages.svg"
alt="My overall language stats"
/>
</div>
</section>
<section>
<div class="image">
<img
style="--shadow: var(--tertiary)"
src="/img/api/1000w.webp"
srcset="/img/api/1000w.webp 1000w, /img/api/900w.webp 900w, /img/api/600w.webp 600w"
sizes="(min-width: 900px): 1000px, (min-width: 400px): 900px, (max-width: 399px): 600px"
alt="Screenshot of code"
/>
</div>
<div class="text">
<p>
I have a lot of experience in RESTful APIs. For example:
<ul>
<li>
I have built my own APIs;
</li>
<li>
I have used the Spotify Web API to create a number of projects;
</li>
<li>
I have created GitHub actions and bots using the GitHub REST API
</li>
<li>
and I have way too much experience with the Discord API (creating bots).
</li>
</ul>
</p>
<p>
I am also a
<span class="feature">Discord Verified Bot Developer
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
style="transform: translateY(6px); margin-top: -24px"
>
<path
d="m21.58 11.4-4.28-7.39-.35-.6h-9.91l-.35.6-4.27 7.39-.35.6.35.6 4.27 7.39.35.6h9.92l.35-.6 4.28-7.39.35-.6zm-13.07-1.03-1.63 1.63 1.63 1.63v2.73l-4.36-4.36 4.37-4.37v2.74zm3.12 6.93-2.04-.63 3.1-9.98 2.04.64zm3.86-.93v-2.73l1.63-1.64-1.63-1.63v-2.74l4.36 4.37z"
fill="#3e70dd"
/>
</svg>
</span>.
The first actual thing I coded was a Discord bot. It was a good place to start because it taught me all about events, websockets, http requests, and a lot more.
</p>
</div>
</section>
</div>
</section>
</main>
</body>
</html>