/
index.html
73 lines (70 loc) · 4.93 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
<!-- Designing a responsive version
of the About Me Page for Thinkful
Current goals:
1. Make code more efficient
2. Create responsive web version
3. Create my own about me page design -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Me</title>
<!-- Initialize TypeKit -->
<script src="https://use.typekit.net/zlv8awf.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- Link style sheets -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<header class="masthead">
<div class="mastheadBackground">
<h1 class="headline container center colorWhite">Hi. I’m Alex.</h1>
</div>
<h3 class="deck container center spaceAbove2rem">Alex K. Fong to be exact. I’m a Chinese-American visual journalist and web developer. I work at <a href="http://www.chinadaily.com.cn">China Daily</a> as its assistant design director.</h3>
</section>
<section class="locationSection spaceAbove15rem">
<div class="locationBackground">
<h2 class="headline container center colorWhite">Places</h2>
</div>
<h3 class="deck container center spaceAbove2rem">I was born in San Francisco, went to college in San Diego, landed my first real job in San Jose and bought a house in Berkeley, California in the United States. I currently live in Beijing, China.</h3>
</section>
<section class="questionsSection spaceAbove15rem">
<div class="questionsBackground">
<h2 class="headline container center colorWhite">Errata</h2>
</div>
<h3 class="deck container center spaceAbove2rem">What are your favorite hobbies?</h3>
<p class="container center spaceAbove2rem">I like reading and making music. I am currently the guitarist for a Beijing-based rock band called The Paper Tigers. Our influences include The Clash, Franz Ferdinand, The Cure, Bloc Party and The Police.</p>
<h3 class="deck container center spaceAbove2rem">What’s your dream job?</h3>
<p class="container center spaceAbove2rem">I’m in love with the creative process. I love making things. And that’s really my dream job: continuing to make things that didn’t exist before. Graphic design and web development are just means to that end. At the end of the day, I’m satisfied when I’ve found an elegant solution for making a useful tool.</p>
<h3 class="deck container center spaceAbove2rem">What have you been listening to?</h3>
<p class="container center spaceAbove2rem">I’ve been listening to a mix of things. I somehow missed all of Ryan Adams’ records with the Cardinals, so I’m spinning those. I’m also listening a lot to the great jazz guitarist and educator Ted Greene, whose books I’m currently studying. His solo guitar playing is really tremendous, and the tones he gets out of his telecaster (which I also play) are quite inspiring.</p>
</section>
<section class="portfolioSection spaceAbove15rem">
<div class="portfolioBackground">
<h2 class="headline container center colorWhite">Work</h2>
</div>
<h3 class="deck container center spaceAbove2rem">I'm currently working on student projects for Thinkful, a coding boot camp. Here's a peek at some of the things I've done so far.</h3>
<div class="portfolio container center spaceAbove2rem">
<div class="portfolioItem">
<img src="images/hackthenyt.jpg" alt="Hack the New York Times">
<p><strong>Hack the New York Times:</strong> Demonstrate a working knowledge of developer tools by making local changes to the New York Times website. As a journalist, the NYT is a little sacred, hence my just using placeholder text in the space for one of the lead stories.</p>
</div>
<div class="portfolioItem">
<a href="http://alexkfong.github.io/fewd_landing_page_clone"><img src="images/karmaLandingPage.jpg" alt="Clone te Karma landing page"></a>
<p><strong>Clone the Karma landing page:</strong> The name of the game was, as much as possible, replicating the design of Karma's landing page. I went at this project twice, once to just copy the design and then a second pass to make my code more efficient and semantic.</p>
</div>
</div>
</section>
<footer class="contentFooter spaceAbove15rem">
<h3 class="deck container center">Let’s get social</h3>
<ul class="social container center spaceAbove2rem">
<li ><a href="http://www.github.com/alexkfong"><i class="fa fa-github fa-2x" alt="Github"></i></a></li>
<li><a href="http://www.twitter.com/alexkfong"><i class="fa fa-twitter fa-2x" alt="Twitter"></i></a></li>
<li><a href="plus.google.com/110350459753554134172"><i class="fa fa-google-plus fa-2x"></i></a></li>
</ul>
<p class="container center spaceAbove2rem">Images via <a href="http://www.unsplash.com">Unsplash</a></p>
</footer>
</body>
</html>