mirror of
https://github.com/RobertHeaton/RobertHeaton.github.io.git
synced 2026-01-10 13:52:04 +00:00
Added projects page and updated AboutMe.
Various CSS changes. Apparent issue with Main banner shrinking on pages other than index.
This commit is contained in:
RobertHeaton
99
4.css
99
4.css
@ -15,6 +15,10 @@ html{
|
||||
p{
|
||||
margin-left:10px;
|
||||
}
|
||||
p.project{
|
||||
margin-left: 0px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
a.pan{
|
||||
color: #0077ff;
|
||||
text-decoration: underline;
|
||||
@ -30,14 +34,14 @@ a.btn{
|
||||
margin: 15px;
|
||||
border: 3px solid #ffffff;
|
||||
background-color: #ffffff;
|
||||
border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
a.btn:hover, .btn:focus {
|
||||
border: 3px solid #0077ff;
|
||||
background-color: #0077ff;
|
||||
border-radius: 15px;
|
||||
text-decoration: none;
|
||||
border: 3px solid #0077ff;
|
||||
background-color: #0077ff;
|
||||
border-radius: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.spacer{
|
||||
@ -73,6 +77,13 @@ a.btn:hover, .btn:focus {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#projects{
|
||||
background-color: #ffffff;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#qualifications{
|
||||
padding-top:20px;
|
||||
padding-bottom:20px;
|
||||
@ -170,8 +181,7 @@ div.main{
|
||||
max-width: 986px;
|
||||
padding-top:1px;
|
||||
background-color:#d1d1d1;
|
||||
border-color:#ffffff;
|
||||
border:3px solid;
|
||||
border: 3px solid #000000;
|
||||
border-radius:5px;
|
||||
margin:auto;
|
||||
}
|
||||
@ -214,7 +224,7 @@ div{
|
||||
}
|
||||
div.spacing{
|
||||
border-top: 2px solid #000000;
|
||||
padding-top: 30px;
|
||||
padding-top: 15px;
|
||||
margin:auto;
|
||||
margin-top:30px;
|
||||
width:90%;
|
||||
@ -285,6 +295,15 @@ h3{
|
||||
font-size:35px;
|
||||
text-align: center;
|
||||
}
|
||||
h3.project{
|
||||
color: #0077ff;
|
||||
margin-top:0;
|
||||
margin-bottom:0px;
|
||||
font-weight:400;
|
||||
font-size:30px;
|
||||
text-align: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
hr.intro{
|
||||
background-color:#000000;
|
||||
@ -302,6 +321,7 @@ hr.intro{
|
||||
margin-left:10px;
|
||||
margin-right:10px;
|
||||
margin-bottom:33px;
|
||||
margin-top: 10px;
|
||||
color:#000000;
|
||||
}
|
||||
#bttn{
|
||||
@ -314,15 +334,68 @@ hr.intro{
|
||||
border-radius:5px;
|
||||
}
|
||||
div.main_info_scroll{
|
||||
transition: 0.1s all linear;
|
||||
width:90vw;
|
||||
max-width: 986px;
|
||||
padding-top:1px;
|
||||
background:#d1d1d1;
|
||||
border-color:#333333;
|
||||
border:3px solid;
|
||||
/*box-shadow:0px 0px 20px 3px #000000;*/
|
||||
background:#f0f0f0;
|
||||
/* border-color:#333333; */
|
||||
/* border:3px solid #000000; */
|
||||
box-shadow: 0px 0px 1px 1px #e4e4e4;
|
||||
border-radius:5px;
|
||||
margin:auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
a.project, .project:focus, .project:visited{
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
scroll-behavior: smooth;
|
||||
color: inherit;
|
||||
max-width: 986px;
|
||||
}
|
||||
|
||||
div.main_info_scroll:hover, .main_info_scroll:focus{
|
||||
width:90vw;
|
||||
max-width: 986px;
|
||||
padding-top:1px;
|
||||
background:#f0f0f0;
|
||||
/* border-color:#333333; */
|
||||
/* border:3px solid #000000; */
|
||||
box-shadow: 0px 0px 2px 2px #0077ff;
|
||||
border-radius:5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
div.projectImage{
|
||||
margin: 10px;
|
||||
width:90vw;
|
||||
max-width: 970px;
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
div.projectImage img{
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
margin-top: 3px;
|
||||
margin-left: 0px;
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid #000000;
|
||||
overflow: hidden;
|
||||
float:left;
|
||||
}
|
||||
|
||||
b.title{
|
||||
|
||||
15
extra.html
15
extra.html
@ -1,15 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>About</title>
|
||||
<title>RH: Extras</title>
|
||||
<link rel="stylesheet" href="4.css"/>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -24,12 +26,7 @@
|
||||
<h3>About</h3>
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn" href="work.html">
|
||||
<div class="landing-bttn">
|
||||
<h3>Work</h3>
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn" href="projects.html">
|
||||
<a class="btn" href="projects.html#projects">
|
||||
<div class="landing-bttn">
|
||||
<h3>Projects</h3>
|
||||
</div>
|
||||
|
||||
30
index.html
30
index.html
@ -1,15 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Portfolio</title>
|
||||
<title>RH: Home</title>
|
||||
<link rel="stylesheet" href="4.css"/>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -24,12 +26,7 @@
|
||||
<h3>About</h3>
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn" href="work.html">
|
||||
<div class="landing-bttn">
|
||||
<h3>Work</h3>
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn" href="projects.html">
|
||||
<a class="btn" href="projects.html#projects">
|
||||
<div class="landing-bttn">
|
||||
<h3>Projects</h3>
|
||||
</div>
|
||||
@ -47,12 +44,15 @@
|
||||
<div class="spacing">
|
||||
<h3>About Me</h3>
|
||||
<div class="introductary_text">Hello! My name is Robert Heaton and I am
|
||||
a Mechatronics Engineer from Lancashire currently working for BAE Digital Intelligence.
|
||||
This website is a platform to share my work and personal projects, as well as ramble to the
|
||||
void that is the internet.
|
||||
a Mechatronics Engineer from Lancashire currently working in the defense and space sector.
|
||||
This website is a platform to share some of my work and personal projects.
|
||||
I have always enjoyed electronics and embedded systems,
|
||||
developing a liking for robotics and autonomous systems in my first
|
||||
year of study, and developing the chronic condition Startusnevercompletus.
|
||||
and love tinkering away at both hardware and software/simulation. This does mean I
|
||||
suffer the same condition that affects many an engineer: Startusnevercompletus.<br><br>
|
||||
Currently my work involves writing VHDL as a firmware engineer for SDR modems, scripting
|
||||
automatic testbenches and test-vector generation, C and Java programming to support modem operation
|
||||
and the ground station user-interface, system technician for supporting modem-connected computer, and
|
||||
front-line tech support for customers.
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacing">
|
||||
@ -66,7 +66,7 @@
|
||||
<h3>Contact Information</h3>
|
||||
<p>
|
||||
Robert Heaton<br>
|
||||
Email: <a class="pan" href="mailto:rsheaton@outlook.com"> RSHeaton@outlook.com</a><br>
|
||||
Email: <a class="pan" href="mailto:rsheaton@outlook.com"> rsheaton@outlook.com</a><br>
|
||||
</p>
|
||||
<p>
|
||||
Copyright © 2020 - 2023 Robert Heaton, all rights reserved.
|
||||
|
||||
97
projects.html
Normal file
97
projects.html
Normal file
@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>RH: Projects</title>
|
||||
<link rel="stylesheet" href="4.css"/>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta charset="utf-8">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="circuit">
|
||||
<div id="bttn">
|
||||
<h1>Robert <b class = "title">Heaton</b></h1>
|
||||
<h2>Mechatronics Engineer</h2>
|
||||
</div>
|
||||
<div class="wrapper2">
|
||||
<a class="btn" href="index.html#aboutMe">
|
||||
<div class="landing-bttn">
|
||||
<h3>About</h3>
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn" href="projects.html#projects">
|
||||
<div class="landing-bttn">
|
||||
<h3>Projects</h3>
|
||||
</div>
|
||||
</a>
|
||||
<a class="btn" href="extra.html#memoriam">
|
||||
<div class="landing-bttn">
|
||||
<h3>Extra</h3>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="projects">
|
||||
<div class="main_info_scroll">
|
||||
<a class="project" href="project1.html">
|
||||
<div class="projectImage">
|
||||
<img src="pcb.JPG" alt="PCB with infrared sensor array for line-following" title="PCB with infrared sensor array for line-following"/>
|
||||
<h3 class="project">Project 1</h3>
|
||||
<p class="project">
|
||||
This is a placeholder for project summary.<br>
|
||||
These images are placeholders for style testing and will be updated once an actual project link is
|
||||
added with an appropriate description.<br>
|
||||
For the interim, enjoy the following texts:<br>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="main_info_scroll">
|
||||
<a class="project" href="project2.html">
|
||||
<div class="projectImage">
|
||||
<img src="photobot.JPG" alt="Autonomous arrow-following buggy" title="Autonomous arrow-following buggy"/>
|
||||
<h3 class="project">Project 2</h3>
|
||||
<p class="project">
|
||||
Skipper's in the wardroom drinking gin<br>
|
||||
Hey-oh, chicken on a raft<br>
|
||||
I don't mind knocking but I ain't going in<br>
|
||||
Hey-oh, chicken on a raft<br>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="main_info_scroll">
|
||||
<a class="project" href="project1.html">
|
||||
<div class="projectImage">
|
||||
<img src="photo_2019-11-01_19-19-59.jpg" alt="EEPROM test harness circuitry" title="EEPROM test harness circuitry"/>
|
||||
<h3 class="project">Project 3</h3>
|
||||
<p class="project">
|
||||
Where now the horse and the rider?<br>
|
||||
Where is the horn that was blowing?<br>
|
||||
Where is the helm and the hauberk,<br>
|
||||
And the bright hair flowing?
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contactInfo">
|
||||
<div class="terminator">
|
||||
<p>
|
||||
Copyright © 2020 - 2023 Robert Heaton, all rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user