-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
292 lines (268 loc) · 18.3 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vatana Chhorn</title>
<!-- styles embed -->
<!-- font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="CSS/styles.css"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Playfair+Display:ital,wght@0,700;1,400&display=swap"
rel="stylesheet">
<!-- Include the above in your HEAD tag -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/757784e76c.js" crossorigin="anonymous"></script>
<!-- bootsnip -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<div class='spinner-wrapper'>
<div class="spinner"></div>
</div>
<!-- Main page -->
<section id="main-page" style="background-color: #181A1D">
<!-- navbarSupportedContent -->
<nav class="navbar transparent navbar-expand-lg navbar-dark">
<a class="navbar-brand" href=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#contact">About.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Projects.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact.</a>
</li>
</ul>
</div>
</nav>
<!-- main page title -->
<div class="row main-page-col">
<div class="col-lg-8 col-md-6">
<div class="title-col">
<h1>VATANA CHHORN</h1>
<h4>A sophomore Software Engineering student</h4>
<h4>at Hangzhou Dianzi University, China.</h4>
<button onclick="myFunction()" class="btn btn-outline-dark" type="button" name="button">Portfolio</button>
</div>
</div>
<div class="col-lg-4 col-md-6">
<img class="boarder-picture" src="assets/boarder-picture.png" alt="boarder-picture">
</div>
</div>
<!-- </div> -->
</section>
<!-- portfolio -->
<section id="portfolio" style="background-color: #181A1D">
<h2 class="contact-title portfolio_title">Portfolio</h2>
<h5 class="contact-title">Check out my portfolio to see the recent projects that I have done. </h5>
<h5 class="contact-title"> Moreover, you can head to my Github account to see all the projects.</h5>
<div class="row mbr-justify-content-center">
<div class="col-lg-6 col-md-12">
<a href="https://github.com/VatanaChhorn/Covid19-Tracker-Cambodia" style="text-decoration: none;">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont"> <img class="portfolio_logo"
src="https://raw.githubusercontent.com/VatanaChhorn/Covid19-Tracker-Cambodia/master/Cambodia%20Covid19%20Tracker/Assets.xcassets/AppIcon.appiconset/1024.png"
alt="logo">
</span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5"><span>Covid19 Tracker Cambodia</span>
</h2>
<p class="mbr-fonts-style text1 mbr-text display-6">An IOS application which getting the data from a
trustable website in order to show the Covid19 cases overview in Cambodia.</p>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-12">
<a href="https://github.com/VatanaChhorn/Luna" style="text-decoration: none;">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont"> <img class="portfolio_logo"
src="https://github.com/VatanaChhorn/Luna/blob/master/Luna/Supporting%20files/Assets.xcassets/AppIcon.appiconset/1024.png?raw=true"
alt="logo">
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">
<span>Luna - Stay focus</span>
</h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Luna - Stay Focus: helps the user staying on track,
avoid the distraction by using the phone during study, work, etc.</p>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-12">
<a href="https://github.com/VatanaChhorn/Tip-Calculator" style="text-decoration: none;">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont"> <img class="portfolio_logo"
src="https://github.com/VatanaChhorn/Tip-Calculator/blob/master/Tip%20Calculator/Assets.xcassets/AppIcon.appiconset/icon.png"
alt="logo">
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">
<span>Tip Calculator - IOS</span>
</h2>
<p class="mbr-fonts-style text1 mbr-text display-6">A tip calculator app which helps you saving time, and
effort when dividing money after meal with friends. </p>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-12">
<a href="https://github.com/VatanaChhorn/Mproject" style="text-decoration: none;">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-trophy fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5"> <span>M Project</span></h2>
<p class="mbr-fonts-style text1 mbr-text display-6">I did this project for my friend to assist with his
business. It helps you find which transition the client wants to clear. </p>
</div>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section id="contact" style="background-color: #181A1D">
<h2>About Me</h2>
<h5 class="contact-title">I started programming after I graduated from high school, and started doing my Bachelor
degree in major Software Engineering in 2019.</h5>
<h5 class="contact-title">Besides a sophomore, I am also an iOS Developer.</h5>
<div class="container-fluid">
<h2>Language and Framework</h2>
<div class="row framework-row">
<div class="col-lg-2 col-md-4 col-sm-4 col-4">
<svg class="framework-Image" viewBox="0 0 128 128">
<path fill="#659AD3"
d="M115.4 30.7l-48.3-27.8c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7z">
</path>
<path fill="#03599C"
d="M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4v-55.7c0-.9-.1-1.9-.6-2.8l-106.6 62z">
</path>
<path fill="#fff"
d="M85.3 76.1c-4.2 7.4-12.2 12.4-21.3 12.4-13.5 0-24.5-11-24.5-24.5s11-24.5 24.5-24.5c9.1 0 17.1 5 21.3 12.5l13-7.5c-6.8-11.9-19.6-20-34.3-20-21.8 0-39.5 17.7-39.5 39.5s17.7 39.5 39.5 39.5c14.6 0 27.4-8 34.2-19.8l-12.9-7.6z">
</path>
</svg>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-4">
<svg class="framework-Image" viewBox="0 0 128 128">
<path fill="#E44D26" class="cls-1"
d="M126.33,34.06a39.32,39.32,0,0,0-.79-7.83,28.78,28.78,0,0,0-2.65-7.58,28.84,28.84,0,0,0-4.76-6.32,23.42,23.42,0,0,0-6.62-4.55,27.27,27.27,0,0,0-7.68-2.53c-2.65-.51-5.56-.51-8.21-.76H30.25A45.46,45.46,0,0,0,24.16,5a21.82,21.82,0,0,0-5.82,1.52c-.53.25-1.32.51-1.85.76a33.82,33.82,0,0,0-5,3.28c-.53.51-1.06.76-1.59,1.26a22.41,22.41,0,0,0-4.76,6.32,23.61,23.61,0,0,0-2.65,7.58,78.5,78.5,0,0,0-.79,7.83V93.94a39.32,39.32,0,0,0,.79,7.83,28.78,28.78,0,0,0,2.65,7.58,28.84,28.84,0,0,0,4.76,6.32,23.42,23.42,0,0,0,6.62,4.55,27.27,27.27,0,0,0,7.68,2.53c2.65.51,5.56.51,8.21.76H95.63a45.08,45.08,0,0,0,8.21-.76,27.27,27.27,0,0,0,7.68-2.53,30.13,30.13,0,0,0,6.62-4.55,22.41,22.41,0,0,0,4.76-6.32,23.61,23.61,0,0,0,2.65-7.58,78.49,78.49,0,0,0,.79-7.83V34.06Z">
</path>
<path class="cls-2"
d="M85,96.5c-11.11,6.13-26.38,6.76-41.75.47A64.53,64.53,0,0,1,13.84,73a50,50,0,0,0,10.85,6.32c15.87,7.1,31.73,6.61,42.9,0l0,0C51.69,67.66,38.19,52.5,28.13,40.12a43.47,43.47,0,0,1-5.29-6.82C35,43.91,54.34,57.3,61.22,61.09a271.77,271.77,0,0,1-27-32.34A266.8,266.8,0,0,0,78.69,63.62c.71.38,1.26.7,1.7,1a32.7,32.7,0,0,0,1.21-3.51c3.71-12.89-.53-27.54-9.79-39.67C93.25,33.81,106,57.05,100.66,76.51c-.14.53-.29,1-.45,1.55l.19.22c10.59,12.63,7.68,26,6.35,23.5C101,91,90.37,94.33,85,96.5Z">
</path>
</svg>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-4">
<svg class="framework-Image" viewBox="0 0 128 128">
<path fill="#E44D26" d="M19.037 113.876l-10.005-112.215h109.936l-10.016 112.198-45.019 12.48z"></path>
<path fill="#F16529" d="M64 116.8l36.378-10.086 8.559-95.878h-44.937z"></path>
<path fill="#EBEBEB"
d="M64 52.455h-18.212l-1.258-14.094h19.47v-13.762h-34.511l.33 3.692 3.382 37.927h30.799zM64 88.198l-.061.017-15.327-4.14-.979-10.975h-13.817l1.928 21.609 28.193 7.826.063-.017z">
</path>
<path fill="#fff"
d="M63.952 52.455v13.763h16.947l-1.597 17.849-15.35 4.143v14.319l28.215-7.82.207-2.325 3.234-36.233.335-3.696h-3.708zM63.952 24.599v13.762h33.244l.276-3.092.628-6.978.329-3.692z">
</path>
</svg>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-4">
<svg class="framework-Image" viewBox="0 0 128 128">
<path fill="#1572B6"
d="M18.814 114.123l-10.054-112.771h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z"></path>
<path fill="#33A9DC" d="M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z"></path>
<path fill="#fff"
d="M64.001 51.429h18.302l1.264-14.163h-19.566v-13.831h34.681999999999995l-.332 3.711-3.4 38.114h-30.95v-13.831z">
</path>
<path fill="#EBEBEB"
d="M64.083 87.349l-.061.018-15.403-4.159-.985-11.031h-13.882l1.937 21.717 28.331 7.863.063-.018v-14.39z">
</path>
<path fill="#fff"
d="M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881h-13.876z"></path>
<path fill="#EBEBEB"
d="M64.048 23.435v13.831000000000001h-33.407999999999994l-.277-3.108-.63-7.012-.331-3.711h34.646zM64.001 51.431v13.831000000000001h-15.209l-.277-3.108-.631-7.012-.33-3.711h16.447z">
</path>
</svg>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-4">
<svg class="framework-Image" viewBox="0 0 128 128">
<path fill="#F34F29"
d="M124.737 58.378l-55.116-55.114c-3.172-3.174-8.32-3.174-11.497 0l-11.444 11.446 14.518 14.518c3.375-1.139 7.243-.375 9.932 2.314 2.703 2.706 3.461 6.607 2.294 9.993l13.992 13.993c3.385-1.167 7.292-.413 9.994 2.295 3.78 3.777 3.78 9.9 0 13.679-3.78 3.78-9.901 3.78-13.683 0-2.842-2.844-3.545-7.019-2.105-10.521l-13.048-13.048-.002 34.341c.922.455 1.791 1.063 2.559 1.828 3.778 3.777 3.778 9.898 0 13.683-3.779 3.777-9.904 3.777-13.679 0-3.778-3.784-3.778-9.905 0-13.683.934-.933 2.014-1.638 3.167-2.11v-34.659c-1.153-.472-2.231-1.172-3.167-2.111-2.862-2.86-3.551-7.06-2.083-10.576l-14.313-14.313-37.792 37.79c-3.175 3.177-3.175 8.325 0 11.5l55.117 55.114c3.174 3.174 8.32 3.174 11.499 0l54.858-54.858c3.174-3.176 3.174-8.327-.001-11.501z">
</path>
</svg>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-4">
<svg class="framework-Image" viewBox="0 0 128 128">
<path fill="#EEEEEE" fill-rule="evenodd" clip-rule="evenodd"
d="M64 1.512c-23.493 0-42.545 19.047-42.545 42.545 0 18.797 12.19 34.745 29.095 40.37 2.126.394 2.907-.923 2.907-2.047 0-1.014-.04-4.366-.058-7.92-11.837 2.573-14.334-5.02-14.334-5.02-1.935-4.918-4.724-6.226-4.724-6.226-3.86-2.64.29-2.586.29-2.586 4.273.3 6.523 4.385 6.523 4.385 3.794 6.504 9.953 4.623 12.38 3.536.383-2.75 1.485-4.628 2.702-5.69-9.45-1.075-19.384-4.724-19.384-21.026 0-4.645 1.662-8.44 4.384-11.42-.442-1.072-1.898-5.4.412-11.26 0 0 3.572-1.142 11.7 4.363 3.395-.943 7.035-1.416 10.65-1.432 3.616.017 7.258.49 10.658 1.432 8.12-5.504 11.688-4.362 11.688-4.362 2.316 5.86.86 10.187.418 11.26 2.728 2.978 4.378 6.774 4.378 11.42 0 16.34-9.953 19.938-19.427 20.99 1.526 1.32 2.886 3.91 2.886 7.88 0 5.692-.048 10.273-.048 11.674 0 1.13.766 2.458 2.922 2.04 16.896-5.632 29.07-21.574 29.07-40.365C106.545 20.56 87.497 1.512 64 1.512z">
</path>
<path
d="M37.57 62.596c-.095.212-.428.275-.73.13-.31-.14-.482-.427-.382-.64.09-.216.424-.277.733-.132.31.14.486.43.38.642zm-.524-.388M39.293 64.52c-.203.187-.6.1-.87-.198-.278-.297-.33-.694-.124-.884.208-.188.593-.1.87.197.28.3.335.693.123.884zm-.406-.437M40.97 66.968c-.26.182-.687.012-.95-.367-.262-.377-.262-.83.005-1.013.264-.182.684-.018.95.357.262.385.262.84-.005 1.024zm0 0M43.268 69.336c-.233.257-.73.188-1.093-.163-.372-.343-.475-.83-.242-1.087.237-.257.736-.185 1.102.163.37.342.482.83.233 1.086zm0 0M46.44 70.71c-.104.334-.582.485-1.064.344-.482-.146-.796-.536-.7-.872.1-.336.582-.493 1.067-.342.48.144.795.53.696.87zm0 0M49.92 70.965c.013.35-.396.642-.902.648-.508.012-.92-.272-.926-.618 0-.354.4-.642.908-.65.506-.01.92.272.92.62zm0 0M53.16 70.414c.06.342-.29.694-.793.787-.494.092-.95-.12-1.014-.46-.06-.35.297-.7.79-.792.503-.088.953.118 1.017.466zm0 0">
</path>
<path
d="M24.855 108.302h-10.7a.5.5 0 0 0-.5.5v5.232a.5.5 0 0 0 .5.5h4.173v6.5s-.937.32-3.53.32c-3.056 0-7.327-1.116-7.327-10.508 0-9.393 4.448-10.63 8.624-10.63 3.614 0 5.17.636 6.162.943.31.094.6-.216.6-.492l1.193-5.055a.468.468 0 0 0-.192-.39c-.403-.288-2.857-1.66-9.058-1.66-7.144 0-14.472 3.038-14.472 17.65 0 14.61 8.39 16.787 15.46 16.787 5.854 0 9.405-2.502 9.405-2.502.146-.08.162-.285.162-.38v-16.316a.5.5 0 0 0-.5-.5zM79.506 94.81H73.48a.5.5 0 0 0-.498.503l.002 11.644h-9.392V95.313a.5.5 0 0 0-.497-.503H57.07a.5.5 0 0 0-.498.503v31.53c0 .277.224.503.498.503h6.025a.5.5 0 0 0 .497-.504v-13.486h9.392l-.016 13.486c0 .278.224.504.5.504h6.038a.5.5 0 0 0 .497-.504v-31.53c0-.278-.22-.502-.497-.502zM32.34 95.527c-2.144 0-3.884 1.753-3.884 3.923 0 2.167 1.74 3.925 3.884 3.925 2.146 0 3.885-1.758 3.885-3.925 0-2.17-1.74-3.923-3.885-3.923zM35.296 105.135H29.29c-.276 0-.522.284-.522.56v20.852c0 .613.382.795.876.795h5.41c.595 0 .74-.292.74-.805v-6.346-14.553a.5.5 0 0 0-.498-.502zM102.902 105.182h-5.98a.5.5 0 0 0-.496.504v15.46s-1.52 1.11-3.675 1.11-2.727-.977-2.727-3.088v-13.482a.5.5 0 0 0-.497-.504h-6.068a.502.502 0 0 0-.498.504v14.502c0 6.27 3.495 7.804 8.302 7.804 3.944 0 7.124-2.18 7.124-2.18s.15 1.15.22 1.285c.07.136.247.273.44.273l3.86-.017a.502.502 0 0 0 .5-.504l-.003-21.166a.504.504 0 0 0-.5-.502zM119.244 104.474c-3.396 0-5.706 1.515-5.706 1.515V95.312a.5.5 0 0 0-.497-.503H107a.5.5 0 0 0-.5.503v31.53a.5.5 0 0 0 .5.503h4.192c.19 0 .332-.097.437-.268.103-.17.254-1.454.254-1.454s2.47 2.34 7.148 2.34c5.49 0 8.64-2.784 8.64-12.502s-5.03-10.988-8.428-10.988zm-2.36 17.764c-2.073-.063-3.48-1.004-3.48-1.004v-9.985s1.388-.85 3.09-1.004c2.153-.193 4.228.458 4.228 5.594 0 5.417-.935 6.486-3.837 6.398zM53.195 122.12c-.263 0-.937.107-1.63.107-2.22 0-2.973-1.032-2.973-2.368v-8.866h4.52a.5.5 0 0 0 .5-.504v-4.856a.5.5 0 0 0-.5-.502h-4.52l-.007-5.97c0-.227-.116-.34-.378-.34h-6.16c-.238 0-.367.106-.367.335v6.17s-3.087.745-3.295.805a.5.5 0 0 0-.36.48v3.877a.5.5 0 0 0 .497.503h3.158v9.328c0 6.93 4.86 7.61 8.14 7.61 1.497 0 3.29-.48 3.586-.59.18-.067.283-.252.283-.453l.004-4.265a.51.51 0 0 0-.5-.502z">
</path>
</svg>
</div>
</div>
</div>
<div class="container-fluid contactContrainer">
<h2>Contact Me</h2>
<div class="row social">
<div class="col-lg-3 col-md-3 col-sm-3 col-3">
<a href="https://www.facebook.com/vatan4c">
<img class="social-image" src="assets/Facebook-icon.png" alt="Facebook">
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-3">
<a href="https://www.instagram.com/vatana.chhorn/">
<img class="social-image" src="assets/Instagram-icon.png" alt="IG">
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-3">
<a href="https://twitter.com/vatana_chhorn">
<img class="social-image" src="assets/Twitter-icon.png" alt="Twitter">
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-3">
<a href="mailto: [email protected]">
<img class="social-image" src="assets/Gmail-icon.png" alt="Gmail">
</a>
</div>
</div>
</div>
</section>
<script>
let spinnerWrapper = document.querySelector('.spinner-wrapper');
let button = document.querySelector("btn");
function myFunction() {
window.location.href = '#portfolio';
}
window.addEventListener('load', function () {
// spinnerWrapper.style.display = 'none';
spinnerWrapper.parentElement.removeChild(spinnerWrapper);
});
</script>
</body>
</html>