constructorlabs · joelamb · Sep 7, 2018 · Sep 8, 2018 · Sep 8, 2018 · Sep 8, 2018
diff --git a/README.md b/README.md
@@ -1,40 +1,15 @@
-# Personal website
+# Personal website project
 
 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.
 
+## Brief
+
 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 structured HTML and CSS. Feel free to include any images and cool fonts from Google Fonts. Avoid using external frameworks and libraries. Focus on practicing your HTML and CSS skills.
 
 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.
 
 Create the site using 'mobile first' that is create a single column layout that looks great on mobile and then using media queries add layouts for larger screen sizes.
-
-Neat resources you can use to create a great looking website include
-- [CSS colours](https://www.quackit.com/css/css_color_codes.cfm) contains names of colours available in CSS
-- [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://roybarber.com/](https://roybarber.com/)
-- [https://www.alexlakas.com/](https://www.alexlakas.com/)
-- [https://www.devonstank.com/](https://www.devonstank.com/)
-- [http://www.ryanmiglavs.com/](http://www.ryanmiglavs.com/)
-- [http://tdr.io/](http://tdr.io/)
-
-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.
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/elevenplustwo.png b/assets/elevenplustwo.png
diff --git a/assets/joe.jpg b/assets/joe.jpg
diff --git a/assets/placeholder.jpg b/assets/placeholder.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,135 @@
+<!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>Joe Lamb - 1/12 Stack Javascript Developer</title>
+    <link rel="stylesheet" href="normalize.css"> <!-- css style normalise based on Bootstrap 4 -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+        crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <header id='header'>
+        <div class='header-wrapper'>
+            <h1 id="title"><a href="index.html">Joe Lamb</a></h1>
+            <h2 class="strapline"><span class="blur">Full</span>
+                <span class="fraction blur--reverse"><sup>1</sup>&frasl;<sub>12</sub></span> &ndash; Stack JavaScript
+                Developer</h2>
+            <div id="contact">
+                <button class="button button--contact"><i class="far fa-envelope"></i> Contact Me</button>
+            </div>
+        </div>
+    </header>
+    <nav id='nav--main' class="section-nav">
+        <ul>
+            <li class="skill"><a href="#skill">Skills</a></li>
+            <li class="portfolio"><a href="#portfolio">Portfolio</a></li>
+            <li class="about"><a href="#about">About</a></li>
+        </ul>
+    </nav>
+
+    <div id="content">
+        <section class="biog section--biog">
+            <div class="section-wrapper">
+                <img class="biog--photo" src="assets/joe.jpg" alt="">
+                <p>
+                    My working life has been pretty varied &ndash; careering from one thing to another.
+                    Take a look at my <a href="https://www.linkedin.com/in/joe-lamb-98610319/">LinkedIn</a> profile
+                    for the full story.
+                </p>
+                <p>
+                    But I believe code can help make the world a happier, fairer place. So, I’m learning how to do that
+                    at
+                    <a href="https://constructorlabs.com/">Constructor
+                        Labs.</a>
+                </p>
+            </div>
+        </section>
+
+        <a id='skill' class='anchor'></a>
+        <section class="skill section--skill">
+            <div class="section-wrapper">
+                <h2 class="section-header">Skills</h2>
+                <div>
+                    <h3><i class="fas fa-code"></i> Code</h3>
+                    <ul>
+                        <li>HTML</li>
+                        <li>CSS</li>
+                        <li>JavaScript</li>
+                    </ul>
+                </div>
+
+                <div>
+                    <h3><i class="fas fa-pen-fancy"></i> Content</h3>
+                    <ul>
+                        <li>Strategy</li>
+                        <li>Marketing</li>
+                        <li>Brand Voice</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <a id='portfolio' class='anchor'></a>
+        <section class="portfolio section--portfolio">
+            <div class="section-wrapper">
+                <div class="section-wrapper--description">
+                    <h2 class="section-header">Portfolio</h2>
+                    <!-- <p>Please explore this selection of recent work to see my skills in action.</p> -->
+                </div>
+                <div class="section--portfolio--projects">
+                    <div class="portfolio--project portfolio--project--elevenplustwo">
+                        <a class="button button--portfolio" href="http://elevenplustwo.co.uk/">Visit site</a>
+                        <a class="button button--portfolio" href=""><i class="fab fa-github"></i></a>
+                    </div>
+                    <div class="portfolio--project portfolio--project--coming">
+                        <p>Coming soon</p>
+                    </div>
+                    <div class="portfolio--project portfolio--project--coming">
+                        <p>Coming soon</p>
+                    </div>
+                    <div class="ipad-only desktop-only portfolio--project portfolio--project--coming ">
+                        <p>Coming soon</p>
+                    </div>
+                    <div class="desktop-only portfolio--project portfolio--project--coming ">
+                        <p>Coming soon</p>
+                    </div>
+                    <div class="desktop-only portfolio--project portfolio--project--coming">
+                        <p>Coming soon</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <a id='about' class='anchor'></a>
+        <section class="about section--about">
+            <div class="section-wrapper">
+                <h2 class="section-header">About</h2>
+                <p>When I’m not writing, debugging and pushing code to <a href="https://github.com/joelamb"><i class="fab fa-github"></i>
+                        Github</a>, I enjoy cycling and you can follow me, literally, on <a href="https://www.strava.com/athletes/546555">
+                        <i class="fab fa-strava"></i> Strava</a> (you can also see my series of abandoned shopping
+                    trolley photographs there).</p>
+                <p>My other passion is music. I play with <strong>The Crooks Saxophone Quartet</strong> and we've got a
+                    few tunes up on
+                    <a href="https://soundcloud.com/the-crooks-saxes"><i class="fab fa-soundcloud"></i> Soundcloud</a>.
+                    I was also a member of <strong>The Sons of Silence</strong> (the band not the motorbike gang) and
+                    you
+                    can listen on <a href="https://open.spotify.com/artist/0jMdibLNxSSU0aeqtWbEUt"><i class="fab fa-spotify"></i>
+                        Spotify</a>.</p>
+                <p>Oh, and I used to be called Joe Gardiner, but took my wife’s surname, Lamb, in the summer of 2018.</p>
+            </div>
+        </section>
+
+    </div>
+    <footer>
+        <p>&copy; 2018 Joe Lamb</p>
+    </footer>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,37 @@
+// get elements
+const contact = document.getElementById('contact');
+const content = document.getElementById('content');
+const header = document.getElementById('header');
+const nav = document.getElementById('nav--main');
+const sectionHeaders = Array.from(
+  document.getElementsByClassName('section-header')
+);
+
+// set scroll offset for mobile (based on height of title and stapline)
+const offset = 53;
+
+// define scroll function
+const scrollFunction = () => {
+  // Add sticky class to header & nav and offset content
+  if (window.innerWidth > 767) {
+    header.style.position = 'fixed';
+    nav.style.position = 'fixed';
+    content.style.marginTop = '210px';
+    if (window.innerWidth > 960) {
+      content.style.marginTop = '140px';
+    }
+  } else {
+    // Add sticky class to the contact button when page top reaches offset position.
+    if (window.pageYOffset > offset) {
+      contact.classList.add('sticky');
+      content.style.marginTop = '64px';
+    } else {
+      // Remove sticky class when page top leaves offset position.
+      contact.classList.remove('sticky');
+      content.style.marginTop = 0;
+    }
+  }
+};
+
+// call scroll function on scroll event
+window.addEventListener('scroll', scrollFunction);