-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathocean.html
94 lines (69 loc) · 3.42 KB
/
ocean.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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mike Pan: Portfolio</title>
<meta name="description" content="Portfolio for Mike Pan, contains CG artwork, photos and codes.">
<meta name="viewport" content="width=device-width, initial-scale=.7, user-scalable=no">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
<!-- TODO: Use webfonts -->
</head>
<body>
<div class='splash' id='splashOcean'></div>
<div id='centre'>
<header>
<a href="/">
<span id='headerPan'>Mike Pan</span>
<span id='headerSub'>• Portfolio</span>
</a>
<hr class='faintHR'/>
</header>
<article>
<h3>Marine Ecosystem Visualization For University of British Columbia </h3>
<p>I had the opportunity to work at the UBC Fisheries Center as a visualization artist to create various interactive content and videos for science communication purposes.</p>
<img style='box-shadow: 0 0 200px #134;' src='content/oceanviz/1.jpg'>
<p>It was a fun work environment where <a href="http://www.dalaifelinto.com">Dalai Felinto</a> and I took on many different projects. It was here that I learned the importance of production planning and pipelines. Without which most project would just collapse under its own weight.</p>
<img style='box-shadow: 0 0 300px #134;' src='content/oceanviz/2.jpg'><br/>
<p>Fish are friends. Not food.</p>
<img style='box-shadow: 0 0 300px #134;' src='content/oceanviz/3.jpg'>
<p>Sometimes, the need to convey certain data is in conflict with my desire to have more artistic freedom. While the image below is dramatic, it is too dark and moody to be used in a video.</p>
<img style='box-shadow: 0 0 300px #000;' src='content/oceanviz/4.jpg'><br/>
<p>Experimenting with a different visual style.</p>
<img style='box-shadow: 0 0 300px #000;' src='content/oceanviz/5.jpg'><br/>
<p></p>
<div id='flourish'>※</div>
</article>
<section id='aboot'>
<div id='right'>
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://github.com/mikepan">GitHub</a></li>
<li><a href="http://twitter.com/themikepan">Twitter</a></li>
<li><a href="http://vimeo.com/mikepan">Vimeo</a></li>
</ul>
</div>
<div id='cen'>
<p>Mike dabbles in 3D art, programming, game-making, book-writing and photography.</p>
<p>With 12 years of Blender experience and a keen interest in scientific visualization, he has worked for the University of British Columbia in Canada, Institute of Clinical Physiology in Italy, and Harvard Medical School.</p>
<p>You can contact him for quotes and projects at [email protected]</p>
</div>
<div style='clear:both'></div>
</section>
<footer>
<hr class='faintHR'/>
Mike Pan | Vancouver, Canada | 2015
<hr class='faintHR'/>
</footer>
</div> <!-- end center -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50473962-1', 'mikepan.com');
ga('send', 'pageview');
</script>
</body>
</html>