Less than 72 characters

4.css

@@ -0,0 +1,249 @@
+body {
+	background: #ffffff;
+	background-attachment: fixed;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	width: 100%;
+}
+a{
+	color: #0077ff;
+	text-decoration: underline;
+	cursor: pointer;
+}
+a:hover{
+	color:#000000;
+}
+
+.spacer{
+	margin-top:10px;
+	height:7px;
+}
+
+.full_page{
+	width:50vw;
+	border-radius:5px;
+	margin:auto;
+}
+
+#circuit{
+	width:100%;
+	height:100vh;
+	background-color: #333;
+	background-image:url(circuitBanner.jpg);
+	background-repeat:no-repeat;
+	background-size:cover;
+}
+#aboutMe{
+	background-color:#ffffff;
+	background-image:url(collageBanner.png);
+	background-position: center;
+	background-repeat:no-repeat;
+	background-size:cover;
+	padding-top:20px;
+	padding-bottom:20px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+#qualifications{
+	padding-top:20px;
+	padding-bottom:20px;
+	background-color: #333;
+	background-image:url(codeBanner.jpg);
+	background-repeat:no-repeat;
+	background-size:cover;
+}
+#pastWork{
+	background-color:#ffffff;
+	padding-top:20px;
+	padding-bottom:20px;
+}
+#contactInfo{
+	padding-top:20px;
+	padding-bottom:20px;
+	background-color:#333;
+	background-image:url(unionBanner.jpg);
+	background-repeat:no-repeat;
+	background-size:cover;
+}
+div.pageText{
+	width:50vw;
+	padding-top:20px;
+	background-color:#d1d1d1;
+	border-color:#ffffff;
+	box-shadow:0px 0px 20px 3px #000000;
+	border-radius:5px;
+	margin:auto;
+	margin-top: 40px;
+}
+div.pageBanner{
+	width:50vw;
+	background-color:#0077ff;
+	border-color:#0077ff;
+	box-shadow:0px 0px 20px 3px #000000;
+	border-radius:5px;
+	margin:auto;
+}
+div.terminator{
+	width:50vw;
+	padding-top:1px;
+	background-color:#d1d1d1;
+	border-color:#ffffff;
+	box-shadow:0px 0px 20px 3px #000000;
+	border-radius:5px;
+	margin:auto;
+}
+div.main{
+	width:50vw;
+	padding-top:1px;
+	background-color:#d1d1d1;
+	border-color:#ffffff;
+	box-shadow:0px 0px 20px 3px #000000;
+	border-radius:5px;
+	margin:auto;
+}
+
+h6 span{
+	cursor:pointer;
+
+	line-height: 40px;
+	font-size:30px;
+	padding-top: 2px;
+	padding-left: 2px;
+	padding-right: 2px;
+	padding-bottom:2px;
+	border-bottom:3px solid #0077ff;
+	transition: border-color .2s ease-out,border-color .2s ease-out;
+	white-space: nowrap;
+	margin-left: 15px;
+	margin-right: 15px;
+}
+h6 span.active,h6 span:hover, h6 span:focus{
+	padding-bottom:2px;
+	border-bottom:3px solid #000000;
+
+}
+h6{
+	padding-top:15px;
+	padding-bottom: 15px;
+	width:90%;
+	margin:auto;
+	text-align:center;
+	border-radius:5px;
+	background-color:#0077ff;
+	color:#ffffff;
+	display:flex;
+	justify-content: space-around;
+	flex-wrap: wrap;
+}
+div{
+	display:block;
+}
+div.spacing{
+	border-top: 2px solid #000000;
+	padding-top: 30px;
+	margin:auto;
+	margin-top:30px;
+	width:90%;
+}
+div.pages{
+
+	padding-top:1px;
+	display:none;
+	border-color:#ffffff;
+	background-color:#ffffff;
+	margin:auto;
+}
+div.shown{
+	display:block;
+}
+div.subSpace{
+	border-top: 2px solid #4c4c4c;
+	padding-top: 30px;
+	margin:auto;
+	margin-top:30px;
+	width:90%;
+	padding-left: 20px;
+	padding-right: 20px;
+}
+.bottom_banner{
+	width:860px;
+	height:248px;
+	margin-top:5px;
+	margin-left:5px;
+	margin-right:5px;
+	background:#000000;
+	border-color:#000000;
+	border:2px solid;
+	border-radius:5px;
+	float:left;
+}
+h1{
+	color:#000000;
+	margin-left:10px;
+	margin-top:10px;
+	margin-bottom:10px;
+	font-weight:700;
+	font-size:130px;
+	text-align: center;
+}
+h2{
+	color:#333;
+	margin-left:10px;
+	margin-top:10px;
+	margin-bottom:10px;
+	font-weight:700;
+	font-size:40px;
+	text-align: center;
+}
+h3{
+	color:#000000;
+	margin-left:10px;
+	margin-top:0;
+	margin-bottom:15px;
+	font-weight:400;
+	font-size:30px;
+	text-align: left;
+}
+
+hr.intro{
+	background-color:#000000;
+	position:relative;
+	top:30px;
+	height:1px;
+	clear: both;
+
+	margin-left:10px;
+	margin-right:10px;
+	margin-top:30px;
+	margin-bottom:30px;
+}
+.introductary_text{
+	margin-left:10px;
+	margin-right:10px;
+	margin-bottom:33px;
+	color:#000000;
+}
+#bttn{
+	width: 1054px;
+	height: 200px;
+	padding-top: 30vh;
+	margin: auto;
+	margin-bottom:30px;
+	border-radius:5px;
+}
+div.main_info_scroll{
+	width:50vw;
+	padding-top:1px;
+	background:#d1d1d1;
+	border-color:#333333;
+	box-shadow:0px 0px 20px 3px #000000;
+	border-radius:5px;
+	margin:auto;
+}
+
+b.title{
+	font-weight:700;
+	color:#0077ff;
+	font-size:130px;
+}

browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

index.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Portfolio</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">
+  <script>
+  var currentSection="p1";
+  function setcurrentSection(page){
+    document.getElementById(currentSection).classList.remove("shown");
+    currentSection=page;
+    document.getElementById(page).classList.add("shown");
+  }
+  </script>
+</head>
+<body>
+
+  <div id="circuit">
+    <div id="bttn">
+      <h1>Robert <b class = "title">Heaton</b></h1>
+      <h2>Mechatronics Engineer</h2>
+    </div>
+
+  </div>
+  <div id="aboutMe">
+    <div class="main">
+      <div class="spacing">
+        <h3>About Me</h3>
+        <div class="introductary_text">Hello! My name is Robert Heaton and I am
+          an undergraduate Mechatronics Engineer from Preston, England, and I am
+          currently studying at the University of
+          Manchester. I have always enjoyed electronics and embedded systems,
+          developing a liking for robotics and autonomous systems in my first
+          year of study, thus becomming naturally enthralled by the field of
+          mechatronics. I enjoy reading, jigsaws, history, electronics projects,
+           shooting, poetry, video games, rock-climbing, video editing,
+            and wood and metal working.
+          <div class="subSpace">
+            It is my philosophy that any system can be improved and any problem
+            overcome. I beleieve that any individual, big or small, can have a
+            huge impact and
+            should strive to better themselves and their environment.
+             It is very important that a modern engineer is ethical
+            in thier work and operates sustainably, and so this is always a
+            consideration of mine when undertaking any work. To myself, the role
+             of
+            an engineer therefore involves applying scientific principles in a
+            consciensious manner with the purpose to better mankind.
+          </div>
+          <div class="subSpace">
+            I consider myself a natural leader and enjoy working on projects,
+            whether in a group or in an individual scope. Others would consider
+            me a good listener and strong decision maker capable of action or
+            caution depending on whichever the situation calls for. I am good
+            at delegating work to people's strengths, and am not afraid to seek
+            advise on subjects that are not my speciality. I often like to
+            automate repative tasks and experiment with using mechatronics to
+            optimise processes around me, drawing inspiration from personal
+            experience and a vision of what can be. I am always trying to learn
+            new things, such as the HTML and CSS required to build this site!
+          </div>
+        </div>
+      </div>
+      <div class="spacing">
+      </div>
+    </div>
+  </div>
+  <div id="qualifications">
+    <div class="main_info_scroll">
+      <div class="spacing">
+        <h3>Experience and Qualifications</h3>
+        <p class="main_info_scroll">
+          Qualifications and experience here. Photos need adding.
+        </p>
+        <p>
+          I have completed a
+          <a href="https://www.fleetwoodtoday.co.uk/news/streetlife-youngsters-put-themselves-in-the-cold-to-help-homeless-charity-1-7429096/" target="_blank">
+            sponsored street sleep</a>
+            to raise money for chairty with NCS and have also won the first
+            <a href="https://www.fleetwoodtoday.co.uk/education/a-night-to-celebrate-all-that-is-great-in-education-1-6261192/" target="_blank">
+            Blackpool
+            and Fylde Young Scientist/Engineer Award</a>
+             in 2009.
+        </p>
+      </div>
+      <div class="spacing"></div>
+    </div>
+  </div>
+  <div id="pastWork">
+    <div class="full_page">
+      <div id="p1" class="pages shown">
+        <div class="container">
+        <div class="pageBanner">
+        <h6>
+          <span class="active">Extended Project Qualification</span>
+          <span onclick="setcurrentSection('p2')">Embedded Systems Project</span>
+          <span onclick="setcurrentSection('p3')">Third Year Project</span>
+        </h6>
+      </div>
+    </div>
+      <div class="pageText">
+        <div class="spacing">
+        <h3>Extended Project Qualification</h3>
+      </div>
+      <div class="spacing"></div>
+      </div>
+    </div>
+      <div id="p2" class="pages">
+        <div class="container">
+        <div class="pageBanner">
+        <h6>
+          <span onclick="setcurrentSection('p1')">Extended Project Qualification</span>
+          <span class="active">Embedded Systems Project</span>
+          <span onclick="setcurrentSection('p3')">Third Year Project</span>
+        </h6>
+      </div>
+    </div>
+      <div class="pageText">
+        <div class="spacing">
+          <h3>Embedded Systems Project</h3>
+        <p>Unga</p>
+      </div>
+      <div class="spacing"></div>
+      </div>
+      </div>
+      <div id="p3" class="pages">
+        <div class="container">
+        <div class="pageBanner">
+        <h6>
+          <span onclick="setcurrentSection('p1')">Extended Project Qualification</span>
+          <span onclick="setcurrentSection('p2')">Embedded Systems Project</span>
+          <span class="active">Third Year Project</span>
+        </h6>
+      </div>
+    </div>
+      <div class="pageText">
+        <div class="spacing">
+          <h3>Third Year Project</h3>
+        <p>Bunga</p>
+      </div>
+      <div class="spacing"></div>
+      </div>
+      </div>
+    </div>
+  </div>
+  <div id="contactInfo">
+    <div class="terminator">
+      <div class="spacing">
+        <h3>Contact Information</h3>
+        <p>
+            Robert Heaton<br>
+            Email: rsheaton@outlook.com<br>
+            Mobile: 07941 567 117<br>
+            Address: 1 Cavendish Road, Preston, Lancashire, PR1 4TY<br>
+        </p>
+        <p>
+            Citations:
+      </p>
+      <p>
+        Copyright &#169; 2019 - 2020 Robert Heaton, all rights reserved.
+      </p>
+      </div>
+      <div class="spacing"></div>
+    </div>
+  </div>
+</body>
+</html>

