-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
249 lines (215 loc) · 16.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
<!--¯\_(ツ)_/¯ Why are you looking at my HTML?-->
<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8">
<meta name="description" content="Liáng4793's Repository: Redefine the world with imagination. Personal website showcasing my project progress and documentation, sharing my life and thoughts.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
<meta name="keywords" content="Liáng4793, Liang4793, liang4793, repository, imagination, project, design, software, development, C-4793">
<meta name="author" content="Liáng4793">
<meta property="og:url" content="https://liang4793.github.io">
<meta property="og:type" content="website">
<meta property="og:title" content="Liáng4793's Repository">
<meta property="og:description" content="Liáng4793's Repository: Redefine the world with imagination. Personal website showcasing my project progress and documentation, sharing my life and thoughts.">
<meta property="og:image" content="https://s2.loli.net/2024/07/28/lMNwgLaXH8Zjsxp.png">
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="liang4793.github.io">
<meta property="twitter:url" content="https://liang4793.github.io">
<meta name="twitter:title" content="Liáng4793's Repository">
<meta name="twitter:description" content="Liáng4793's Repository: Redefine the world with imagination. Personal website showcasing my project progress and documentation, sharing my life and thoughts.">
<meta name="twitter:image" content="https://s2.loli.net/2024/07/28/lMNwgLaXH8Zjsxp.png">
<meta name="ahrefs-site-verification" content="f06ca5b90d08bbcaa59aef6908f3e63cf4a0c508bda158ef9a63c9b427ee28f5">
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="shortcut icon" href="image/logoB.svg">
<link href="https://fonts.googlefonts.cn/css?family=Poppins" rel="stylesheet">
<title>Liáng4793's Repository</title>
<script defer src="https://cloud.umami.is/script.js" data-website-id="7d0ad76c-fd4d-471d-bded-46aa23e7aad7"></script>
</head>
<body style="background-color:#080808; width:100%; height:100%; margin:auto; cursor: crosshair;">
<div class="shade" id="shade1">
<canvas id="transitionCanvas" width="100%" height="100%"></canvas>
<div id="loadText">
<span id="loadText1">0% loaded</span>
<span id="loadText2">Redefining the world with imagination</span>
</div>
<div class="welcomeBox" id="JSneeded">
<img src="image/JSneeded.svg" alt="JSneeded" width="100%" style="margin-bottom: 1rem;">
<div id="shade1Text">[... JS disabled ...]</div>
</div>
<div class="welcomeBox" id="mainLogo" style="display: none; width: 30rem;">
<img src="image/mainLogo.svg" alt="mainLogo" width="100%" style="margin-bottom: 1rem;">
<div id="shade1Text">[... Transitioning to dimension C-4793 ...]</div>
</div>
</div>
<div id="container">
<div class="box" id="main">
<img class="textimg" src="image/iconX.svg" alt="XXX">
Welcome to Liáng4793's Repository <span class="hoverable" id="location">[located in Shanghai, dimension C-4793]</span>.</br>
<img class="textimg" src="image/iconA.svg" alt="AAA">
Hi there, I'm <span class="hoverable" id="me">[@Liáng4793]</span>, student, interested in product design, software development and network security. I have some experience with Python, JavaScript, HTML and CSS. Also, here's <span class="hoverable" id="furry">[a bit more about me]</span>.</br>
<img class="textimg" src="image/iconA.svg" alt="AAA">
<span class="hoverable2" id="repo">[Liáng4793's Repository]</span> was founded to collect my creative ideas, document the process of turning them into reality, and show the projects I have completed. Redefine the world with imagination!</br>
<img class="textimg" src="image/iconA2.svg" alt="AAA"> Click on the words in parentheses to explore further or scroll down to view <span class="hoverable" id="scroll">[recent projects]</span>.
</div>
<div class="box" id="projects">
<span class="title"><img class="textimg" src="image/iconX.svg" alt="XXX"> Projects</span></br>
<div class="Pbox" id="P3box">
<a href="docs/P003-doc.html" target="_blank"><span class="title hoverable">P003 Camera-brake [finished]</span></a></br>
A windows application for camera privacy protection. Quickly check, report and block camera service from opening.</br>
[software, mainly wrote with Python] [open source]</br>
<div class="PimgBox" id="P3imgBox">
<img class="Pimg" id="P3img" src="image\project\P003-1.webp" alt="P003-1">
<img class="Pimg" id="P3img" src="image\project\P003-2.webp" alt="P003-2">
<img class="Pimg" id="P3img" src="image\project\P003-3.webp" alt="P003-3">
</div>
</div>
<div class="Pbox" id="P2box">
<a href="docs/P002-doc.html" target="_blank"><span class="title hoverable">P002 My マンゴー(Mango) [ongoing]</span></a></br>
AI Partner(GF?), a cute lop rabbit living in dimension C-4793, using Nanachi's voice(sooo cute), can accompany me and provide professional assistance when necessary. Build with heart.</br>
[software, mainly wrote with Python]</br>
<div class="PimgBox" id="P2imgBox">
<img class="Pimg" id="P2img" src="image\project\P002-1.webp" alt="P002-1">
</div>
</div>
<div class="Pbox" id="P1box">
<a href="docs/P001-doc.html" target="_blank"><span class="title hoverable">P001 Liang4793.github.io [continuously updated]</span></a></br>
Liáng4793's Repository (main website). Redefine the world with imagination!</br>
[software, mainly wrote with JavaScript, HTML and CSS] [open source]</br>
<div class="PimgBox" id="P1imgBox">
<img class="Pimg" id="P1img" src="image\project\P001-1.svg" alt="P001-1">
<img class="Pimg" id="P1img" src="image\project\P001-2.svg" alt="P001-2">
</div>
</div>
</div>
<div class="box" id="moments">
<span class="title"><img class="textimg" src="image/iconX.svg" alt="XXX"> Moments</span></br>
<div class="Mbox" id="M2box">
<div class="MtextBox">
<a href="docs/M002-doc.html" target="_blank"><span class="title hoverable">M002 CarrotSoda's transparent card</span></a></br>
On 2024/11/30, I completed the design, processing, and invited friends to evaluate CarrotSoda's transparent card(They love it!). Plan to send out CarrotSoda's transparent card in offline activities.
<span style="color:rgb(250, 100, 0)">Please do not steal my design. 请不要盗用我的设计。</span></br>
[peripheral] [3 photos]</br>
</div>
<div class="MimgBox">
<img class="Mimg Mimg1" src="image\moments\M002-1.avif" alt="M002-1">
<img class="Mimg Mimg2" src="image\moments\M002-2.avif" alt="M002-2">
<img class="Mimg Mimg3" src="image\moments\M002-3.avif" alt="M002-3">
</div>
</div>
<div class="Mbox" id="M1box">
<div class="MtextBox">
<a href="docs/M001-doc.html" target="_blank"><span class="title hoverable">M001 A day at SFF</span></a></br>
On 2024/8/4, I attended SFF(Super Furry Fusion) and had so much fun(simultaneously emptied my wallet). Here are some photos I wanna share.
<span style="color:rgb(250, 100, 0)">I'm very sorry if there is any infringement. You can contact me to delete it. 如有侵权非常抱歉，可以与我联系删除。</span></br>
[activity] [5 photos]</br>
</div>
<div class="MimgBox">
<img class="Mimg Mimg1" src="image\moments\M001-4.avif" alt="M001-4">
<img class="Mimg Mimg2" src="image\moments\M001-1.avif" alt="M001-1">
<img class="Mimg Mimg3" src="image\moments\M001-3.avif" alt="M001-3">
</div>
</div>
<div>Stay informed with me on <a href="https://twitter.com/liang4793" target="_blank"><span class="hoverable">X(Twitter)</span></a>!</div>
</div>
<div class="box" id="footer">
©Liáng4793, <script>document.write(new Date().getFullYear());</script></br>
<img class="textimg" src="image/iconL.svg" alt="icon"><img class="textimg" style="padding-left: 1.5rem; padding-right: 1.5rem;" src="image/textL.svg" alt="icon text"><img class="textimg" src="image/iconL.svg" alt="icon">
</div>
</div>
<div class="shade" id="shade2">
<div class="shadeBox">
<span class="title hoverable" id="quit"><img class="textimg" src="image/iconX.svg" alt="XXX"> Back to main</span>
<div class="shadeBox2" id="locationBox">
<div id="map">
<img style="position:relative; top:0rem; left:0rem; width:100%;" src="image/location/map.svg" alt="map">
<img style="position:absolute; top:70%; left:5%; width:20%; animation: rotate 10s linear infinite;" src="image/location/lock.svg" alt="lock">
</div>
<div id="locationInfo">
<div id="axis"><span id="LL">121°E</br>30°N</span><span id="SS">Earth, Solar System, Oort Cloud, Local Fluff, C-4793.</span><span id="timeTitle">Local time: <span id="localTime"></span></span></div>
</div>
</div>
<div class="shadeBox2" id="meBox">
<div id="mePicBox">
<div class="mePicBox2" id="mePic1">
<img class="mePic" src="image/me/self1.avif" alt="self1">
<div class="mePicText">2024.2.11 - Me at the PSA #1</div>
</div>
<div class="mePicBox2" id="mePic2">
<img class="mePic" src="image/me/self2.avif" alt="self2">
<div class="mePicText">2024.2.11 - Me at the PSA #2</div>
</div>
<div class="mePicBox2" id="mePic3">
<img class="mePic" src="image/me/self3.avif" alt="self3">
<div class="mePicText">2024.2.11 - Me at the PSA #3</div>
</div>
<div class="mePicBox2" id="mePic4">
<img class="mePic" src="image/me/self4.avif" alt="self4">
<div class="mePicText">2024.2.11 - Me at the PSA #4</div>
</div>
<div id="lShadow"></div>
<div id="rShadow"></div>
<img id="toLeft" src="image/me/toLeft.svg" alt="toLeft">
<img id="toRight" src="image/me/toRight.svg" alt="toRight">
<div class="label" id="label1">AFTERNOON</br>CITY</br>TOUR</div>
<div class="label" id="label2">FAN OF</br>CONTEMPORARY</br>ART</div>
<div class="label" id="label3">A</br>CASUAL</br>DAYDREAMER</div>
<div class="label" id="label4">IMAGINEER</br>OF</br>THE NEW ERA</div>
</div>
<div id="contactTitle"><span style="color: rgb(250, 100, 0);">Chat</span> with me; <span style="color: rgb(250, 100, 0);">Play</span> with me;</br><span style="color: rgb(250, 100, 0);">Work</span> with me at anytime, anywhere!</div>
<div id="contactBox">
<a href="https://twitter.com/liang4793" target="_blank"><span class="hoverable"><img class="textimg" src="image\me\X.svg" alt="X"> X(Twitter)</span></a>
<a href="https://github.com/liang4793" target="_blank"><span class="hoverable"><img class="textimg" src="image\me\github.svg" alt="github"> Github</span></a>
<a href="mailto:liang4793@foxmail.com"><span class="hoverable"><img class="textimg" src="image\me\mail.svg" alt="mail"> E-mail</span></a>
<span class="hoverable"><img class="textimg" src="image\me\wechat.svg" alt="wechat"> WeChat</span>
</div>
<div id="musicTitle"><img class="textimg" src="image/iconA2.svg" alt="AAA"> My playlist</div>
<div id="musicShare">
<div style="position: absolute; width: 100%; height: 460px; border-radius: 1rem; font-size: 1rem; text-align: center; line-height: 460px; color:white; background-color: #535353; z-index: -1;">Waiting for Spotify to connect</div>
<iframe style="border-radius:1rem" src="https://open.spotify.com/embed/playlist/2utWdJK1NXBrTvBVzPZimu?utm_source=generator" width="100%" height="460" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
<div id="NGLTitle"><img class="textimg" src="image/iconA2.svg" alt="AAA"> Anonymous Q&A</div>
<a href="https://ngl.link/liang4793" target="_blank"><div id="NGLBox">
<img style="position: absolute; width: 25rem; animation: rotate 10s linear infinite;" src="image/me/NGLT.svg" alt="NGLT">
<img style="position: absolute; width: 10rem;" src="image/me/NGL.avif" alt="NGL">
</div></a>
</div>
<div class="shadeBox2" id="furryBox">
<div class="furryTitle" id="FT1"><span style="color: rgb(250, 100, 0);">Did you know?</span></br>@Liáng4793, <span style="color: rgb(250, 100, 0);">AKA </span>@CarrotSoda胡萝卜苏打!</div>
<div class="furryTitle" id="FT2" style="top: 2.5rem"><img class="textimg" src="image/iconA2.svg" alt="AAA"> Design draft</div>
<img class="furryAll" id="furryAll1" src="image/more/furryAll1.png" alt="furryAll1">
<img class="furryAll" id="furryAll2" src="image/more/furryAll2.png" alt="furryAll2">
<div class="furryTitle" id="FT3" style="top: 6.5rem"><img class="textimg" src="image/info.svg" alt="info"> The <span style="color: rgb(250, 100, 0);">copyright</span> for this design has been registered!</div>
<div class="furryTitle" id="FT4" style="top: 9.5rem"><img class="textimg" src="image/iconA2.svg" alt="AAA"> Other drawings</div>
<div id="furryPicBox"></div>
</div>
<div class="shadeBox2" id="repoBox">
<div class="repoTitle" id="RT1"><span style="color: rgb(250, 100, 0);">Redefine(</span>the world<span style="color: rgb(250, 100, 0);">)</span> with <span style="color: rgb(250, 100, 0);">imagination!</span></div>
<div id="repoLogoBox">
<div class="repoTitle" id="RT2" style="position: absolute; top: 0rem; left: 0rem; z-index: 2;"><img class="textimg" src="image/iconA2.svg" alt="AAA"> Logo design</div>
<img id="repoPic1" style="position: absolute; width: 100%; max-width: 60rem;" src="image/repo/logoDesign.svg" alt="logoDesign">
<img id="repoPic2" style="position: absolute; top: 0.8rem; right: 0rem; width: 1.6rem; z-index: 2;" src="image/repo/logoCode1.svg" alt="logoCode1">
<img id="repoPic3" style="position: absolute; bottom: 0rem; right: 0rem; width: 1.6rem; z-index: 2;" src="image/repo/logoCode2.svg" alt="logoCode2">
<img id="repoPic4" style="position: absolute; bottom: 0rem; height: 3rem; z-index: 2;" src="image/repo/smallLogos.svg" alt="smallLogos">
<img class="textimg" id="repoPic5" style="position: absolute; bottom: 0rem; left: 0rem; z-index: 2;" src="image/info.svg" alt="info" >
</div>
<div class="repoContent" id="RC1" style="top: 2.5rem">
The logo of Liáng4793's Repository(Liáng's Repo) is created by performing an exclude boolean operation on a solid rounded rectangle and a solid circle, with two lines of aligned text next to it. This design conveys coexistence, creativity, technology, and coordination.</br>
<span style="color: white;">Simple enough for labeling and memorization, yet complex enough for recognition and uniqueness.</span>
</div>
<div id="repoSkillBox">
<div class="repoTitle" id="RT3" style="position: absolute; top: 0rem; left: 0rem; z-index: 2;"><img class="textimg" src="image/iconA2.svg" alt="AAA"> Skills</div>
<img id="repoPic6" style="position: absolute; width: 100%; max-width: 60rem;" src="image/repo/skills.svg" alt="skills">
<img id="repoPic7" style="position: absolute; bottom: 0rem; right: 0rem; width: 1.6rem; z-index: 2;" src="image/repo/skillCode.svg" alt="skillCode">
<img class="textimg" id="repoPic8" style="position: absolute; bottom: 0rem; left: 0rem; z-index: 2;" src="image/info.svg" alt="info" >
</div>
<div class="repoContent" id="RC2" style="top: 5rem">
Liáng4793's Repository(Liáng's Repo) is continually evolving into a studio that integrates design with software and hardware development. With the goal of creating unique and practical software and hardware, Liáng's Repo consistently learns advanced technologies and combines imagination with practical work.</br>
<span style="color: white;">Liáng4793's Repository(Liáng's Repo) will always remain a learner.</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>