-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
175 lines (175 loc) · 8.43 KB
/
about.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
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>About · Joe Binns</title>
<link rel="stylesheet" href="styles.css">
<link id="shortcuticon" rel="shortcut icon" href="../images/jb.svg">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Gloria+Hallelujah" />
</head>
<body>
<div class="model-preview">
<canvas class="webgl">
</canvas>
<img id="fidget-toy-arrow" src="../images/about/arrow_purple.svg" style="position: absolute; left: 190px; top: 300px;" hidden=true>
<h1 id="fidget-toy-text" class="fidget-toy" hidden=true>
heckin'<br>
spinny
</h1>
</img>
</div>
<div class="padding logo-wrapper">
<logo>
<a href="/" class="gradient-multiline-invert">
<h1>
<span>
Joe
<br>
Binns
</span>
</h1>
</a>
</logo>
</div>
<div class="interface">
<menu class="padding">
<optHide>
<div style="width: 100px;">
</div>
<itemAlt>
<div class="tr" style="height: 24px;">
<div class="td">
<a class="hyperimage" href="mailto:hello@joebinns.com" target="_blank"><img id="mail" src="images/mail_box_optimised.svg" alt="email" width="20" height="20"></a>
<a class="hyperimage" href="https://www.linkedin.com/in/joe-binns/" target="_blank"><img id="linkedin" src="images/linkedin_box_optimised.svg" alt="LinkedIn" width="20" height="20"></a>
</div>
</div>
<div class="tr" style="height: 24px;">
<div class="td">
<a class="hyperimage" href="https://github.com/joebinns" target="_blank"><img id="github" src="../images/github_box_optimised.svg" alt="GitHub" width="20" height="20"></a>
<a class="hyperimage" href="https://joebinns.itch.io/" target="_blank"><img id="itchdotio" src="../images/itchdotio_box_optimised.svg" alt="itch.io" width="20" height="20"></a>
<a class="hyperimage" href="https://www.youtube.com/@joebinns95/" target="_blank"><img id="youtube" src="../images/youtube_box_optimised.svg" alt="YouTube" width="20" height="20"></a>
</div>
</div>
</itemAlt>
<item>
<div class="tr" style="height: 24px; position:relative; top: 6px">
<div class="td">
<a class="hyperlink lowercase" href="./about">about</a>
</div>
</div>
<div class="tr" style="height: 24px; position:relative; top: 6px">
<div class="td">
<a class="hyperlink lowercase" href="../documents/cv/cv-joe-binns.pdf">curriculum vitae</a>
</div>
</div>
</item>
</optHide>
</menu>
<div class="top right" style="z-index: 20; padding: 30px;">
<a class="hyperimage" href="/" ><img id="back" src="../images/back.svg" alt="back" width="40" height="40"></a>
</div>
</div>
<div class="content">
<project>
<h1 class="section">
Hello, I'm Joe.
</h1>
<div class="document">
<p>
<b>A physics-oriented gameplay programmer exploring tactile play.</b>
<!--
A physics-oriented gameplay programmer exploring the realms of <span class="shake-text">touch</span> and <span class="wave-text"><span class="one">v</span><span class="two">i</span><span class="three">s</span><span class="four">i</span><span class="five">o</span><span class="six">n</span></span>.*<br>
A physics-oriented gameplay programmer exploring tactile play.
<br>
A gameplay programmer leveraging a physics background to create mesmerising tactile experiences.<br>
<br>
A gameplay programmer who loves all things visual and game feel.<br>
-->
</p>
<p>
<!--
Raised in South East London and settled in Sweden, I'm currently studying at <a class="hyperlink" href="https://futuregames.se/">Futuregames Stockholm</a>.<br>
Prior to devoting myself to game development, I was a theoretical physicist at <a class="hyperlink" href="https://www.atp.lu.se/cbbp">Lund University</a> with a specialisation in machine learning.<br>
-->
Raised in South East London, I moved to Sweden as a teenager to study theoretical physics at <a class="hyperlink" href="https://www.fysik.lu.se/">Lund University</a>.<br>
All the while, evenings and weekends were tirelessly spent reading about game development and tinkering away.<br>
<!--I had discovered my creative outlet as a game programmer;
an obsession with the craft soon followed.<br>-->
Upon completion of a machine learning focused thesis, I made the move to study game programming at <a class="hyperlink" href="https://futuregames.se/">Futuregames Stockholm</a>.<br>
I’m now working as a Junior Game Programmer at <a class="hyperlink" href="https://neatcorporation.com/">Neat Corp</a>.
</p>
<p>
I strive to: <span style="font-style: italic;">"Learn the rules like a pro, so (I) can break them like an artist."</span>
</p>
</div>
<br>
<ul class="polaroids">
<li>
<div class="polaroid">
<span style="width: 256px; text-align: center; font-size: 36px; text-shadow: #0f0f0f 2px 2px 0px; transform: translateY(-50px) rotate(-32deg); user-select: none;">
📌
</span>
<img class="photo" src="../images/about/shambala.png">
</div>
</li>
<li>
<div class="polaroid" style="transform: rotate(-1deg);">
<span style="width: 256px; text-align: center; font-size: 36px; text-shadow: #0f0f0f -1px 3px 0px; transform: translateY(-50px) translateX(-3.5px) rotate(-67deg); user-select: none;">
📌
</span>
<img class="photo" src="../images/about/boys.png">
</div>
</li>
<li>
<div class="polaroid">
<span style="width: 256px; text-align: center; font-size: 36px; text-shadow: #0f0f0f 2px 2px 0px; transform: translateY(-50px) translateX(2px) rotate(-14deg); user-select: none;">
📌
</span>
<img class="photo" src="../images/about/eli.png">
</div>
</li>
</ul>
</project>
<ul class="portfolio-pieces">
<li>
<a href="/" class="gradient-multiline">
<h2>
<portfolio-prefix>
<date>country roads, take me</date><br>
<badge></badge>
</portfolio-prefix>
<portfolio-title>Home</portfolio-title>
</h2>
</a>
</li>
</ul>
<!--
<div class="footer">
<p>
*Can't say I'm the best with audio though... or smell.
</p>
</div>
-->
</div>
<p class="copyright-notice">
Copyright © 2021-2025 Joseph Alexander Binns. All rights reserved.
</p>
<div class="tint-overlay max"></div>
<div class="tint-overlay min"></div>
<script type="importmap"> {
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"gltf-loader": "https://unpkg.com/three/examples/jsm/loaders/GLTFLoader.js",
"pass": "https://unpkg.com/three/examples/jsm/postprocessing/Pass.js",
"effect-composer": "https://unpkg.com/three/examples/jsm/postprocessing/EffectComposer.js",
"shader-pass": "https://unpkg.com/three/examples/jsm/postprocessing/ShaderPass.js",
"bloom-pass": "https://unpkg.com/three/examples/jsm/postprocessing/BloomPass.js"
}
}
</script>
<script type="module" src="src/DocumentDarkMode.js"></script>
<script type="module" src="src/DocumentDarkModePage.js"></script>
<script type="module" src="src/About.js"></script>
</body>
</html>