214 lines
7.6 KiB
HTML
214 lines
7.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Havox</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 id="header" class="alt">
|
|
<span class="logo"><img src="images/ccchaos.svg" alt="" /></span>
|
|
<h1>Havox</h1>
|
|
<p>John Gatward • Software Developer</p>
|
|
<p>A portfolio & learning space</p>
|
|
<ul class="icons">
|
|
<li>
|
|
<a href="https://github.com/jayo60013"
|
|
class="icon brands fa-github alt"><span
|
|
class="label">GitHub</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.linkedin.com/in/jaygatward"
|
|
class="icon brands fa-linkedin alt"><span
|
|
class="label">Linkedin</span></a>
|
|
</li>
|
|
</ul>
|
|
</header>
|
|
|
|
<!-- Nav -->
|
|
<nav id="nav">
|
|
<ul>
|
|
<li><a href="#intro" class="active">Introduction</a></li>
|
|
<li><a href="#skills">Skills</a></li>
|
|
<li><a href="#tutorials">Tutorials</a></li>
|
|
<li><a href="#projects">Projects</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Main -->
|
|
<div id="main">
|
|
<!-- Introduction -->
|
|
<section id="intro" class="main">
|
|
<div class="spotlight">
|
|
<div class="content">
|
|
<header class="major">
|
|
<h2>About Havox</h2>
|
|
</header>
|
|
<p>
|
|
Welcome to havox - a showcase of my projects and tutorials that
|
|
I have created over the years. The tutorials are mainly for my
|
|
own learning purposes, but I hope they can also benefit others
|
|
who are interested in the same topics. You can browse through my
|
|
tutorials or explore my JavaScript projects.
|
|
</p>
|
|
<ul class="actions">
|
|
<li><a href="about_me.html" class="button">Learn More</a></li>
|
|
</ul>
|
|
</div>
|
|
<span class="image"><img src="images/unnamed.jpg"
|
|
alt="An image of myself" /></span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Skills Section -->
|
|
<section id="skills" class="main special">
|
|
<header class="major">
|
|
<h2>My Skills</h2>
|
|
</header>
|
|
<ul class="features">
|
|
<li>
|
|
<span class="icon solid major style1 fa-code"></span>
|
|
<h3>Code Experience</h3>
|
|
<p>
|
|
Professional experience in Java, using Java Spring Boot to
|
|
create RESTful APIs. Completed university courses in: C, C++,
|
|
Java and Haskell.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<span class="icon solid major style3 fa-server"></span>
|
|
<h3>Technical Background</h3>
|
|
<p>
|
|
Long term linux user with server experience hosting web and
|
|
media servers, along with cyber secure networking practices.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<span class="icon solid major style5 fa-graduation-cap"></span>
|
|
<h3>Tutoring</h3>
|
|
<p>
|
|
Tutor with 4 years experience; tutoring computer science A-Level
|
|
in addition to tutoring maths and english to children aged 4-14.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
<!-- <footer class="major"> -->
|
|
<!-- <ul class="actions special"> -->
|
|
<!-- <li><a href="generic.html" class="button">Learn More</a></li> -->
|
|
<!-- </ul> -->
|
|
<!-- </footer> -->
|
|
</section>
|
|
|
|
<!-- Second Section -->
|
|
<section id="tutorials" class="main special">
|
|
<header class="major">
|
|
<h2>My Tutorials</h2>
|
|
<p>
|
|
I am a strong believer that the best way to learn is to teach.
|
|
When I come across something I find interesting and want to deepen
|
|
my understanding I write a short tutorial.
|
|
</p>
|
|
</header>
|
|
|
|
<a class="box-wrapper" href="tutorials/summed_area/summed-area.html">
|
|
<div class="box">
|
|
<h2 class="title">Summed-area tables</h2>
|
|
<p class="date">3rd Jan 2021</p>
|
|
<img src="images/summed_area.png" />
|
|
<p class="description">
|
|
This tutorial looks at intergral images and how they're useful.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
|
|
<footer class="major">
|
|
<ul class="actions special">
|
|
<li><a href="tutorials.html" class="button">See More</a></li>
|
|
</ul>
|
|
</footer>
|
|
</section>
|
|
|
|
<!-- Get Started -->
|
|
<section id="projects" class="main special">
|
|
<header class="major">
|
|
<h2>My Projects</h2>
|
|
<p>
|
|
A lot of p5js projects. I enjoy visualising simple algorithms in
|
|
creative ways.
|
|
</p>
|
|
</header>
|
|
|
|
<a class="box-wrapper" href="projects/drawing_curves/index.html">
|
|
<div class="box">
|
|
<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 points.
|
|
</p>
|
|
<p class="date">1st Oct 2021</p>
|
|
</div>
|
|
</a>
|
|
|
|
<footer class="major">
|
|
<ul class="actions special">
|
|
<li><a href="projects.html" class="button">See More</a></li>
|
|
</ul>
|
|
</footer>
|
|
</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="https://github.com/jayo60013"
|
|
class="icon brands fa-github alt"><span
|
|
class="label">GitHub</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.linkedin.com/in/jaygatward"
|
|
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> |