timpotter · Chriskeno · Oct 9, 2015 · Oct 9, 2015 · Oct 9, 2015 · Oct 9, 2015
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 Hello World Personal Page
 =========================
 
-A stylish and personable webpage to tell the world about yourself. View the [demo page](http://timpotter.github.io/hello-world-page/). 
+A stylish and personable webpage to tell the world about yourself. View the [demo page](http://chriskeno.github.io/hello-world-page/). 
 
 ![alt text](http://tejpotter.com/projects/hello-world-page/background.jpg "Hello World Personal Page by Tim Potter")
 

diff --git a/css/style.css b/css/style.css
@@ -13,20 +13,15 @@ Author URI: http://littlethunder.co
   margin: 0;
 }
 
-*, 
-*:before, 
-*:after {
-  -moz-box-sizing: border-box; 
-  -webkit-box-sizing: border-box; 
-  box-sizing: border-box;
-}
+
 
 /* Typography */
 body {
   font-family: 'Roboto Slab', serif;
   font-weight: 300;
-  color: #444;
+  color: #0f0f0f;
    -webkit-font-smoothing: antialiased;
+    background: url(../images/triangle.png)  top center repeat;
 }
 
 header {
@@ -39,51 +34,96 @@ header p {
   font-weight: 300;
 }
 
+section{
+padding:2em;}
+
+section h2{
+padding-bottom: 1em;}
+
 h1 {
   font-weight: 100;
   font-size: 3em; /* 48/16 */
   margin-bottom: 40px;
   line-height: 1em;
 }
 
-p {
-  line-height: 1.75em;
+section p {
+  line-height: 1.9em;
+    font-size: 1.2em;
 }
 
-.about p:nth-of-type(1) { 
-  font-size: 1.5em; /* 24/16 */
-  line-height: 1.5em;
+
+/*----nav----*/
+nav
+{position: fixed;
+top: 0px;
+    left: 0;
+    margin: 0;
+    width: 100%;
+    background-color:whitesmoke;
+
 }
 
-.about p {
-  padding-bottom: 20px;
-  text-align: justify;
+nav 
+{
+padding: 0.5em 0;
+margin-bottom: 0.4em;
 }
 
-footer p {
-  text-align: center;
-  font-size: 0.625em; /* 10/16 */
+nav ul 
+{text-align: center;
 }
 
-small {
-  text-align: center;
+nav ul li 
+{display: inline;
+margin: 20px;}
+/*-----links------------*/
+a {
+color:darkgray;
+text-decoration:none;
+    text-transform: uppercase;
+    letter-spacing: 2px;
 }
 
-strong {
-  font-weight: 400;
+a:hover {
+          color:white;
+          border-bottom: 1px dotted;
+        }
+.svglinks a {
+  opacity: 0.3;
+  transition: opacity .25s ease-in-out;
+   -moz-transition: opacity .25s ease-in-out;
+   -webkit-transition: opacity .25s ease-in-out;
 }
 
-a {
-  text-decoration: none;
-  font-weight: 400;
-  color: #333;
+.svglinks a:hover {
+  opacity: 0.8;
 }
 
-a:hover {
-  text-decoration: underline;
-  color: #666;
+.svglinks li {
+  display: inline;
+  margin: 0px;
+  color: #444;
+}
+
+.svglinks li img {
+  width: 0px;
+    display: inline;
+padding-left: 1em;
+    padding-top: 1em;
 }
 
+.svglinks a:hover {
+        padding: 7px;
+        /*background:;
+        color: #fff;*/
+        border-bottom: none;
+		-webkit-transition: all 0.3s ease-in-out;
+		-moz-transition: all 0.3s ease-in-out; 
+		-o-transition: all 0.3s ease-in-out;
+			transition: all 0.3s ease-in-out;
+        border-radius: 1em;}
+
 
 .social a {
   opacity: 0.3;
@@ -104,10 +144,6 @@ a:hover {
 
 /* Images */
 
-.background {
-   /* Delete background class from <body> for a vanilla style */
-   background: url(../images/background.jpg) top center no-repeat;
-}
 
 img.avatar {
   margin-bottom: 30px;
@@ -124,9 +160,9 @@ img.avatar {
 /* Layout */
 
 .container {
-  width: 600px;
+  width: 800px;
   margin: 100px auto 25px;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color:rgba(255, 255, 255, 0.8);
   padding: 0 60px 30px;
   border-radius: 6px;
 }
@@ -136,43 +172,3 @@ img.avatar {
   text-align: center;
 }
 
-footer {
-  margin-top: 30px;
-}
-
-
-/* Responsive Styles */
-
-@media only screen and (min-width: 1920px) {
-  .background {
-    background-size: 100%;
-  }
-}
-
-@media only screen and (max-width: 600px) {
-
-  .container {
-    width: 90%;
-    margin-top: 50px;
-    padding: 0 30px 30px; 
-  }
-
-  h1 {
-    font-size: 2.25em; /* 36/16 */
-    margin-bottom: 20px;
-  }
-
-  .social {
-    margin-top: 20px;
-  }
-
-  .about p {
-    text-align: left;
-    padding-bottom: 15px;
-  }
-
-  .about p:nth-of-type(1) { 
-    font-size: 1.25em; /* 20/16 */
-    text-align: center;
-  }
-}
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/logo3new.jpg b/images/logo3new.jpg
diff --git a/images/triangle.png b/images/triangle.png
diff --git a/index.html b/index.html
@@ -8,43 +8,76 @@
     <title>Hello World Personal Page</title>
     <meta name="description" content="" />
     <meta name="keywords" content="" />
-
+<link rel="icon" href="images/favicon.ico" />
     <!-- Google Fonts -->
     <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400' rel='stylesheet' type='text/css'>
 
     <!-- Stylesheet -->
     <link href="css/style.css" rel="stylesheet" />
 
 </head>
-
 <!-- Remove the background class for a vanilla theme -->
-<body class="background">
+<body>
+    <article id="home">
+
 
 <div class="container">
 
 	<header>
 		<!-- Add the URL to you avatar or add a local image -->
-		<img class="avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/aio___/128.jpg" alt="My Avatar" />
+		<img class="avatar" src="../hello-world-page/images/logo3new.jpg" alt="My Avatar" /> 
+
 		<p>Hello World, I'm</p>
-		<h1>Your Name</h1>
+		<h1>Chris Kennedy</h1>
+        <nav>
+        <ul>
+            <li><a class="home" href="#home">HOME</a></li>
+           <li><a class="aboutme" href="#aboutme">ABOUT ME</a></li>
+           <li><a class="Education" href="#education">EDUCATION</a></li>
+           <li><a class="Portfolio" href="#portfolio">PORTFOLIO</a></li>
+            <li><a class="contact" href="#contact">CONTACT</a></li>
+        </ul>
+     </nav>
 	</header>
 
 	<!-- Let the world know about you -->
-	<div class="about">
-		<p>An introductory paragraph about who you are and what you do.</p>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-		<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non quaerat voluptatem.</p>
-	</div>
-
+	<section class="about">
+        <center><h2 id="aboutme">ABOUT ME</h2></center>
+<p>My name is Christopher Kennedy and I am a 20 year old student at the University of Ulster Belfast, I am studying Interaction Design and I am currently in my first Year.</p>
+    <p>I am original from a small town called Keady in Armagh and I come from a very creative and artistic family which help me discover my interests in all things art and design.</p>
+<p>In my spare time i enjoy sketching, painting and working on personal projects and exploring other areas of art and design that inerest me.</p>
+	</section>
+
+    <section class="education">
+        <center><h2 id="education">EDUCATION</h2></center>
+        <P>As a child I was always very creative and always drawing pictures or creating something and taking part in school competitions.
+        I went to a school called St.Francis of Assisi in my home town before then going to my secondary school, St.Patrick high school. It was here that I became even more interested in art and design and I always loved my art classes and learning new art styles and trying new materials that I had never tried before.</P>
+        <p>I continued my art studies through GCSE's and Alevel's andd built up a portfolio that I would then use to apply for the Art college.
+        I got accepted and started the foundation art course and moved to student accomodation in Jordanstown.</p>
+        <p>Foudation was a great course and I choose this degree as i was not sure exactly what degree programme I was interested and because I wanted to try new disciplines. At the end of the year I had narrowed down my choices to two degree programmes and in September 2015 i began my new degree, Interaction design.</p>
+        <p>From the very beginnin I have loved this course and i enjoy learning all the new areas of design, both off screen and on.</p>
+        </section>
+
+        <section class="portfolio">
+            <center><h2 id="portfolio">PORTFOLIO</h2></center>
+            <p>Below you can visit my Flickr account and view examples of the work I have created while on my Interaction design degree. At first I designed some work for phone and laptop backgrounds based on point, line and plane, I fully enjoyed doing this as I was then able to use my own work to design my own devices. I also then designed posters and fonts and started learning how to develop web pages with HTML and CSS which I enjoy very much as I love to learn new things and ways to create.</p>
+
+    </section>
+
+
 	<!-- Icons from http://whanncons.com. Delete or comment out what you don't need -->
-	<div class="social">
+	<section class="social">
+        <center><p class="contact">CONTACT ME!</p></center>
+        <div class="svglinks">
 		<ul>
-			<li><a href="#"><img src="images/social-icons/behance.svg" alt="View my Behance Portfolio" /></a></li>
-			<li><a href="#"><img src="images/social-icons/dribbble.svg" alt="Follow me on Dribbble" /></a></li>
-			<li><a href="mailto:#"><img src="images/social-icons/email.svg" alt="Send me an email" /></a></li>
-			<li><a href="#"><img src="images/social-icons/facebook.svg" alt="Friend me on Facebook" /></a></li>
-			<li><a href="#"><img src="images/social-icons/flickr.svg" alt="Follow me on Flickr" /></a></li>
-			<li><a href="#"><img src="images/social-icons/github.svg" alt="Follow me on GitHub" /></a></li>
+		<!--< <li><a href="#"><img src="images/social-icons/behance.svg" alt="View my Behance Portfolio" /></a></li> >-->
+			<!--< <li><a href="#"><img src="images/social-icons/dribbble.svg" alt="Follow me on Dribbble" /></a></li> >-->
+			<!--< <li><a href="mailto:#"><img src="images/social-icons/email.svg" alt="Send me an email" /></a></li> >-->
+		<!--< <li><a href="#"><img src="images/social-icons/facebook.svg" alt="Friend me on Facebook" /></a></li> <-->
+			<li><a href="hmailto:chris-kennedy09@hotmail.com"><img src="images/social-icons/email.svg" alt="Send me an email" /></a></li>
+			<li><a href="https://www.flickr.com/photos/134990026@N08/" target="_blank"><img src="images/social-icons/flickr.svg" alt="Follow me on Flickr" /></a></li>
+			<li><a href="https://www.github.com/Chriskeno" target="_blank"><img src="images/social-icons/github.svg" alt="Follow me on GitHub" /></a></li>
+			<li><a href="https://twitter.com/Chriskeno19" target="_blank"><img src="images/social-icons/twitter.svg" alt="Follow me on Twitter" /></a></li>
 			<!-- <li><a href="#"><img src="images/social-icons/googleplus.svg" alt="Follow me on Google+" /></a></li>
 			<li><a href="#"><img src="images/social-icons/instagram.svg" alt="Follow me on Instagram" /></a></li>
 			<li><a href="#"><img src="images/social-icons/link.svg" alt="View my website" /></a></li>
@@ -55,22 +88,17 @@ <h1>Your Name</h1>
 			<li><a href="#"><img src="images/social-icons/skype.svg" alt="Follow me on Skype" /></a></li>
 			<li><a href="#"><img src="images/social-icons/soundcloud.svg" alt="Listen to my music on Soundcloud" /></a></li>
 			<li><a href="#"><img src="images/social-icons/spotify.svg" alt="Follow me on Spotify" /></a></li>
-			<li><a href="#"><img src="images/social-icons/tumblr.svg" alt="Follow me on Tumblr" /></a></li>
-			<li><a href="#"><img src="images/social-icons/twitter.svg" alt="Follow me on Twitter" /></a></li>
+			<li><a href="https://twitter.com/Chriskeno19"><img src="images/social-icons/tumblr.svg" alt="Follow me on Tumblr" /></a></li>
+			<li><a href="https://twitter.com/Chriskeno19"><img src="images/social-icons/twitter.svg" alt="Follow me on Twitter" /></a></li>
 			<li><a href="#"><img src="images/social-icons/vimeo.svg" alt="Subscribe to my channel on Vimeo" /></a></li>
 			<li><a href="#"><img src="images/social-icons/vine.svg" alt="Follow me on Vine" /></a></li>
 			<li><a href="#"><img src="images/social-icons/wordpress.svg" alt="Follow me on Wordpress" /></a></li>
 			<li><a href="#"><img src="images/social-icons/yahoo.svg" alt="Follow me on Yahoo" /></a></li>
 			<li><a href="#"><img src="images/social-icons/youtube.svg" alt="View my YouTube channel" /></a></li> -->
 		</ul>
-	</div>
-
-	<!-- This is totally free to use and I'd appreciate you keep this link back to the repo, but feel free to remove it should you prefer -->
-	<footer>
-		<p><a href="https://github.com/timpotter/hello-world-page">Hello World Personal Page</a> by <a href="http://timpotter.github.io/">Tim Potter</a></p>
-	</footer>
-
+	</section>
 </div>
 
 </body>
-</html>
+    </article>
+</html>