205 lines
8.1 KiB
HTML
205 lines
8.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Projects</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
<link rel="stylesheet" href="assets/css/main.css" />
|
|
<noscript>
|
|
<link rel="stylesheet" href="assets/css/noscript.css" />
|
|
</noscript>
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180"
|
|
href="favicon/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32"
|
|
href="favicon/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16"
|
|
href="favicon/favicon-16x16.png" />
|
|
<link rel="manifest" href="favicon/site.webmanifest" />
|
|
</head>
|
|
|
|
<body class="is-preload">
|
|
<!-- Wrapper -->
|
|
<div id="wrapper">
|
|
<!-- Header -->
|
|
<header>
|
|
<h1>Projects</h1>
|
|
</header>
|
|
|
|
<!-- Main -->
|
|
<div id="main">
|
|
<!-- Content -->
|
|
<section id="content" class="main">
|
|
<span class="image main"><img src="images/dddepth-088.jpg"
|
|
alt="" /></span>
|
|
<h2>Projects</h2>
|
|
<p>
|
|
Here are some Projects I've worked on over the years, I do this to
|
|
further my understanding of a topic.
|
|
</p>
|
|
<div class="card-container">
|
|
<a class="box-wrapper" href="https://samstoreymusic.com">
|
|
<div class="card">
|
|
<h2 class="title">Sam Storey Music</h2>
|
|
<img src="images/samstoreymusic.png" />
|
|
<p class="description">
|
|
I designed this website for the client as a portfolio of his
|
|
music and achievements. samstoreymusic.com is also hosted by
|
|
myself.
|
|
</p>
|
|
<p class="date">20th Jun 2023</p>
|
|
</div>
|
|
</a>
|
|
<a class="box-wrapper" href="projects/drawing_curves/index.html">
|
|
<div class="card">
|
|
<h2 class="title">Drawing Bezier Curves</h2>
|
|
<img src="images/bezier_curves.jpg" />
|
|
<p class="description">
|
|
An interactive animated diagram on drawing quadratic and cubic
|
|
Bezier curves. Click anywhere on the canvas to place your
|
|
points.
|
|
</p>
|
|
<p class="date">1st Oct 2021</p>
|
|
</div>
|
|
</a>
|
|
<a class="box-wrapper" href="projects/marching_squares.html">
|
|
<div class="card">
|
|
<h2 class="title">2D Marching Squares</h2>
|
|
<img src="images/marching_squares.png" />
|
|
<p class="description">
|
|
A demonstration of marching squares. Click a tile to edit the
|
|
terrain.
|
|
</p>
|
|
<p class="date">23rd Sept 2021</p>
|
|
</div>
|
|
</a>
|
|
<a class="box-wrapper" href="projects/sorting_vis.html">
|
|
<div class="card">
|
|
<h2 class="title">Bubble Sort Visualiser</h2>
|
|
<img src="images/bubble_sort.png" />
|
|
<p class="description">
|
|
A classic bubble sort visualiser where bars are sorted by
|
|
height. Where two elements are swapped each frame.
|
|
</p>
|
|
<p class="date">11th Apr 2020</p>
|
|
</div>
|
|
</a>
|
|
<!-- <a class="box-wrapper" href="#"> -->
|
|
<!-- <div class="card"> -->
|
|
<!-- <h2 class="title">Warping Lines Illusion</h2> -->
|
|
<!-- <img src="images/tsp.png" /> -->
|
|
<!-- <p class="description"> -->
|
|
<!-- A visualisation of the -->
|
|
<!-- <a -->
|
|
<!-- href="https://en.wikipedia.org/wiki/M%C3%BCller-Lyer_illusion#:~:text=The%20M%C3%BCller%2DLyer%20illusion%20is,consisting%20of%20three%20stylized%20arrows.&text=The%20fins%20can%20point%20inwards,the%20arrow%20with%20two%20heads." -->
|
|
<!-- >Muller-Lyer</a -->
|
|
<!-- > -->
|
|
<!-- illusion. -->
|
|
<!-- </p> -->
|
|
<!-- <p class="date">2nd Apr 2019</p> -->
|
|
<!-- </div> -->
|
|
<!-- </a> -->
|
|
<a class="box-wrapper" href="projects/fourier_series.html">
|
|
<div class="card">
|
|
<h2 class="title">Fourier Series</h2>
|
|
<img src="images/fourier_series.png" />
|
|
<p class="description">
|
|
A project showing how a square wave can be constructed by
|
|
additive sin waves.
|
|
</p>
|
|
<p class="date">27th Feb 2019</p>
|
|
</div>
|
|
</a>
|
|
<a class="box-wrapper" href="projects/ellipse_const.html">
|
|
<div class="card">
|
|
<h2 class="title">Constructing an Ellipse</h2>
|
|
<img src="images/construct_ellipse.png" />
|
|
<p class="description">
|
|
A visualisation of how an ellipse can be constructed with a
|
|
circle and radial lines. Inspired by Feyman's Lost Lecture.
|
|
<!-- <a -->
|
|
<!-- href="https://www.amazon.co.uk/Feynmans-Lost-Lecture-Motions-Planets/dp/0099736217" -->
|
|
<!-- >Feynam's Lost Lecture</a -->
|
|
<!-- >. -->
|
|
</p>
|
|
<p class="date">23rd Feb 2019</p>
|
|
</div>
|
|
</a>
|
|
<a class="box-wrapper" href="projects/gameoflife.php">
|
|
<div class="card">
|
|
<h2 class="title">Game of Life</h2>
|
|
<img src="images/game_of_life.png" />
|
|
<p class="description">
|
|
An implementation of the classic cellular automata: Game of
|
|
Life in javascript.
|
|
</p>
|
|
<p class="date">2nd May 2018</p>
|
|
</div>
|
|
</a>
|
|
<a class="box-wrapper" href="projects/piApprox.php">
|
|
<div class="card">
|
|
<h2 class="title">Calculating PI</h2>
|
|
<img src="images/calc_pi.png" />
|
|
<p class="description">
|
|
A simulation that randomly places dots on the canvas, the
|
|
ratio of dots that are placed in the cirlce vs not approximate
|
|
PI.
|
|
</p>
|
|
<p class="date">14th March 2018</p>
|
|
</div>
|
|
</a>
|
|
<a class="box-wrapper" href="projects/oscil.php">
|
|
<div class="card">
|
|
<h2 class="title">Oscillations in 3D</h2>
|
|
<img src="images/bees_and_bombs.png" />
|
|
<p class="description">
|
|
An implementation of bees and bomb's
|
|
<!-- <a -->
|
|
<!-- href="https://twitter.com/beesandbombs/status/940639806522085376" -->
|
|
<!-- >Bees and Bomb's gif</a -->
|
|
<!-- > -->
|
|
in p5js.
|
|
</p>
|
|
<p class="date">17th Dec 2017</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer id="footer">
|
|
<section>
|
|
<h2>Contact me</h2>
|
|
<p>Feel free to get in touch through:</p>
|
|
<dl class="alt">
|
|
<dt>Email</dt>
|
|
<dd><a href="#">information@untitled.tld</a></dd>
|
|
</dl>
|
|
<ul class="icons">
|
|
<li>
|
|
<a href="#" class="icon brands fa-github alt"><span
|
|
class="label">GitHub</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="icon brands fa-linkedin alt"><span
|
|
class="label">Linkedin</span></a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="assets/js/jquery.min.js"></script>
|
|
<script src="assets/js/jquery.scrollex.min.js"></script>
|
|
<script src="assets/js/jquery.scrolly.min.js"></script>
|
|
<script src="assets/js/browser.min.js"></script>
|
|
<script src="assets/js/breakpoints.min.js"></script>
|
|
<script src="assets/js/util.js"></script>
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
|
|
</html> |