-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (61 loc) · 3.05 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
<!-- Thanks for taking a look! All the objects and particles are setup in the js/torusStarfield.js -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Josh Wilcox</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="img/favicon.ico" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
</head>
<body>
<div class="container">
<div class="content">
<h1>Josh<br>Wilcox</h1>
<p>Software Developer</p>
<div class = "center">
<a href="https://github.com/WilcoxJ"><i class = "fa fa-github-square" onclick="onDocumentClick('click')"></i></a>
<div class = "center">
<a href="https://github.com/WilcoxJ" onclick="onDocumentMouseDown('click')"><i class = "fa fa-github-square" onclick="onDocumentClick('click')"></i></a>
</div>
</div>
</div>
<script src="js/three.js"></script>
<!-- <script src="js/GLTFLoader.js"></script> -->
<script src="js/EffectComposer.js"></script>
<script src="js/RenderPass.js"></script>
<script src="js/UnrealBloomPass.js"></script>
<script src="js/LuminosityHighPassShader.js"></script>
<script src="js/CopyShader.js"></script>
<script src="js/ShaderPass.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/math.js"></script>
<script src="js/torusStarfield.js"></script>
<script>
//var file=document.createElement('script');
if( /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
alert('WebGL failed loading resource(s) for mobile device.');
}
// else {
// file.setAttribute("src", "js/torusStarfield.js");
// }
//document.getElementsByTagName("head")[0].appendChild(file);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js" integrity="sha512-2fk3Q4NXPYAqIha0glLZ2nluueK43aNoxvijPf53+DgL7UW9mkN+uXc1aEmnZdkkZVvtJZltpRt+JqTWc3TS3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/CSSRulePlugin.min.js" integrity="sha512-EIzKYNrmzSj8Q5czLrNi/F6bplhopAp2Li9nk/8r7MW+Ov9KPEo0xrjWMYXU8lFYy5dzh/w8Ql5ShZHucrjXdg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const content = CSSRulePlugin.getRule('.content:before')
const h1 = document.querySelector('h1')
const p = document.querySelector('p')
const i = document.querySelector('i')
const tl = gsap.timeline()
tl.from(content, { delay: .5, duration: 5, cssRule: {scaleX: 0}})
tl.to(h1, {duration: 2, clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)', y: '30px' }, "-=3")
tl.to(p, {duration: 2, clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)', y: '30px' }, "-=2")
tl.to(i, {duration: 2, clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)', y: '30px' }, "-=1")
</script>
</body>
</html>