Latam C Turtles Portfolio

A personalized take on a portfolio website, inspired by our pod's name (C Turtles) and enriched by our passions in programming. The website features 5 pages uniquely styled thanks to Bootstrap.

Comment

Inspiration

Inspired by our passions for programming, we made it a challenge to learn something new and apply it to our portfolio page. That something varied on an individual level, and across the team we had members learning and applying different kinds of languages and frameworks like Flask, HTML, and Bootstrap.

Our Latin American (LATAM) background was also an inspiration throughout this hackathon. Both in terms of team communication and morale, this similarity was deadly in a good way. This inspired us to apply our individual Latin flair to our designed pages resulting in unique, fluid, and sleek designs.

Other sources of inspiration came from our very own pod. Since we are nicknamed the C Turtles, we wanted to incorporate that name into a theme of one of our pages--acting as a tribute to our pod and to MLH!

What it does

Our portfolio website features the following pages:

The opening page of our portfolio is the landing page, and from there users will be able to access the about page and our 3 individual profiles. By scrolling down you will get to the about page. The about page is designed to display information on our pod. Profiles can be reached by clicking on the team member pictures. The profile page is meant to act as an academic representation of our past accomplishments (very resume like). The website itself is running off of a Flask server that was coded up using Python.

How we built it

The website was initially designed using frontend design tools, like Figma. From there, work was divided and split among the members. Carlos focused on the landing page, Jorge focused on the about page, and Saul focused on the profile page. These were the following tools used to finalize the design of the website:

  • Bootstrap - CSS styling used Bootstrap styling methods for an overall responsive website.
  • Flask - Written in Python, Flask provides the server that the website runs on.
  • HTML - Much of the pages were written in .html files with Jinja2 notation to reduce code repetition.
  • Figma - Provided great direction for initial concept designs.

All collaboration was done remote via GitHub. GitHub workflow was used in order to maintain an organized and effective work environment. The GitHub project and issues feature was also used consistently as a good task management system. The website was tested in both MacOS and Linux programming environments.

Challenges we ran into

Over the course of the orientation week we ran into several issues ranging from individual programming knowledge to bugs in our website. We've decided to classify our challenges whether they were major (or consumed a lot of time) or if they were minor (little time consumed).

Major Challenges

  • Some members were not experienced in either HTML or CSS programming. This resulted in a heavy time loss when reformatting of the landing page had to occur in later stages of the website development track.

  • Initial planning could have been more extensive on the first day. Issues were identified and assigned in the GitHub repo starting on the second day, so essentially we missed out on a full day to work on issues that could have been identified and assigned earlier.

Minor Challenges

  • Small bugs were found when testing the website across different browsers. Due to the sake of time, all of these bugs have not been addressed yet but will be in future updates of the website.

  • Flask programming was new to some members but quick YouTube tutorials proved effective in overcoming these learning curves.

  • Getting used to Jinja2 notation. Same as above.

  • Minor miscommunications. These were quickly addressed through team meetings after our standups.

Accomplishments that we're proud of

  • Applying our passions and wits to the unknown to create a beautiful website!

  • For some members, this was about getting out of the comfort zone and trying CSS and HTML!

  • Even though members were spread across two countries, collaboration was still fluid and issue-less.

  • Turned strangers into friends just by coding together :)

What we learned

  • Not all browsers follow the same styling syntax (i.e Safari vs FireFox).

  • Python can be used to run website servers through Flask.

  • Bootstrap is powerful in creating websites.

  • GitHub projects feature is amazing in overseeing tasks and managing overall teamwork.

What's next for Latam C Turtles Portfolio

  • Fix different browser bugs

  • Create profiles for all 3.3.0 podmates

  • Add more animations to the page to fit more to the underwater theme

Share this project:

Updates

Submission history