Skip to content
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

Almost Complete #1

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

Almost Complete #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6fed382
Almost Complete
walter-futch Oct 10, 2019
1103ac5
Updated project
walter-futch Oct 10, 2019
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
50 changes: 25 additions & 25 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,43 @@ For this project you will be building a digital resume from scratch. You will be

## Task 1: Set Up The Project With Git

- [ ] Create a forked copy of this project.
- [ ] Add your project manager 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 project manager 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>`.

Follow these steps for completing your project.

- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's Repo). **Please don't merge your own pull request**
- [ ] Add your project manager as a reviewer on the pull-request
- [X] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's Repo). **Please don't merge your own pull request**
- [X] Add your project manager as a reviewer on the pull-request
- [ ] Your project manager will count the project as complete by merging the branch back into master.

## Task 2: Set up your preprocessor
* [ ] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your project manager for help.
* [ ] Open your terminal and navigate to your preprocessing project by using the `cd` command
* [ ] Once in your project's root folder, run the following command `less-watch-compiler less css index.less`
* [ ] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red`
* [ ] Once you see the red screen, you can delete that style and you're ready to start on the next task
* [X] Verify that you have LESS installed correctly by running `lessc -v` in your terminal, if you don't get a version message back, reach out to your project manager for help.
* [X] Open your terminal and navigate to your preprocessing project by using the `cd` command
* [X] Once in your project's root folder, run the following command `less-watch-compiler less css index.less`
* [X] Verify your compiler is working correctly by changing the `background-color` on the `html` selector to `red`
* [X] Once you see the red screen, you can delete that style and you're ready to start on the next task

## Task 3: Project Objectives

