-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (176 loc) · 8.57 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
<!DOCTYPE html>
<html lang='en' class='red'>
<head>
<title>Chun Zhang FAC Application</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link href='https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600&display=swap' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href='style.css'>
<link rel='shortcut icon' type='image/x-icon' href='img/favicon.ico'>
<script src='https://kit.fontawesome.com/ee483f1223.js' crossorigin='anonymous'></script>
</head>
<body>
<!-- HEADER -->
<header>
<label class='switch'>
<input type='checkbox'>
<span class='slider'></span>
</label>
<nav class='menu'>
<button class='navbar-button'>
<img class='navbar-plus' src='img/plus.png' alt='menu'>
</button>
<ul class='main-nav'>
<li class='nav-link highlight'><a href='#aboutme'>About</a></li>
<li class='nav-link highlight'><a href='#whycode'>Why Coding</a></li>
<li class='nav-link highlight'><a href='#whyfac'>Why FAC</a></li>
<li class='nav-link highlight'><a href='#footer'>Links & Contact</a></li>
</ul>
</nav>
</header>
<!-- LANDING -->
<main>
<div id='sticky_scroll_one'>
<section id='section-one'>
<div>
<img class='cut-out' src='img/me_cut.png' alt='author aged 3'><br>
<h1>Hi, this is Chun</h1>
</div>
</section>
</div>
<!-- INTRO -->
<div id='sticky_scroll_two'>
<section id='section-two'>
<ul id='aboutme' class='highlight'>
<li>
<h2>Things I like</h2>
<p>Spicy foods and European cities</p>
</li>
<li>
<h2>Things that make me laugh</h2>
<p>Fatty, my grumpy black cat</p>
</li>
<li>
<h2>Things I will always remember</h2>
<p>Living in China for a year when I was 18, getting to know
my extended family and making lifelong friends</p>
</li>
</ul>
</section>
<!-- CAROUSEL -->
<section class='carousel'>
<section class='slides'>
<div class='slide'><img src='img/spain1.jpeg' alt='Park Güell, Barcelona'></div>
<div class='slide'><img src='img/spain2.jpeg' alt='view of sea in Altea'></div>
<div class='slide'><img src='img/spain3.jpeg' alt='view of sea in Alicante'></div>
<div class='slide'><img src='img/spain4.jpeg' alt='evening tapas in Barcelona'></div>
<div class='slide'><img src='img/spain5.jpeg' alt='palm trees in Barcelona beach'></div>
<div class='slide'><img src='img/spain6.jpeg' alt='artwork in Barcelona Museum of Contemporary Art'></div>
<div class='slide'><img src='img/spain7.jpeg' alt='wall of Elche Botanical Gardens'></div>
</section>
<section class='slide-controls'>
<button class='prev-btn'><img src='img/arrow_left.png' alt='left arrow'></button>
<button class='next-btn'><img src='img/arrow_right.png' alt='right arrow'></button>
</section>
<input type='image' class='pause' src='img/pause.png' alt='pause/play'>
</section>
<!-- TEXT -->
<section id='section-three' class='text'>
<svg class='svg svg-container scroll-text' viewBox='0 0 1806 320'> <!--dimensions of the svg area-->
<path id='wave' fill='transparent' stroke='none' stroke-miterlimit='10' d='M-.5 226.5c370.11-106 651.23-92.98 845-58 166.37 30.03 349.27 90.85 619 66 145.47-13.4 263.27-46.85 342-74'/>
<text>
<textPath class='text-path' href='#wave' startOffset='0'>
My Journey So Far
</textPath>
</text>
</svg>
<svg class='svg2 svg-container scroll-text' id='whycode' viewBox='0 0 1806 320'>
<path id='wave2' fill='transparent' stroke='none' stroke-miterlimit='10' d='M-.5 226.5c370.11-106 651.23-92.98 845-58 166.37 30.03 349.27 90.85 619 66 145.47-13.4 263.27-46.85 342-74'/>
<text>
<textPath class='text-path' href='#wave2' startOffset='0'>
Why Coding?
</textPath>
</text>
</svg>
<svg class='svg3 svg-container scroll-text' id='whyfac' viewBox='0 0 1806 320'>
<path id='wave3' fill='transparent' stroke='none' stroke-miterlimit='10' d='M-.5 226.5c370.11-106 651.23-92.98 845-58 166.37 30.03 349.27 90.85 619 66 145.47-13.4 263.27-46.85 342-74'/>
<text>
<textPath class='text-path' href='#wave3' startOffset='0'>
Why Founders and Coders?
</textPath>
</text>
</svg>
<section class='text1'>
<p class='para highlight'> After graduating university with an art
history degree and a fair bit of job hopping, I have spent the last
couple of years working as a studio coordinator in an architecture
practice. While grateful for the experience, I found that the
chances to make a contribution at work that felt more rewarding were
limited as I lacked any specialised training. I became
interested in web development for this reason: the skills allow you
to be both technical and creative. I remembered how years ago I
would get engrossed in making Wordpress blogs with friends and dip
in and out of Codecademy exercises just for fun, without thinking to
turn it into a career at the time.
</p>
</section>
<section class='text2'>
<p class='para highlight'> There are a lot of things about code that
excite me. I am interested in the ways we could make up for the
proliferation of social media and its often damaging effects on
mental health, whether by helping to refine existing platforms or by
making new more socially responsible apps just like those
developed in the Founders and Coders Tech for Better program. I am
also curious about how code can be used to push boundaries of
artistic expression in the creative fields. It is true that there is
still a large diversity gap in tech, but the fact that people
are openly vocal about the inequalities means change is more
likely to happen. This positive outlook makes me want to be a part
of the community even more.
</p>
</section>
<section class='text3'>
<p class='para highlight'> By the time I heard about FAC in spring
2020, I was already working my way through the FreeCodeCamp
curriculum, so seeing the prerequisites encouraged me to keep going
and apply for the winter cohort when I would be more ready. The
postponement of the course, although disappointing at first, allowed
me to be fully engaged with the application process, from going to
the weekly coaching sessions to organising extra meetups with other
applicants. Besides being invaluable for my learning, it has helped
me get to know and appreciate FAC's ethos of giving back, and I
would be excited to mentor and support others in the same way.
</p>
</section>
</section> <!--section three-->
</div> <!-- sticky scroll two-->
</main>
<!-- FOOTER -->
<footer id='footer'>
<section class='thanks'>
<img class='me cut-out-end' src='img/me_cut.png' alt='me at 3yo'>
<span class='fa-layers fa-fw bubble'>
<i class='fas fa-comment'></i>
<span class='fa-layers-text'></span>
</span>
</section>
<section class='links'>
<ul class='main-links'>
<li><a href='https://github.com/chunzg/FAC-21-Application' target='_blank'><img src='img/github.png' alt='github logo'></a></li>
<li><a href='https://www.freecodecamp.org/chunzg' target='_blank'><img src='img/fcc.png' alt='freecodecamp logo'></a></li>
<li><a href='https://www.codewars.com/users/chunzg' target='_blank'><img src='img/codewars.png' alt='codewars logo'></a></li>
</ul>
</section>
<section class='extra'>
<small class='contact highlight'>[email protected]</small><br>
<small class='copyright highlight'>©2021 Chun Zhang</small>
</section>
<button>
<a href='#top' id='up'>
<img src='img/finger.png' alt='back to top'>
<span class='sr-only'>Back to top</span>
</a>
</button>
</footer>
<script src='app.js'></script>
</body>
</html>