Skip to content

Andrew muto #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
amuto77 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Andrew muto #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d94e07
Added header, title, and links.
amuto77 May 7, 2020
fcab6e7
Added placeholder about me.
amuto77 May 7, 2020
b5db00b
Added gallery photos and formatting.
amuto77 May 7, 2020
970505c
Added functioning contact links to social media.
amuto77 May 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,23 +25,23 @@ 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 `<firstName-lastName>`.
- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
- [ ] Push commits: git push origin `<firstName-lastName>`.
- [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 `<firstName-lastName>`.
- [x] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
- [x] Push commits: git push origin `<firstName-lastName>`.

### 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
- [ ] 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
- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page
- [x] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding 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 that links to the projects page
- [x] A `Contact Me` button that links to the contact page
- [x] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page

### Task 3: Stretch Goals

Expand Down
73 changes: 64 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/index.css">
<title>Document</title>
</head>
<body>
<section id="title">
<div class="one">
<div class="name">
<header>
<h1>Andrew Muto<h1>
</header>
</div>
<div class="links">
<a href=#about id="link1">About</a>
<a href=#projects id="link2">Projects</a>
<a href=#contact>Contact</a>
</div>
</div>
</section>
<section id="about">
<div class="opener">
<p>
I was born in a place and I am currently working at a job. This is very obviously a placeholder.
</p>
</div>
</section>
<section id="projects">
<div class="images">
<div class="picrow">
<div class="picbox">
<img src="https://images.unsplash.com/photo-1587614380281-2824400605b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">Project 1
</div>
<div class="picbox">
<img src="https://images.unsplash.com/photo-1587614380281-2824400605b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">Project 2
</div>
<div class="picbox">
<img src="https://images.unsplash.com/photo-1587614380281-2824400605b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">Project 3
</div>
</div>
<div class="picrow">
<div class="picbox">
<img src="https://images.unsplash.com/photo-1587614380281-2824400605b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">Project 4
</div>
<div class="picbox">
<img src="https://images.unsplash.com/photo-1587614380281-2824400605b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">Project 5
</div>
<div class="picbox">
<img src="https://images.unsplash.com/photo-1587614380281-2824400605b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">Project 6
</div>
</div>
</div>
</section>
<footer>
<div class="contacts">
<h2>Contacts</h2>
<a href="http://twitter.com">Twitter</a>
<a href="http://instagram.com">Instagram</a>
<a href="http://linkedin.com">Linkedin</a>
</div>
</footer>
</body>
</html>
75 changes: 74 additions & 1 deletion style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,74 @@
/* Add CSS styling here */
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{

}
.picrow{
display:flex;
flex-direction:row;
justify-content:space-around;
padding:20px;
}
.picbox{
display:flex;
flex-direction:column;
text-align:center;
}

.contacts{
font-size:20px;
text-align:center;
}
.contacts a{
padding:10px;
}