-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
166 lines (136 loc) · 4.8 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
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
<!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' data-0="height:20vh" data-500="height:10vh"></div>
<div id='centre'>
<header>
<span id='headerMike'>Mike</span> <span id='headerPan'>Pan</span>
<span id='headerSub'> • Technical Artist</span>
<br/><br/>
<hr class='faintHR'/>
<br/>
</header>
<section id='main' data-start="padding-top:400px;" data-600="padding-top:-200px">
<a href="https://thepixelary.com/">
<div class="grid">
Founded<!-- (2016) -->
<div id="pixelary" class="preview"></div>
The Pixelary Media
</div>
</a>
<a href="expeditions.html">
<div class="grid">
Vida Systems(2016)<!-- (2016) -->
<div id="expeditions" class="preview"></div>
Google Expeditions VR
</div>
</a>
<a href="tesla.html">
<div class="grid">
Personal(2016)<!-- (2016) -->
<div id="tesla" class="preview"></div>
Tesla Model 3
</div>
</a>
<a href="bikes.html">
<div class="grid">
TotalSim(2015)<!-- (2015) -->
<div id="bikes" class="preview"></div>
Peloton Aerodynamics Visualization
</div>
</a>
<a href="cubes.html">
<div class="grid">
Personal(2014)<!-- (2014) -->
<div id="cube" class="preview"></div>
The Cube Experiment
</div>
</a>
<a href="bmw.html">
<div class="grid">
Personal(2013)<!-- (2013) -->
<div id="bmw" class="preview"></div>
BMW 1 Series M
</div>
</a>
<a href="flipbook.html">
<div class="grid">
Harvard University(2012)<!-- (2011-2014) -->
<div id="mfb" class="preview"></div>
Molecular Flipbook
</div>
</a>
<a href="ocean.html">
<div class="grid">
University of British Columbia(2011) <!-- (2008-2011) -->
<div id="fisheries" class="preview"></div>
Underwater Marine Visualization
</div>
</a>
<a href="http://www.bioblender.eu">
<div class="grid">
Institute of Clinical Physiology(2010) <!-- (2010) -->
<div id="bioblender" class="preview"></div>
BioBlender
</div>
</a>
<a href="https://github.com/mikepan/GameEngineBook">
<div class="grid">
Author<!-- (2012) -->
<div id="book" class="preview"></div>
Game Development With Blender
</div>
</a>
</section>
<section id='aboot'>
<div id='right'>
<ul>
<li><a href="http://blog.mikepan.com">Blog</a></li>
<li><a href="http://github.com/mikepan">GitHub</a></li>
<li><a href="http://twitter.com/themikepan">Twitter</a></li>
<li><a rel="me" href="https://mastodon.art/@mike">Mastodon</a></li>
</ul>
</div>
<div id='cen'>
<img src='content/avatar-circle.png' width='200px' align='left' style='margin-right:20px; margin-top:-10px; border-radius:10px' />
<p>Mike dabbles in 3D art, programming, game-making, book-writing and photography.</p>
<p>With 15 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 | 2024
<hr class='faintHR'/>
</footer>
</div> <!-- end center -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.slideview.js"></script>
<script type="text/javascript">
var images = {
pixelary:['pixelary.jpg'],
expeditions:['vida1.jpg', 'vida2.jpg', 'vida3.jpg'],
tesla:['tesla1.jpg', 'tesla2.jpg', 'tesla3.jpg'],
bikes:['bike1.jpg', 'bike2.jpg', 'bike3.jpg'],
bmw:['BMW0.jpg', 'BMW1.jpg', 'BMW2.jpg', 'BMW3.jpg', 'BMW4.jpg'],
fisheries:['Ocean0.jpg', 'Ocean1.jpg', 'Ocean2.jpg', 'Ocean4.jpg'],
mfb:['mfb0.jpg', 'mfb1.jpg', 'mfb2.jpg'],
cube:['cube1.jpg', 'cube2.jpg', 'cube4.jpg', 'cube5.jpg', 'cube6.jpg', 'cube7.jpg'],
book:['book0.jpg', 'book2.jpg', 'book4.jpg'],
bioblender:['BB0.jpg', 'BB1.jpg', 'BB2.jpg'],
}
$('.preview').slideview(function(e){return images[e.id];}, { size: [300,180]} );
</script>
</body>
</html>