From 9d94e0760b94cd8f02cfb3231817598642572a9a Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Wed, 6 May 2020 21:38:56 -0400 Subject: [PATCH 1/7] Added header, title, and links. --- ReadMe.md | 18 +++++++------- index.html | 53 +++++++++++++++++++++++++++++++++------- style/index.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 117 insertions(+), 19 deletions(-) diff --git a/ReadMe.md b/ReadMe.md index 429023981..e9d6b7f2e 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -25,22 +25,22 @@ 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. -- [ ] Add your Team Lead as collaborator on Github. -- [ ] 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] Add your Team Lead as collaborator on Github. +- [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 -- [ ] A `My Projects` button that links to the projects page -- [ ] A `Contact Me` button that links to the contact page +- [x] A `My Projects` button that links to the projects page +- [x] 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 ### Task 3: Stretch Goals diff --git a/index.html b/index.html index d01f779ff..1ac1ae9ba 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,46 @@ - - - - Document - - - - - \ No newline at end of file + + + + + Document + + +
+
+
+
+

Andrew Muto

+

+
+
+ About + Projects + Contact +
+
+
+
+
+

Andrew Muto

+

My Projects

+
+
+
+
+ Project 1 + Project 2 + Project 3 + Project 4 + Project 5 + Project 6 +
+
+
+
+

Contact

+
+
+ + diff --git a/style/index.css b/style/index.css index 440e53514..dfd2d29ad 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,64 @@ -/* Add CSS styling here */ \ No newline at end of file +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; +} +* { + box-sizing:border-box; + padding:0; + margin:0; + max-width:100%; + border:1px solid grey; +} +.one{ + display:flex; + justify-content:space-between; +} +.name{ + display:flex; + justify-content:flex-start; + font-size:50px; + +} +.links{ + display: flex; + justify-content:flex-end; + font-size:30px; +} +.links a{ + padding:10px; +} +.opener{ + background-color: #00CED1; + padding: 5%; + text-align: center; + width: 100% + +} +.followup{ + +} +.images{ + display:flex; + justify-content:space-between; + width:50%; + } + +#contact{ + +} From fcab6e7d7a05e23644968762da4ff4864eb2eeef Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Wed, 6 May 2020 21:49:45 -0400 Subject: [PATCH 2/7] Added placeholder about me. --- index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1ac1ae9ba..b823b7b44 100644 --- a/index.html +++ b/index.html @@ -23,8 +23,9 @@

Andrew Muto

-

Andrew Muto

-

My Projects

+

+ I was born in a place and I am currently working at a job. This is very obviously a placeholder. +

From b5db00b0d6fc648f7f697ff9ec64eb4f1fa307df Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Wed, 6 May 2020 22:08:18 -0400 Subject: [PATCH 3/7] Added gallery photos and formatting. --- ReadMe.md | 4 ++-- index.html | 18 +++++++++++++++++- style/index.css | 12 +++++++++--- 3 files changed, 28 insertions(+), 6 deletions(-) diff --git a/ReadMe.md b/ReadMe.md index e9d6b7f2e..2f933ca95 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -37,8 +37,8 @@ Follow these steps to set up and work on your project: 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: - [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] 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 that links to the projects page - [x] 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/index.html b/index.html index b823b7b44..a22fa2047 100644 --- a/index.html +++ b/index.html @@ -30,13 +30,29 @@

Andrew Muto

+
+
Project 1 +
+
Project 2 - Project 3 +
+
+ Project 3 +
+
+
+
Project 4 +
+
Project 5 +
+
Project 6 +
+
diff --git a/style/index.css b/style/index.css index dfd2d29ad..00399cc94 100644 --- a/style/index.css +++ b/style/index.css @@ -53,10 +53,16 @@ vertical-align: baseline; .followup{ } -.images{ +.picrow{ display:flex; - justify-content:space-between; - width:50%; + flex-direction:row; + justify-content:space-around; + padding:20px; +} +.picbox{ + display:flex; + flex-direction:column; + text-align:center; } #contact{ From 970505c1cc8949256ca9133ae6614b0a7f38d554 Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Wed, 6 May 2020 22:19:47 -0400 Subject: [PATCH 4/7] Added functioning contact links to social media. --- ReadMe.md | 2 +- index.html | 15 +++++++++------ style/index.css | 10 +++++++--- 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/ReadMe.md b/ReadMe.md index 2f933ca95..f59cd9967 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -41,7 +41,7 @@ Once your repository is set up, practice what you learned today to create a port - [x] Information about you in place of the given placeholder - [x] A `My Projects` button that links to the projects page - [x] 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 +- [x] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page ### Task 3: Stretch Goals diff --git a/index.html b/index.html index a22fa2047..6934ab93f 100644 --- a/index.html +++ b/index.html @@ -53,11 +53,14 @@

Andrew Muto

- -
-
-

Contact

-
-
+ + diff --git a/style/index.css b/style/index.css index 00399cc94..f4186faf9 100644 --- a/style/index.css +++ b/style/index.css @@ -65,6 +65,10 @@ vertical-align: baseline; text-align:center; } -#contact{ - -} +.contacts{ + font-size:20px; + text-align:center; + } +.contacts a{ + padding:10px; +} \ No newline at end of file From 389247ffe13f45896f21288122247a036a240d2d Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Thu, 7 May 2020 17:09:07 -0400 Subject: [PATCH 5/7] added meta tags, intorduced max-width media queries, and changed css styles --- style/index.css | 68 +++++++++++++++++++++++++++++++++++++------------ 1 file changed, 52 insertions(+), 16 deletions(-) diff --git a/style/index.css b/style/index.css index f4186faf9..0d54c302c 100644 --- a/style/index.css +++ b/style/index.css @@ -23,7 +23,6 @@ vertical-align: baseline; padding:0; margin:0; max-width:100%; - border:1px solid grey; } .one{ display:flex; @@ -32,43 +31,80 @@ vertical-align: baseline; .name{ display:flex; justify-content:flex-start; - font-size:50px; - -} + font-size:5rem; + background-color:red; + } .links{ display: flex; justify-content:flex-end; - font-size:30px; + font-size:3rem; + background-color:red; } .links a{ - padding:10px; + padding:1rem; } .opener{ - background-color: #00CED1; + background-color:blue; + font-size:1.5rem; padding: 5%; text-align: center; width: 100% - -} -.followup{ - -} + } .picrow{ display:flex; flex-direction:row; justify-content:space-around; - padding:20px; + padding:2rem; + background-color:blue; } .picbox{ display:flex; flex-direction:column; - text-align:center; + justify-content:space-between; + text-align:center; } .contacts{ - font-size:20px; + font-size:2rem; text-align:center; + background-color:red; } .contacts a{ - padding:10px; + padding:1rem; +} +@media(max-width: 800px){ + #title { + width:100%; + } + .about{ + display:flex; + text-align:center; + } + +} + +@media(max-width: 500px){ + #title{ + display:flex; + flex-direction:column; + align-items:center; + } + .links{ + width:100%; + } + #about{ + display:flex; + flex-direction:column; + align-items:center; + } + #projects .picrow{ + width:90%; + } + .picbox{ + display:flex; + flex-direction:column; + align-items:center; + margin:7% 0; + width:90% + } } \ No newline at end of file From a12eae204153b8c1da19b3b32fa4d5f2e86606f6 Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Thu, 4 Jun 2020 16:46:04 -0400 Subject: [PATCH 6/7] Edited CSS layout to finish up project --- style/index.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style/index.css b/style/index.css index 0d54c302c..c58267939 100644 --- a/style/index.css +++ b/style/index.css @@ -32,19 +32,19 @@ vertical-align: baseline; display:flex; justify-content:flex-start; font-size:5rem; - background-color:red; + background-color:orange; } .links{ display: flex; justify-content:flex-end; font-size:3rem; - background-color:red; + background-color:orange; } .links a{ padding:1rem; } .opener{ - background-color:blue; + background-color:teal; font-size:1.5rem; padding: 5%; text-align: center; @@ -55,7 +55,7 @@ vertical-align: baseline; flex-direction:row; justify-content:space-around; padding:2rem; - background-color:blue; + background-color:teal; } .picbox{ display:flex; @@ -67,7 +67,7 @@ vertical-align: baseline; .contacts{ font-size:2rem; text-align:center; - background-color:red; + background-color:orange; } .contacts a{ padding:1rem; From 470bcf73c4d96cae7dc375f43dc4ba6299c4d043 Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Thu, 4 Jun 2020 16:48:56 -0400 Subject: [PATCH 7/7] Edited CSS layout to finish up project --- style/index.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/style/index.css b/style/index.css index c58267939..1ac25a086 100644 --- a/style/index.css +++ b/style/index.css @@ -27,21 +27,22 @@ vertical-align: baseline; .one{ display:flex; justify-content:space-between; + background-color:orange; } .name{ display:flex; justify-content:flex-start; font-size:5rem; - background-color:orange; } .links{ display: flex; justify-content:flex-end; font-size:3rem; - background-color:orange; } .links a{ - padding:1rem; + padding:1rem; + text-decoration: none; + color: black; } .opener{ background-color:teal; @@ -71,6 +72,8 @@ vertical-align: baseline; } .contacts a{ padding:1rem; + text-decoration: none; + color: black; } @media(max-width: 800px){ #title {