Configure and style the "About" block

[AliHassan7]

• To begin working on this task, create a branch based off of the currently checked out branch using the following convention: proj-me-initials-51.
• For your convenience, an image of the design has been added to the bottom of this issue.
• This block will display information about you, your skills, and a short biography.
• We first need to add more fields to the User account. Navigate to Configuration » People » Account settings. Add the following fields:
  • Type: Text (plain). Label: Headline.
  • Type: Taxonomy term. Label: Services/Skills. Allow it to have an unlimited amount of values. Have it reference a Taxonomy Term and on the next page under "Available Vocabularies", select "Technologies"
  • Type: Text (formatted, long). Label: Biography
• Additionally, edit the Picture field and delete the value inside the "Maximum upload size". Also delete the values inside "Maximum image resolution".
• Let us now go in and fill in some information about ourselves. First, go to Structure » Taxonomy » And list the Terms of the "Technologies" Vocabulary. Click on "+ Add term" and add a term for each skill you know or each skill you have learned in this class. I would add the following terms:
  • HTML
  • CSS
  • SASS
  • GIT Version Control
  • Drupal 8
• Navigate to "People" and edit your account. For the Headline field, add a one sentence description of yourself. Something like "Hi, I'm Peter. Movie Fanatic, pizza enthusiast, codes stuff."
• For the biography field, add a biography about yourself, your experience, why you're passionate about Drupal development, etc.
• For the "Services/Skills" field, add in the technologies that you've worked with (Remember that we added those skills to the "Technologies" taxonomy vocabulary).
• For the "Picture" field, upload your favorite picture of yourself.
• How will we add all this information to the homepage? We will create a view and place that view on the homepage using panels!
• Navigate to Structure » Views and click on "+ Add view". Give it a name of "About me". Have it show Users. Check the field for "Create a Block" under BLOCK SETTINGS. Have it display an unformatted list of field. Limit the items per block to just 1. Do the following steps for the block display of the view:
  • Delete the "User: Name" field from the view.
  • Add the Headline field. Give it a label of "About".
  • Add the picture field. Under "Image style", use the Medium setting.
  • Add the "Services/Skills" field and give it a label of "Services/Skills"
  • Add the biography field and give it a label of "Meet the dev"
• Let us now place our new view on the homepage! To place this view block on the homepage, you will need to use the Panels module.
• Navigate to Structure » Pages. Edit the "Home" page. Click on the "Home" variant on the left side and then click on "Content".
• Click on "+ Add new block" and find and select the "About me" block. Choose to not display the title and click on "Add block".
• Update and Save and visit your home page. You should see the About me view on the homepage!
• You should now style this view according to the design.
  • Font color of the "About", "Services/Skills", and "Meet the dev" labels should be #aaaaaa
  • Font color of the headline should be #382a3b
  • Font color of the biography should be #868686
  • Font color of the orange Services/Skills should be #bf5829
• Style the rest of this view according to the design and apply SASS as necessary.
• Upon completion of the task, please commit and push all your work to your fork of the proj-me repository. Additionally, export all your configuration by using the drush cex command while inside vagrant and in /var/www/dev-1/proj-me/web. This configuration will also need to be committed and pushed. Remember to create a pull request.
• Leave a comment on this issue when you:
  • Start working on this task
  • Have a question about this task
  • Complete this task (please comment on this task with a link to your pull request).

[AliHassan7]

[ByronGary]

working

[msheikh12]

Completed #77