safari-pinned-tab.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1060 2498 l0 -788 105 0 105 0 0 313 0 313 143 -2 c78 -1 145 -2
+148 -3 4 0 40 -40 80 -88 41 -49 76 -90 79 -93 6 -6 101 -120 115 -138 5 -7
+17 -21 26 -30 8 -9 51 -60 94 -112 44 -52 84 -98 90 -102 5 -4 6 -8 2 -8 -5 0
+5 -11 22 -25 29 -25 33 -26 161 -23 l131 3 -33 36 c-18 20 -48 55 -66 77 -19
+23 -44 52 -55 65 -12 13 -42 47 -67 77 -25 29 -49 58 -55 64 -5 6 -34 40 -64
+76 -30 36 -60 70 -66 75 -6 6 -33 37 -61 70 -58 70 -94 113 -111 130 -9 9 2
+19 51 45 35 17 83 51 108 75 52 48 110 129 101 139 -4 3 0 6 7 6 7 0 10 3 7 6
+-3 4 -2 14 3 24 17 31 23 74 25 175 1 55 -2 106 -7 113 -6 6 -8 12 -4 12 7 0
+-24 79 -39 99 -87 114 -202 178 -350 196 -33 4 -187 9 -342 10 l-283 2 0 -789z
+m620 589 c128 -38 192 -120 191 -244 -2 -122 -22 -176 -91 -243 -69 -68 -125
+-83 -337 -88 l-173 -4 0 294 c0 162 2 297 5 299 2 3 82 4 177 3 127 -1 188 -5
+228 -17z"/>
+<path d="M2565 3248 c1 -21 -2 -41 -7 -44 -4 -3 -5 -11 -1 -17 12 -19 11 -77
+-1 -77 -8 0 -8 -3 -1 -8 6 -4 11 -25 11 -47 0 -22 -5 -43 -11 -47 -7 -5 -7 -8
+0 -8 6 0 11 -16 11 -35 0 -19 -5 -35 -11 -35 -7 0 -7 -3 0 -8 6 -4 11 -20 11
+-37 0 -16 -5 -33 -11 -37 -7 -5 -7 -8 0 -8 6 0 11 -16 11 -35 0 -19 -5 -35
+-11 -35 -7 0 -7 -3 0 -8 6 -4 11 -20 11 -37 0 -16 -5 -33 -11 -37 -7 -5 -7 -8
+0 -8 6 0 11 -16 11 -35 0 -19 -5 -35 -11 -35 -7 0 -7 -3 0 -8 6 -4 11 -20 11
+-37 0 -16 -5 -33 -11 -37 -7 -5 -7 -8 0 -8 6 0 11 -16 11 -35 0 -19 -4 -35 -8
+-35 -4 0 -4 -10 1 -22 4 -13 6 -32 4 -43 -2 -11 -4 -26 -3 -32 0 -11 0 -48 0
+-118 0 -8 0 -28 0 -45 0 -16 0 -36 0 -42 0 -7 1 -24 3 -38 2 -14 -1 -31 -6
+-37 -6 -8 -6 -13 0 -13 5 0 8 -19 6 -42 -2 -24 -3 -49 -3 -55 0 -7 0 -26 0
+-43 0 -16 0 -37 0 -45 0 -8 0 -28 0 -45 0 -16 0 -37 0 -45 0 -8 1 -28 2 -45
+l2 -30 103 0 c75 0 103 3 104 13 0 6 2 179 2 382 l2 370 390 3 390 2 -1 -385
+0 -386 105 3 106 3 0 785 0 785 -105 0 -105 0 0 -305 -1 -305 -390 -3 -390 -2
+1 292 c0 161 -1 300 -3 309 -3 13 -20 16 -106 15 l-103 0 2 -38z"/>
+</g>
+</svg>

site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Portfolio",
+    "short_name": "Portfolio",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}