mlh-fellowship / project-pr-heroes

project-pr-heroes created by GitHub Classroom

Site Reliability Engineering - Week 1 - Portfolio Site

Welcome to the MLH Fellowship! During Week 1, you'll be using Flask to build a portfolio site. This site will be the foundation for activities we do in future weeks so spend time this week making it your own and reflect your personality!

Tasks

Once you've got your portfolio downloaded and running using the instructions below, you should attempt to complete the following tasks.

For each of these tasks, you should create an Issue and work on them in a new branch. When the task has been completed, you should open a Pull Request and get another fellow in your pod to give you feedback before merging it in.

Note: Make sure to include a link to the Issue you're progressing on inside of your Pull Request so your reviewer knows what you're progressing on!

GitHub Tasks

• Create Issues for each task below
• Progress on each task in a new branch
• Open a Pull Request when a task is finished to get feedback

Portfolio Tasks

• Add a photo of yourself to the website
• Add an "About youself" section to the website.
• Add your previous work experiences
• Add your hobbies (including images)
• Add your current/previous education
• Add a map of all the cool locations/countries you visited

Flask Tasks

• Get your Flask app running locally on your machine using the instructions below.
• Add a template for adding multiple work experiences/education/hobbies using Jinja
• Create a new page to display hobbies.
• Add a menu bar that dynamically displays other pages in the app

Getting Started

You need to do all your progress here.

Installation

Make sure you have python3 and pip installed

Create and activate virtual environment using virtualenv

$ python -m venv python3-virtualenv
$ source python3-virtualenv/bin/activate

Use the package manager pip to install all dependencies!

pip install -r requirements.txt

Usage

Create a .env file using the example.env template (make a copy using the variables inside of the template)

Start flask development server

$ export FLASK_ENV=development
$ flask run

You should get a response like this in the terminal:

❯ flask run
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

You'll now be able to access the website at localhost:5000 or 127.0.0.1:5000 in the browser!

Note: The portfolio site will only work on your local machine while you have it running inside of your terminal. We'll go through how to host it in the cloud in the next few weeks!

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

project-pr-heroes's Issues

Add a menu bar that dynamically displays other pages in the app

Add an "About youself" section to the website.

Add issue templates

Problem

Good Issues take time to fill out and it is possible that we forget something that was important that we did not have in mind when we submitted the Issue.

Solution

Having Issue Templates could improve quality in the details we provide.

What is the motivation / use case for changing the behavior?

🦸🏽 PR Heroes 🦸🏽‍♀️ deserve well-formatted templates. So we'll have this created from the beginning of the project.

Add a template for adding multiple work experiences/education/hobbies using Jinja

Update background & Text color(s).

Update the background of the webpage to Black [#000000] and the parts of the descriptions to Orange[#FFA500] in accordance to the Figma mockup.

Add a photo of yourself to the website

Is your feature request related to a problem? Please describe.
The existing photo is an avatar of an MLH engineer.

Describe the solution you'd like
Add a photo to the repo for each member of the team.

Describe alternatives you've considered
Pulling the images from a remote storage, but it can be later.

Additional context

Create a new page to display hobbies.

Add pull request template

Problem

Good PRs take time to fill out and it is possible that we forget something that was important that we did not have in mind when we submitted the PR.

Solution

Having PR Templates could improve quality in the details we provide.

What is the motivation / use case for changing the behavior?

🦸🏽 PR Heroes 🦸🏽‍♀️ deserve a well-formatted template. So we'll have this created from the beginning of the project.

Add a map of all the cool locations/countries you visited

[FEATURE] Add footer section.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Get your Flask app running locally on your machine using the instructions below.

Add your previous work experiences

Add your current/previous education

[FEATURE] Refactor the app to be more scalabe and have reusable components

Is your feature request related to a problem? Please describe.
It's better to have this project well structured since the beginning

Describe the solution you'd like
Introduce Python Packages and create sub components.

Describe alternatives you've considered
For the project structure, Blueprints, but maybe later in the project.

Additional context

[BUG] PR Template not populating

Describe the bug
Apparently the pr should be outside of the folder.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Pull Requests'
2. Click on 'New Pull Request'
3. Select compare branch
4. See empty PR body

Expected behavior
A populated body

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Add your hobbies (including images)

[FEATURE] About team description text box.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions o

Additional context

Build a text box next to the teammate's image on the "About" page to display Experience, Hobbies, Education, Travel when it's selected under the "about" section.

Add "Our Team" section.

Add a "Our Team" section including a round image of each team member with their names centered at the bottom of the image.

Build a header section to the website.

Build a header section to the website that shows our team name using an h1 tag ( Pull Request Heroes."

Under the header, add a centered button that will redirect users to the "Our Team" section of the website.

Create figma wireframe