-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
236 lines (215 loc) · 10.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xiang Daniel Shi | caseIT | Presentation</title>
<link rel="stylesheet" href="./styles/locomotive.css">
<link rel="stylesheet" href="./styles/customloco.scss">
<link rel="stylesheet" href="./styles/style.scss">
</head>
<body data-scroll-container>
<div>
<main>
<div class="grid-container">
<!-- Title Page -->
<section data-scroll-section id="section0" class="max-col center bg-white">
<h1 class="page-header min-width large-font italic-font blue-font">CASEIT PRESENTATION</h1>
</section>
<!-- WHO AM I -->
<section data-scroll data-scroll-section class="max-col center bg-blue">
<div
data-scroll
>
<h2 class="outline-italic-font large-font italic-font">WHO AM I</h2>
</div>
</section>
<!-- WHO AM I -->
<section data-scroll data-scroll-section class="personal max-col bg-white">
<div class="grid-container">
<div class="col-contain">
<div class="text-wrapper">
<div data-scroll data-scroll-class="scroll-class" data-scroll-speed="2.5" data-scroll-direction="horizontal"
class="vertical-align"
>
<h2 class="rel-margin-bot blue-font sub-heading italic-font">DANIEL</h2>
<p class="black-font rel-margin-bot">A student from the Science and Interactive Arts and Technology department at Simon Fraser University I am pursing a Bachelors of Science with a focus in <strong class="highlight">Design</strong>.</p>
<p class="black-font">I am currently learning REACT and Framer Motion through online tutorials and in my freetime I freelance photo/video.</p>
</div>
</div>
</div>
</div>
</section>
<!-- DEV PHOTO VIDEO -->
<section data-scroll data-scroll-section class="max-col center bg-blue">
<div
data-scroll
>
<h2 data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.5" class="white-font large-font italic-font custom-h1">DEVELOPER</h2>
<h2 data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.25" class="white-font large-font italic-font custom-h1">PHOTOGRAPHER</h2>
<h2 data-scroll data-scroll-class="scroll-class" data-scroll-speed="1" class="white-font large-font italic-font custom-h1">VIDEOGRAPHER</h2>
</div>
</section>
<section data-scroll data-scroll-section class="max-col center bg-white">
<div
data-scroll
>
<h2 class="heavy-font black-font outline-italic-font large-font italic-font">PROJECTS</h2>
</div>
</section>
</div>
<!-- project1 -->
<div class="grid-container">
<!-- PROJECTS DEV CHEER -->
<section data-scroll data-scroll-section class="max-col center bg-white">
<div class="text-wrapper">
<div class="vertical-align">
<h2 data-scroll class="project-cheer large-font italic-font">
<span>- DEV - DEV - DEV - DEV - DEV - DEV - DEV - DEV - DEV - DEV - DEV -</span>
</h2>
</div>
</div>
</section>
<section data-scroll data-scroll-section class="max-col center bg-white">
<div class="img-grid">
<div class="ph-item-1">
<img src="./images/gamehunt.png" alt="">
</div>
<div class="ph-item-2">
<div class="img-contain">
<img src="./images/cliq.png" alt="">
</div>
</div>
<div class="ph-item-4">
<div class="img-contain">
<img src="./images/bosstep.png" alt="">
</div>
</div>
<div class="ph-item-3">
<div class="img-contain">
<img src="./images/track.png" alt="">
</div>
</div>
</div>
</section>
<!-- PROJECTS PHOTO CHEER -->
<section data-scroll data-scroll-section class="max-col center bg-white">
<div class="text-wrapper">
<div class="vertical-align">
<h2 data-scroll class="project-cheer large-font italic-font">
<span>- PHOTO - PHOTO - PHOTO - PHOTO - PHOTO - PHOTO - PHOTO - PHOTO</span>
</h2>
</div>
</div>
</section>
<section data-scroll data-scroll-section class="max-col center bg-white">
<div class="img-grid">
<div data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.5" class="custom-h1 lr-item-1">
<div class="img-contain">
<img src="./images/russel.png" alt="">
</div>
</div>
<div data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.5" class="custom-h1 lr-item-2">
<div class="img-contain">
<img src="./images/sfu-night.png" alt="">
</div>
</div>
<div data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.5" class="custom-h1 lr-item-3">
<div class="img-contain">
<img src="./images/zavien.png" alt="">
</div>
</div>
<div data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.5" class="custom-h1 lr-item-4">
<div class="img-contain">
<img src="./images/rianna.png" alt="">
</div>
</div>
<div data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.5" class="custom-h1 lr-item-5">
<div class="img-contain">
<img src="./images/dubai.png" alt="">
</div>
</div>
<div data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.5" class="custom-h1 lr-item-6">
<div class="img-contain">
<img src="./images/announcer.png" alt="">
</div>
</div>
<div data-scroll data-scroll-class="scroll-class" data-scroll-speed="1.5" class="custom-h1 lr-item-7">
<div class="img-contain">
<img src="./images/sfu-day.png" alt="">
</div>
</div>
</div>
</section>
</div>
<!-- project2 -->
<!-- project3 -->
<!-- WHY CASEIT -->
<div class="grid-container bg-blue">
<section data-scroll data-scroll-section class="max-col center bg-blue">
<div
data-scroll
>
<h2 class="outline-italic-font large-font italic-font">WHY CASEIT</h2>
</div>
</section>
<!-- WHY CASEIT -->
<section data-scroll data-scroll-section class="max-col center bg-blue">
<div
data-scroll
>
<h2 data-scroll data-scroll-class="scroll-class" data-scroll-speed="2.5" data-scroll-direction="horizontal" class="large-font italic-font">GROW</h2>
<h2 data-scroll data-scroll-class="scroll-class" data-scroll-speed="-2.5" data-scroll-direction="horizontal" class="large-font italic-font">EXPERIENCE</h2>
</div>
</section>
<!-- WHY CASEIT -->
<section data-scroll data-scroll-section class="max-col center bg-blue">
<div
data-scroll
>
<h2 class="rel-margin-bot med-font italic-font">WORKING WITH ENGAGED PEOPLE</h2>
<h2 class="rel-margin-bot med-font italic-font">INTERDISCIPLINARY EXPERIENCE</h2>
<h2 class="med-font italic-font">COMMUNITY ENGAGEMENT</h2>
</div>
</section>
</div>
<!-- End of Presentation -->
<div class="grid-container">
<!-- MY PLAN -->
<section data-scroll data-scroll-section class="personal max-col bg-white">
<div class="grid-container">
<div class="col-contain">
<div class="text-wrapper">
<div
class="vertical-align"
>
<h2 class="center-text med-font black-font">The Plan</h2>
<div class="black-font container-wrapper">
<div class="text-container">
<p class="rel-margin-bot">Collaborate on projects with like-minded individuals and deliver a well-designed product.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section data-scroll-section class="max-col center bg-white">
<h1 class="min-width large-font italic-font blue-font">END OF PRESENTATION</h1>
</section>
</div>
</div>
</main>
<!-- Footer -->
<footer
data-scroll-section
>
<p class="copyright">
Xiang Daniel Shi © 2021
</p>
</footer>
</div>
<!-- scripts -->
<script src="index.js"></script>
</body>
</html>