-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (70 loc) · 3.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Josh Hudson</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
</head>
<body>
<div class="header">
<div class="headcontent">
<h1>Hello</h1>
<div>
<p>
I'm Josh Hudson
</p>
</div>
</div>
<div class="scroll-down fa fa-angle-down">Scroll down</div>
</div>
<div class='project'>
<h2 class='heads'>
Musical Ecosystem
</h2>
<p class='heads'>
JavaScipt & Canvas
</p>
<div class='image'>
<a target='_blank' href='MusicalEcosystem/MusicalEcosystem.html'>
<img src='images/MusicalEcosystem.png'>
</a>
</div>
<div class='content'>
<p>
This was a project for Brighton Digital Festival created by Luke Twyman <a target='_blank' href='https://www.twitter.com/whitevinyluk'>@whitevinyluk</a> for the Codebar Brighton Code/Explore/Create weekend 2017. The workshop was amazing and i wanted to share this as it's a great little project.<br><br>
The enviroment is created using JavaScript to create spores that move freely around the page and organsims that are created using Canvas. The organisms move around the enviroment to locate the spores and feed and also multiply. The organisms have a life force and once depleted they will die and explode creating new spores. Circle of Life.<br><br>
If you wish to create this please go tothe below link to make your own enviroment.<br>
<a target='_blank' href='https://whitevinyl.github.io/CODE-EXPLORE-CREATE/'>Musical Ecosystem</a>
</p>
</div>
</div>
<div class='project'>
<h2 class='heads'>
CSS Animation
</h2>
<p class='heads'>
HTML & CSS
</p>
<a class='image' target='_blank' href='TotoroAnimation/index.html'>
<img src='images/Totoro.png'>
</a>
<p class='content'>
I have recently discovered CSS animation and find it amazing and stil leanring lots about it. Being able to adjust items on a page with animation is a great tool to know as saves having to use a lot of JavaScript to do certain tasks and creates less processor lag. Dont get me wrong i like JavaScript its uses are useful.<br><br>
Heres an example of some CSS animation that i created with embeded music and my neighbour Totoro. This is another example of what i learnt at Codebar Brightons weekend workshop for the Brighton Digital Festival 2017 which was led by Cassie Evans <a target='_blank' href='https://www.twitter.com/cassiecodes'>@cassiecodes</a>.<br><br> I throughly enjoyed this workshop and i'm going to delve deeper into CSS Animations for future projects.
</p>
</div>
<div class='project'>
<h2 class='heads'>
Codepen<br>
</h2>
<p class='content'>
As i have mentioned above i have a fondness for CSS Animation and I have been on codepen for a short time dabbling with animations and will work on some other cool things too. Codepen is a great space to create and test out coding projects and also usable within the browser so no bulky text editor downloads on my limited space laptop. Please check out my<a target='blank' href='https://www.codepen.io/joshyhud'>Codepens</a>
</p>
<div class='contact'>
<a target='_blank' href='https://www.twitter.com/joshyhud'><img src=images/twitter.png style='width:60px; height:60px;'>
<a href='mailto:[email protected]'><img src='images/email.svg' style='width:60px; height:60px;'></a>
</div>
</body>
</html>