Development

Styling

The majority of styling was done by using Bootstrap 5 and CSS. In certain areas I used external libraries like typed.js for typing animations and highlight.js for code blocks. Icons used in this website were taken from font awesome.

Modular Components

I wanted the site to be modular, so I can easily add new stuff like projects and timeline objects. To do this I used JSON files to save information about certain components for example, I saved the data for each projects in the projects.json file. Here you can see the object for this website.

1{
2  "title": "Flask Website",
3  "text": "This website you are on now was built with flask",
4  "link": "flask-website",
5  "img": "cardimgs/flask-website.PNG",
6  "date": "5/4/21 - present",
7  "github": "https://github.com/LakeeSiv/web",
8  "tech": [
9    "Flask",
10    "Bootstrap",
11    "Flask-Mail",
12    "SendGrid's mail API",
13    "Typed.js",
14    "reCaptcha"
15  ],
16  "website": "https://lakee.herokuapp.com/"
17}
18

If I needed to change an attribute for a project, it is simple as just changing the JSON instead of having to change a block of HTML.

Contact Page

The contact page was one of the first pages I tried to tackle. I firstly created the textarea elements then by using flask, I got the necessary information by taking reading the text in the elements when a POST request is made (which occurs when the send button is pressed)

1if request.method == "POST":
2    name = request.form["name"]
3    email = request.form["email"]
4    subject = request.form["subject"]
5    message = request.form["message"]

Now time to send me the email with the information. To do this I used the Flask-Mail library to easily send the email just by using a few lines of code. But I unexpectedly ran into an issue where the email does not get sent, when I deploy it. This was due to a security issue where gmail will not allow its email to be logged in on external websites (i.e Heroku). To fix this I resorted to setting up a SendGrid account and using their mail API to send emails. Then I implemented reCaptcha to prevent spam.