arthurs97.github.io/index.html at master · arthurs97/arthurs97.github.io · 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
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
<!--
TODO:
-figure out styling for sections (background color mostly)
-fix styling on recruiting lists
-fix pictures not loading on namecheap
-fix file organizations
-get social icons to appear inline w contact icons
-maybe reorder sections
 -->

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Arthur Shi</title>
     <!--Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <!-- Main css-->
	<link rel="stylesheet" type="text/css" href="/css/style.css">
    <!--Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Rokkitt:100|Roboto:400,900|Raleway" rel="stylesheet">
     <!--Font Awesome -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>


<body>

<!--Navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand heading" href="#">Arthur Shi</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i>    About</a></li>
                <li><a href="#blog"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>    Blog</a></li>
                <li><a href="#photos"><i class="fa fa-camera-retro" aria-hidden="true"></i>   Photos</a></li>
                <li><a href="#music"><i class="fa fa-music" aria-hidden="true"></i>   Music</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- TODO: UNCOMMENT -->
                <!-- <li><a href="#resume"><i class="fa fa-handshake-o" aria-hidden="true"></i>    Recruiting</a></li> -->
                <li><a href="#contact"><i class="fa fa-envelope-open-o" aria-hidden="true"></i>    Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--End navbar -->

<!-- Header -->
<header id="banner">
    <div class="container">
        <div class="row">
          <div id="landingContent">
            <h1 class="heading">Arthur Shi</h1>
            <h3>Lover of <span id="loverOf">life</span>.</h3>
            <hr>
            <p>Hey, welcome! Have a look around, get to know me a bit, and don't hesitate to get in touch.</p>
          </div>
        </div>
    </div>
</header>
<!-- End header -->

<!-- About -->
<section class="bg-primary" id="about">
<div class="container">
    <div class="row">
        <div class="col-xs-4 container">
            <!-- https://imgur.com/fS1gC1m.jpg -->
            <img src="/img/portrait.jpg" alt="Me!" id="portrait" align="right">
        </div>
        <div class="col-xs-8" id="about-text">
            <h2 class="section-heading">About Me</h2>
            <hr align="left">
            <p>I wonder what a more inspired world looks like, and how I can help build it. I'm a junior studying computer science at the University of Michigan and spend most of my time coding, writing, listening to music, or hanging out with friends. </p>
        </div>
    </div>
</div>
</section>

<!-- Blog-->
<section class="section blog" id="blog">
    <link rel="stylesheet" type="text/css" href="/css/blog.css">
    <div class="container">
        <header>
            <h2 class="section-heading">Blog</h2>
            <p>For now, my voice is but a whisper; in writing it will grow.</p>
        </header>
        <hr align="left" style="width:80%;">
    <div class="section-content" id="blogContent">
        <!--<p>Total words blogged so far: <span id="wordCount"></span></p>-->
        <div class="row" id="jsonContent"></div>
    </div>
    <!-- /#blogContent-->
    <div class="text-center"><a class="btn btn-dark" id="loadBlogPosts" href="//medium.com/feed/arthurs-blog" style="font-size: 18px;">Check out my full blog on Medium  <span class="fa fa-angle-double-right"></span></a></div>
    </div>
    <br>
    <hr class="section">
</section>
<!-- End blog-->

<!-- Photos -->
<section class="section" id="photos">
    <div class="container">
        <header>
        <link rel="stylesheet" type="text/css" href="/css/instagram.css">
            <h2 class="section-heading">Photos</h2>
            <p>Pictures represent memories. Here are some of mine.</p>
        </header>
        <hr align="left" style="width:80%;">
    </div>
    <div class="container">
        <h3>Recents from my Instagram feed <a href="https://www.instagram.com/arthur_k_shi/"><img src="/img/instaLogo.png" alt="follow me on insta" style="width:30px;height:30px;border:0;"> </a></h3>
        <ul id="instafeed" align="center"></ul>
    </div>
    <br>
    <hr class="section">
</section>
<!-- End photos -->

