Repository navigation
Expand file tree
/
Copy pathsections.html
More file actions
173 lines (158 loc) · 7.71 KB
/
Copy pathsections.html
File metadata and controls
173 lines (158 loc) · 7.71 KB
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
<!DOCTYPE HTML>
<!--
Astral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>James Wong</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/sections.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper-->
<div id="wrapper">
<!-- Nav -->
<nav id="nav">
<a href="#" class="icon solid fa-home"><span>home</span></a>
<a href="#blog" class="icon brands fa-blogger-b"><span>blog</span></a>
<a href="#gallery" class="icon brands fa-flickr"><span>gallery</span></a>
<a href="#about" class="icon brands fa-angellist"><span>about</span></a>
<a href="#contact" class="icon solid fa-envelope"><span>Contact</span></a>
</nav>
<!-- Main -->
<div id="main">
<!-- Me -->
<article id="home" class="panel intro">
<header>
<h1>James Wong</h1>
<p>C.ENG | E.I.T. | COFFEE LOVER</p>
</header>
<a href="#blog" class="jumplink pic">
<span class="arrow icon solid fa-chevron-right"><span>See my blog</span></span>
<img src="images/me.jpg" alt="" />
</a>
</article>
<!-- Blog -->
<article id="blog" class="panel">
<header>
<h2>blog</h2>
</header>
<p>
[coming soon.]
</p>
<section>
<div class="row">
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="assets/css/images/pic01.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="assets/css/images/pic02.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="assets/css/images/pic03.jpg" alt=""></a>
</div>
</div>
</section>
</article>
<!-- Gallery -->
<article id="gallery" class="panel">
<header>
<h2>gallery</h2>
<h3>a slice of life.</h3>
</header>
<section>
<div class="row image fit">
<div class="col-12 col-6-medium col-12-small">
<iframe style="position: relative; top: 0; left: 0; width: 100%; height: 100%;" src="https://flickrembed.com/cms_embed.php?source=flickr&layout=responsive&input=191214413@N05&sort=0&by=user&theme=tiles_nested&scale=fill&speed=3000&limit=10&skin=default&autoplay=true" scrolling="yes" frameborder="0" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
<small>Powered by <a href="https://flickrembed.com">flickr embed</a>.</small>
</iframe>
<script type="text/javascript">function showpics(){var a=$("#box").val();$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+a+"&tagmode=any&format=json&jsoncallback=?",function(a){$("#images").hide().html(a).fadeIn("fast"),$.each(a.items,function(a,e){$("<img/>").attr("src",e.media.m).appendTo("#images")})})}
</script>
</div>
</div>
</section>
</article>
<!-- About -->
<article id="about" class="panel">
<header>
<h2>about</h2>
<h3>who's me</h3>
</header>
<p>
<span class="avatar"><img src="https://scontent-sea1-1.cdninstagram.com/v/t51.2885-19/s320x320/65132629_1767072096771295_5792541814233759744_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&_nc_ohc=MGKRBko-b9gAX9vRorm&tp=25&oh=b05e19fb66cb360d97f8322fa51bb6f8&oe=5FDDC163" alt="Me" /></span>
I was always told I’d become a doctor, thinking I'd would become one until my senior year of highschool. Around this time I built my first computer and was fascinated by the world of technology, this launched me into a career of engineering and ultimately pursuing a Bachelor of Engineering at the University of Victoria. In my post-secondary education, I became exposed to another world of possibilities, from Formula racing to telecommunication tech and delving myself into a new social scene of beer, coffee and music. Fast forward to the present day, these experiences have influenced my passion for culinary and artistic expression while keeping a day job as an engineer.<br>
<br>You can find me writing on, <a href="#blog">[blog]</a>.
<br><br>While capturing moments, <a href="#gallery">[gallery]</a>.
<br><br>Or, a little about my caffeinated journey through the world of coffee, <a href="https://www.instagram.com/javajamescoffee/">here </a>.
<br><br>If you'd like to learn more about my engineering profile, find me on <a href="https://www.linkedin.com/in/jamesawong/">LinkedIn</a>
<br><br>Otherwise, feel free to leave me a message right over <a href="#contact">here</a>.
</p>
<section>
<div class="row">
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic01.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic02.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic03.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic04.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic05.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic06.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic07.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic08.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic09.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic10.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic11.jpg" alt=""></a>
</div>
<div class="col-4 col-6-medium col-12-small">
<a href="#" class="image fit"><img src="images/pic12.jpg" alt=""></a>
</div>
</div>
</section>
</article>
<!-- Contact -->
<article id="contact" class="panel">
<header>
<h2>psst, who's you?</h2>
<h3>leave a message after the tone</h3>
</header>
<p> [coming soon.] </p>
</article>
</div>
<!-- Footer -->
<div id="footer">
<ul class="copyright">
<li>© James Wong</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>