test/about.html at master · jamestszhim/test · GitHub

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
<!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">
    <meta name="website describe myself" content="">
    <meta name="james" content="">

    <title>About Me</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/agency.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top" class="index">

    <script src="./include/top.js"></script>

    <section class="banner-section"><h2>More about me</h2></section>

    <section id="about_me">
      <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6 text-center">
          <h2>Education </h2>
          <p>Hi, I am James. I just finished my 3rd year in HKUST studying Computer Science and General Business Management. I was enrolled in the dual degree program, which offers me a degree in engineering as well as a degree in business administration. So, I got the chances to take courses from both the business and engineering school. I quite like the program as it allows me to explore different areas and connect different ideas across disciplines. The wide exposures also allows me to make sure the way I would like to go for my career. At the same time, I can drill down to one engineering major, which I chose to be Computer Science.</p>
          <p>I think Computer Science is fun, palying around with logics and solving difficult puzzles give me a sense of accomplishment. Among the topics in Computer Science, in particular, I love the topics related to data analysis, mining, visualisation and artificial intelligence. Therefore, both research projects I joined was related to these fields. </p>
        </div>
        <div class="col-md-3"></div>
      </div>
        <div class="col-md-12 text-center">
          <img src="img/edu_banner.jpg" width="90%"></img>
        </div>
      </div>
    </div>
    </section>

    <section id="about_personality" class="bg-light-gray">
        <div class="container">
        <div class="text-center"> <h2>My Personality </h2> </div>
        <div class="row">
          <div class="col-md-1"></div>
          <div class="col-md-5">
            <h3 class="section-subsubheading">The MBTI test</h3>
            <p>Personally, I quite like to describe my personality using the MBTI since it describe me quite well. MBTI is a theory constructed by Katharine Cook Briggs and her daughter Isabel Briggs Myers to describe the order of each person’s preference and choice in 4 areas. A person will be described using a 4-letter acronym, which comes from:</p>
              <ul>
                <li>Introversion (I) or Extraversion (E) </li>
                <li>Intuition (N) or Sensing (S) </li>
                <li>Thinking (T) or Feeling (F) </li>
                <li>Judging (J) or Perceiving (P) </li>
              </ul>
            </p>
          </div>
          <div class="col-md-5">
            <img src="img/ESFJ.png" width="100%" style="margin-top:18px"></img>
          </div>
          <div class="col-md-1"></div>
        </div>
        <div class="container">
        <div class="row">
          <div class="col-md-1"></div>
          <div class="col-md-4">
            <img src="img/personal_about.jpg" width="90%" style="margin-top:18px"></img>
            <img src="img/team.jpg" width="90%" style="margin-top:18px"></img>

          </div>
          <div class="col-md-6">
            <h3 class="section-subsubheading">The ESFJ</h3>
            <p>So, I am of the type ESFJ, that means I am Extraversion, Sensing, Feeling and Judging. In general, ESFJ people, including me, are extraordinarily caring, social and popular people, always eager to help. </p>
            <h3 class="section-subsubheading">Workplace</h3>
            <p>In workplace, I have strong sense of responsibility and loyalty. In my past working experience, I constantly completed my tasks in time and was well-prepared for future jobs. Besides, I am a fast-learner, I pick things up fast. In my undergraduate research project I was able to learn new tools and skills and apply it in the project within short time.</p>
            <h3 class="section-subsubheading">Social Life</h3>
            <p>In social life, I am warm, caring and good at connecting with others. When working with others, I will seek harmony about other people’s feeling and strive for win-win situations for everyone. This personality allows me to be a strong team player and make a lot of good friends.</p>
            <p>Through understanding my personality I learnt to adjust myself to collaborate with others. In some group projects, I invited my teammates taking the test and getting to knwo each other personalities. It turned out that we work really well.</p>
            </br>
            <p>To know more about ESFJ personality, you can click <a href="https://www.16personalities.com/esfj-personality">here</a>.</p>
            <p>Click <a href="https://www.16personalities.com/free-personality-test">here</a> to try out the amazing MBTI test. </p>
          </div>
          <div class="col-md-1"></div>
        </div>
      </div>
    </section>
      <section id="about_hobbies">
        <div class="container">
        <div class="row">
          <div class="col-md-2"></div>
          <div class="col-md-8 text-center">
            <h2 class="section-subheading">Hobbies </h2>
            </br>
            <h3 class="section-subsubheading">Music is My Life</h3>
            <p>I played piano since I was 8, and I also knew some basics of other instruments like guitar and flute. Recently, I am preparing for my diploma exame for piano. Sometimes I perform in private concerts and also as an accompanist. In highschool I was the chairman of the school wind orchestra; in University, I am a member of the band society and orchestra. Despite actually playing the music, I enjoy attending concerts regularly in Hong Kong or overseas of all genres, ranging from classical, jazz to contemporary music. </p>
                      </br>
          </div>
          <div class="col-md-2"></div>
        </div>
          <div class="text-center">
        <div class="row">
          <div class="col-md-3 thumb-style">
            <img src="img/m_1.jpg" width="100%"></img>
            <p>Performance by Hong Kong Philharmonic</p>
          </div>
          <div class="col-md-3 thumb-style">
            <img src="img/m_2.jpg" width="100%"></img>
            <p>Performing in Private Concert</p>
          </div>
          <div class="col-md-3 thumb-style">
            <img src="img/m_3.jpg" width="100%"></img>
            <p>Opera House in Venice</p>
          </div>
          <div class="col-md-3 thumb-style">
            <img src="img/m_4.jpg" width="100%"></img>
            <p>Banding</p>
          </div>
        </div>
      </div>
      </br>
        <div class="row">
          <div class="col-md-2"></div>
          <div class="col-md-8 text-center">
            <h3 class="section-subsubheading">Traveling makes me feel alive</h3>
            <p>“You only live once.” When I got into the University, I started thinking what I want to accomplish in my life. Despite gaining academic awards and working experiences, I wanted to do something solely for fun when I am still young.</p>
            <p>Last year, there was a chance for me traveling to Europe, the experience was great. I enjoyed the amazing architectures and nature scenes from different countries. Among the places I visited, I love Venice the most. The waterways are beautiful and the life is relaxing. By the way, my next target is Iceland since many of my friends told me the view in Iceland is stunning and cannot be found in other places. Before my graduation, I wish I can travel to more places and try different new things. Below is some snapshots during my trips.</p>
          </br></br>
          </div>
          <div class="col-md-2"></div>
        </div>
        <div class="text-center">
        <div class="row">
          <div class="col-md-8 thumb-style">
            <img src="img/travel/t1.jpg" width="100%"></img>
            <p>Pisa</p>
          </div>
          <div class="col-md-4 thumb-style">
            <img src="img/travel/t2.jpg" width="100%"></img>
            <p>Rome</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3 thumb-style">
            <img src="img/travel/t3.jpg" width="100%"></img>
            <p>Vantican</p>
          </div>
          <div class="col-md-3 thumb-style">
            <img src="img/travel/t13.jpg" width="100%"></img>
            <p>Berlin</p>
          </div>
          <div class="col-md-3 thumb-style">
            <img src="img/travel/t14.jpg" width="100%"></img>
            <p>Berlin</p>
          </div>
          <div class="col-md-3 thumb-style">
            <img src="img/travel/t8.jpg" width="100%"></img>
            <p>Copenhagon</p>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4 thumb-style">
            <img src="img/travel/t16.jpg" width="90%"></img>
            <p>Venice</p>
          </div>
          <div class="col-md-8 thumb-style">
            <img src="img/travel/t11.jpg" width="100%"></img>
            <p>Stockholm</p>
          </div>
        </div>
      </div>
      </div>
      </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/cbpAnimatedHeader.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="js/agency.js"></script>

</body>
</html>