-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (165 loc) · 9.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/images/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Hello, I'm Scooter Yu, a creative developer from Canada. With over 4 years of experience, I specialize in designing and developing dynamic websites with modern technologies like React JS, Next JS, Node JS, Mongo DB, Laravel & Three JS. I also create Android apps, do CAD moddeling and animations. What sets me apart is my ability to combine technical expertise with a keen eye for design, resulting in projects that are both beautiful and functional."
/>
<!-- Open Graph Tags -->
<meta
property="og:title"
content="Scooter Yu - Full Stack Software Developer"
/>
<meta
property="og:description"
content="Hello, I'm Scooter Yu, a creative developer from Canada. With over 4 years of experience, I specialize in designing and developing dynamic websites with modern technologies like React JS, Next JS, Node JS, Mongo DB, Laravel & Three JS. I also create Android apps, do CAD moddeling and animations. What sets me apart is my ability to combine technical expertise with a keen eye for design, resulting in projects that are both beautiful and functional."
/>
<meta property="og:image" content="/images/preview.jpg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="279" />
<link rel="stylesheet" href="./style.css" />
<title>Scooter Yu - Full Stack Developer</title>
</head>
<body class="light-theme">
<div class="experience">
<canvas class="experience-canvas"></canvas>
</div>
<div id="loader-wrapper">
<div class="loader"></div>
</div>
<header>
<a href="#" id="logo">
<img
src="/images/logo.png"
width="70"
height="70"
alt="Creative Works Logo"
/>
</a>
<nav class="main-nav">
<ul>
</ul>
</nav>
<nav class="side-nav">
<ul>
<li>
<a href="#" id="about-menu">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 96 960 960"
height="24"
width="24"
>
<path
d="M222 801q63-44 125-67.5T480 710q71 0 133.5 23.5T739 801q44-54 62.5-109T820 576q0-145-97.5-242.5T480 236q-145 0-242.5 97.5T140 576q0 61 19 116t63 109Zm257.814-195Q422 606 382.5 566.314q-39.5-39.686-39.5-97.5t39.686-97.314q39.686-39.5 97.5-39.5t97.314 39.686q39.5 39.686 39.5 97.5T577.314 566.5q-39.686 39.5-97.5 39.5Zm.654 370Q398 976 325 944.5q-73-31.5-127.5-86t-86-127.266Q80 658.468 80 575.734T111.5 420.5q31.5-72.5 86-127t127.266-86q72.766-31.5 155.5-31.5T635.5 207.5q72.5 31.5 127 86t86 127.032q31.5 72.532 31.5 155T848.5 731q-31.5 73-86 127.5t-127.032 86q-72.532 31.5-155 31.5ZM480 916q55 0 107.5-16T691 844q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480 916Zm0-370q34 0 55.5-21.5T557 469q0-34-21.5-55.5T480 392q-34 0-55.5 21.5T403 469q0 34 21.5 55.5T480 546Zm0-77Zm0 374Z"
/>
</svg>
<span>About Me</span>
</a>
</li>
<li>
<a href="#" id="projects-menu">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 96 960 960"
height="24"
width="24"
>
<path
d="M480 926 120 646l50-37 310 241 310-241 50 37-360 280Zm0-152L120 494l360-280 360 280-360 280Zm0-301Zm0 225 262-204-262-204-262 204 262 204Z"
/>
</svg>
<span>Projects</span>
</a>
</li>
<li class="contact-menu">
<a href="#" id="contact-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 96 960 960"
height="24"
width="24"
>
<path
d="M475 916q5 0 11.5-2.5T497 907l337-338q13-13 19.5-29.667Q860 522.667 860 506q0-17-6.5-34T834 442L654 262q-13-13-30-19.5t-34-6.5q-16.667 0-33.333 6.5Q540 249 527 262l-18 18 81 82q13 14 23 32.5t10 40.5q0 38-29.5 67T526 531q-25 0-41.5-7.5t-30.185-21.341L381 429 200 610q-5 5-7 10.526-2 5.527-2 11.842 0 12.632 8.5 21.132 8.5 8.5 21.167 8.5 6.333 0 11.833-3t9.5-7l138-138 42 42-137 137q-5 5-7 11t-2 12q0 12 9 21t21 9q6 0 11.5-2.5t9.5-6.5l138-138 42 42-137 137q-4 4-6.5 10.333Q361 794.667 361 801q0 12 9 21t21 9q6 0 11-2t10-7l138-138 42 42-138 138q-5 5-7 11t-2 11q0 14 8 22t22 8Zm.064 60Q442 976 416 951.5t-31-60.619Q351 886 328 863t-28-57q-34-5-56.5-28.5T216 721q-37-5-61-30t-24-60q0-17 6.724-34.049T157 567l224-224 110 110q8 8 17.333 12.5Q517.667 470 527 470q13 0 24.5-11.5t11.5-24.654q0-5.846-3.5-13.346T548 405L405 262q-13-13-30-19.5t-34-6.5q-16.667 0-33.333 6.5Q291 249 278.059 261.857L126 414q-14 14-19.5 29.5t-6.5 35q-1 19.5 7.5 38T128 550l-43 43q-20-22-32.5-53T40 477q0-30 11.5-57.5T84 371l151-151q22-22 49.793-32.5 27.794-10.5 57-10.5Q371 177 398.5 187.5T448 220l18 18 18-18q22-22 49.793-32.5 27.794-10.5 57-10.5Q620 177 647.5 187.5T697 220l179 179q22 22 33 50.033t11 57Q920 535 909 562.5T876 612L539 949q-13 13-29.532 20t-34.404 7ZM377 430Z"
/>
</svg>
<span>Get In Touch</span>
</a>
<div class="contact-menu__dropdown">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 96 960 960"
width="40"
height="40"
>
<path
d="m480 136 371 222q17 9 23 24.5t6 30.5v463q0 24-18 42t-42 18H140q-24 0-42-18t-18-42V413q0-15 6.5-30.5T109 358l371-222Zm0 466 336-197-336-202-336 202 336 197Zm0 67L140 469v407h680V469L480 669Zm0 207h340-680 340Z"
/>
</svg>
<h4>Send me an Email at</h4>
<a href="mailto:[email protected]" id="contact-email">
<span>[email protected]</span>
<!-- <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
width="20"
height="20"
>
<path
d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"
/>
</svg> -->
</a>
<ul class="social-icons">
</ul>
</div>
</li>
</ul>
</nav>
<!-- <a href="#" class="play-game-link">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 96 960 960"
>
<path
d="m383 746 267-170-267-170v340Zm97 230q-82 0-155-31.5t-127.5-86Q143 804 111.5 731T80 576q0-83 31.5-156t86-127Q252 239 325 207.5T480 176q83 0 156 31.5T763 293q54 54 85.5 127T880 576q0 82-31.5 155T763 858.5q-54 54.5-127 86T480 976Zm0-60q142 0 241-99.5T820 576q0-142-99-241t-241-99q-141 0-240.5 99T140 576q0 141 99.5 240.5T480 916Zm0-340Z"
/>
</svg>
<span>Play a Game</span>
</a> -->
</header>
<main>
<a href="#" id="close-btn" style="display: none">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 96 960 960"
width="48"
height="48"
>
<path
d="m330 768 150-150 150 150 42-42-150-150 150-150-42-42-150 150-150-150-42 42 150 150-150 150 42 42Zm150 208q-82 0-155-31.5t-127.5-86Q143 804 111.5 731T80 576q0-83 31.5-156t86-127Q252 239 325 207.5T480 176q83 0 156 31.5T763 293q54 54 85.5 127T880 576q0 82-31.5 155T763 858.5q-54 54.5-127 86T480 976Zm0-60q142 0 241-99.5T820 576q0-142-99-241t-241-99q-141 0-240.5 99T140 576q0 141 99.5 240.5T480 916Zm0-340Z"
/>
</svg>
</a>
<section class="section section--about">
<h1>Scooter Yu</h1>
<p>
Hello, I'm Scooter Yu, a creative developer from Canada. With over 4 years of experience, I specialize in designing and developing dynamic websites with modern technologies like React JS, Next JS, Node JS, Mongo DB, Laravel & Three JS. I also create Android apps, do CAD moddeling and animations. What sets me apart is my ability to combine technical expertise with a keen eye for design, resulting in projects that are both beautiful and functional.
</p>
<p>
Additionally I also create content about programming, web development
and animations. Reach out if you have any
questions or collaboration ideas!
</p>
</section>
</main>
<footer>2024 portfolio - designed & developed by Scooter Yu</footer>
<script type="module" src="/main.js"></script>
</body>
</html>