194 lines
11 KiB
HTML
194 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="shortcut icon" href="">
|
|
<title>Arona Jones</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="/css/artexam.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/custom.css">
|
|
<!--<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">-->
|
|
<script src="/javascripts/lightbox.js"></script>
|
|
<!-- Custom styles for this template -->
|
|
<style>
|
|
body {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.starter-template {
|
|
padding: 40px 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
border-bottom: 1px solid black;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
img {
|
|
padding: 10px;
|
|
}
|
|
|
|
.block {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
display: grid;
|
|
}
|
|
</style>
|
|
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<div style="position: fixed; background-color: #ca7; top: 0px; width: 100%">
|
|
<ul class="nav nav-tabs">
|
|
<li role="presentation"><a href="#top">Top</a>
|
|
</li>
|
|
<li role="presentation"><a href="#photos">Photos</a>
|
|
</li>
|
|
<li role="presentation"><a href="#linework">Linework</a>
|
|
</li>
|
|
<li role="presentation"><a href="#gradiented">Gradiented</a>
|
|
</li>
|
|
<li role="presentation"><a href="#hand">Hand</a>
|
|
</li>
|
|
<li role="presentation"><a href="#artist">Artist Link</a>
|
|
</li>
|
|
<li role="presentation"><a href="#photos2">Photoshoot</a>
|
|
</li>
|
|
<li role="presentation"><a href="#anim">Animation</a>
|
|
</li>
|
|
<li role="presentation"><a href="#final">Final Piece</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="starter-template">
|
|
<div id="top">
|
|
<h1 style="font-weight: 800; color: #222">Apart and Together</h1>
|
|
<h2>Arona Jones (#1045)</h2>
|
|
</div>
|
|
<div id="photos">
|
|
<h2 class="ruled">Photos</h2>
|
|
|
|
<img src="/images/art/1.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/2.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/3.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/4.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/5.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/6.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/7.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/8.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/9.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/10.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/11.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/15.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/16.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/16.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/18.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/20.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/21.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/22.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/23.JPG" alt="..." class="img-rounded block">
|
|
<img src="/images/art/24.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/25.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/27.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/28.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/29.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/30.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/31.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/32.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/33.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/34.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/35.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/36.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/37.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/38.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/39.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/40.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/41.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/42.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/43.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/44.jpg" alt="..." class="img-rounded block">
|
|
<img src="/images/art/45.jpg" alt="..." class="img-rounded block">
|
|
</div>
|
|
<div id="linework">
|
|
<h2 class="ruled">Linework</h2>
|
|
<img src="/images/art/line-single.png" height="500px">
|
|
<img src="/images/art/line-double.png" height="500px">
|
|
<img src="/images/art/line-hand.png" height="500px">
|
|
</div>
|
|
<div id="gradiented">
|
|
<h2 class="ruled">Gradiented Images</h2>
|
|
<img src="/images/art/single.png" height="500px">
|
|
<img src="/images/art/double.jpg" height="500px">
|
|
<img src="/images/art/hand.jpg" height="500px">
|
|
</div>
|
|
<div id="hand">
|
|
<h2 class="ruled">Lorem Ipsum</h2>
|
|
<h3>Hand Constructed:</h3>
|
|
<img src="/images/art/handConstructed.png" class="img-rounded" style="width: 200px">
|
|
<h3>Hand Deconstructed:</h3>
|
|
<img src="/images/art/handDeco.png" class="img-rounded" style="width: 60%">
|
|
<h3>Construction Process:</h3>
|
|
<img src="/images/art/hand.gif" class="img-rounded" style="width: 60%">
|
|
<h3>Stills from the construction process:</h3>
|
|
<img src="/images/art/hand1.png" class="img-rounded" style="width: 40%">
|
|
<img src="/images/art/hand2.png" class="img-rounded" style="width: 40%">
|
|
<img src="/images/art/hand3.png" class="img-rounded" style="width: 40%">
|
|
<img src="/images/art/hand4.png" class="img-rounded" style="width: 40%">
|
|
</div>
|
|
<div id="artist">
|
|
<h2 class="ruled">Artist Link: Cyriak</h2>
|
|
<figure style="float: left">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Cyriak_in_2010.jpg/220px-Cyriak_in_2010.jpg">
|
|
<figcaption>Cyraik in 2010</figcaption>
|
|
</figure>
|
|
<p class="text-justify">Freelance animator and producer Cyriak Harris is known for his surrealist and often quite disturbing animated shorts. He uses a combination of Adobe Aftereffects and Photoshop to produce these. The vidoes display a distinct surrealist and psychidelic style, often based on fractual geometry and usually with a "distinct British theme". His animations often feature his hometown of Brighton, celebrities and television shows.
|
|
<br>
|
|
<br>He has been a regular contributor to b3ta, a digital art community launched in 2001, since 2004. He has had commissions from Coke, Sumo TV and other companies. He has also been director for various music vidoes. His Youtube account features a compilation of his animations, which have been noticed by many in the blogging world.
|
|
<br>
|
|
<br>His work also led to a short interview with BBC South East in November 2006. The BBC commissioned his video "DeadEnders" as a sequel to Cyriak's earlier "BeastEnders". Based on the British soap opera EastEnders it explored the idea of all the characters that have died in EastEnders going on a "brain-eating zombie rampage". Both of these films were featured on the BBC Three comedy series Comedy Shuffle. Other than this, he has not been recognised to a significant extent outside of certain parts of the internet.</p>
|
|
<h3>An example of his work:</h3>
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/WQO-aOdJLiw" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div id="photos2">
|
|
<h2 class="ruled">Photoshoot</h2>
|
|
<img src="/images/art/person1.jpg" class="img-rounded" style="width: 110px; height: 300px">
|
|
<img src="/images/art/person2.jpg" class="img-rounded" style="width: 100px; height: 300px">
|
|
<img src="/images/art/person3.jpg" class="img-rounded" style="width: 120px; height: 300px">
|
|
<img src="/images/art/person4.jpg" class="img-rounded" style="width: 100px; height: 300px">
|
|
<img src="/images/art/person5.jpg" class="img-rounded" style="width: 120px; height: 300px">
|
|
<img src="/images/art/person6.jpg" class="img-rounded" style="width: 130px; height: 300px">
|
|
<img src="/images/art/person7.jpg" class="img-rounded" style="width: 120px; height: 300px">
|
|
</div>
|
|
<div id="anim">
|
|
<h2 class="ruled">Surrealist animation of people</h2>
|
|
<img src="/images/art/swap.gif" class="img-rounded" style="width: 40%">
|
|
<br>
|
|
<br>
|
|
<img src="/images/art/5way.gif" class="img-rounded" style="width: 40%">
|
|
</div>
|
|
<div id="final">
|
|
<h2 class="ruled">Final Piece</h2>
|
|
<img src="/images/art/final.gif" class="img-rounded" style="width: 50%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<!-- compiled and minified Bootstrap JavaScript -->
|
|
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
</body>
|
|
|
|
</html> |