diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..16fb43e
Binary files /dev/null and b/.DS_Store differ
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..c09429d
--- /dev/null
+++ b/about.html
@@ -0,0 +1,41 @@
+<!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>Layout 2</title>
+  <link href="https://fonts.googleapis.com/css?family=Lora:700" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="app">
+            <nav class="nav">
+                    <div class="nav__home">HOME</div>
+                    <ul class="nav__links">
+                        <li class="nav__links__link"><a href="about.html">skills</a></li>
+                        <li class="nav__links__link">portfolio</li>
+                        <li class="nav__links__link">work</li>
+                        <li class="nav__links__link">life</li>
+                        <li class="nav__links__link nav__links__link__contact">contact</li>
+                        <li class="nav__links__link"></li>
+                    </ul>
+                </nav>
+            <div class="content">
+
+                <main class="content__main">
+                    <p>I’m Phil. I’m nearly 40 and I live in north west London. I’m currently on my third mid-life crisis and attempting a career change from digital marketing to software development.</p>
+                    <p>I’m currently doing a 12 week javascript bootcamp at Constructor Labs. Over the next 11 weeks I hope to learn all the good and proper ways javascript can be used to build web applications, and how a well functioning technical team works together.</p>
+                    <p>Previously I have worked in a number of marketing roles from SEO to managing the digital marketing team at Simply Business while we grew from 0 to 300,000 customers. More of this in the [work] page and on [LinkedIn].</p>
+                    <p>Here’s a list of some things I like that I wrote in about 20 seconds. </p>    
+                </main>
+            </div>
+        <footer class="footer">
+            <div class="footer__notes"><img src="/images/inst-logo-small.png"> <img src="/images/LinkedIn-logo-small.png"> </div>
+        </footer>
+
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/images/LinkedIn-logo-small.png b/images/LinkedIn-logo-small.png
new file mode 100644
index 0000000..241281b
Binary files /dev/null and b/images/LinkedIn-logo-small.png differ
diff --git a/images/html_css_logo.png b/images/html_css_logo.png
new file mode 100644
index 0000000..622018a
Binary files /dev/null and b/images/html_css_logo.png differ
diff --git a/images/inst-logo-small.png b/images/inst-logo-small.png
new file mode 100644
index 0000000..ddadf96
Binary files /dev/null and b/images/inst-logo-small.png differ
diff --git a/images/js_logo.png b/images/js_logo.png
new file mode 100644
index 0000000..0a18ed3
Binary files /dev/null and b/images/js_logo.png differ
diff --git a/images/phil-home.jpeg b/images/phil-home.jpeg
new file mode 100644
index 0000000..69050d8
Binary files /dev/null and b/images/phil-home.jpeg differ
diff --git a/images/phil-home.jpg b/images/phil-home.jpg
new file mode 100644
index 0000000..d2ca08e
Binary files /dev/null and b/images/phil-home.jpg differ
diff --git a/images/phil_with-skis.jpeg b/images/phil_with-skis.jpeg
new file mode 100644
index 0000000..55956ed
Binary files /dev/null and b/images/phil_with-skis.jpeg differ
diff --git a/images/react_logo.png b/images/react_logo.png
new file mode 100644
index 0000000..54aec6a
Binary files /dev/null and b/images/react_logo.png differ
diff --git a/images/sea-to-sky.jpg b/images/sea-to-sky.jpg
new file mode 100644
index 0000000..6ea4c23
Binary files /dev/null and b/images/sea-to-sky.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c06ce1e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,63 @@
+<!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>Layout 2</title>
+  <link href="https://fonts.googleapis.com/css?family=Lora:700" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="app">
+        <!-- <header class="masthead">
+            <h1 class="masthead__text">my name is phil</h1>
+            <p>and this website is all about me.</p>
+        </header> -->
+        <nav class="nav">
+                <div class="nav__home nav__home__mobile"><a href="/">home</a></div>
+                <div class="nav__blank nav__home"></div>
+                <ul class="nav__links">
+                    <li class="nav__links__link nav__home__tablet"><a href="/">home</a></li>
+                    <li class="nav__links__link nav__skills"><a href="skills.html">skills</a></li>
+                    <li class="nav__links__link nav__portfolio">portfolio</li>
+                    <li class="nav__links__link nav__work">work</li>
+                    <li class="nav__links__link nav__life">life</li>
+                    <li class="nav__links__link nav__contact">contact</li>
+                    <li class="nav__links__link nav__blank__spacer"></li>
+                </ul>
+        </nav>
+            <div class="content">
+
+                <main class="content__main">
+                    <p class="content__main__intro">I'm Phil Berryman, an aspiring JS developer from London. Find out more about me using the links above. Thanks!</p>
+                    <div class="home__images">
+                        <figure class="figure home__image__1">                            
+                            <img class="figure" src="images/sea-to-sky.jpg" width="261" height="440">
+                            <figcaption class="figcaption">1 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018</figcaption>
+                        </figure>
+                        <figure class="figure home__image__2">                            
+                                <img class="figure" src="images/sea-to-sky.jpg" width="261" height="440">
+                                <figcaption class="figcaption">2 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018</figcaption>
+                        </figure>
+                        <figure class="figure home__image__3">                            
+                                <img class="figure" src="images/sea-to-sky.jpg" width="261" height="440">
+                                <figcaption class="figcaption">3 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018</figcaption>
+                        </figure>
+                        <figure class="figure home__image__4">                            
+                                <img class="figure" src="images/sea-to-sky.jpg" width="261" height="440">
+                                <figcaption class="figcaption">4 Clare and Phil at the top of Sea to Sky / Vancouver, BC - June 2018</figcaption>
+                        </figure>
+                    </div>
+    
+                </main>
+            </div>
+        <footer class="footer">
+            <div class="footer__notes"><img src="/images/inst-logo-small.png"> <img src="/images/LinkedIn-logo-small.png"> </div>
+        </footer>
+
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/skills.html b/skills.html
new file mode 100644
index 0000000..3e9072b
--- /dev/null
+++ b/skills.html
@@ -0,0 +1,171 @@
+<!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>Layout 2</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+        .app {
+            background: var(--skills-color);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="app">
+            <nav class="nav">
+                    <div class="nav__home nav__home__mobile"><a href="/">home</a></div>
+                    <div class="nav__blank nav__home"></div>
+                    <ul class="nav__links">
+                        <li class="nav__links__link nav__home__tablet"><a href="/">home</a></li>
+                        <li class="nav__links__link nav__skills"><a href="skills.html">skills</a></li>
+                        <li class="nav__links__link nav__portfolio">portfolio</li>
+                        <li class="nav__links__link nav__work">work</li>
+                        <li class="nav__links__link nav__life">life</li>
+                        <li class="nav__links__link nav__contact">contact</li>
+                        <li class="nav__links__link nav__blank__spacer"></li>
+                    </ul>
+            </nav>
+
+        <div class="responsive__content">
+            <div class="margin"></div>
+            <div class="skills">
+                <div class="skill">
+                    <div class="skill__header">
+                        <div class="skill__logo"><img src="images/js_logo.png" width="75" height="75"></div>
+                        <div class="skill__name">Javascript</div>
+                        <div class="skill__spacer"></div>
+                    </div>
+                    <div class="skill__body">
+                        <div class="skill__text">
+                            <p>Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup,
+                                aftertaste wings id bar iced.</p>
+                            <p>Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds.
+                                Ristretto, to go cultivar a percolator as carajillo dark.</p>
+                            <p>Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth
+                                plunger pot. Wings doppio rich, french press mocha organic steamed black.</p>
+                            <p>Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra
+                                decaffeinated grinder est wings dark doppio galão.
+                        </div>
+                        <div class="skill__links">
+                            <div class="skill__links__portfolio">Projects where I've used this:
+                                <ul>
+                                    <li class="link">Project 1</li>
+                                    <li class="link">Project 2</li>
+                                    <li class="link">Project 3</li>
+                                    <li class="link">Project 4</li>
+                                </ul>
+                            </div>
+                            <div class="skill__links__useful">Websites I've found useful:
+                                <ul>
+                                    <li class="link">Project 1</li>
+                                    <li class="link">Project 2</li>
+                                    <li class="link">Project 3</li>
+                                    <li class="link">Project 4</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="skill">
+                    <div class="skill__header">
+                        <div class="skill__logo"><img src="images/html_css_logo.png" width="75" height="75"></div>
+                        <div class="skill__name">HTML & CSS</div>
+                        <div class="skill__spacer"></div>
+                    </div>
+                    <div class="skill__body">
+                        <div class="skill__text">
+                            <p>Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup,
+                                aftertaste wings id bar iced.</p>
+                            <p>Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds.
+                                Ristretto, to go cultivar a percolator as carajillo dark.</p>
+                            <p>Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth
+                                plunger pot. Wings doppio rich, french press mocha organic steamed black.</p>
+                            <p>Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra
+                                decaffeinated grinder est wings dark doppio galão.
+                        </div>
+                        <div class="skill__links">
+                            <div class="skill__links__portfolio">Projects where I've used this:
+                                <ul>
+                                    <li class="link">Project 1</li>
+                                    <li class="link">Project 2</li>
+                                    <li class="link">Project 3</li>
+                                    <li class="link">Project 4</li>
+                                </ul>
+                            </div>
+                            <div class="skill__links__useful">Websites I've found useful:
+                                <ul>
+                                    <li class="link">Project 1</li>
+                                    <li class="link">Project 2</li>
+                                    <li class="link">Project 3</li>
+                                    <li class="link">Project 4</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="skill">
+                    <div class="skill__header">
+                        <div class="skill__logo"><img src="images/react_logo.png" width="75" height="75"></div>
+                        <div class="skill__name">React</div>
+                        <div class="skill__spacer"></div>
+                    </div>
+                    <div class="skill__body">
+                        <div class="skill__text">
+                            <p>Single shot white a et ristretto arabica aftertaste frappuccino white. Eu mazagran cup,
+                                aftertaste wings id bar iced.</p>
+                            <p>Irish, carajillo, sit mocha skinny carajillo aftertaste mazagran java aged grounds.
+                                Ristretto, to go cultivar a percolator as carajillo dark.</p>
+                            <p>Spoon, mocha percolator french press, chicory, single shot extra viennese aromatic froth
+                                plunger pot. Wings doppio rich, french press mocha organic steamed black.</p>
+                            <p>Fair trade acerbic decaffeinated foam robusta turkish breve. Mocha, trifecta, extra
+                                decaffeinated grinder est wings dark doppio galão.
+                        </div>
+                        <div class="skill__links">
+                            <div class="skill__links__portfolio">Projects where I've used this:
+                                <ul>
+                                    <li class="link">Project 1</li>
+                                    <li class="link">Project 2</li>
+                                    <li class="link">Project 3</li>
+                                    <li class="link">Project 4</li>
+                                </ul>
+                            </div>
+                            <div class="skill__links__useful">Websites I've found useful:
+                                <ul>
+                                    <li class="link">Project 1</li>
+                                    <li class="link">Project 2</li>
+                                    <li class="link">Project 3</li>
+                                    <li class="link">Project 4</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin"></div>
+
+            <div class="sidebar">
+                <p>About Me</p>
+                <div class="sidebar__photo"></div>
+                <p>The bizzle ipsum dolizzle dizzle amizzle, consectetuer adipiscing elit.</p>
+                <p>I'm in the shizzle crackalackin velizzle, own yo' volutpat. </p>
+                <p>suscipizzle crackalackin, bow wow wow vizzle, arcu. Pellentesque fo shizzle mah nizzle fo rizzle, mah home g-dizzle tortizzle. Sizzle erizzle. Bling bling izzle yippiyo dapibizzle turpis tempizzle away.</p>
+            </div>
+
+            <div class="margin"></div>
+
+
+
+        </div>
+        <footer class="footer">
+            <div class="footer__notes"><img src="/images/inst-logo-small.png"> <img src="/images/LinkedIn-logo-small.png">
+            </div>
+        </footer>
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ba46119
--- /dev/null
+++ b/style.css
@@ -0,0 +1,377 @@
+* {
+    box-sizing: inherit;
+  }
+
+
+  :root {
+    --primary-color:#91867E;
+    --secondary-color: #910052;
+    --tertiary-color: #FFAA5A;
+    --skills-color:#95A1C3;
+    --portfolio-color: #B2C891 ;
+    --work-color:#E49969 ;
+    --life-color: #AD85BA;
+    --contact-color: #C88691;
+    --nav-font: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  }
+  
+  body {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .figure {
+    display: table;
+    margin: 0;
+  }
+  
+  .figure img {
+    max-width: 100%;
+  }
+  
+  .figcaption {
+    display: table-caption;
+    caption-side: bottom;
+    background-color: var(--tertiary-color);
+    color:white;
+    padding: 10px;
+  }
+
+  .app {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    background:#BBCDE5;
+  }
+
+
+  ul {
+      padding-left: 0;
+  }
+
+  p {
+      margin:5px;
+    }
+
+    h1 {
+    font-size: 2em;
+    font-weight:100;
+    display: block;
+    margin:0;
+  }
+    h2 {
+        padding =0;
+    }
+
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        flex:1;
+        padding-top: 10px;
+    }
+
+    .nav {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        background: white;
+        margin: 0px 0px 0px 0px;
+    }
+
+    .nav__home {
+        display:flex;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        font-size: 20px;
+        font-weight: 600;
+        background: var(--primary-color);
+        color: white;
+        flex:1;
+        flex-direction:row;
+        justify-content:center;
+        align-items:center;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        font-size: 20px;
+        font-weight: 600;
+        background: var(--primary-color);
+        font-family: var(--nav-font);
+    }
+
+
+
+    .nav__links {
+        display: flex;
+        flex-direction: row;
+        flex-grow:1;
+        flex-wrap: wrap;
+        margin:0px;
+        padding-left:0px;
+        flex:11;
+    }
+
+
+
+    .nav__links__link {
+        display: flex;
+        flex:1;
+        background: var(--primary-color);
+        color: white;
+        margin:0px;
+        padding:5px 0px 5px 10px;
+        min-width:150px;
+        font-family: var(--nav-font);
+        font-weight:300;
+        font-size: 20px;
+    }
+
+    .nav__links__link a, .nav__home a{
+        color: white; /* blue colors for links too */
+        text-decoration: inherit; /* no underline */
+      }
+
+    .nav__skills {
+        background: var(--skills-color);
+    }
+
+    .nav__portfolio {
+        background: var(--portfolio-color);
+    }
+
+    .nav__work {
+        background: var(--work-color);
+    }
+
+    .nav__life {
+        background: var(--life-color);
+    }
+
+    .nav__contact {
+        background: var(--contact-color);
+    }
+
+    .nav__links__link__contact {
+        color: var(--tertiary-color);
+    }
+
+    .nav__blank {
+        display:none;
+    }
+
+    .nav__home__tablet {
+        display:none;
+    }
+
+    .content__main {
+        background: #BBCDE5;
+        padding:10px;
+        flex-grow:1;
+        display:flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .content__main__intro {
+        text-align: center;
+    }
+
+    .footer {
+        padding:10px;
+        background:var(--primary-color);
+    }
+    
+    .home__images {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .home__image__2 {
+        display: none;
+    }
+
+    .home__image__3 {
+        display: none;
+    }
+
+    .home__image__4 {
+        display: none;
+    }
+
+
+    .responsive__content {
+        display: flex;
+        flex-direction: row;
+        margin-top:20px;
+    }
+
+    .skills {
+        display: flex;
+        flex-direction: column;
+        flex:10;
+        flex-wrap:wrap;
+    }
+
+    .skill {
+        display:flex;
+        flex-direction: row;
+        min-width: 300px;
+        margin-bottom: 20px;
+        flex-wrap:wrap;
+        background:white;
+    }
+
+    .skill__header {
+        display:flex;
+        flex-direction: row;
+    }
+
+    .skill__body {
+        display:flex;
+        flex-direction: column;
+    }
+
+    .skill__name {
+        display:flex;
+        flex:1;
+        min-width:200px;
+        font-size:2em;
+        justify-content:flex-end;
+        margin:5px 10px 0px 0px;
+
+    }
+
+    .skill__text {
+        min-width:200px;
+        margin-top: 15px;
+        margin-bottom:15px;
+        margin:10px 5px 10px 5px;
+
+    }
+
+    .skill__links {
+        margin:0px 5px 5px 5px;  
+    }
+
+    .skill__logo {
+        padding:5px 0px 0px 5px;
+    }
+
+    .margin {
+        display:flex;
+        flex:1;
+    }
+
+    .link {
+        display:list-item;
+        list-style-type: square;
+        margin-left: 20px;
+    }
+
+    .sidebar {
+        display:none;
+    }
+
+    @media (min-width: 768px) {
+        .home__image__2 {
+            display: table;
+            margin-left: 30px;
+        }
+        .nav__links {
+            align-content: flex-start;
+        }
+        .nav__links__link {
+            font-size: 30px;
+            min-width:240px;
+        }
+
+        .skill__body {
+            flex-direction:row;
+        }
+
+        .skill__text {
+            flex:7;
+        }
+
+        .skill__links {
+            flex:3;
+        }
+
+        .skill__header {
+            flex:1;
+            display:flex;
+        }
+
+        .skill__logo {
+            flex:3;
+        }
+
+        .skill__name {
+            flex:4;
+        }
+
+        .skill__spacer {
+            flex:3;
+        }
+        .nav__home__mobile {
+            display:none;
+        }
+
+        .nav__blank__spacer {
+            display:none;
+        }
+
+        .nav__home__tablet {
+            display: flex;
+        }
+
+
+      }
+    
+      @media (min-width: 960px) {
+        .home__images {
+            flex-wrap: wrap;
+            width: 600px;
+        }
+
+        .home__image__1, .home__image__2, .home__image__3, .home__image__4 {
+            display: table;
+            margin-left: 30px;
+            margin-bottom:30px;
+        }
+
+        .nav__home {
+            display:none;
+        }
+
+        .nav__blank {
+            display:none;
+        }
+
+       .nav__blank__spacer {
+           display:flex;
+       }
+
+       .nav__links__link {
+        min-width:130px;
+      }
+
+      .sidebar {
+          display:flex;
+          flex:3;
+          flex-direction:column;
+          background:white;
+          margin-bottom:20px;
+          align-items: center;
+      }
+
+      .sidebar__photo {
+        background-image: url(images/phil_with-skis.jpeg);
+        background-size: contain;
+      }
+
+      }
\ No newline at end of file