-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
230 lines (219 loc) · 9.59 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Max Zhang - Front-end Developer</title>
<link rel="shortcut icon" href="img/m40.png" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
</head>
<body>
<header class="header">
<!-- <div class="snow">
<div class="snow-1"></div>
<div class="snow-2"></div>
<div class="snow-3"></div>
</div> -->
<div class="background-area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="heading__content-box">
<h1 class="heading__content">
<span class="heading__content--name">Max Zhang</span>
<span class="heading__content--title"
>Full-stack Developer <span>|</span> Front-end Developer</span
>
</h1>
<div class="icon-list">
<ul>
<li>
<a href="https://www.linkedin.com/in/maxzhang686" target="_blank"
><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i
></a>
</li>
<li>
<a href="https://github.com/maxzhang686" target="_blank"
><i class="fa fa-github fa-2x" aria-hidden="true"></i
></a>
</li>
<li>
<a href="#popup-box" target="_blank"
><i class="fa fa-envelope-open fa-2x" aria-hidden="true"></i
></a>
</li>
<li>
<a href="Max_Zhang_Resume.pdf" target="_blank"
><i class="fa fa-address-card fa-2x" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</div>
</header>
<nav class="main-nav">
<ul class="main-nav__items">
<li class="main-nav__item">
<a href="#">About</a>
</li>
<li class="main-nav__item">
<a href="#skill">Skill</a>
</li>
<li class="main-nav__item">
<a href="#project">Project</a>
</li>
<!-- <li class="main-nav__item">
<a href="#experience">Experience</a>
</li> -->
</ul>
</nav>
<nav></nav>
<main>
<section id="skill">
<div class="title">Skill</div>
<div class="skill__content">
<div class="introduce">
<div class="card1">
<p> I am currently looking for front end/full stack developer position in a company
where I can bring my proficiencies in website development,
software development and strengthen my skills. </p>
</br>
<p>I want to emerge as a successful, true professional through my 'Can Do’ attitude, hard work,
high motivation & always willing to go extra miles.</p>
</div>
</div>
<div class="skill">
<div class="card2">
<p><span>• Front-end Languages: </span> HTML5, CSS3, Sass, JavaScript (ES6+)</p>
<p><span>• Front-end Frameworks: </span> React, Redux, Router</p>
<p><span>• UI Libraries: </span> Bootstrap, Material-UI, Ant Design</p>
<p><span>• UI Libraries: </span> Node.js, Express</p>
<p><span>• Database: </span> MongoDB, DynamoDB, MySQL</p>
<p><span>• Tooling: </span> Git, GitHub, NPM, JIRA, Bitbucket</p>
<p><span>• Methodologies: </span> Agile/Scrum</p>
<p><span>• </span>Advanced IT & Computer Hardware skills</p>
</div>
</div>
</di>
</section>
<section id="project">
<div class="title">Project</div>
<div class="project-box" id="project1">
<div class="project-name">Portfolio</div>
<div class="project-display"></div>
<div class="project__image-container">
<img src="img/project1.jpg" alt="Portfolio" class="project__image">
</div>
<div class="project__button-group">
<div class="project__button--link">
<a href="#project1" class="btn isDisabled"><span></span>This Project</a>
</div>
<div class="project__button--code">
<a href="https://github.com/maxzhang686/resume" target="_blank" class="btn"><span></span>View code</a>
</div>
</div>
<div class="project-detail">
<div class="project-detail__title"><p>My portfolio website.</p></div>
<div class="project-detail__list">
<p>• Developed with CSS3 and HTML5</p>
<p>• Used Sass, Flexbox, Css Grid, Transforms, Transitions and Animations, Responsive design for front-end development</p>
</div>
</div>
</div>
<div class="project-box" id="project2">
<div class="project-name">E-commerce Shop</div>
<div class="project-display"></div>
<div class="project__image-container">
<img src="img/project2.jpg" alt="Portfolio" class="project__image">
</div>
<div class="project__button-group">
<div class="project__button--link">
<a href="http://aupconline.com/" target="_blank" class="btn"><span></span>View Project</a>
</div>
<div class="project__button--code">
<a href="https://github.com/maxzhang686/aupc-frontend" target="_blank" class="btn"><span></span>View code</a>
</div>
</div>
<div class="project-detail">
<div class="project-detail__title"><p>E-commerce Full stack App</p></div>
<div class="project-detail__list">
<p>• An online shopping web application that user can register, login, change personal detail, view product detail, get products list by different categories, update shopping cart, pay by PayPal or Card, and also can view the history orders.</p>
<p>• There is an admin page for the admin users to view, add, delete and update product. Administrator also can manage the category and order.</p>
<p>• Developed with React, Hooks, Bootstrap, ES6, Responsive Design HTML5, CSS3, Node.js, MongoDB, Express, RESTful API. Used JWT for authentication</p>
</div>
</div>
</div>
<div class="project-box" id="project3">
<div class="project-name">JR Academy Official Site</div>
<div class="project-display"></div>
<div class="project__image-container">
<img src="img/project3.jpg" alt="Portfolio" class="project__image">
</div>
<div class="project__button-group">
<div class="project__button--link">
<a href="https://jiangren.com.au/" target="_blank" class="btn"><span></span>View Project</a>
</div>
<div class="project__button--code">
<a href="#project3" class="btn isDisabled"><span></span>Source Private</a>
</div>
</div>
<div class="project-detail">
<div class="project-detail__title"><p>The official website of JR Academy</p></div>
<div class="project-detail__list">
<p>• Project Management: Jira, bitbucket</p>
<p>• Front-end development: CSS3, Sass, Pug(Jade), JavaScript ES6, React.js, Redux, Bootstrap, jQuery, Responsive design</p>
<p>• Back-end development: Node.js, MongoDB, KeystoneJs, Mongoose, RESTful API</p>
</div>
</div>
</div>
<div class="project-box" id="project4">
<div class="project-name">JR Academy Dashboard</div>
<div class="project-display"></div>
<div class="project__image-container">
<img src="img/project4.jpg" alt="Portfolio" class="project__image">
</div>
<div class="project__button-group">
<div class="project__button--link">
<a href="https://learn.jiangren.com.au/home" target="_blank" class="btn"><span></span>View Project</a>
</div>
<div class="project__button--code">
<a href="#project4" class="btn isDisabled"><span></span>Source Private</a>
</div>
</div>
<div class="project-detail">
<div class="project-detail__title"><p>The dashboard for students and teachers of JR Academy</p></div>
<div class="project-detail__list">
<p>• Project Management: Jira, bitbucket</p>
<p>• Front-end development: CSS3, Less, HTML5, JavaScript ES6, React.js, Redux, Redux-Saga, React hooks, React Router, Bootstrap, Ant Design Pro, dva, Responsive design</p>
<p>• Back-end development: Node.js, MongoDB, Mongoose, KeystoneJs, RESTful API</p>
</div>
</div>
</div>
</section>
<section id="experience"><div class="title">Max Zhang</div></section>
<section id=""></section>
</main>
<footer></footer>
<div id="popup-box" class="overlay">
<div class="popup">
<h2>My Email</h2>
<a class="close" href="#">×</a>
<div class="content">
</div>
</div>
</div>
</body>
</html>