-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
204 lines (201 loc) · 8.65 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
<!-- ---
permalink: /
--- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Anthony Huang's personal website.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Anthony Huang</title>
<!-- Embeds -->
<meta content="Anthony Huang" property="og:title" />
<meta content="Anthony Huang's personal website." property="og:description" />
<meta content="https://anthonyhuang.net" property="og:url" />
<meta content="/assets/favicons/android-chrome-512x512.png" property="og:image" />
<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/favicons/site.webmanifest">
<link rel="shortcut icon" href="/assets/favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Anthony Huang's Website">
<meta name="application-name" content="Anthony Huang's Website">
<!-- Stylesheet -->
<link rel="stylesheet" href="/src/css/main.css">
<link rel="stylesheet" href="/src/css/aboutme.css">
<link rel="stylesheet" href="/src/css/projects.css">
<link rel="stylesheet" href="/src/css/music.css">
<script src="https://kit.fontawesome.com/ebba275678.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- <img src="/assets/rb.png" style="z-index: 9999; position: absolute; height: 100%; opacity: 70%;"> -->
<!-- <img src="/assets/hyuru.jpeg" style="z-index: 0; position: absolute; height: 100%; opacity: 100%; top: 0;"> -->
<div id="bg"></div>
<div id="dynamicIsland">
<div id="island-main">
<div id="island-main-left">
<img src=""/>
<div id="songInfo">
<div id="songName">Song Name</div>
<div id="artistName">Artist Name</div>
</div>
</div>
<div id="audioPreview">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
<div id="timeline">
<span id="currentTime">0:00</span>
<div class="progress-bar">
<div class="progress"></div>
</div>
<span id="timeLeft">0:00</span>
</div>
<div id="mediaControls">
<svg id="prevButton" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5">
<path d="M21.0441 5.70436C21.4402 5.41246 22 5.69531 22 6.1874V17.8126C22 18.3047 21.4402 18.5875 21.0441 18.2956L13.1555 12.483C12.8301 12.2432 12.8301 11.7568 13.1555 11.517L21.0441 5.70436Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.0441 5.70436C10.4402 5.41246 11 5.69531 11 6.1874V17.8126C11 18.3047 10.4402 18.5875 10.0441 18.2956L2.15555 12.483C1.8301 12.2432 1.8301 11.7568 2.15555 11.517L10.0441 5.70436Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<i class="fa fa-pause"></i>
<svg id="nextButton" width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5">
<path d="M2.95592 5.70436C2.55976 5.41246 2 5.69531 2 6.1874V17.8126C2 18.3047 2.55976 18.5875 2.95592 18.2956L10.8445 12.483C11.1699 12.2432 11.1699 11.7568 10.8445 11.517L2.95592 5.70436Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M13.9559 5.70436C13.5598 5.41246 13 5.69531 13 6.1874V17.8126C13 18.3047 13.5598 18.5875 13.9559 18.2956L21.8445 12.483C22.1699 12.2432 22.1699 11.7568 21.8445 11.517L13.9559 5.70436Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
<main>
<h1 id="name">Anthony Huang</h1>
<div>
<div>
<img src="/assets/icons/aboutme.webp" alt="App Store Icon, About Me" onclick="appOpen(1)">
<p>About Me</p>
</div>
<div>
<img src="/assets/icons/projects.webp" alt="Files Icon, Projects" onclick="appOpen(2)">
<p>Projects</p>
</div>
<div>
<a href="https://blog.anthonyhuang.net">
<img src="/assets/icons/blog.webp" alt="Journal Icon, Blog">
</a>
<p>Blog</p>
</div>
<div>
<img src="/assets/icons/contact.webp" alt="Contacts Icon, Contact" onclick="appOpen(3)">
<p>Contact</p>
</div>
<!-- <div>
<img src="/assets/icons/music.webp" alt="Music Icon, Music" onclick="appOpen(4)">
<p>Music</p>
</div> -->
</div>
</main>
<div id="inApp">
<!-- About Me -->
<div class="menu aboutme">
<div class="menu appView">
<div onclick="hideAppView()" class="backButton">
<i class="fa-solid fa-chevron-left"></i>
<p>Back</p>
</div>
<header>
<img src="">
<div>
<h1>Title</h1>
<h2>Subtitle</h2>
<div>
<p class="appStore-openButton">Open</p>
</div>
</div>
</header>
<div class="appStore-appView-about">
<p>Description</p>
</div>
</div>
<header>
<div onclick="returnHome()">
<i class="fa-solid fa-chevron-left"></i>
<p>Home</p>
</div>
<h1>About Me!</h1>
</header>
<!-- <img src="/assets/o.png" style="z-index: 9999; position: absolute; width: 100%; opacity: 70%; top: -48px;"> -->
<div id="apps"><!-- App cards generated by JavaScript (aboutme.js) --></div>
</div>
<!-- Projects -->
<div class="menu projects">
<header>
<div onclick="returnHome()">
<i class="fa-solid fa-chevron-left"></i>
<p>Home</p>
</div>
<h1>Featured Projects</h1>
</header>
<main><!-- App cards generated by JavaScript (projects.js) --></main>
</div>
<!-- Contacts -->
<div class="menu contacts">
<div id="contactCard">
<i class="fa-solid fa-chevron-left" onclick="returnHome()"></i>
<div>
<img src="/assets/eleFHDant.png" />
<p>HE, HIM, HIS</p>
<h1>Anthony Huang</h1>
</div>
</div>
<div id="contactInfo">
<a class="infoBox" href="mailto:[email protected]">
<h2><i class="fa-solid fa-envelope"></i> email</h2>
<p>[email protected]</p>
</a>
<a class="infoBox" href="https://discord.com/users/628672513345454122" target="_blank">
<h2><i class="fa-brands fa-discord"></i> Discord</h2>
<p>@fhdhgngn</p>
</a>
<div id="infoCluster">
<a class="infoBox" href="https://github.com/anthonyhuang07" target="_blank">
<h2><i class="fa-brands fa-github"></i> GitHub</h2>
<p>anthonyhuang07</p>
</a>
<a class="infoBox" href="https://www.linkedin.com/in/anthonyhuang07/" target="_blank">
<h2><i class="fa-brands fa-linkedin"></i> LinkedIn</h2>
<p>anthonyhuang07</p>
</a>
</div>
<!-- <div id="infoCluster">
<a class="infoBox" href="https://www.youtube.com/@fhdhgngn" target="_blank">
<h2><i class="fa-brands fa-youtube"></i> YouTube</h2>
<p>FHDHGNGN</p>
</a>
<a class="infoBox" href="https://www.reddit.com/user/FyreBoyeYT" target="_blank">
<h2><i class="fa-brands fa-reddit"></i> Reddit</h2>
<p>u/FyreBoyeYT</p>
</a>
</div> -->
</div>
</div>
<!-- Music -->
<!-- <div class="menu music">
<img src="/assets/music.png" style="z-index: 9999; position: absolute; height: 100%; opacity: 70%;">
<img src="/assets/kill.png" style="z-index: 9999; position: absolute; height: 100%; opacity: 70%; top: 165px;">
<header>
<div onclick="returnHome()">
<i class="fa-solid fa-chevron-left"></i>
</div>
<h1>Anthony Huang</h1>
</header>
<div class="music-nowPlaying"></div>
</div> -->
</div>
<script src="/src/js/index.js"></script>
<script src="/src/js/aboutme.js"></script>
<script src="/src/js/projects.js"></script>
<script src="/src/js/music.js"></script>
</body>
</html>