diff --git a/README.md b/README.md index b93ec95..1e37603 100644 --- 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 new file mode 100644 index 0000000..1420e8d Binary files /dev/null and b/images/away.png differ diff --git a/images/code.png b/images/code.png new file mode 100644 index 0000000..3be6119 Binary files /dev/null and b/images/code.png differ diff --git a/images/linkedin.svg b/images/linkedin.svg new file mode 100644 index 0000000..f8a94ef --- /dev/null +++ b/images/linkedin.svg @@ -0,0 +1 @@ +LinkedIn icon \ No newline at end of file diff --git a/images/luke_coffee.png b/images/luke_coffee.png new file mode 100644 index 0000000..cacf0a3 Binary files /dev/null and b/images/luke_coffee.png differ diff --git a/images/organization-chart.png b/images/organization-chart.png new file mode 100644 index 0000000..4c45cb7 Binary files /dev/null and b/images/organization-chart.png differ diff --git a/images/pencil.png b/images/pencil.png new file mode 100644 index 0000000..25d2272 Binary files /dev/null and b/images/pencil.png differ diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 0000000..b674108 --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1 @@ +Twitter icon \ No newline at end of file diff --git a/ind.html b/ind.html new file mode 100644 index 0000000..104f273 --- /dev/null +++ b/ind.html @@ -0,0 +1,117 @@ + + + + + + + + Luke Sikuade + + + + + + + +
+
+ +
+ +
+
+

This will be a cool header some day... +

+

And this will be an even cooler introductory message...

+
+
+ +
+
+

What I Can Do +

+
+
+
+

Front End Developer

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua.

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua.

+
+
+

Writer

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. +

+ pencil +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua.

+
+
+

Visual Concepts

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua.

+ chart +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua.

+
+
+
+ +
+
+

Things I've Built... +

+
+
+
+
+ Work Image + +
+
Project
+
+
+
+ Work Image +
+
Project
+
+
+
+ Work Image +
+
Project
+
+
+
+ Work Image +
+
Project
+
+
+
+
+
+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/pictureChange.js b/pictureChange.js new file mode 100644 index 0000000..9fd4b51 --- /dev/null +++ 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."); + } +} diff --git a/style_dark.css b/style_dark.css new file mode 100644 index 0000000..37814f4 --- /dev/null +++ b/style_dark.css @@ -0,0 +1,250 @@ +* { + box-sizing: inherit; +} + +body { + background: #171d23; + box-sizing: border-box; + font-family: "M PLUS 1p", sans-serif; +} + +h1 { + font-size: 2em; +} + +p { + color: #fff; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} +a:visited { + color: #ffffff; +} + +.app { + padding: 0%; + display: flex; + flex-direction: column; + min-height: 100vh; + text-align: center; +} + +.masthead { + display: flex; + background: #1d252c; +} + +.masthead__controls { + display: flex; + flex: 1; + flex-direction: column; + list-style-type: none; + + padding-left: 0px; + padding-right: 0px; +} + +.contact { + align-self: center; + background-color: #1d252c; + padding: 15px 20px 15px 20px; + border: 2px solid #ffffff; + border-radius: 5px; + font-size: 2em; +} +.contact:hover { + background-color: #095f40; +} +.contact:hover .contact__link { + color: #fff; +} + +.introduction__section { + display: flex; + color: #fff; +} +.intro { + flex-grow: 1; + background: #1d252c; +} + +.intro__header { + margin: 0; + flex-grow: 1; +} + +/*Unoptimised past this point ↓*/ + +.break__text { + margin: 10 5 5 5; + flex-grow: 3; + color: #fff; +} + +.skills__section { + display: flex; + flex-direction: column; +} +.skills_header { + color: #fff; + display: flex; + flex-direction: column; + background-color: #1d252c; +} + +.section__header__text { + align-self: center; +} + +.skills { + display: flex; + flex-direction: column; + flex-grow: 2; + background: #171d23; +} + +.skills > div > h2 { + color: #fff; +} + +.skill__column__one { + flex-grow: 1; + margin: 30px; +} + +.skill__column__two { + flex-grow: 1; + margin: 30px; +} +.skill__column__three { + flex-grow: 1; + margin: 30px; +} +.work__section { + display: flex; + flex-direction: column; +} + +.work__text { + background-color: #1d252c; +} +.work__text > h2 { + color: #fff; +} + +.work__images__wrapper { + background: #333f4a; + display: flex; + justify-content: center; +} + +.work__images { + display: flex; + max-width: 900px; + flex-direction: column; + flex: 3; + width: 70%; +} +.cell { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +.cell:hover .proj__img { + opacity: 0.3; +} + +.cell:hover .image__interior { + opacity: 1; +} + +.proj__img { + opacity: 1; + transition: 0.5s ease; + backface-visibility: hidden; +} + +.image__interior { + position: absolute; + transition: 0.5s ease; + width: 150px; + opacity: 0; +} + +.proj__img__text { + background: #095f40; + color: white; + padding: 10px 20px; +} + +.break__text { + text-decoration-color: #e7ecef; +} +.footer__section { + display: flex; +} + +.footer { + display: flex; + flex-grow: 1; + background: #1d252c; +} + +.social__media { + display: flex; + flex-direction: row; + flex-grow: 1; + margin: 0; +} + +.social__icons { + display: flex; + justify-content: center; + flex-grow: 1; + padding: 0px; +} + +.social__icons > li { + padding: 20px; +} + +.button__grow { + transition: all 0.1s ease-in-out; +} + +.button__grow :hover { + transform: scale(1.1); +} + +@media (min-width: 768px) { + .masthead__controls { + flex-direction: row; + justify-content: space-between; + } + .skills { + flex-direction: row; + } + .work__images { + flex-wrap: wrap; + flex-direction: row; + } + .cell { + width: 50%; + } + .social__icons > li { + padding: 5px; + } +} +@media (min-width: 1440px) { + .masthead__controls { + justify-content: space-around; + } +}