https://github.com/mlh-fellowship/cturtles3-portfolio
The portfolio website for Team Hawksbills of the C Turtles (Pod 3.3.0)!
https://github.com/mlh-fellowship/cturtles3-portfolio
css flask html mlh-fellowship portfolio
Last synced: 7 months ago
JSON representation
The portfolio website for Team Hawksbills of the C Turtles (Pod 3.3.0)!
- Host: GitHub
- URL: https://github.com/mlh-fellowship/cturtles3-portfolio
- Owner: MLH-Fellowship
- Created: 2021-06-07T22:12:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-09T03:47:27.000Z (over 4 years ago)
- Last Synced: 2025-04-02T20:55:12.229Z (7 months ago)
- Topics: css, flask, html, mlh-fellowship, portfolio
- Language: HTML
- Homepage:
- Size: 29.6 MB
- Stars: 1
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hawksbills-portfolio
The portfolio website for Team Hawksbills of the C Turtles (Pod 3.3.0)!
To view our website, please follow instructions under "Installation" below.
**Check it Out:** https://hawksbills.tech/
## Inspiration 🐢
The theme of our website is inspired by our pod name, the C Turtles. To reflect this, we implemented a swimming turtle on the home screen to greet users when they visit our page.
## What it does 🖥
The user-friendly interface introduces the members of our team, inviting users to get to know each member by clicking through the photos on the page. Each member has a profile page to showcase their personality, interests, and recent projects.
## How we built it 🛠
To collaborate, we used:
- Git
- Discord
To design the website, we used:
- Figma
To build the website, we used:
- Flask as the framework
- HTML for the structure
- CSS and Bootstrap for the styling
## Challenges we ran into 😡
- Using Flask, since our team had limited experience with it
- Figuring out the quirks of CSS, and determining which tools and responsive layout patterns to use. Learning how to adopt a CSS framework was another challenge that we overcame.
## Accomplishments that we're proud of 🌟
- The collaboration amongst the team. We had pair programming sessions to merge our code and debug together.
- Combining our different domains of knowledge and expertise to build a finished product. We were able to learn from each other and communicate effectively.
- Putting together a website in a short timeframe, despite our limited experience with Flask and web development
- Familiarizing ourselves with Git and the Git workflow in order to apply its best practices
## What we learned ✏️
- Flask
- Routing
- The Jinja templating system
- How to pass in and use variables in our templates
- Styling
- Implementing a video hero section
- Flexbox
- Bootstrap
- Git/GitHub
- The importance and purpose of pull requests
- How to use issues and project board to manage our project
- Getting code reviews and feedback from our peers
## What's next for the Hawksbills Portfolio 🚀
- Taking inspiration from what we learned while making this portfolio and implementing that in our future portfolios
- Improving the responsiveness of the website
## Installation
Below explains how to install Flask in a virtual testing environment and create a simple Flask application only on on Linux and MacOS.
### Prereq: **Make sure you have python3 and pip installed**
## Step 1: Install Virtual Environment
Install virtualenv on MacOS
1. Open the terminal.
2. Install virtualenv on Mac using pip:
```
sudo python2 -m pip install virtualenv
```
## Step 2: Create an Environment in Linux and MacOS
For Python 3: To create a virtual environment for Python 3, use the venv module and give it a name:
```
python3 -m venv
```
### Step 3: Activate the Environment
Activate the virtual environment before installing Flask. The name of the activated environment shows up in the CLI after activation.
Activate the virtual environment in Linux and MacOS with:
```
. /bin/activate
```
### Step 4: Install Flask
Install Flask within the activated environment using pip(Flask is installed automatically with all the dependencies.):
```
pip install Flask
```
Use the package manager pip to install all dependencies
```
pip install -r requirements.txt
```
### Step 5: Test the Development Environment
Create a .env file using the example.env template
Start flask development server
```$ export FLASK_ENV=development
$ flask run
```
Finally Copy and paste the address it’s running on into the browser to see our website.