Porfolio Site Template

Web portfolio developed using Flask, for the Production Engineering track of the MLH Fellowship. Users can clone this portfolio template and easily edit to make it their own!

Comment

Inspiration

Because our project aims to create a portfolio that is representative of us, we thought the about me section and the hobbies sections would be important additions. We also used our imagination to come up with what we thought a future employer might want to see in a portfolio site

What it does

This website template contains an about me page, an experiences, a projects page and a hobbies page. It is a template site upon which a user can add their own photos and text to make a personal portfolio. The experiences page, past and current education will be displayed, as well as work experiences. The projects and hobbies are meant to highlight the user's strengths and share about what interests them and what makes them unique. There's also an interactive map: the user can label special locations meaningful to them and include a short description & images about that location. Viewers can click on various locations the user has labelled and view what the user wrote about that location.

How we built it

Server side: Flask Client side: HTML, CSS, JavaScript, Bootstrap

Challenges we ran into

We want to make it super easy for users to edit this template and make it their own. Therefore, we created Jinja templates for each experience, project, hobby, etc. an user may want to add. This was a challenging process because, as we were both jinja beginners, it took us some time to figure out how to properly architect the app using jinja templates to best achieve this.

Accomplishments that we're proud of

We were able to make editing this website easy!

What we learned

Technical skills-wise, we learned/improved our understanding of Flask/Jinja and Bootstrap. However, more importantly, through this project, we also gained a better understanding of collaboration workflow using Git. We wrote issues to manage tasks and conducted code reviews for each other. We also conducted a pair programming session. We are super proud of how much our collaboration skills (both technical and interpersonal) have grown!

What's next for Portfolio Site Template

  • Polish up UI using CSS to improve the design feel
  • Update the interactive map component to place location toggle buttons at their correct geographic location on the map.
Share this project:

Updates