My mess of a site

README.md

@@ -1,36 +1,36 @@
-# Personal website
-
-A really great way to stand out during the job hunting process is to have a personal website where hiring managers can learn a bit more about your skills and interests.
-
-Throughout the course you will produce projects which will demonstrate the skills you have learned. By publishing your favourite projects on the web alongside the source code on Github you will be able to share your understanding and ability with potential hiring companies.
-
-For this weekend project, create a personal website which should contain some interesting info about you, what you are working on and what you would like to do in future.
-
-We would like to see clean and well structure HTML and CSS. Feel free to include any images you like.
-
-Add links to any public social media accounts such as Twitter, LinkedIn or your blog. Avoid including Facebook or any other social media is overly personal.
-
-Neat resources you can use to create a great looking website include
-
-- [Coolors](http://coolors.co/) is a great palette generate website
-- [Unsplash](https://unsplash.com/) has lots of great imagery you can use
-- [Google Fonts](https://fonts.google.com/) provides plenty of free fonts you can use to enhance your website
-
-Some great personal websites we like include
-
-- [http://tjholowaychuk.com/](http://tjholowaychuk.com/)
-- [http://mattfarley.ca/](http://mattfarley.ca/)
-- [http://timroussilhe.com/](http://timroussilhe.com/)
-- [http://www.adamhartwig.co.uk/](http://www.adamhartwig.co.uk/)
-- [http://www.garysheng.com/](http://www.garysheng.com/)
-- [https://www.codedsignal.co.uk](https://www.codedsignal.co.uk/)
-
-Don't worry too much about getting same level of visual polish. You will have plenty of time to enhance an improve your site over the next few months, as well as add your projects.
-
-## Instructions
-
-1. Fork and clone this repo
-2. Commit frequently while working
-3. Once ready push your changes and create a `Pull Request`. This will allow us to review your code and progress.
-
-We will look at deploying your website to the web next week.
+# Personal website
+
+A really great way to stand out during the job hunting process is to have a personal website where hiring managers can learn a bit more about your skills and interests.
+
+Throughout the course you will produce projects which will demonstrate the skills you have learned. By publishing your favourite projects on the web alongside the source code on Github you will be able to share your understanding and ability with potential hiring companies.
+
+For this weekend project, create a personal website which should contain some interesting info about you, what you are working on and what you would like to do in future.
+
+We would like to see clean and well structure HTML and CSS. Feel free to include any images you like.
+
+Add links to any public social media accounts such as Twitter, LinkedIn or your blog. Avoid including Facebook or any other social media is overly personal.
+
+Neat resources you can use to create a great looking website include
+
+- [Coolors](http://coolors.co/) is a great palette generate website
+- [Unsplash](https://unsplash.com/) has lots of great imagery you can use
+- [Google Fonts](https://fonts.google.com/) provides plenty of free fonts you can use to enhance your website
+
+Some great personal websites we like include
+
+- [http://tjholowaychuk.com/](http://tjholowaychuk.com/)
+- [http://mattfarley.ca/](http://mattfarley.ca/)
+- [http://timroussilhe.com/](http://timroussilhe.com/)
+- [http://www.adamhartwig.co.uk/](http://www.adamhartwig.co.uk/)
+- [http://www.garysheng.com/](http://www.garysheng.com/)
+- [https://www.codedsignal.co.uk](https://www.codedsignal.co.uk/)
+
+Don't worry too much about getting same level of visual polish. You will have plenty of time to enhance an improve your site over the next few months, as well as add your projects.
+
+## Instructions
+
+1. Fork and clone this repo
+2. Commit frequently while working
+3. Once ready push your changes and create a `Pull Request`. This will allow us to review your code and progress.
+
+We will look at deploying your website to the web next week.

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>

e82d1c1ddc5a8ecf6d39e61ab7bb7fea.ico/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

e82d1c1ddc5a8ecf6d39e61ab7bb7fea.ico/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

index.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Second try</title>
+  <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Encode+Sans:300,400,700" rel="stylesheet">
+  <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">
+</head>
+
+<body>
+    <div class="app">
+
+      <header class="hero">
+          <div class="contact" ><p>contact me</p>
+            <div class ="contact__text_slider"><a href="mailto:chrisphillers@gmail.com?subject=Mail from my site">My email address</a>  
+            </div>
+          </div>
+        <div class="hero">
+
+
+          <div class="hero__contents">
+            <div class="coder"><h2>Coder</h2></div>
+           <!---<div class="producer"><h2>Producer</h2></div>-->
+            <div class="arrow"><h2><br><br><br>⌄</h2></div>
+          </div> 
+
+            </div>
+            <div class="CP__logo" >
+
+                <span class="dot" id="dott"><h1>.</h1></span>
+                <span class="logo"><div class="slideout"> </div><h1><a href="index.html"id="C">C</a><a href="producer.html" id="P">P</a></h1></span>
+
+
+
+
+
+
+              </div>
+      </header>
+
+<!---
+      <div class="body__content">
+
+        </div>
+        -->
+
+
+
+          <div class="rows">
+
+
+
+                  <div class="jobs">
+
+                      <h4>Here are a few jobs I've done (probably)</h4>
+                      <img src="img/smile.gif" class="image1" alt="placeholder"/>
+
+                </div>
+
+              <div class="row">
+
+                <div class="row__header"> <h4>Build of google.com</h4></div>
+                <div class="row__left__box">
+                  <div class="row__media"><img src="img/google.jpg" class="image1" alt="placeholder"/></div>
+
+                  <div class="row__job"><h4>JOB TITLE: Javascript lead</h4></div>
+                <div class="row__more"><h4>more info</h4></div>
+              </div>
+
+                <div class="row__right__box">
+                  <div class="row__description"><p>efwefew wef</p></div>
+                  </div>
+              </div>
+
+
+
+              <div class="row">
+
+                  <div class="row__header"> <h4>Build of google.com</h4></div>
+                  <div class="row__left__box">
+                    <div class="row__media"><img src="img/placeholder1.jpg" class="image1" alt="placeholder"/></div>
+
+                    <div class="row__job"><h4>JOB TITLE: Javascript lead</h4></div>
+                  <div class="row__more"><h4>more info</h4></div>
+                </div>
+
+                  <div class="row__right__box">
+                    <div class="row__description"><p>efwefew wef</p></div>
+                    </div>
+                </div>
+
+
+<!---
+
+                <div class="row2">
+                    <div class="title"></div>
+                    <div class="row__media"></div>
+                    <div class="sub__title"></div>
+                    <div class="info"></div>
+                </div>
+
+    -->
+
+    <div class="skills">
+        <div class="skills__title"><p>Code Languages</p></div>
+            <ul class="skills__logos">
+                <li><img src="img/js.jpg" class="skills__logo"  id="left" alt="Javascript"/></li>
+                <li><img src="img/node.png" class="skills__logo" alt="Node"/></li>
+                <li><img src="img/react.png" class="skills__logo" alt="React"/></li>
+                <li><img src="img/html.png" class="skills__logo" alt="html"/></li>
+                <li><img src="img/css.png" class="skills__logo" alt="css"/></li>
+                <li><img src="img/git.png" class="skills__logo" alt="Github"/></li>
+              </ul>      
+        </div>
+
+
+
+          <div class="about">
+
+          <div class="about__image"><img src="img/me.jpg" class="image_me"  id="me" alt="Hi there"/></div>
+          <div class="about__info">
+              <div class="about__title"><h5>Who am I?</h5></div>
+              <div class="about__name"><p>Job</p><div class="a__info"><p>I am currently learning JS at Constructors labs</p></div></div>
+              <div class="about__name"><p>Job</p><div class="a__info"><p>I am currently learning JS at Constructors labs</p></div></div>
+              <div class="about__name"><p>Job</p><div class="a__info"><p>I am currently learning JS at Constructors labs dw sedvsd  asf asf asf as saf saf asf sdvsdv</p></div></div>
+              <div class="about__name"><p>Links</p><div class="a__info"><p>I am currently learning JS at Constructors labs</p></div></div>
+              <div class="about__image__mobile"><img src="img/me.jpg" class="image_me"  id="me" alt="Hi there"/></div>
+          </div>
+
+
+            </div>
+
+
+   <!--
+<input type="checkbox" id="something"> 
+<label for="something">Click here</label>
+-->
+
+
+
+    </div>
+</body>
+</html>

site.webmanifest

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