<!-- Music -->
<section class="section" id="music">
    <div class="container">
        <header>
            <!-- TODO: Update with my stuff when I start on SC. -->
        <link rel="stylesheet" type="text/css" href="/css/instagram.css">
            <h2 class="section-heading">Music</h2>
            <p>I don't produce (yet), but I love to share. My mains: electronic, indie, lofi hip hop.</p>
        </header>
        <hr align="left" style="width:80%;">
    </div>
    <div class="container">
        <div class="row">
            <!-- spotify column -->
            <div class="col-xs-6" style="border-right: thin solid #c0c0c0;">
                <p><i>electricity</i> is a compilation of over 1250 songs driven by electronic instruments. You can see my other playlists  <a href="https://open.spotify.com/user/12101008677">here. <img src="/img/spotifyLogo.png" alt="follow me on spotify" style="width:25px;height:25px;border:0;"> </a></p>
                <div align="center">
                <!-- embedded playlist -->
                    <iframe src="https://open.spotify.com/embed?uri=spotify:user:12101008677:playlist:4GbH1S3vxYGvBSAN1ZwOHQ&theme=white" width="100%" height="400" frameborder="0" allowtransparency="true"></iframe>
                </div>
            </div>
            <!-- End spotify column-->
            <!-- soundcloud column -->
            <div class="col-xs-6">
                <p>If you'd like to get a better idea of what I've been discovering lately, here's a feed of all my favorited tracks on Soundcloud.</p>
                <iframe id="soundcloud" width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/270055821/favorites&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
            </div>
        </div>
    </div>
    <br>
    <hr class="section">
</section>
<!-- End music -->


<!-- Resume/recruiting -->
<!-- <section class="section" id="resume">
    <div class="container">
        <header>
            <h2 class="section-heading">Recruiting</h2>
            <p>In search of a summer 2018 internship. I'm eager to learn and ready to work hard.</p>
            <hr align="left" style="width:80%;">
        </header>
        <div class="row" style="font-size: 1.25em;">
            <div class="col-xs-6">
                <p align="center">I want to...</p>
                <ul>
                    <li>write cleaner, more accurate code</li>
                    <li>gain experience with new technologies</li>
                    <li>think strategically about software development as a business process</li>
                    <li>do important work that will reach users</li>
                    <li>better understand the human aspect of engineering</li>
                </ul>
            </div>
            <div class="col-xs-6">
                <p align="center">I can offer...</p>
                <ul>
                    <li>an intense desire to improve myself and those around me</li>
                    <li>the ability to adapt quickly to new skills and environments</li>
                    <li>diverse technical (systems, iOS, web) and entrepreneurial experience</li>
                    <li>a unique problem solving perspective</li>
                    <li>bad jokes, free laughs and hugs</li>
                </ul>
            </div>
        </div>
        <br>
        <br>
        <div align="center">
            <a href="arthur_shi_resume.pdf" class="btn btn-primary btn-lg" role="button">View my resume</a>
        </div>
        <div align="center">
            <br>
            <a href="https://www.linkedin.com/in/arthur-shi/" style="font-size: 1.1em;">Connect with me on LinkedIn</a>
        </div>
    </div>
</section> -->
<!-- End resume/recruiting -->
<!--Footer-->
<footer>
    <div class="container contact" id="contact">
        <div class="text-center">
            <h2 class="section-heading">Thanks for stopping by !</h2>
            <hr class="primary">
        </div>
        <div class="row text-center">
            <p>Connect with me:</p>
            <div class="col-xs-6">
                <i class="fa fa-phone fa-3x sr-contact"></i>
                <p>248-974-6516</p>
            </div>

            <div class="col-xs-6">
                <i class="fa fa-envelope-o fa-3x sr-contact"></i>
                <p><a style="color:white;" href="mailto:arshi@umich.edu">arshi@umich.edu</a></p>
            </div>
        </div>
    </div>
    <div class="footer-social-icons social-icons container">
        <a class="fa fa-linkedin" href="https://www.linkedin.com/in/arthur-shi/"> </a>
        <a class="fa fa-github" href="https://github.com/arthurs97"> </a>
        <a class="fa fa-medium" href="https://medium.com/@arthurshi"> </a>
        <a class="fa fa-facebook" href="https://www.facebook.com/arthurkshi"> </a>
        <a class="fa fa-spotify" href="https://open.spotify.com/user/12101008677"> </a>
    </div>
</footer>
<!--End footer-->

<!-- Scripts -->
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/jquery-dateFormat.min.js"></script>
<!--lover of-->
<script src="/js/loverOf.js" type="text/javascript"></script>
 <!--Blog-->
 <script src="/js/blog.js" type="text/javascript"></script>
 <!--Instagram-->
 <script src="/js/instagram.js" type="text/javascript"></script>
<!--bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>