From 9d94e0760b94cd8f02cfb3231817598642572a9a Mon Sep 17 00:00:00 2001 From: Andrew Muto Date: Wed, 6 May 2020 21:38:56 -0400 Subject: [PATCH 1/4] 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/4] 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/4] 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/4] 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