Skip to content

Commit 0e2f431

Browse files
kernkern
committed
Let's get it started!
1 parent 21e4625 commit 0e2f431

10 files changed

+2011
-37
lines changed

‎app.css

+74-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
1-
/* http://meyerweb.com/eric/tools/css/reset/
2-
* v2.0 | 20110126
3-
* License: none (public domain)
4-
* */
1+
@font-face {
2+
font-family: 'Dosis';
3+
src: url('/fonts/dosis-medium-webfont.eot');
4+
src: url('/fonts/dosis-medium-webfont.eot?#iefix') format('embedded-opentype'),
5+
url('/fonts/dosis-medium-webfont.woff2') format('woff2'),
6+
url('/fonts/dosis-medium-webfont.woff') format('woff'),
7+
url('/fonts/dosis-medium-webfont.ttf') format('truetype'),
8+
url('/fonts/dosis-medium-webfont.svg#dosismedium') format('svg');
9+
font-weight: normal;
10+
font-style: normal;
11+
}
12+
/**
13+
* Eric Meyer's CSS Reset
14+
* http://meyerweb.com/eric/tools/css/reset/
15+
* v2.0 | 20110126
16+
* License: none (public domain)
17+
**/
518

619
html, body, div, span, applet, object, iframe,
720
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
@@ -53,3 +66,60 @@ table {
5366
border-spacing: 0;
5467

5568
}
69+
70+
body {
71+
background: black;
72+
color: white;
73+
}
74+
75+
a, a:link {
76+
color: white;
77+
}
78+
79+
a:hover, a:focus {
80+
color: #EEE;
81+
}
82+
83+
a:active {
84+
color: #CCC;
85+
}
86+
87+
/**
88+
* Hackathon Hackers-specific styling.
89+
**/
90+
91+
.page-container {
92+
margin: 40px auto;
93+
max-width: 480px;
94+
width: 100%;
95+
}
96+
97+
.ico {
98+
display: block;
99+
margin: 0 auto;
100+
width: 300px;
101+
height: 300px;
102+
}
103+
104+
.page-main .call-to-action {
105+
font: 32px/40px 'Dosis', monospace;
106+
text-align: center;
107+
}
108+
109+
.page-main .note {
110+
font: 12px/20px 'Dosis', monospace;
111+
text-align: center;
112+
margin-bottom: 40px;
113+
}
114+
115+
.page-footer {
116+
font: 12px/20px 'Dosis', monospace;
117+
text-align: center;
118+
margin: 20px 0;
119+
}
120+
121+
@media (max-width: 960px) {
122+
.page-container {
123+
margin: 20px auto;
124+
}
125+
}

‎app.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
function createIcoGeo() {
2+
var geo = new THREE.IcosahedronGeometry(100, 0)
3+
4+
geo.faceVertexUvs[0] = []
5+
geo.faces[0].materialIndex = 0
6+
for (var i = 1; i < geo.faces.length; i++) {
7+
geo.faceVertexUvs[0].push([
8+
new THREE.Vector2(0, 0),
9+
new THREE.Vector2(0, 1),
10+
new THREE.Vector2(1, 1)
11+
])
12+
geo.faces[i].materialIndex = 1
13+
}
14+
15+
return geo
16+
}
17+
18+
var scene = new THREE.Scene()
19+
var renderer = new THREE.WebGLRenderer({ antialias: true })
20+
renderer.setSize(300, 300)
21+
22+
var camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000)
23+
camera.position.z = 400
24+
scene.add(camera)
25+
26+
var icoElement = document.getElementById('ico')
27+
icoElement.appendChild(renderer.domElement)
28+
29+
var outlineMat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.BackSide })
30+
var wireframeMat = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true, wireframeLinewidth: 5 })
31+
var blackMat = new THREE.MeshBasicMaterial({ color: 0x000000 })
32+
var faceMat = new THREE.MeshFaceMaterial([
33+
new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('face.png'), side: THREE.DoubleSide }),
34+
new THREE.MeshBasicMaterial({ transparent: true, opacity: 0 })
35+
])
36+
37+
var faceMesh = new THREE.Mesh(createIcoGeo(), faceMat)
38+
var outlineMesh = new THREE.Mesh(createIcoGeo(), outlineMat)
39+
var panelMesh = new THREE.Mesh(createIcoGeo(), blackMat)
40+
var wireframeMesh = new THREE.Mesh(createIcoGeo(), wireframeMat)
41+
42+
faceMesh.scale.multiplyScalar(0.99)
43+
outlineMesh.scale.multiplyScalar(1.1)
44+
panelMesh.scale.multiplyScalar(0.99)
45+
46+
scene.add(faceMesh)
47+
scene.add(outlineMesh)
48+
scene.add(panelMesh)
49+
scene.add(wireframeMesh)
50+
51+
function render() {
52+
requestAnimationFrame(render)
53+
renderer.render(scene, camera)
54+
55+
var zRot = 1 / 66
56+
var xRot = 2 / 50
57+
var yRot = 2 / 100
58+
59+
faceMesh.rotation.x += xRot
60+
faceMesh.rotation.y += yRot
61+
faceMesh.rotation.z += zRot
62+
outlineMesh.rotation.x += xRot
63+
outlineMesh.rotation.y += yRot
64+
outlineMesh.rotation.z += zRot
65+
panelMesh.rotation.x += xRot
66+
panelMesh.rotation.y += yRot
67+
panelMesh.rotation.z += zRot
68+
wireframeMesh.rotation.x += xRot
69+
wireframeMesh.rotation.y += yRot
70+
wireframeMesh.rotation.z += zRot
71+
}
72+
73+
render()

