diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 000000000..66caf22e1 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "User-Interface"] + path = User-Interface + url = https://github.com/nahword/User-Interface-II diff --git a/ReadMe.md b/ReadMe.md index e92754962..c16054cfe 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -23,19 +23,19 @@ Portfolio websites are a great way to show off your work to friends, family, and Follow these steps to set up and work on your project: -- [ ] Create a forked copy of this project. -- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -- [ ] Create a new branch: git checkout -b ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. +- [X] Create a forked copy of this project. +- [X] Clone your OWN version of the repository (Not Lambda's by mistake!). +- [X] Create a new branch: git checkout -b ``. +- [X] Implement the project on your newly created `` branch, committing changes regularly. +- [X] Push commits: git push origin ``. ### Task 2: Minimum Viable Product Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements: -- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages +- [X] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages - [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you -- [ ] Information about you in place of the given placeholder +- [X] Information about you in place of the given placeholder - [ ] A `My Projects` button that links to the projects page - [ ] A `Contact Me` button that links to the contact page - [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page diff --git a/User-Interface b/User-Interface new file mode 160000 index 000000000..9ee5ec3b3 --- /dev/null +++ b/User-Interface @@ -0,0 +1 @@ +Subproject commit 9ee5ec3b364f4053156daab997c01f63239335be diff --git a/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md index 2bf501338..ad8817a37 100644 --- a/Wireframe Options/ReadMe.md +++ b/Wireframe Options/ReadMe.md @@ -2,11 +2,11 @@ From the images above, chose a wireframe to guide your design for today's project. Remember that your final project must include: -- [ ] A navigation bar with `About`, `Projects`, and `Contact` pages -- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you. -- [ ] Information about you in place of the given placeholder -- [ ] A `My Projects` button (doesn't need to be functional) -- [ ] A `Contact Me` button (doesn't need to be functional) -- [ ] Link navigation items to new HTML pages +- [X] A navigation bar with `About`, `Projects`, and `Contact` pages +- [X] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you. +- [X] Information about you in place of the given placeholder +- [X] A `My Projects` button (doesn't need to be functional) +- [X] A `Contact Me` button (doesn't need to be functional) +- [X] Link navigation items to new HTML pages Some choices are easier than others, pick something that feels right to you. \ No newline at end of file diff --git a/about.html b/about.html index df1043036..a1bfe176c 100644 --- a/about.html +++ b/about.html @@ -3,6 +3,7 @@ + Document diff --git a/contact.html b/contact.html index 7c293bd11..da90a9c28 100644 --- a/contact.html +++ b/contact.html @@ -3,6 +3,7 @@ + Document diff --git a/index.html b/index.html index d01f779ff..fcac20712 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,68 @@ - Document + + + Jammal Williams +
+

Jammal Williams

+ +
+
+
+ A keyboard with a dark background +
+
+

Jammal Williams

+ My projects +

My interest in the tech sector stems from my desire to advocate for poor people. I hope to build far-reaching and accessible projects that encourage people's creativity. I believe that regular people can change the world in unexpected ways when we foster our ability to create. Here are some projects that I've created.

+
+
+
+
+ +

Project1

+
+
+ +

Project2

+
+
+ +

Project3

+
+
+ +

Project4

+
+
+ +

Project5

+
+
+ +

Project6

+
+
+ +

Project7

+
+
+ +

Project8

