diff --git a/images/920js-hint2.png b/images/920js-hint2.png new file mode 100644 index 0000000..f147dc6 Binary files /dev/null and b/images/920js-hint2.png differ diff --git a/images/IMG_4476.jpg b/images/IMG_4476.jpg new file mode 100644 index 0000000..2e322f5 Binary files /dev/null and b/images/IMG_4476.jpg differ diff --git a/images/constructor-labs-badge.png b/images/constructor-labs-badge.png new file mode 100644 index 0000000..b6e26fd Binary files /dev/null and b/images/constructor-labs-badge.png differ diff --git a/images/cra-debug-vscode-4.png b/images/cra-debug-vscode-4.png new file mode 100644 index 0000000..b8d91b3 Binary files /dev/null and b/images/cra-debug-vscode-4.png differ diff --git a/images/github.svg b/images/github.svg new file mode 100755 index 0000000..73d69a9 --- /dev/null +++ b/images/github.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/linkedin.svg b/images/linkedin.svg new file mode 100755 index 0000000..0bbf8f1 --- /dev/null +++ b/images/linkedin.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100755 index 0000000..bed1eca --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/vscode-screenshot-640x381.png b/images/vscode-screenshot-640x381.png new file mode 100644 index 0000000..71a29fc Binary files /dev/null and b/images/vscode-screenshot-640x381.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3b1d666 --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + + + Project + + + + + + + + +
+
+ +
+
+ Jamal Westfield-Kirton +

Just A Web Developer named Jamal Westfield!

+
+

Background

+

I’m an aspiring web developer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs. I’m excited to bring my life experience to the process of building fantastic looking websites.

+
+
+ +
+ Constructors Lab Logo +

Check Out My Programming Adventure!

+
+

Goals

+

I want to master the process of web development and increase my knowledge, skills and abilities in:

+
    +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
  • React
    • +
  • Postgres
    • +
+ Click on a language above to see my progress! +
+
+
+
+

Programming Snippets!

