Portfolio: TEAM PYTHONIC

Animated, reusable, and mobile-friendly team portfolio template.

Comment

Inspiration

We were inspired by Python, a very expressive programming language. This means that with a few lines of code, you can do a lot! Our backend consists of only 50 lines of code, including comments and documentation.

What it does

A reusable, scalable, and mobile-friendly portfolio template. You can use it as a personal portfolio or a team portfolio that showcases all the members of a team.

How we built it

  • Backend: Flask along with Jinja for templating.
  • Frontend: Bootstrap and CSS for animations and styling. Some JavaScript for handling animation triggers.
  • Google Maps JavaScript API for displaying a map with the locations we visited.

Challenges we ran into

For some of the team members, it was their first time using Flask. There was definitely a learning curve at first, but we did our best by helping each other and researching online.

Other challenges:

  • Google Maps API implementation was tricky to get working
  • CSS animations were a bit tedious to set up
  • Working remotely: We set up daily meetings as a team to help each other get rid of blockers. Even while working remotely, we managed to work efficiently to obtain great results. We made the best use of all resources made available for us. For example, on GitHub, we actively collaborated with each other by leaving feedback on every issue and pull request.

Accomplishments that we're proud of

  • Making everything work smoothly!
  • Making the portfolio reusable and responsive
  • Adding design elements such as animations to the landing page and personal color gradients for the profile backgrounds
  • Using templating with Jinja and routing with Flask to generate things dynamically and make our code DRY
  • Using GitHub is effectively creating issues, branches, and pull requests for each required task
  • Collaborating as a team by pair-programming, reviewing, and approving each other’s code.

What we learned

  • How to create and locally deploy a Flask app in Python
  • How to use Bootstrap with HTML and CSS to create a responsive design on each page
  • Using Jinja to create dynamic content for websites and serving data from Python data structures
  • Incorporating the Google Maps API into the profile page to customize markers for specific coordinates
  • A ton about collaboration on GitHub!

What's next for Portfolio: TEAM PYTHONIC

We want to make it more Pythonic! This means:

  • We would like to add a functionality where the landing page can accommodate as many team members as you want, to make it 100% scalable
  • We want to obtain the coordinates we feed into Google Maps API using the Python requests library, rather than adding them manually to the JSON

We would also appreciate feedback to improve our project, so feel free to leave a comment with suggestions!

Share this project:

Updates