+
+
+ \ No newline at end of file diff --git a/projects.html b/projects.html index 266e620b0..359a1c856 100644 --- a/projects.html +++ b/projects.html @@ -3,6 +3,7 @@ + Document diff --git a/style/index.css b/style/index.css index 440e53514..165323d16 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,220 @@ -/* Add CSS styling here */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + /* border: 0; */ + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Add CSS styling here */ +/* color palette: main/bg: #e1f2fc secondary: #faf6b9 dark/text: #77158f */ +*{ + box-sizing:border-box; + max-width:100%; +} +html{ + font-size: 62.5%; + font-family:'Neuton', serif; + font-weight: 700; +} +body{ + background-color: #e1f2fc; + font-size: 1.6rem; + max-width: 100%; +} +header{ + background-color: #77158f; + color: #e1f2fc; +} +h1{ + font-size: 5em; + margin-left: 5%; + font-weight: 800; +} +nav{ + display: flex; + justify-content: space-evenly; + margin: 3%; + padding: 0 3%; + width: 85%; +} +a{ + background-color: darkslategrey; + color:#e1f2fc; + font-size: 2em; + text-decoration: none; + padding: 0 5%; + border: 2px solid #faf6b9; + border-radius: 15px; + transition: 1s; +} +h2{ + font-size: 2.5em; +} +.info{ + width:100%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +.infoText{ + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 43%; +} +.infoText > *{ + margin: 2% 0; +} +.infoText p{ + font-size:1.5em; + max-width: 80%; +} +.mainPhoto{ + width: 45%; +} +.mainPhoto img{ + width: 85%; + margin: 2%; +} +.button{ + text-align:center; + width: 60%; + padding-bottom: 1.5%; + transition: .75s; +} +a:hover{ + color:darkslategrey; + background-color:#e1f2fc; + border: 2px solid #faf6b9; +} +.projects{ + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; +} +.projects div{ + width:24%; + margin: 2% auto; +} +.projects img{ + width:100%; + margin: 2%; +} +.projects p{ + text-align: center; + font-size: 2em; +} +footer{ + display: flex; + flex-direction: column; + background-color: #77158f; +} +footer h2{ + font-size: 3em; + color: #e1f2fc; + text-align: center; +} +footer a{ + margin: 1% auto; + padding-top:1%; + max-width:33%; +} + +/* media queries: 800px and 500px */ +@media(max-width:800px){ + header{ + max-width:100%; + } + nav{ + flex-direction: column; + justify-content: center; + text-align: center; + align-items: center; + margin: 0 auto; + } + nav > *{ + margin: 0.5% auto; + width: 30%; + } + h1{ + font-size: 2.5em; + text-align: center; + } + h2{ + font-size: 2em; + } + a{ + font-size: 1.5em; + } + .info{ + flex-direction: column; + align-items: center; + text-align: center; + margin: 0 auto; + } + .info a{ + padding-top:1%; + } + .infoText{ + align-items: center; + width: 95%; + } + .button{ + width:33.33% + } + .projects div{ + width:45%; + } + .projects p{ + font-size: 1.5em; + } +} +/* end 800px media */ +@media(max-width:500px){ + .projects div{ + width: 78%; + } +} +/* end 500px media */ \ No newline at end of file diff --git a/style/pexels-tom-swinnen-1309766.jpg b/style/pexels-tom-swinnen-1309766.jpg new file mode 100644 index 000000000..111245552 Binary files /dev/null and b/style/pexels-tom-swinnen-1309766.jpg differ diff --git a/style/project1.jpg b/style/project1.jpg new file mode 100644 index 000000000..83d7cd7d9 Binary files /dev/null and b/style/project1.jpg differ diff --git a/style/project2.jpg b/style/project2.jpg new file mode 100644 index 000000000..8191f36c0 Binary files /dev/null and b/style/project2.jpg differ diff --git a/style/project3.jpg b/style/project3.jpg new file mode 100644 index 000000000..3b3e1af30 Binary files /dev/null and b/style/project3.jpg differ diff --git a/style/project4.jpg b/style/project4.jpg new file mode 100644 index 000000000..57b6d9bfa Binary files /dev/null and b/style/project4.jpg differ diff --git a/style/project5.jpg b/style/project5.jpg new file mode 100644 index 000000000..4553aae27 Binary files /dev/null and b/style/project5.jpg differ diff --git a/style/project6.jpg b/style/project6.jpg new file mode 100644 index 000000000..193946fae Binary files /dev/null and b/style/project6.jpg differ diff --git a/style/project7.jpg b/style/project7.jpg new file mode 100644 index 000000000..46675fe0a Binary files /dev/null and b/style/project7.jpg differ diff --git a/style/project8.jpg b/style/project8.jpg new file mode 100644 index 000000000..17e200bf1 Binary files /dev/null and b/style/project8.jpg differ diff --git a/web-Sprint-Challenge-User-Interface-and-Git b/web-Sprint-Challenge-User-Interface-and-Git new file mode 160000 index 000000000..03b589358 --- /dev/null +++ b/web-Sprint-Challenge-User-Interface-and-Git @@ -0,0 +1 @@ +Subproject commit 03b58935882fc7d477ef83074fda2a6c81fe33d6