-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
278 lines (250 loc) · 12.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
<!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">
<title>Qinhao xie's Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.3.1.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Qinhao's Portfolio</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#aboutme">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#skills">skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#cpro">c programming</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#javapro">java programming</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#A2">A2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#A3">A3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#A4">A4</a>
</li>
</ul>
</div>
</nav>
<section>
<div class="jumbotron text-center mt-2" style="background-color: lightblue">
<div class="container">
<div class="row">
<div class="col-12">
<h1 id="aboutme">About me</h1></div><br><br><br><br>
<div style="display:inline-flex">
<div>
<br><br><br><br><br><br><p style="font-size:large ; padding-right: 8%;padding-left: 30%;">I am a computer science student that are passionate with coding. I love to create and feel satisfied when I can see my finished product. I am currently living in Brisbane and studying computer science in University of queensland. Hope my experience got from university course could be applied in my career.</p>
</div>
<div><img src="intro.jpg" width="480" height="666"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="background-color: aquamarine">
<section>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 id="skills">Skills and experiences </h1>
<p>In university, I learned many developing skills. I am more comfortable with backend programming</p>
</div>
</div>
</div>
</section>
<section>
<div class="container mt-2">
<div class="row">
<div class="col-md-4 col-12">
<ul class="list-unstyled">
<li class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">C programming</h5>
I used to use C to code.
my coding project including:
<br>1.tictactoe
<br>2.wordle
<br>3.subprocess manager
<br>4.client/server http communication
</div>
</li>
</ul>
</div>
<div class="col-md-4 col-12">
<ul class="list-unstyled">
<li class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Java Programming</h5>
I used to use Java to code a game.
it allow user to collect items
kill animals and go around
in the map. it also supprot save/load
the progress to/from a file.
</div>
</li>
</ul>
</div>
<div class="col-md-4 col-12">
<ul class="list-unstyled">
<li class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">HTML,JS,CSS</h5>
I also have experience in frontend development.
I am familar with the usage of HTML,CSS,JS.
and have a frontend project experience.
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<section>
<div class="jumbotron text-center mt-2" style="background-color: lightsalmon">
<div class="container">
<div class="row">
<div class="col-12">
<h1 id="cpro"> C programming </h1>
<a style="font-size: 30px;" href="https://github.com/QinhaoXie/Compsys-Programming">See Repository(QinhaoXie/Compsys-Programming)</a>
<p>In course computer system and programming I did several diifferent assignments.</p>
<h3>A1 Wordle game</h3>
<p>in the A1,we produced a commandline wordle game with C. </p>
<div>
<img src="images/wordle1.png" width="423" height="281" alt=""/>
<img src="images/wordle2.png" width="423" height="281" alt=""/>
</div>
<h3>A3 spring spwarn program</h3>
<p>in the A3,we produced a commandline subprocess generator. </p>
<div>
<img src="images/spwarn1.png" width="523" height="281" alt=""/>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="jumbotron text-center mt-2" style="background-color: lightsalmon">
<div class="container">
<div class="row">
<div class="col-12">
<h1 id="javapro"> Java programming </h1>
<p>In this course we used java gui to build a game.</p>
<div>
<img src="images/javagame.png" width="863" height="551" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="jumbotron text-center mt-2" style="background-color: lightsalmon">
<div class="container">
<div class="row">
<div class="col-12">
<h1 id="A3"> Rapid Design Sprint</h1>
<p>During the Rapid sprint Design, Our team was inspired by a previous concept which is about a library finder.it selected students as the target audience and use library api to provide a user-friendly application for students who want to work outside the campus. Comparing other datasets recommended, we all agree to use a library data set because it has a lot of useful columns that could be valuable. One team member suggested that we could design an application for students to find the best library.</p>
<p>We decided to develop an application called library finder for students in Brisbane or UQ because the library in UQ is always full of students. For students who want to easily find a seat, they could find a library outside the campus and our website should provide students a convenient experience when they want to find somewhere to study. </p>
<p>During the Rapid sprint Design, I suggested we could use a map that we have learnt from the tutorial. Most team members think that is a good idea and we decided to add a main function called Search by Map. This function allows users to enter a map to navigate all the libraries fetched from the API. On this map, each map will be marked with a marker. When a user clicks on a marker, a pop up window will show around this marker and show more detailed information related to this library. If the user further clicks on a “see more” button, the user will enter a library page that shows a lot of information for this library. We also hope our application could be used on many different screen sizes when we do the rapid sprint design, and sketch the layout for the application on the mobile platform. </p>
<img src="images/a3-1.png" width="737" height="581" alt=""/>
<h3>what I learnt from A3</h3>
<p>From the Rapid sprint Design,I learnt how to quickly generate an idea into a prototype and how a team should work together to achieve a goal efficiently. During the Design we need to first decide what concept we want to develop and then try to create the function and structure of an application based on the target user and their needs. After we decide how the application should work, we need to use paper to draw the basic layout of each page and finally redraw the basic layout using a prototyping software and determine what color what design style we use.To form an efficient team, we need to first have a warm up to know each team member, the strength and weakness of each member and when they have time.
After a basic understanding of each team member, we further discussed the time arrangement for the whole semester. Our team decided to meet each week two times on both Monday and Thursday to ensure the progress of the course project. And decide the role for each team member according to the strengths of each person. </p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="jumbotron text-center mt-2" style="background-color: lightslategrey">
<div class="container">
<div class="row">
<div class="col-12">
<h1 id="A2">A2 Design Inspiration</h1>
<p>Great Group Work.</p>
<p></p>
<p> </p>
<img src="images/a2.png" alt="" width="650" height="430" class="a2image"/>
<p> </p>
</div>
</div>
</div>
</div>
</section>
<section style="background-color: lightsteelblue">
<div class="container" >
<div class="row">
<div class="col-12 text-center">
<h2 id="A4">A4 Design Computing Design</h2>
<p>I have a Frontend design computing project developed within university course</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-12 text-center">
<img class="img-fluid" src="images/a4-1.png" alt="">
<h4>home page</h4>
<h6>home page leads user to questionaire or search by key</h6>
</div>
<div class="col-md-6 col-12 text-center mt-md-0 mt-2">
<img class="img-fluid" id="a4-4png" src="images/a4-4.png" alt="">
<br><br><br><br><br>
<h4>Search by Key</h4>
<h6>user can search any work space(library/park) in this page</h6>
</div>
</div>
<div class="row">
<div class="col-md-6 col-12 text-center">
<img class="img-fluid" src="images/a4-2.png" alt="">
<h4>Questionaire Result</h4>
<h6>Questionaire will recommend result for user</h6>
</div>
<div class="col-md-6 col-12 text-center mt-md-0 mt-2">
<img class="img-fluid" src="images/a4-3.png" alt="">
<h4>Office detailed info</h4>
<h6>This page display detailed infomation about an individual office</h6>
</div>
</div>
<hr>
</div>
</section>
<hr>
<section>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1></h1>
<p></p>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>