+
+
+ Code Wars + +
+
+ Code Wars +
+
+ Code Wars +
+
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..9b4e4aa --- /dev/null +++ b/styles.css @@ -0,0 +1,386 @@ + /* colors + + #e1e1e1 + #7b5a9e + + colors */ + + /* Global Styles */ +html> * { + box-sizing: border-box; +} + +body { + background:#fff; +} + +h3{ + font-family: 'Merriweather', serif; +} + +span { + font-family: 'Montserrat', sans-serif; + font-size: 12px; +} + +p { + font-family: 'Montserrat', sans-serif; +} + +.card--labs span{ + display: flex; + align-content: center ; + justify-content: center; +} + + /* The Split */ +.split { + display: flex; + flex-flow: row nowrap; + min-height: 100vh; + +} + +.split__left-right { + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + padding: 0 5vw 0; + font-family: 'Didact Gothic', sans-serif; + width: 100%; +} + +.split__left-right__avatar { + border-radius: 100%; +} + .split__left-right__avatar:hover { + transform: scale(1.1) rotate(5deg); +} + +.avatar--jamal { + border: 5px solid #e1e1e1; +} + +.avatar--jamal:hover { + border-color: #7B5A9E; +} + +.avatar--labs:hover { + border-color: #e1e1e1; +} + + +.avatar--labs { + border: 5px solid rgb(177, 114, 245); +} + +.split__left-right--jamal { + background: #e1e1e1; + color: #7B5A9E; + order:1; +} + +.split__left-right--labs { + background: #7B5A9E; + color: #fff; + order:2; +} + + + + /* Cards */ +.card--jamal { + height: 240px; + margin: 30px; + padding: 20px 40px 40px; + max-width: 500px; + text-align: left; + background: #7B5A9E; + border-bottom: 4px solid #e1e1e1; + border-radius: 6px; + color: #fff; +} + +.card--labs { + height: 240px; + margin: 30px; + padding: 20px 40px 40px; + max-width: 500px; + text-align: left; + background: #fff; + border-bottom: 4px solid #7B5A9E; + border-radius: 6px; + color: #7B5A9E; +} + +.card-title--jamal{ + border:solid #e1e1e1 4px; + text-align:center; + border-radius: 10%; + color: #fff; +} +.card-title--labs{ + border:solid rgb(177, 114, 245) 4px; + text-align:center; + border-radius: 10%; +} + +ul.skills { + padding: 0; + text-align: center; +} + +.skills li { + border-radius: 6px; + display: inline-block; + background: #7B5A9E; + color: #e1e1e1; + padding: 5px 10px; + margin: 2px; +} + + + +.skills :hover{ + transform: scale(1.2); + background: #e1e1e1; + color: #7B5A9E; +} + + + /* Social Media icons/images */ +.middle-control { + order:2; + margin-right: 6px; +} + +.middle-control ul { + list-style-type: none; + margin-top: 350px; + padding: 0; +} + +a.social { + display: inline-block; + text-indent: -9999px; + margin-left: 5px; + width: 30px; + height: 30px; + background-size: 30px 30px; + opacity: .5; + transition: all .25s; + background-color: #fff; +} + +a.twitter { + background-image: url(images/twitter.svg); + + +} +a.linkedin { + background-image: url(images/linkedin.svg); + + +} +a.github { + background-image: url(images/github.svg); + +} +a.social:hover { + opacity: 1; + transform: scale(1.5); + border-radius: 100%; +} + + + /* Bottom of page */ +.featured-work-header { + order: 2; + flex-flow: nowrap row; + color: #7d97ad; + margin-left: 38%; + font-family: 'Merriweather', serif; +} + +.second-img { + order: 3; +} + +.third-img { + order: 4; +} + +.fourth-img { + order: 5; +} + + .second-img, .third-img, .fourth-img { + width: 200px; + height: 130px; + margin-left: 50%; + } + + .second-img:hover, .third-img:hover, .fourth-img:hover { + transform: scale(1.1); +} + + + .flex-img { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + max-width: 80%; + } + + +.p-column { + flex-flow: column wrap; + text-align: center; + flex-grow: 1; +} + + /* Media Queries */ +@media screen and (max-width: 960px){ + .split{ + flex-direction: column-reverse; + } + + .split__left-right--labs{ + order: 1; + } + + .split__left-right--jamal{ + order: 2; + } + + .avatar--jamal { + border: 5px solid #e1e1e1; + margin-top: 20px; + } + + h3 { + font-size: 15px; + /* white-space: nowrap; */ + } + + .middle-control { + display: flex; + align-content: center; + justify-content: center; + width: 100%; + min-height: 30px; + padding: 20px 0 40px 20px; + } + + .middle-control ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + .middle-control ul li { + display: inline-block; + } + + a.social { + display: inline-block; + text-indent: -9999px; + margin-left: 5px; + width: 30px; + height: 30px; + background-size: 30px 30px; + opacity: .5; + transition: all .25s; + } + a.twitter { + background-image: url(images/twitter.svg); + } + a.linkedin { + background-image: url(images/linkedin.svg); + } + a.github { + background-image: url(images/github.svg); + } + a.social:hover { + opacity: 1; + } + +} + +@media screen and (max-width: 700px){ + .split{ + flex-direction: column-reverse; + } + + .split__left-right--labs{ + order: 1; + } + + .split__left-right--jamal{ + order: 2; + } + + .avatar--jamal { + border: 5px solid #e1e1e1; + margin-top: 20px; + } + + h3 { + font-size: 15px; + /* white-space: nowrap; */ + } + + .middle-control { + display: flex; + align-content: center; + justify-content: center; + width: 100%; + min-height: 30px; + padding: 20px 0 40px 20px; + } + + .middle-control ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + .middle-control ul li { + display: inline-block; + } + + a.social { + display: inline-block; + text-indent: -9999px; + margin-left: 5px; + width: 30px; + height: 30px; + background-size: 30px 30px; + opacity: .5; + transition: all .25s; + } + a.twitter { + background-image: url(images/twitter.svg); + } + a.linkedin { + background-image: url(images/linkedin.svg); + } + a.github { + background-image: url(images/github.svg); + } + a.social:hover { + opacity: 1; + } + + .featured-work{ + display:flex; + } + + + + .flex-img { + flex-direction: column; + } +}