constructorlabs · ljsikuade · Sep 7, 2018 · Sep 7, 2018 · Sep 9, 2018 · Sep 9, 2018
diff --git a/README.md b/README.md
@@ -1,40 +1,5 @@
-# Personal website
+# Personal Website v.1.0.0
 
-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.
+The first website I ever made. I used HTML, CSS and even tried my
+hand at a little Javascript (profile-image changes when you scroll down the page). 
 
-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 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/images/away.png b/images/away.png
diff --git a/images/code.png b/images/code.png
diff --git a/images/linkedin.svg b/images/linkedin.svg
diff --git a/images/luke_coffee.png b/images/luke_coffee.png
diff --git a/images/organization-chart.png b/images/organization-chart.png
diff --git a/images/pencil.png b/images/pencil.png
diff --git a/images/twitter.svg b/images/twitter.svg
diff --git a/ind.html b/ind.html
@@ -0,0 +1,117 @@
+<!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>Luke Sikuade</title>
+    <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
+    <link rel="stylesheet" href="style_dark.css">
+    <script src="pictureChange.js"></script>
+</head>
+
+<body>
+
+    <div class="app">
+        <header class="masthead">
+            <ul class="masthead__controls">
+                <li class="logo"><img id="logo--img" src="images/away.png" height="300" width="300"></li>
+                <li class="contact"><a href="" class="contact__link">Contact Me</a></li>
+            </ul>
+        </header>
+
+        <section class="introduction__section">
+            <div class="intro">
+                <h1 class="intro__header">This will be a cool header some day...
+                    </h2>
+                    <p class="break__text">And this will be an even cooler introductory message...</p>
+            </div>
+        </section>
+
+        <section class="skills__section">
+            <div class="skills_header">
+                <h1 class="section__header__text">What I Can Do
+                    </h2>
+            </div>
+            <div class="skills">
+                <div class="skill__column__one">
+                    <h2>Front End Developer</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                        et dolore magna aliqua.</p>
+                    <img src="images/code.png">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                        et dolore magna aliqua.</p>
+                </div>
+                <div class="skill__column__two">
+                    <h2 class="writer">Writer</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                        et dolore magna aliqua.
+                    </p>
+                    <img src="images/pencil.png" alt="pencil">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                        et dolore magna aliqua.</p>
+                </div>
+                <div class="skill__column__three">
+                    <h2>Visual Concepts</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                        et dolore magna aliqua.</p>
+                    <img src="images/organization-chart.png" alt="chart">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                        et dolore magna aliqua.</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="work__section">
+            <div class="work__text">
+                <h1 class="break__text"> Things I've Built...
+                    </h2>
+            </div>
+            <div class="work__images__wrapper">
+                <div class="work__images">
+                    <div class="cell">
+                        <img class="proj__img" src="https://placeholder.pics/svg/300/FFFFFF-FFFFFF" alt="Work Image">
+
+                        <div class="image__interior">
+                            <div class="proj__img__text">Project</div>
+                        </div>
+                    </div>
+                    <div class="cell">
+                        <img class="proj__img" src="https://placeholder.pics/svg/300/FFFFFF-FFFFFF" alt="Work Image">
+                        <div class="image__interior">
+                            <div class="proj__img__text">Project</div>
+                        </div>
+                    </div>
+                    <div class="cell">
+                        <img class="proj__img" src="https://placeholder.pics/svg/300/FFFFFF-FFFFFF" alt="Work Image">
+                        <div class="image__interior">
+                            <div class="proj__img__text">Project</div>
+                        </div>
+                    </div>
+                    <div class="cell">
+                        <img class="proj__img" src="https://placeholder.pics/svg/300/FFFFFF-FFFFFF" alt="Work Image">
+                        <div class="image__interior">
+                            <div class="proj__img__text">Project</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="footer__section">
+            <footer class="footer">
+                <div class="social__media">
+                    <ul class="social__icons">
+                        <li class="button__grow"><a href="www.google.co.uk"><img height="30px" width="30px" src="images/linkedin.svg"></a></li>
+                        <li class="button__grow"><a href="www.google.co.uk"><img height="30px" width="30px" src="images/twitter.svg"></a></li>
+                    </ul>
+                </div>
+            </footer>
+        </section>
+
+    </div>
+
+</body>
+
+</html>
diff --git a/pictureChange.js b/pictureChange.js
@@ -0,0 +1,10 @@
+window.onscroll = () => changeMenu();
+
+function changeMenu() {
+  let scrollBarPosition = window.pageYOffset | document.body.scrollTop;
+
+  if (scrollBarPosition === 200) {
+    document.getElementById("logo--img").src = "images/luke_coffee.png";
+    console.log("Position reached.");
+  }
+}