‎face.png

8.99 KB
Loading

‎fonts/dosis-medium-demo.html

+612
Large diffs are not rendered by default.

‎fonts/dosis-medium-webfont.eot

26.4 KB
Binary file not shown.

‎fonts/dosis-medium-webfont.svg

+1,214
Loading

‎fonts/dosis-medium-webfont.ttf

60 KB
Binary file not shown.

‎fonts/dosis-medium-webfont.woff

29.6 KB
Binary file not shown.

‎fonts/dosis-medium-webfont.woff2

23.6 KB
Binary file not shown.

‎index.html

+38-33
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,46 @@
11
<!doctype html>
2-
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Hackathon Hackers | Make Awesome Things</title>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Hackathon Hackers | Make Awesome Things</title>
66

7-
<link rel="stylesheet" href="/app.css">
8-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
9-
<!--[if lt IE 9]>
10-
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11-
<![endif]-->
12-
</head>
7+
<link rel="stylesheet" href="/app.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
9+
<!--[if lt IE 9]>
10+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11+
<![endif]-->
12+
</head>
1313

14-
<body>
15-
<div class="page-container">
16-
<header class="page-header">
17-
<h1>Hackathon Hackers</h1>
18-
<h2>Make Awesome Things</h2>
19-
</header>
14+
<body>
15+
<div class="page-container">
16+
<header class="page-header">
17+
<div class="ico" id="ico" title="Ico, the Hackathon Hackers mascot, represents the many facets of the HH community."></div>
18+
</header>
2019

21-
<main>
22-
<p>In the meantime, check out the <a href="http://hh.gd">Hackathon Hackers Facebook Group</a>.</p>
23-
</main>
20+
<main class="page-main">
21+
<p class="call-to-action"><a href="http://hh.gd">Take me to<br />Hackathon Hackers!</a></p>
22+
<p class="note">Much, much more coming soon. Stay tuned...</p>
23+
</main>
2424

25-
<footer>
26-
<p>Released under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a> &middot; Thanks to <a href="https://twitter.com/teddy">@teddy</a> for the awesome domain name.</p>
27-
</footer>
28-
</div>
25+
<footer class="page-footer">
26+
<h1>Hackathon Hackers &middot; Make Awesome Things</h2>
27+
<p>Thanks <a href="https://twitter.com/teddy">@teddy</a> for the awesome domain name.</p>
28+
<p>Released under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a> &middot; <a href="http://hh.gd/websource">Fork Us</a></p>
29+
</footer>
30+
</div>
2931

30-
<script>
31-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
32-
(i[r].q=i[r].q||[]).push(arguments)
33-
},i[r].l=1*new Date();a=s.createElement(o),
34-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
35-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
32+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
33+
<script src="/app.js"></script>
3634

37-
ga('create', 'UA-66243923-1', 'auto');
38-
ga('send', 'pageview');
39-
</script>
40-
</body>
35+
<script>
36+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
37+
(i[r].q=i[r].q||[]).push(arguments)
38+
},i[r].l=1*new Date();a=s.createElement(o),
39+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
40+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
41+
42+
ga('create', 'UA-66243923-1', 'auto');
43+
ga('send', 'pageview');
44+
</script>
45+
</body>
4146
</html>

0 commit comments

Comments
 (0)