Skip to content

Use Bootstrap to build a portfolio app with appropriate responsiveness based on display size.

Notifications You must be signed in to change notification settings

dianastebbins/homework2-responsivenessPortfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

homework7-professionalMaterials

homework2-responsivenessPortfolio (Original)

Project Description

Now that you've had some practice with APIs and have a project to share, you'll be updating your portfolio page and other materials to build toward being employer competitive.

Table of Contents

  1. Installation
  2. Usage
  3. Requirements
  4. Directions
  5. Instructions
  6. Credits
  7. License
  8. Badges
  9. Contributing
  10. Tests
  11. Directions (Original)

Installation

url to deployed app:

https://dianastebbins.github.io/homework2-responsivenessPortfolio/

Usage

Click on the link provided in the Installation section, above.
  • Navbar with links
    • About/Bio
    • Portfolio
    • Contact
  • Meet Diana Page
    • Bio area
    • Tech
    • Skill
  • Contact Page
  • Portfolio Page
    • Featured Projects
    • Little Widgets
    • Includes links to deployed applications as well as github repositories
  • Footer with links
    • LinkedIn
    • GitHub
    • Resume

Requirements

  • (copied from Homework instructional README.md, for reference)

Directions

  • Updated portfolio featuring projects 1 and 2 and at least 4 exemplary homework assignments.
  • Update GitHub profile with pinned repositories featuring projects 1 and 2 and four exemplary assignments.
  • Updated resume
  • Updated LinkedIn profile

Instructions

  1. Updated Portfolio
  2. Updated GitHub Profile
  3. Updated Resume
  4. Updated LinkedIn Profile

Updated Portfolio

Your updated site should have the following content:
  • Your name
  • Links to your GitHub profile & LinkedIn page as well as your email address and phone number
  • A link to a PDF of your resume
  • A list of projects. For each project, make sure you have the following:
    • Project title
    • Link to the deployed version
    • Link to the GitHub repository
    • Screenshot of the deployed application
Design
Unfortunately, this is where it gets a little bit subjective. Your site should look
"polished." Here are a few guidelines on what that means:
  • Mobile-first design
  • Choose a color palette for your site so it doesn't just look like the default bootstrap theme or an unstyled HTML site.
  • Make sure the font size is large enough to read, and that the colors don't cause eye strain.

Updated GitHub Profile

If you haven't yet, now is the time to update the following in your GitHub profile: 
  • Profile picture
  • Bio
  • Location
  • Email
  • Link to your portfolio
  • Employers (and potential collaborators) will look at your GitHub profile, so put your best face forward.
  • Pin some repos that you want to highlight
    • Navigate to GitHub and go to your profile.
    • Click "Customize your pins"
    • Click the checkboxes for your project and 2-3 homework assignments that you would like to share
    • Make sure each of these projects is deployed and add a link to the deployed project in their README files
  • Follow your classmates. They are the beginning of your professional network and being a developer is as much about being a part of the community as it is writing code.

Updated Resume

Submit a clear, concise and compelling resume, tailored to the type of job you’re looking for.

Updated LinkedIn Profile

Update your LinkedIn Profile with a strong bio statement, a professional photo, and links to your Github and portfolio.
  • Updated LinkedIn profile

Credits

*Requirements copied from provided Homework files of Full Stack Coding Bootcamp. *Bootstrap *Icons from font awesome

License

Badges

Contributing

Tests

Directions (Original)

  1. Project Description (Original)
  2. Project Details (Original)
  3. Hints (Original)
  4. Minimum Requirements (Original)
  5. Bonus (Original)
  6. Submission on BCS (Original)
  • Create the following pages: index.html, portfolio.html and contact.html.
  • Using Bootstrap, recreate your portfolio site with the following items:
    • A navbar
    • A responsive layout
    • Responsive images
  • The Bootstrap portfolio should minimize the use of media queries.

Project Description (Original)

Use Bootstrap to build a portfolio app with appropriate responsiveness based on display size.

Project Details (Original)

General Notes

  • Navbar obtained from bootstrap site and has working links to other pages. Chose to use justify-content-end to right-align the links but that causes problems with centering the links on a small screen.
  • Tried for the sticky footer but could not get it to stick to the bottom of the page. Left it active on Contact page, but commented it out on About Me and Portfolio pages as it was distracting.

Page specific: About Me (aka index.html)

  • ContentSection uses a float on the image to get the following paragraph to wrap around the side and bottom of the image (when enough text exists)

Page specific: Contact

  • Form obtained from bootstrap site.

Page specific: Portfolio

  • Card obtained from bootstrap site. Tried to make the h5/card-title overlay object stretch across the image and show at the bottom but was not successful.

Hints (Original)

  • Use Bootstrap's grid system (containers, rows, and columns).
  • On an xs screen, content should take up the entire screen.
  • On sm and larger screens, you should have some margins on the left and right sides of the screen. Check out various sites on your mobile device vs. your computer to see examples of these differences.

Minimum Requirements (Original)

  • Functional, deployed application
  • GitHub repository with README describing the project

Bonus (Original)

  • Using Bootstrap, make a sticky footer and use sub-rows and sub-columns on your portfolio site (Hint: Check out the Bootstrap documentation)

Submission on BCS (Original)

You are required to submit the following:
  • The URLs of the deployed applications
  • The URLs of the GitHub repositories

About

Use Bootstrap to build a portfolio app with appropriate responsiveness based on display size.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published