* [ ] Review the [example resume](resume-example.png). Notice how simplistic the example resume is. Develop a simple layout of your choosing. If you are struggling to be creative, you may use the example resume as your design file.
* [X] Review the [example resume](resume-example.png). Notice how simplistic the example resume is. Develop a simple layout of your choosing. If you are struggling to be creative, you may use the example resume as your design file.
**Note: you are only required to build one page, anything more than that would be stretch.**
* [ ] The resume content will be provided by you. The content can be about you or a fictional character.
* [ ] Content: Navigation - Build a simple navigation with 4 items of your choosing
* [ ] Content: Intro - Have a short introduction as to why you would be a good hire
* [ ] Content: Skills - Showcase a list of skills you have somewhere on your resume
* [ ] Content: Work History - Showcase your work history somewhere on your resume
* [ ] Content: Contact - Provide some way a potential employer could contact you. Phone number, email, or a full on contact form (doesn't have to work)
* [ ] Variables: Incorporate variables in your project for color and font stacks.
* [ ] Nesting: Every selector should be nested inside the main container. Avoid having global styles unless they are element level.
* [ ] Mixins: Create 2 mixins of your choosing. Hint: It's super helpful to use flexbox properties in mixins
* [ ] Mobile: Use nested-at rules to provide a mobile version of your resume. Use `500px` as a `max-width` for mobile.
* [X] The resume content will be provided by you. The content can be about you or a fictional character.
* [X] Content: Navigation - Build a simple navigation with 4 items of your choosing
* [X] Content: Intro - Have a short introduction as to why you would be a good hire
* [X] Content: Skills - Showcase a list of skills you have somewhere on your resume
* [X] Content: Work History - Showcase your work history somewhere on your resume
* [X] Content: Contact - Provide some way a potential employer could contact you. Phone number, email, or a full on contact form (doesn't have to work)
* [X] Variables: Incorporate variables in your project for color and font stacks.
* [X] Nesting: Every selector should be nested inside the main container. Avoid having global styles unless they are element level.
* [X] Mixins: Create 2 mixins of your choosing. Hint: It's super helpful to use flexbox properties in mixins
* [X] Mobile: Use nested-at rules to provide a mobile version of your resume. Use `500px` as a `max-width` for mobile.

## Stretch Goals:
* [ ] Incorporate a google font of your choosing
* [X] Incorporate a google font of your choosing
* [ ] Convert the great idea CSS into LESS. Introduce variables, mixins, nesting, etc.
* [ ] Create a link to the portfolio page and create a layout that would allow users to see your work. A good idea is to link projects back to their github repos so employers can see your code.

Expand Down
258 changes: 257 additions & 1 deletion css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,257 @@
/* Compile your LESS file! */
@font-face {
font-family: 'Fjalla One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Fjalla One'), local('FjallaOne-Regular'), url(https://fonts.gstatic.com/s/fjallaone/v7/Yq6R-LCAWCX3-6Ky7FAFrOF6lw.ttf) format('truetype');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v5/pe0qMImSLYBIv1o4X1M8cce9I94.ttf) format('truetype');
}
/* General Styles */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
max-width: 100%;
}
html {
font-size: 62.5%;
}
body {
line-height: 2;
font-size: 1.5rem;
font-family: 'Nunito Sans', sans-serif;
}
h1,
h2,
h3,
h4 {
font-family: 'Fjalla One', sans-serif;
letter-spacing: 3px;
padding: 4% 0;
}
section {
padding: 4% 0;
}
i {
font-size: 4rem;
}
/* Header Styles */
header {
height: 90vh;
background-color: #e3e3e3;
background-image: url('../img/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
header nav {
border-bottom: 1px solid #c60021;
display: flex;
justify-content: space-between;
position: fixed;
width: 100%;
background-color: #e3e3e3;
height: 10vh;
z-index: 999;
}
header nav .links {
width: 60%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
header nav a {
color: #313130;
text-decoration: none;
letter-spacing: 3px;
}
header nav a:hover {
color: #c60021;
}
header .logo {
width: 20%;
height: 100%;
}
header .logo img {
max-width: 100%;
height: 100%;
}
header .title-container {
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
header .main-titles {
width: 40%;
color: #f6f6f8;
}
header .main-titles h1 {
font-size: 5rem;
}
header .main-titles h2 {
font-size: 4rem;
}
header .main-titles h3 {
font-size: 3rem;
}
/* About Section Styles */
#about {
display: flex;
justify-content: center;
align-items: center;
background-color: #f6f6f8;
}
#about .text {
border: 1px solid #c60021;
width: 60%;
background-color: #e3e3e3;
padding: 4%;
text-align: center;
}
#about .text h2 {
color: #c60021;
}
#about .text p {
text-align: center;
}
/* Skills Section Styles */
#skills {
background-color: #e3e3e3;
border-bottom: 1px solid #c60021;
border-top: 1px solid #c60021;
}
#skills h2 {
color: #c60021;
text-align: center;
padding: 3% 0;
}
#skills .container {
display: flex;
justify-content: space-around;
}
#skills .container div {
width: 25%;
text-align: center;
}
#skills i {
color: #313130;
}
/* Experience Section Styles */
#experience {
background-color: #f6f6f8;
}
#experience h2 {
color: #c60021;
text-align: center;
}
#experience .big-container {
display: flex;
justify-content: center;
align-items: center;
}
#experience .one {
width: 20%;
}
#experience .one h3,
#experience .one h4 {
color: #313130;
}
#experience .three {
width: 50%;
}
#experience .three p {
color: #313130;
}
/* Footer Section Styles */
footer {
background-color: #e3e3e3;
padding: 3% 0;
text-align: center;
border-top: 1px solid #c60021;
}
footer h2 {
color: #c60021;
}
footer div {
color: #313130;
display: flex;
justify-content: center;
}
footer form {
width: 80%;
}
footer input,
footer label,
footer textarea {
width: 100%;
margin: 4% 0;
}
footer input,
footer textarea {
border: none;
border-bottom: 3px solid #c60021;
background-color: #e3e3e3;
}
footer footer nav {
width: 80%;
}
footer footer nav:hover {
color: #fde769;
}
footer button {
width: 100%;
background-color: #f6f6f8;
color: #c60021;
padding: 2% 0;
border: 2px solid #c60021;
margin-bottom: 3%;
}
footer button:hover {
background-color: #c60021;
color: #f6f6f8;
border: 2px solid #f6f6f8;
}
/*media Query Styles */
@media (max-width: 800px) {
#about .text {
width: 80%;
}
}
@media (max-width: 500px) {
nav {
flex-direction: column;
align-items: center;
}
.links {
width: 90%;
}
.links a {
padding-right: 2%;
}
header {
height: 80vh;
}
header .main-titles h1 {
font-size: 3rem;
}
header .main-titles h2 {
font-size: 2rem;
}
header .main-titles h3 {
font-size: 1.5rem;
}
.one h3,
h4,
p {
font-size: 1.2rem;
}
}
Binary file added img/bg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/bigBoxPic.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/bw.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading