-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
216 lines (175 loc) · 15.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-security-policy" content="">
<link href="./_app/immutable/assets/_layout.fe862241.css" rel="stylesheet">
<link href="./_app/immutable/assets/MaterialLink.c9f71634.css" rel="stylesheet">
<link href="./_app/immutable/assets/_page.4faabf0a.css" rel="stylesheet">
<link href="./_app/immutable/assets/GithubIcon.c9b6492b.css" rel="stylesheet">
<link rel="modulepreload" href="./_app/immutable/entry/start.ddce2ba6.js">
<link rel="modulepreload" href="./_app/immutable/chunks/index.b2df65b0.js">
<link rel="modulepreload" href="./_app/immutable/chunks/singletons.b283d1f2.js">
<link rel="modulepreload" href="./_app/immutable/entry/app.76e97dd1.js">
<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.78433a50.js">
<link rel="modulepreload" href="./_app/immutable/chunks/navigation.0a12c042.js">
<link rel="modulepreload" href="./_app/immutable/chunks/stores.29243ed0.js">
<link rel="modulepreload" href="./_app/immutable/chunks/MaterialLink.c55d2d44.js">
<link rel="modulepreload" href="./_app/immutable/entry/_layout.ts.de5a3f7b.js">
<link rel="modulepreload" href="./_app/immutable/chunks/_layout.60fe7920.js">
<link rel="modulepreload" href="./_app/immutable/entry/_page.svelte.066802c9.js">
<link rel="modulepreload" href="./_app/immutable/chunks/GithubIcon.d03fee54.js"><title>Zhouxuan's Website</title><!-- HEAD_svelte-bnaon_START --><meta name="description" content="Personal website of Cai Zhouxuan"><!-- HEAD_svelte-bnaon_END --><!-- HEAD_svelte-bnaon_START --><meta name="description" content="Personal website of Cai Zhouxuan"><!-- HEAD_svelte-bnaon_END -->
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">
<div class="app">
<main class="svelte-5s6lqx">
<div data-key="/" class="svelte-1xfdpux">
<div class="bg svelte-dli363" style="--opacity: 0.15;"></div>
<section id="main" class="svelte-1ipchou"><div class="graphic svelte-1ipchou" style="--angle:-0.2rad; --height:-19.072255756325877px; --rowHeight:-10.536127878162938px; --imgGap:2px; --wrapperHeight:0px; --wrapperWidth:0px; --rowTranslate:0px;"><div class="wrapper svelte-1ipchou"><div class="column svelte-1ipchou"><div class="row svelte-1ipchou"><div class="row-wrapper svelte-1ipchou"><div class="image svelte-21cbwn fillHeight" style="--aspectRatio: 135 / 256;"><img src="/images/main/screenshot2.png" alt="Screenshot 2" loading="lazy" class="svelte-21cbwn">
</div>
<div class="image svelte-21cbwn fillHeight" style="--aspectRatio: 16 / 9;"><img src="/images/main/screenshot1.png" alt="Screenshot 1" class="svelte-21cbwn">
</div>
<div class="image svelte-21cbwn fillHeight" style="--aspectRatio: 135 / 256;"><img src="/images/main/screenshot2.png" alt="Screenshot 2" class="svelte-21cbwn">
</div></div></div>
<div class="row svelte-1ipchou"><div class="row-wrapper svelte-1ipchou"><div class="image svelte-21cbwn fillHeight" style="--aspectRatio: 135 / 256;"><img src="/images/main/screenshot3.png" alt="Screenshot 3" class="svelte-21cbwn">
</div>
<div class="image svelte-21cbwn fillHeight" style="--aspectRatio: 135 / 256;"><img src="/images/main/screenshot4.png" alt="Screenshot 4" class="svelte-21cbwn">
</div>
<div class="image svelte-21cbwn fillHeight" style="--aspectRatio: 135 / 256;"><img src="/images/main/screenshot5.png" alt="Screenshot 5" class="svelte-21cbwn">
</div>
<div class="image svelte-21cbwn fillHeight" style="--aspectRatio: 135 / 256;"><img src="/images/main/screenshot6.png" alt="Screenshot 6" class="svelte-21cbwn">
</div>
<div class="image svelte-21cbwn fillHeight" style="--aspectRatio: 135 / 256;"><img src="/images/main/screenshot3.png" alt="Screenshot 3" loading="lazy" class="svelte-21cbwn">
</div></div></div></div></div></div>
<div class="content svelte-1ipchou"><div class="wrapper svelte-1ipchou"><h1 class="svelte-1ipchou">hello</h1>
<h2 class="svelte-1ipchou">I'm Cai Zhouxuan</h2>
<p>I create apps and websites</p>
<div class="frontpage-links"><a href="#about" class="svelte-1bavll">About Me
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 14.95q-.2 0-.375-.063-.175-.062-.325-.212L6.675 10.05q-.275-.275-.262-.688.012-.412.287-.687.275-.275.7-.275.425 0 .7.275l3.9 3.9 3.925-3.925q.275-.275.688-.263.412.013.687.288.275.275.275.7 0 .425-.275.7l-4.6 4.6q-.15.15-.325.212-.175.063-.375.063Z"></path></svg>
<div class="tab-outline svelte-1bavll">
<div class="resize-trigger svelte-1bavll"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a></div></div></div>
</section>
<section id="about"><div class="wrapper svelte-16eq27p"><div class="avatar-image svelte-16eq27p"><div class="image svelte-21cbwn fillHeight fillWidth" style="--aspectRatio: 1;"><img src="/images/me.jpg" alt="Photo of Me" loading="lazy" class="svelte-21cbwn">
</div></div>
<div class="text"><h2 class="svelte-16eq27p">About Me</h2>
<p>I'm an app and web developer, with experience in HTML, CSS & JavaScript. I've made a couple
of apps with Flutter, and recently delved into JS frameworks like vueJS & Svelte. I'm eager
to branch out of my comfort zone, and learn more in other areas of programming!
</p>
<div class="frontpage-links"><a href="#projects" class="svelte-1bavll">My Projects
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 14.95q-.2 0-.375-.063-.175-.062-.325-.212L6.675 10.05q-.275-.275-.262-.688.012-.412.287-.687.275-.275.7-.275.425 0 .7.275l3.9 3.9 3.925-3.925q.275-.275.688-.263.412.013.687.288.275.275.275.7 0 .425-.275.7l-4.6 4.6q-.15.15-.325.212-.175.063-.375.063Z"></path></svg>
<div class="tab-outline svelte-1bavll">
<div class="resize-trigger svelte-1bavll"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a></div></div></div>
</section>
<section id="projects" class="svelte-263rlc"><div class="wrapper svelte-263rlc"><h2 class="svelte-263rlc">My Projects</h2>
<div><div class="grid svelte-263rlc"><a href="/projects/hc-garden" class="svelte-eoqht"><div class="link-wrapper svelte-eoqht"><div class="img-wrapper"><div class="image svelte-21cbwn" style="--aspectRatio: 4/3;"><img src="/images/projects/hc-garden.png" alt="HC Garden Project Banner" loading="lazy" class="svelte-21cbwn">
</div>
</div>
<div class="text-wrapper svelte-7vth31"><h3><span slot="title">HC Garden </span></h3>
<p class="svelte-7vth31"><span slot="desc">HC Garden is a project which helps spread awareness of flora & fauna in Hwa Chong Institution. The app details many plants & wildlife and their locations. </span></p></div>
<div class="hover-effect svelte-eoqht"><div class="svelte-eoqht" style="transform: translate3d(0px, 0px, 0) scale(1)
;"></div></div></div>
<div class="tab-outline svelte-eoqht">
<div class="resize-trigger svelte-eoqht"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a><a href="/projects/bolt" class="svelte-eoqht"><div class="link-wrapper svelte-eoqht"><div class="img-wrapper"><div class="image svelte-21cbwn" style="--aspectRatio: 4/3;"><img src="/images/projects/bolt.png" alt="Bolt Project Banner" loading="lazy" class="svelte-21cbwn">
</div>
</div>
<div class="text-wrapper svelte-7vth31"><h3><span slot="title">Bolt </span></h3>
<p class="svelte-7vth31"><span slot="desc">Bolt is a project that revamps the canteen ordering system, through two apps that allow users to pre-order meals from stalls, and collect them later. </span></p></div>
<div class="hover-effect svelte-eoqht"><div class="svelte-eoqht" style="transform: translate3d(0px, 0px, 0) scale(1)
;"></div></div></div>
<div class="tab-outline svelte-eoqht">
<div class="resize-trigger svelte-eoqht"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a><a href="/projects/itap" class="svelte-eoqht"><div class="link-wrapper svelte-eoqht"><div class="img-wrapper"><div class="image svelte-21cbwn" style="--aspectRatio: 4/3;"><img src="/images/projects/itap.png" alt="iTap Project Banner" loading="lazy" class="svelte-21cbwn">
</div>
</div>
<div class="text-wrapper svelte-7vth31"><h3><span slot="title">iTap </span></h3>
<p class="svelte-7vth31"><span slot="desc">iTap makes attendance taking easier than ever. Users can simply connect to the correct wifi network and mark their presence, or scan a code generated by admins. </span></p></div>
<div class="hover-effect svelte-eoqht"><div class="svelte-eoqht" style="transform: translate3d(0px, 0px, 0) scale(1)
;"></div></div></div>
<div class="tab-outline svelte-eoqht">
<div class="resize-trigger svelte-eoqht"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a><a href="/projects/fit" class="svelte-eoqht"><div class="link-wrapper svelte-eoqht"><div class="img-wrapper"><div class="image svelte-21cbwn" style="--aspectRatio: 4/3;"><img src="/images/projects/fit.png" alt="Fit Project Banner" loading="lazy" class="svelte-21cbwn">
</div>
</div>
<div class="text-wrapper svelte-7vth31"><h3><span slot="title">Fit </span></h3>
<p class="svelte-7vth31"><span slot="desc">Fit is my first app made with Flutter. It is a fitness app concept with exercise tracking, and simple diet management. </span></p></div>
<div class="hover-effect svelte-eoqht"><div class="svelte-eoqht" style="transform: translate3d(0px, 0px, 0) scale(1)
;"></div></div></div>
<div class="tab-outline svelte-eoqht">
<div class="resize-trigger svelte-eoqht"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a>
<a href="https://czx123.github.io/archive/unitwebsite/" target="_blank" rel="external" class="svelte-eoqht"><div class="link-wrapper svelte-eoqht"><div class="img-wrapper"><div class="image svelte-21cbwn" style="--aspectRatio: 4/3;"><img src="/images/projects/hcinpcc-website.png" alt="HCINPCCC Website Banner" loading="lazy" class="svelte-21cbwn">
</div></div>
<div class="external-link-indicator svelte-7vth31"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="M200 936q-33 0-56.5-23.5T120 856V296q0-33 23.5-56.5T200 216h240q17 0 28.5 11.5T480 256q0 17-11.5 28.5T440 296H200v560h560V616q0-17 11.5-28.5T800 576q17 0 28.5 11.5T840 616v240q0 33-23.5 56.5T760 936H200Zm160-240q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560 256q0-17 11.5-28.5T600 216h200q17 0 28.5 11.5T840 256v200q0 17-11.5 28.5T800 496q-17 0-28.5-11.5T760 456V352L415 697q-11 11-27 11t-28-12Z"></path></svg></div>
<div class="text-wrapper svelte-7vth31"><h3><span slot="title">HCINPCC Website </span></h3>
<p class="svelte-7vth31"><span slot="desc">This was a redesign of my CCA website in 2017, and helped me hone my skills in HTML, CSS &
JavaScript.
</span></p></div>
<div class="hover-effect svelte-eoqht"><div class="svelte-eoqht" style="transform: translate3d(0px, 0px, 0) scale(1)
;"></div></div></div>
<div class="tab-outline svelte-eoqht">
<div class="resize-trigger svelte-eoqht"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a>
<a href="https://czx123.github.io/archive/2017/" target="_blank" rel="external" class="svelte-eoqht"><div class="link-wrapper svelte-eoqht"><div class="img-wrapper"><div class="image svelte-21cbwn" style="--aspectRatio: 4/3;"><img src="/images/projects/ccfd-web-report.png" alt="Project Web Report Banner" loading="lazy" class="svelte-21cbwn">
</div></div>
<div class="external-link-indicator svelte-7vth31"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960"><path d="M200 936q-33 0-56.5-23.5T120 856V296q0-33 23.5-56.5T200 216h240q17 0 28.5 11.5T480 256q0 17-11.5 28.5T440 296H200v560h560V616q0-17 11.5-28.5T800 576q17 0 28.5 11.5T840 616v240q0 33-23.5 56.5T760 936H200Zm160-240q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560 256q0-17 11.5-28.5T600 216h200q17 0 28.5 11.5T840 256v200q0 17-11.5 28.5T800 496q-17 0-28.5-11.5T760 456V352L415 697q-11 11-27 11t-28-12Z"></path></svg></div>
<div class="text-wrapper svelte-7vth31"><h3><span slot="title">Project Web Report </span></h3>
<p class="svelte-7vth31"><span slot="desc">This was a project done in 2017 researching on credit card fraud and detection methods,
and this web report showcases our findings.
</span></p></div>
<div class="hover-effect svelte-eoqht"><div class="svelte-eoqht" style="transform: translate3d(0px, 0px, 0) scale(1)
;"></div></div></div>
<div class="tab-outline svelte-eoqht">
<div class="resize-trigger svelte-eoqht"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a></div></div></div>
</section>
<section id="socials" class="svelte-dli363"><div class="wrapper svelte-dli363"><a class="icon-link svelte-dli363" href="https://github.com/CZX123/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96"><path fill="#fff" fill-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" clip-rule="evenodd"></path></svg></a></div>
</section></div>
</main>
<div class="back-button svelte-5s6lqx"><a href="/" class="svelte-eoqht text"><div class="link-wrapper svelte-eoqht"><svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m10.875 19.3-6.6-6.6q-.15-.15-.213-.325Q4 12.2 4 12t.062-.375q.063-.175.213-.325l6.6-6.6q.275-.275.687-.288.413-.012.713.288.3.275.313.687.012.413-.288.713L7.4 11h11.175q.425 0 .713.287.287.288.287.713t-.287.712Q19 13 18.575 13H7.4l4.9 4.9q.275.275.288.7.012.425-.288.7-.275.3-.7.3-.425 0-.725-.3Z"></path></svg>
Back
<div class="hover-effect svelte-eoqht"><div class="svelte-eoqht" style="transform: translate3d(0px, 0px, 0) scale(1)
;"></div></div></div>
<div class="tab-outline svelte-eoqht">
<div class="resize-trigger svelte-eoqht"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" fill="none"></svg></div>
</a></div>
</div>
<script>
{
__sveltekit_1qsufht = {
env: {},
base: new URL(".", location).pathname.slice(0, -1),
element: document.currentScript.parentElement
};
const data = [null,null];
Promise.all([
import("./_app/immutable/entry/start.ddce2ba6.js"),
import("./_app/immutable/entry/app.76e97dd1.js")
]).then(([kit, app]) => {
kit.start(app, __sveltekit_1qsufht.element, {
node_ids: [0, 2],
data,
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>