#Gil's Project Notes

PURPOSE

-Read and work with someone else's code. -Create a portfolio to showcase production -Deploy project to internet (vs local server use/github only)

STACK + RESOURCES

-html/ css/ javascript?? -html5up -netifly

BLOCKERS

Could not find CSS to control font size of name next to profle image, turning to 150% in inspector had no result. yet to find tile images to replace with my content. .js breakpoints file is all on line 2. Got an EsLint error popup from VS code when opened.

DEPLOYMENT: github would not launch because code is not merged with master. netflify seemed to deploy properly (using correct branch) but is not rendering in browser.

BREAKTHROUGHS

• reviewing transistions in css
• seems like breakpoints for responsive design is handled with it's own javascript file. did not tweak yet.
• found javascript breakpoints in .main jss instead of .minimized version.
• learned min.js is to collapse the data for computers to read and gain speed.

TIMELINE / (EFFICIENCY)

WHAT I LEARNED

What's next:

Transitions: Webkits: moz, webkit, ms line 1822 .icon.style2 { -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;

LAMBDA'S PROJECT READ.ME

Build A Portfolio Website

With all of the projects you will be working on here at Lambda School, you will need somewhere to house them! There is no better opportunity to learn and show off your skills than a beautiful portfolio website.

You have the ability to write HTML, CSS, and responsive media queries. You also know how to identify and write responsive units. It's time to put that knowledge into action by reading someone else's code and adding your own flavor. You will be building a portfolio website from a template found on https://html5up.net/.

Project Set Up

Follow these steps to set up and work on your project:

_ Watch this walk through video: https://youtu.be/P2Y9W29kcjs

• [x ] Create a forked copy of this project.
• [ X] Add PM as collaborator on Github.
• [ x] Clone your OWN version of the repository (Not Lambda's by mistake!).
• [ ?] Create a new branch on the clone: git checkout -b <firstName-lastName>.
• [ X] Implement the project on the <firstName-lastName> branch, committing changes regularly.
• [ X] Push commits: git push origin <firstName-lastName>.

Follow these steps to download your template and start the project:

• [ X] Navigate here: https://html5up.net/

• [ X] You make pick any template you like. Here are some good choices for a portfolio:

  • https://html5up.net/story
  • https://html5up.net/solid-state
  • https://html5up.net/miniport
  • https://html5up.net/dimension

• [ X] Unzip the code and copy the site to your git repository that you just set up

  • Note that we won't be utilizing the pre processed CSS structure, you can just ignore any folder with LESS or SASS (SCSS) in it.

• [ X] Work on the MVP requirements listed below

Follow these steps for completing your project after your MVP is completed:

• [ X] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's Repo). Please don't merge your own pull request
• [ standing by] Add your Project Manager as a Reviewer on the Pull-request
• PM then will count the HW as done by merging the branch back into master.

MVP Requirements

• [ x] Study the code base and identify both responsive units and where media queries were used. Take notes on anything that confuses you or interesting things you find. Share this information in your standup meeting with your group
• [ x] Customize the template to you
  • [ x] Update the title tag match your name
  • [ x] Update the place holder content throughout the template to your information
    • Some templates are much larger than others, you don't need to fill in every little div with information, just try to get the site representing you and your work
    • You can use sites like https://www.pexels.com/ for free images to fill in place holders
    • Showcase projects you have worked on by providing some information and links to your git hub projects
• [ x] Implement proper attribution: Attribution is required under the creative commons license that came with the website files you downloaded. Be sure to provide attribution somewhere in the site. The templates should already come with attribution found in most footers but double check to be sure.
• [ deployed on netifly, waiting on github merge] Host your website for the world to see. Follow the instructions found here https://pages.github.com/. Once you have hosted your web page, share it for your peers to see. This is not a small feat!

Stretch

• [x ] Study the JavaScript used in your template and see if you can tweak any of the behavior to see how it works

• Download another template and see if you can get the CSS preprocessor working on the project