Inspiration

We wanted to show off our combined skill as a team on a portfolio website. In terms of the design, we were inspired by the comparison page on the Apple website.

What it does

The app shows the work experience and hobbies of the team members specified in a JSON file (used as a stand-in for a document database). It is very lightweight and modular, with a strong focus on code reuse for easy maintainability.

Features

  • Dynamic navbar to navigate between pages
  • Multiple pages built on Jinja templates:
    • "About Us" section with images and education
    • "Work Experience" section
    • "Hobbies" section with images
  • Interactive map of places we've travelled to

How we built it

The app is built in Flask, and leverages Jinja templates to render the pages at runtime. The Jinja templates are populated from a JSON file, which can be easily replaced with a database like MongoDB. The map on the hobbies page is generated on app start and is fully interactive thanks to the Folium library.

Challenges we ran into

As a team, we had trouble getting set up to work together on the app. We ran into problems with different team members working with different incompatible Python versions, which we solved by creating virtual environments with a consistent version number so we know we are all on the same page.

Accomplishments that we're proud of

The resulting app does not rely on any content embedded directly into the HTML. All content on the site can be edited without touching the code. This is incredibly useful for making a website that can be easily used and adapted by end users that don't know HTML and still want to have a functional portfolio website.

When the code does have to be edited, it is very modular with emphasis on reuse so any developer working with the app can make changes quickly without having to modify many individual pages. For example, the elements in the tag and the navbar at the top of the page are kept in separate templates and imported into all the pages to keep it consistent across the app.

What we learned

We learned how to make clean and concise code, and saw firsthand how much easier it made working on the app in comparison to having duplicate code and harcoded content.

What's next for Portfolio Website - Team Really Big Python Snek (Hiss)

  • Add more pages - This can be done easily as CSS across the site is also reused and new pages can be created very quickly
  • Replace JSON file with MongoDB - This can be done with minimal changes to the code as Mongo is a document database
  • Deploy to the cloud
  • Improve the design

Built With

Share this project:

Updates