Add projects and tutorials
This commit is contained in:
John Gatward
210
archive/v1/index.html
Normal file
210
archive/v1/index.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>havox.org</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
|
||||
<link rel="shortcut icon" type="image/ico" href="media/iconImage.ico">
|
||||
<script src="/frameworks/jquery-3.3.1.min.js"></script>
|
||||
<script src="/frameworks/bootstrap.min.js"></script>
|
||||
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<div class="small-logo-container">
|
||||
<a class="small-logo" href="#">Havox.org</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#quoteJump">Quote</a></li>
|
||||
<li><a href="#introjump">Intro</a></li>
|
||||
<li><a href="#projectjump">Projects</a></li>
|
||||
<li><a href="#photojump">Photography</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid big-logo-row">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 big-logo-container">
|
||||
<h1 class="big-logo">Havox.org</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-md-8 col-sm-12">
|
||||
<h2>Welcome to my website</h2>
|
||||
<div class="contents">
|
||||
<div id="quoteJump" class="quoteDiv">
|
||||
<h3>Quote of the day</h3>
|
||||
<p><b>Quote: </b>
|
||||
Try to keep your soul young and quivering right up to old age.
|
||||
</p>
|
||||
<p><b>Author: </b>
|
||||
George Sand
|
||||
</p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3 id="introjump">About me</h3>
|
||||
|
||||
<p>The Union of the indestructible republics of the free ones
|
||||
The Great Russia has forever consolidated itself.
|
||||
Long live the people created by the will of the people
|
||||
A single, mighty Soviet Union!</p>
|
||||
|
||||
<p>Be glorious, our free Fatherland,
|
||||
Friendship, peoples a reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!</p>
|
||||
|
||||
<p>Through the thunderstorms the sun of freedom shone,
|
||||
And Lenin, the great one, illumined our way.
|
||||
We were brought up by Stalin - to be faithful to the people.
|
||||
We were inspired by work and deeds.</p>
|
||||
|
||||
<p>Be glorious, Fatherland freer,
|
||||
Happiness of peoples reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!</p>
|
||||
|
||||
<p>We raised our army in the battles,
|
||||
The invaders of the vile from the road are estimated!
|
||||
We are in the battles to decide the fate of generations,
|
||||
We will lead our glory to our Fatherland!</p>
|
||||
|
||||
<p>Be glorious, our free Fatherland,
|
||||
the glory of peoples is a reliable stronghold!
|
||||
The Soviet banner, the banner of the people
|
||||
Let it lead from victory to victory!</p>
|
||||
</div>
|
||||
|
||||
<div class="projects">
|
||||
<h3 id="projectjump">Projects</h3>
|
||||
<a href="/gameoflife.php">
|
||||
<p> Game of Life</p>
|
||||
</a>
|
||||
<a href="mazeGen.php">
|
||||
<p>Maze Generator</p>
|
||||
</a>
|
||||
<a href="oscil.php">
|
||||
<p>Oscilations in 3D</p>
|
||||
</a>
|
||||
<a href="poissonDist.php">
|
||||
<p>Poisson Distribution</p>
|
||||
</a>
|
||||
<a href="piApprox.php">
|
||||
<p>Approximating PI</p>
|
||||
</a>
|
||||
<a href="cardioid.php">
|
||||
<p>Cardioids</p>
|
||||
</a>
|
||||
<a href="/ellipseConst/index.php">
|
||||
<p>Constructing an ellipse</p>
|
||||
</a>
|
||||
<a href="/weatherApp/index.php">
|
||||
<p>Weather App</p>
|
||||
</a>
|
||||
<h3>Tutorials</h3>
|
||||
<a href="/TSP_files/index.php">
|
||||
<p>Travelling salesman problem</p>
|
||||
</a>
|
||||
<a href="/terrainGen/index.php">
|
||||
<p>Midpoint displacement terrain generator</p>
|
||||
</a>
|
||||
<a href="/jarvisMarsh/index.php">
|
||||
<p>Convex hull generator</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="photography">
|
||||
<h3 id="photojump">Photography</h3>
|
||||
<p>Photos from around the world</p>
|
||||
<div id="photos">
|
||||
<ul id="photo-gallery">
|
||||
<li>
|
||||
<a href="media/FlowersBW.jpg">
|
||||
<img src="media/FlowersBW.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="media/Carosel.jpg">
|
||||
<img src="media/Carosel.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="media/London_Eye.jpg">
|
||||
<img src="media/London_Eye.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="media/Boat_Man.jpg">
|
||||
<img src="media/Boat_Man.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="media/Sheep.jpg">
|
||||
<img src="media/Sheep.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="media/Pier.jpg">
|
||||
<img src="media/Pier.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="media/Pink_Pier.jpg">
|
||||
<img src="media/Pink_Pier.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="media/Some_Rocks.jpg">
|
||||
<img src="media/Some_Rocks.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="media/Whiteboard.jpg">
|
||||
<img src="media/Whiteboard.jpg">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-xs-12 -->
|
||||
</div><!--/.row -->
|
||||
</div><!--/.container -->
|
||||
|
||||
<script src="script.js">
|
||||
</script>
|
||||
|
||||
</body>
|
||||
<footer>
|
||||
Somebody once told me, the world is gonna roll me,
|
||||
I ain't the sharpest tool in the shed.
|
||||
She was looking kind of dumb with her finger and her thumb
|
||||
In the shape of an "L" on her forehead.
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
BIN
archive/v1/media/Boat_Man.jpg
Normal file
BIN
archive/v1/media/Boat_Man.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
archive/v1/media/Carosel.jpg
Normal file
BIN
archive/v1/media/Carosel.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
archive/v1/media/FlowersBW.jpg
Normal file
BIN
archive/v1/media/FlowersBW.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
archive/v1/media/London_Eye.jpg
Normal file
BIN
archive/v1/media/London_Eye.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
archive/v1/media/Pier.jpg
Normal file
BIN
archive/v1/media/Pier.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
archive/v1/media/Pink_Pier.jpg
Normal file
BIN
archive/v1/media/Pink_Pier.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
archive/v1/media/Sheep.jpg
Normal file
BIN
archive/v1/media/Sheep.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
archive/v1/media/Some_Rocks.jpg
Normal file
BIN
archive/v1/media/Some_Rocks.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
archive/v1/media/Whiteboard.jpg
Normal file
BIN
archive/v1/media/Whiteboard.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
archive/v1/media/iconImage.ico
Normal file
BIN
archive/v1/media/iconImage.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
58
archive/v1/script.js
Normal file
58
archive/v1/script.js
Normal file
@@ -0,0 +1,58 @@
|
||||
var navbarHeight = $('.navbar').height();
|
||||
|
||||
$(window).scroll(function() {
|
||||
var navbarColor = "255,255,255"//"255,215,0";//color attr for rgba
|
||||
var smallLogoHeight = $('.small-logo').height();
|
||||
var bigLogoHeight = $('.big-logo').height();
|
||||
|
||||
|
||||
var smallLogoEndPos = 0;
|
||||
var smallSpeed = (smallLogoHeight / bigLogoHeight);
|
||||
|
||||
var ySmall = ($(window).scrollTop() * smallSpeed);
|
||||
|
||||
var smallPadding = navbarHeight - ySmall;
|
||||
if (SmallPadding > navbarHeight) { smallPadding = navbarHeight; }
|
||||
if (smallPadding < smallLogoEndPos) { smallPadding = smallLogoEndPos; }
|
||||
if (smallPadding < 0) { smallPadding = 0; }
|
||||
|
||||
$('.small-logo-container ').css({ "padding-top": smallPadding });
|
||||
|
||||
var navOpacity = ySmall / smallLogoHeight;
|
||||
if (navOpacity > 1) { navOpacity = 1; }
|
||||
if (navOpacity < 0) { navOpacity = 0; }
|
||||
var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')';
|
||||
$('.navbar').css({ "background-color": navBackColor });
|
||||
|
||||
var shadowOpacity = navOpacity * 0.4;
|
||||
if (ySmall > 1) {
|
||||
$('.navbar').css({ "box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")" });
|
||||
} else {
|
||||
$('.navbar').css({ "box-shadow": "none" });
|
||||
}
|
||||
});
|
||||
|
||||
var $overlay = $('<div id="overlay"></div>');
|
||||
var $image = $("<img>");
|
||||
|
||||
//An image to overlay
|
||||
//$overlay.append($image);
|
||||
|
||||
//Add overlay
|
||||
//$("body").append($overlay);
|
||||
|
||||
//click the image and a scaled version of the full size image will appear
|
||||
$("#photo-gallery a").mouseover(function(event) {
|
||||
event.preventDefault();
|
||||
var imageLocation = $(this).attr("href");
|
||||
|
||||
//update overlay with the image linked in the link
|
||||
$image.attr("src", imageLocation);
|
||||
|
||||
//show the overlay
|
||||
$overlay.show();
|
||||
});
|
||||
|
||||
$("#overlay").mouseout(function() {
|
||||
$("#overlay").hide();
|
||||
});
|
||||
193
archive/v1/style.css
Normal file
193
archive/v1/style.css
Normal file
@@ -0,0 +1,193 @@
|
||||
body{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
|
||||
.navbar-inverse {
|
||||
background: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a{font-family: 'Roboto Condensed', sans-serif;}
|
||||
.navbar-inverse .navbar-toggle {
|
||||
border: 1px solid #333;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
|
||||
border-color: transparent;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
|
||||
background-color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
|
||||
background-color: white;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.small-logo-container {
|
||||
padding-top: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.small-logo {
|
||||
background: white;
|
||||
color: black;
|
||||
font-size: 2.5em;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
/* *********************************
|
||||
Big Logo
|
||||
********************************** */
|
||||
.big-logo-row {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
.big-logo-row .big-logo-container {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.big-logo-row h1 {
|
||||
font-size: 4em;
|
||||
margin: 0;
|
||||
padding: 0 0 15px 0;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.big-logo-row h1 {
|
||||
font-size: 4.5em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 440px) {
|
||||
.big-logo-row h1 {
|
||||
font-size: 5.5em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
.big-logo-row h1 {
|
||||
font-size: 6.5em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 630px) {
|
||||
.big-logo-row h1 {
|
||||
font-size: 7.5em;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.big-logo-row h1 {
|
||||
font-size: 9em;
|
||||
padding-bottom: 30px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.big-logo-row h1 {
|
||||
font-size: 12em;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 41px;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
color: black;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 20px;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h3{
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.projects, .intro{
|
||||
border-bottom: thin solid #333;
|
||||
|
||||
}
|
||||
|
||||
.picturebox{
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
footer{
|
||||
padding: 20px;
|
||||
background-color: #e0e0e0;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
}
|
||||
|
||||
.navbar navbar-inverse navbar-fixed-top::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#photos {
|
||||
opacity: .88;
|
||||
}
|
||||
|
||||
#photos img {
|
||||
width: 30%;
|
||||
float: left;
|
||||
display: block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
max-width: 780px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
background: rgba(0,0,0, .8);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#overlay img {
|
||||
margin: 10% auto 0;
|
||||
width: 550px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#photos {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#photo-gallery {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user