-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
509 lines (452 loc) · 21.2 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
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cindy Zhou's Portfolio </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="portfolio.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Noto+Sans+SC:wght@200;300;400;500;600&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/jro1nrm.css">
</head>
<section id="title">
<nav class="navbar navbar-expand-lg ">
<a class="nav-link" href="#title-section">
Home
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa-solid fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="2023 Resume.pdf">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#image-gallery">Projects</a> <!-- if you have another page-->
</li>
<li class="nav-item">
<a class="nav-link" href="https://cindyzhou.art">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-me">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#awards">Awards/Achievements</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-12">
<h1 id="title-section"class="title">
<p style= "font-family: orpheuspro, serif;
font-weight: 400;
font-style: italic;
font-size: 10vw;">Cindy Zhou</p>
An artist, creating <br>
innovative designs with<br>
her own twist.
</h1>
</div>
</div>
</section>
<section id="about">
<div class="row">
<div class="col-lg-6">
<h2 class="skills">Skillsets</h2>
</div>
<div class="col-lg-6 sub">
<h2 class=art-title style="
color: white; /* Set text color to dark */
font-family: orpheuspro, serif;
font-weight: 400;
font-style: italic;
font-size: 6.5vw;
text-align: center;">
Featured Artworks
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 skills-row proficient">
<!-- ... (your skills list) ... -->
<p class="text-center">
<ul>
<li>
Adobe suite
<ul>
<li>Photoshop</li>
<li>Indesign</li>
<li>Illustrator</li>
<li>Premiere Pro</li>
<li>Lightroom</li>
</ul>
</li>
<li>
Procreate
</li>
<li>
Traditonal art
</li>
<ul>
<li>Painting</li>
<li>drawing</li>
<li>installations</li>
<li>public art</li>
</ul>
</div>
<div class="col-lg-2.5 skills-row learning">
<!-- ... (your skills list) ... -->
<li>
Canva
</li>
<li>
Photography
</li>
<li>
Coding
<ul>
<li>Python</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</li>
<li>
Other Apps
<ul>
<li>Wix</li>
<li>Figma</li>
<li>Google suite</li>
<li>Excel</li>
<li>iMovie</li>
</ul>
</li>
</ul>
</div>
<div class="col-lg-5 featured-art">
<!-- Carousel for Featured Artworks -->
<div id="hobbyCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- ... (your carousel items) ... -->
<div class="carousel-item active">
<img src="images/myself.jpg" class="d-block w-100" alt="Goldendoodle puppies">
<div class="carousel-caption d-none d-md-block">
<h5>Myself</h5>
</div>
</div>
<div class="carousel-item ">
<img src="images/overwhelmed.png" class="d-block w-100" alt="ZLAC Women's rowing">
<div class="carousel-caption-2 d-none d-md-block">
<h5>Overwhelmed</h5>
</div>
</div>
<div class="carousel-item ">
<img src="images/Exhibititon poster .jpg" class="d-block w-100" alt="Peloton spin classes">
<div class="carousel-caption d-none d-md-block">
<h5>VIS 41 Exhibiton Poster</h5>
</div>
</div>
<div class="carousel-item ">
<img src="images/heat map self portrait.jpg" class="d-block w-100" alt="Peloton spin classes">
<div class="carousel-caption d-none d-md-block">
<h5>Heated</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#hobbyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#hobbyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<!--image gallery-->
<section id="image-gallery">
<div class="row">
<div class="column">
<div class="photo-container">
<img src="images/Cindy Collage.JPG">
<div class="overlay">Collage</div>
</div>
<div class="photo-container">
<img src="images/Home is where the music is.JPG">
<div class="overlay">Home is where the Music is</div>
</div>
<div class="photo-container">
<img src="images/Awakening.jpeg">
<div class="overlay">Awakening</div>
</div>
<div class="photo-container">
<img src="images/fan.jpeg">
<div class="overlay">Rococo Fan</div>
</div>
</div>
<div class="column">
<div class="photo-container">
<img src="images/y2k phone.JPG">
<div class="overlay">MASA x Tritonfest ANM poster</div>
</div>
<div class="photo-container">
<img src="images/Gucci cover.JPG">
<div class="overlay">Gucci Magazine cover</div>
</div>
<div class="photo-container">
<img src="images/toy collage.jpg">
<div class="overlay">Childhood</div>
</div>
<div class="photo-container">
<img src="images/green sketch .JPG">
<div class="overlay">Monochromatic greens</div>
</div>
<div class="photo-container">
<img src="images/Sunset.PNG">
<div class="overlay">Sunsets</div>
</div>
</div>
<div class="column">
<div class="photo-container">
<img src="images/mirror.JPG">
<div class="overlay">Vanity</div>
</div>
<div class="photo-container">
<img src="images/letter from staff.JPG">
<div class="overlay">KSDT-letter from staff</div>
</div>
<div class="photo-container">
<img src="images/typewriter.JPG">
<div class="overlay">Typewriter</div>
</div>
<div class="photo-container">
<img src="images/Japan collage.jpg">
<div class="overlay">日本</div>
</div>
<div class="photo-container">
<img src="images/class sketch.JPG">
<div class="overlay">Boredom in class sketch</div>
</div>
</div>
<div class="column">
<div class="photo-container">
<img src="images/mouse.jpg">
<div class="overlay">Mouse</div>
</div>
<div class="photo-container">
<img src="images/together.jpg">
<div class="overlay">Together</div>
</div>
<div class="photo-container">
<img src="images/cards sketch.JPG">
<div class="overlay">Cards sketch</div>
</div>
<div class="photo-container">
<img src="images/Moon rabbit comic.jpg">
<div class="overlay">Moon Rabbit Comic</div>
</div>
<div class="photo-container">
<img src="images/pieces.jpg">
<div class="overlay">Pieces</div>
</div>
</div>
</div>
</section>
<!-- Section 2: Best ClassesTaken -->
<section id="classes" class="container my-5">
<h2 class="text-center">My Process</h2>
<div class="row">
<!-- Class Cards -->
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Do Research</h5>
<p class="card-text">Figuring out what the topic is really about.</p>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Gathering Inspo</h5>
<p class="card-text">Figuring out what I want to create, going on Pinterest for aesthetic choices.</p>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Creating Drafts</h5>
<p class="card-text">Creating a checklist of what is expected of me, creating small thumbnails of everything to be included.</p>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Fleshing out details</h5>
<p class="card-text">Choose one out of all, with a set color scheme, brushes and consistency.</p>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Gather Feedback and Revise</h5>
<p class="card-text">Send the detailed version out, figure out what needs to be fixed and keep on revising until the final product.</p>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Completion</h5>
<p class="card-text">After fixing multiple drafts, complete the artwork, but always be open to feedback and continuous small changes.</p>
</div>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-12 empty-space" style="height: 400px; width: 100vw;"></div>
</div>
<!--Misc-->
<section class="Misc">
<h2 class="text-center gradient-text">Misc </h2>
<div class="card-deck">
<div class="card col-lg-4 mb-3">
<img class="card-img-top image-modify" src="images/hobbies.jpg" alt="Card image cap">
<div class="card-body info">
<h5 class="card-title">Hobbies</h5>
<p class="card-text">During my free time, I like to do anything art related, like painting, drawing, scrolling Pinterest. I love to travel around the world and go to different art museums, and eat new foods.</p>
</div>
<div class="card-footer">
<small class="text-muted">Since 2010</small>
</div>
</div>
<div class="card col-lg-4 mb-3">
<img class="card-img-top image-modify" src="images/photography.jpg" alt="Card image cap">
<div class="card-body info">
<h5 class="card-title">Photography</h5>
<p class="card-text">My love for taking photos started when I traveled since a young age, and because a lot of art projects required reference pictures, which I took a majority of. I like taking photos of myself as well as other people. </p>
</div>
<div class="card-footer">
<small class="text-muted">Since 2016</small>
</div>
</div>
<div class="card col-lg-4 mb-3">
<img class="card-img-top image-modify" src="images/work.jpg" alt="Card image cap">
<div class="card-body info">
<h5 class="card-title">Work Experience</h5>
<p class="card-text">My work experience stemmed from my love for art and entering various contests. After I dabbled into public arts and joined clubs as a graphic designer. Slowing I become more familiar with the digital medium. Now I have a job at ArtPower creating graphics for the platform</p>
</div>
<div class="card-footer ">
<small class="text-muted">Since 2020</small>
</div>
</div>
</div>
</div>
</section>
<section id="about-me">
<div class="row">
<div class="col-lg-6">
<img class=pfp src="images/Cindy pfp.jpg">
</div>
<div class="col-lg-6">
<h2 class="text-center" style="text-align: left;">Cindy Zhou</h2>
<p class="Self-description">
A sophomore at UCSD <br>
getting a BA degree <br>
Interdiscplinary computing and the arts <br>
major (ICAM) with minors of<br>
Design and Cognitive Science
</p>
<div class=row>
<button type="button" name="button" class="btn btn-light button">
<a href="2023 Resume.pdf" class="custom-link">Resume</a>
</button>
<button type="button" name="button" class="btn btn-light button" style="font-size: 18px; margin-left: 30px;">
<a href="https://cindyzhou.art" class="custom-link">For more works</a>
</button>
</div>
</div>
</section>
<section id="awards">
<h2 class="text-center" style="text-align: Center; font-size: 80px;">Awards/ Achievements</h2>
<h3>2023</h3>
<p class="award-text">VIS 142 Group Exhibition</p>
<p class="award-description indented">Showcasing final animation made in class utilizing Pygame</p>
<p class="award-description">Artwork published in KSDT 2023 Fall Zine</p>
<h3>2022</h3>
<p class="award-text">Scholastic Art Contest, 2 Silver Keys, and 2 Honorable Mentions</p>
<!-- Add more content for 2022 as needed -->
<h3>2021</h3>
<p class="award-text">Scholastic Art Contest, 1 Gold Key, 2 Silver Key, 1 Honorable Mention</p>
<p class="award-description">Artwork exhibited in SAS Virtual Exhibition</p>
<p class="award-text">Artwork was chosen for Breathing Free Together Public Art Project by the San Ramon Social Justice Collective</p>
<p class="award-description indented">produced onto banners for a mobile art exhibition</p>
<p class="award-text">Celebrating Arts Spring 2021 Published Artist</p>
<p class="award-text">PAL Art Exhibition High School Merit Award</p>
<p class="award-text">Fish Art Contest: Western Native Trout Award 10-12 grade division, Third Place</p>
<p class="award-text">Binsey Poplar Press Art Category Third Place</p>
<p class="award-text">2021 Thalassemia Art Competition 13-16 Trustee Vote Winner</p>
<p class="award-text">Mt. Diablo Peace and Justice Center First Prize Winner</p>
<p class="award-description indented">for the High School Visual Art category in the 23rd Annual Art and Writing Challenge</p>
<p class="award-text">AYLUS (The Alliance of Youth Leaders in the United States) 2020-2021 International Art Contest “Covid-19 pandemic” Silver and Bronze Medals </p>
<p class="award-text">Tian Hong 2021 Cross-Cultural Youth Art Contest, Age Group 13-21, 2nd Place</p>
<p class="award-description">Artwork published in Summer 2021 Celebrating Arts Anthology</p>
<p class="award-text">Artwork chosen for Upcycle Your HeART out” Coming out of Covid Signs of Hope</p>
<p class="award-description indented">creating signs for the local community</p>
<p class="award-text">Life’s Too Good To Be Wasted Contest 1st Place Winner </p>
<p class="award-description indented">organized by the National Coalition Against Prescription Drug Abuse (NCAPDA) and the CCC MEDS Coalition</p>
<p class="award-text">Artwork selected for 2022 Embracing Our Differences Exhibit ("enriching lives through diversity and inclusion.")</p>
<p class="award-description indented">displayed in Sarasota, Florida’s Bayfront Park from January 15 through April 10, 2022.</p>
<p class="award-text">2021 Bow Seat Ocean Awareness Contest Visual Art Category Honorable Mention</p>
<p class="award-text">2021 DVHS Reflections program “I will change the world by …” Award of Merit</p>
<h3>2020</h3>
<p class="award-text">Artwork was chosen for the City of Dublin, California Utility Box Art Project</p>
<p class="award-text">She is More 2020 Global Youth Art Competition, Grand Prize Winner</p>
<p class="award-text">Teen Readers Society, Art Through Literature Contest, First Place</p>
<p class="award-text">Scholastic Art Contest, 1 Silver Key, and 3 Honorable Mentions</p>
<p class="award-description">Artwork published in the Living Zine #2 Migrations Issue</p>
<p class="award-text">Celebrating Art High Merit Artwork (Fall 2020)</p>
<p class="award-text">Dublin/San Ramon Women’s Club Student Art Contest </p>
<p class="award-description indented">Dublin City: 2nd Place, Mt. Diablo District: 2nd Place</p>
<p class="award-text">You Shine Foundation-Peace and Love Art Contest 2020 Grand Prize</p>
<p class="award-description">Several artworks displayed at the Art of Resilience Virtual Exhibition</p>
<p class="award-text">Pleasanton United Under Arts Tri-Valley Art Competition Winner</p>
<p class="award-text">Celebrating Art Spring 2020 Published Artist</p>
<p class="award-text">Celebrating Art Fall 2020 Published Artist</p>
<p class="award-text">2020 “I Matter Because...” Reflections Art Program</p>
<p class="award-description indented">School level: Award of Excellence, District-level: Award of Merit</p>
<p class="award-text">You Are More Sticker Competition, First Place</p>
<p class="award-text">Mt. Diablo Peace and Justice Center 2020 Art and Writing Challenge Visual Art, First Prize Winner</p>
<p class="award-description">Artwork published in The Asian American Art Zine, Oct 2020</p>
<!-- Add more content for 2020 as needed -->
<h3>2019</h3>
<p class="award-text">Scholastic Art Contest, 1 Silver Key, and 2 Honorable Mentions</p>
<p class="award-text">No Boundaries International Art Contest Exhibition</p>
<h3>2018</h3>
<p class="award-text">2018 California Coastal & Poetry Contest, Honorable Mention</p>
</section>
<footer id="footer">
<h2 class="text-center" style="text-align: Center; margin-bottom: 6px;font-size: 50px;">Contact Me!</h2>
<a href="https://pin.it/6c5gF9X"><i class="social-icon fa-brands fa-pinterest"></i></a>
<a href="https://www.instagram.com/cindyzhou2015"><i class="social-icon fa-brands fa-instagram"></i></a>
<a href="https://www.cindyzhou.art"><i class="social-icon fa-solid fa-palette"></i></a>
<a href="mailto:[email protected]"><i class="social-icon fa-regular fa-envelope"></i></a>
<p style="color: white;">Copyright © 2023 Cindy Zhou</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="portfolio.js"></script>
<!--fontawesome.com-->
<script src="https://kit.fontawesome.com/1caf131785.js" crossorigin="anonymous"></script>
</body>
</html>