Merge pull request #76 from tecladocode/jose/cou-211-web-dev-re-creat…

…e-diff-store-links-for
tecladocode · Jan 25, 2023 · 97004de · 97004de
2 parents da4e39b + 29f0544
commit 97004de
Show file tree

Hide file tree

Showing 54 changed files with 84 additions and 110 deletions.
diff --git a/curriculum/section07/lectures/08_setting_up_microblog_with_flask/README.md b/curriculum/section07/lectures/08_setting_up_microblog_with_flask/README.md
@@ -14,5 +14,5 @@ draft: false
 # Setting up the Microblog project with Flask
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/60ac442d39c7427d815e1d4abd74526d](https://diff-store.com/diff/60ac442d39c7427d815e1d4abd74526d)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section07__08_setting_up_microblog_with_flask](https://diff-store.com/diff/section07__08_setting_up_microblog_with_flask)
 :::
diff --git a/curriculum/section07/lectures/09_receive_form_data_flask/README.md b/curriculum/section07/lectures/09_receive_form_data_flask/README.md
@@ -14,5 +14,5 @@ draft: false
 # Receiving form data using Flask
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/475b5a22fd4b4d8194c1825889c6770e](https://diff-store.com/diff/475b5a22fd4b4d8194c1825889c6770e)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section07__09_receive_form_data_flask](https://diff-store.com/diff/section07__09_receive_form_data_flask)
 :::
diff --git a/curriculum/section07/lectures/10_display_past_entries_microblog/README.md b/curriculum/section07/lectures/10_display_past_entries_microblog/README.md
@@ -14,5 +14,5 @@ draft: false
 # Displaying past entries in the Microblog project
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/295f249cf29e46918c8d8391699f7c02](https://diff-store.com/diff/295f249cf29e46918c8d8391699f7c02)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section07__10_display_past_entries_microblog](https://diff-store.com/diff/section07__10_display_past_entries_microblog)
 :::
diff --git a/curriculum/section07/lectures/11_formatting_dates_correctly_microblog/README.md b/curriculum/section07/lectures/11_formatting_dates_correctly_microblog/README.md
@@ -14,5 +14,5 @@ draft: false
 # Formatting dates correctly in our entries
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/d183b361cc8d4b0d9626a4bdf4f93644](https://diff-store.com/diff/d183b361cc8d4b0d9626a4bdf4f93644)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section07__11_formatting_dates_correctly_microblog](https://diff-store.com/diff/section07__11_formatting_dates_correctly_microblog)
 :::
diff --git a/curriculum/section07/lectures/14_storing_entries_mongodb/README.md b/curriculum/section07/lectures/14_storing_entries_mongodb/README.md
@@ -14,5 +14,5 @@ draft: false
 # Storing Microblog entries in MongoDB
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/0c3715d611e148a78f6150003f689f74](https://diff-store.com/diff/0c3715d611e148a78f6150003f689f74)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section07__14_storing_entries_mongodb](https://diff-store.com/diff/section07__14_storing_entries_mongodb)
 :::
diff --git a/curriculum/section07/lectures/15_retrieving_entries_mongodb/README.md b/curriculum/section07/lectures/15_retrieving_entries_mongodb/README.md
@@ -14,5 +14,5 @@ draft: false
 # Retrieving Microblog entries from MongoDB
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/6e3c246e29ad46f6a9ac1e71d2876b37](https://diff-store.com/diff/6e3c246e29ad46f6a9ac1e71d2876b37)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section07__15_retrieving_entries_mongodb](https://diff-store.com/diff/section07__15_retrieving_entries_mongodb)
 :::
diff --git a/curriculum/section07/lectures/16_flask_app_factory_pattern/README.md b/curriculum/section07/lectures/16_flask_app_factory_pattern/README.md
@@ -14,5 +14,5 @@ draft: false
 # Using Flask's app factory pattern
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/b474a5eb637c475db58af2bae2dab9b9](https://diff-store.com/diff/b474a5eb637c475db58af2bae2dab9b9)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section07__16_flask_app_factory_pattern](https://diff-store.com/diff/section07__16_flask_app_factory_pattern)
 :::
diff --git a/curriculum/section08/lectures/02_what_is_heroku/README.md b/curriculum/section08/lectures/02_what_is_heroku/README.md
@@ -1,16 +1,28 @@
 ---
-title: What is Heroku?
-slug: what-is-heroku
+title: What do deployment services do for us?
+slug: what-do-deployment-services-do
 tags:
   - Concept
   - Published
 categories:
   - Presentation
-section_number: 8
-excerpt: "Learn about what Heroku is and how it can help us share our application with users."
+section\_number: 8
+excerpt: "Learn about what deployment services like Render.com do for us."
 draft: false
 ---
 
-# What is Heroku?
+# What do deployment services do for us?
 
-This is a presentation lecture without a transcript. For now, it's only available in the Udemy course!
+When we run our app, people and programs can make requests to the address the app is running on. When we run our app with `flask run`, this starts a development server which is in charge of receiving those requests and sending them over to the Flask app. The app then runs the Python function and calculates the response.
+
+For security reasons, when we run our app locally, people outside our network can't make requests to it. So if we want our app to be publicly available, we must deploy it somewhere that doesn't have this restriction.
+
+Deployment services companies like Render.com or Heroku, run our applications in publicly accessible services and they give us a URL that we can use to make requests to the application.
+
+These companies make it really easy to deploy our apps by taking care of provisioning hardware, setting it up, installing dependencies, etc. This kind of business is known as a PaaS: "Platform as a service."
+
+If you don't mind doing some more work yourself, for example by setting up each individual server, then you can save money by renting servers directly. The benefit of this is you can run multiple applications in a single server and you get more flexibility. This can save money, but takes a lot more work. Plus, PaaS applications can do things like restart our services if they crash, they can handle backups and deployments, and much more. Overall, I think using a PaaS makes a lot of sense, especially for smaller applications.
+
+Render.com has a generous free plan which means we can use their services for free. There are some limitations however. We only get 1500 hours per month, and builds are a bit slower than on paid plans (so when you deploy, it takes a few minutes for your application to run).
+
+Let's get started in the next lecture!
diff --git a/curriculum/section08/lectures/04_getting_app_ready_for_heroku/README.md b/curriculum/section08/lectures/04_getting_app_ready_for_heroku/README.md
@@ -1,67 +1,21 @@
 ---
-title: Getting our app ready for Heroku
-slug: getting-our-app-ready-for-heroku
+title: Getting our app ready for Render
+slug: getting-our-app-ready-for-render
 tags:
   - Project
   - Published
 categories:
   - Video
 section_number: 8
-excerpt: "Here we'll add some files that Heroku needs in order to run our application."
+excerpt: "Here we'll add some files that Render needs in order to run our application."
 draft: false
 ---
 
-- [Getting our app ready for Heroku](#getting-our-app-ready-for-heroku)
-  - [The `runtime.txt` file](#the-runtimetxt-file)
-  - [The `Procfile` file](#the-procfile-file)
-  - [Install `gunicorn` in Heroku](#install-gunicorn-in-heroku)
+- [Getting our app ready for Render](#getting-our-app-ready-for-render)
 
-# Getting our app ready for Heroku
+# Getting our app ready for Render
 
-We need to tell Heroku:
+We need to add `gunicorn` to our `requirements.txt` file before we deploy to Render.
 
-- What language our app uses.
-- How to run our app.
-- The dependencies required for our app.
+You won't be able to run `gunicorn` in Windows, but you can install it. In other platforms, you should be able to run `gunicorn`. Either way, you'll be using `flask run` to run your app locally most of the time. We'll only use `gunicorn` in Render.com for performance benefits.
 
-We do this with three different files:
-
-- `runtime.txt`, for the language.
-- `Procfile`, for "how to run the app".
-- `requirements.txt`, for the dependencies.
-
-## The `runtime.txt` file
-
-Here we want to tell Heroku what language and what version to use.
-
-The contents of this file are very specific. You need to pick from the available languages and versions here: [https://devcenter.heroku.com/articles/python-runtimes](https://devcenter.heroku.com/articles/python-runtimes).
-
-In our case, we're going with this content inside the file:
-
-```
-python-3.10.2
-```
-
-::: tip
-Other versions (e.g. older versions of Python) may also work. See this link for more information: https://devcenter.heroku.com/articles/python-support#supported-runtimes
-:::
-
-## The `Procfile` file
-
-::: warning
-The file should be called `Procfile`, and **not** `Procfile.txt`!
-:::
-
-Here we're going to tell Heroku how to run our app:
-
-```
-web: gunicorn "app:create_app()"
-```
-
-This uses the `web` dyno type, and in it executes the `gunicorn "app:create_app()"` command. That will start our app with `gunicorn` serving it.
-
-## Install `gunicorn` in Heroku
-
-We need to add `gunicorn` to our `requirements.txt` file before we deploy to Heroku.
-
-You won't be able to run `gunicorn` in Windows, but you can install it. In other platforms, you should be able to run `gunicorn`. Either way, you'll be using `flask run` to run your app locally most of the time.
diff --git a/curriculum/section09/lectures/02_new_jinja2_variables/README.md b/curriculum/section09/lectures/02_new_jinja2_variables/README.md
@@ -25,7 +25,7 @@ draft: false
 ## TL;DR (on this video...)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/925a06fbecaf46fd998785a731e18af3](https://diff-store.com/diff/925a06fbecaf46fd998785a731e18af3)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section09__02_new_jinja2_variables](https://diff-store.com/diff/section09__02_new_jinja2_variables)
 :::
 
 Learn how to create variables inside a template, so that you can calculate values and re-use them in multiple places within a template.

diff --git a/curriculum/section09/lectures/03_jinja2_filters/README.md b/curriculum/section09/lectures/03_jinja2_filters/README.md
@@ -22,7 +22,7 @@ draft: false
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/1b9f968ca55a408ea6b352730f3a336d](https://diff-store.com/diff/1b9f968ca55a408ea6b352730f3a336d)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section09__03_jinja2_filters](https://diff-store.com/diff/section09__03_jinja2_filters)
 :::
 
 In a nutshell, filters are to Jinja what functions are to Python. They take inputs, and return outputs. We use them where we use values, to transform them.

diff --git a/curriculum/section09/lectures/04_jinja2_macros/README.md b/curriculum/section09/lectures/04_jinja2_macros/README.md
@@ -24,7 +24,7 @@ draft: false
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/f906ce3bb3d3403eb179770ffeda0743](https://diff-store.com/diff/f906ce3bb3d3403eb179770ffeda0743)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section09__04_jinja2_macros](https://diff-store.com/diff/section09__04_jinja2_macros)
 :::
 
 Another thing in Jinja similar to functions in Python, but here they're used for composition rather than transformation.

diff --git a/curriculum/section09/lectures/05_jinja2_inheritance/README.md b/curriculum/section09/lectures/05_jinja2_inheritance/README.md
@@ -22,7 +22,7 @@ draft: false
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/f5d286715a154b448343cbdce1318fd7](https://diff-store.com/diff/f5d286715a154b448343cbdce1318fd7)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section09__05_jinja2_inheritance](https://diff-store.com/diff/section09__05_jinja2_inheritance)
 :::
 
 Instead of coding whole HTML documents in every Jinja template, we can code specific parts of a document and place them within a predefined HTML structure.

diff --git a/curriculum/section09/lectures/06_custom_css_jinja2/README.md b/curriculum/section09/lectures/06_custom_css_jinja2/README.md
@@ -22,7 +22,7 @@ draft: false
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/3feb8bc5492849c182629df53776a768](https://diff-store.com/diff/3feb8bc5492849c182629df53776a768)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section09__06_custom_css_jinja2](https://diff-store.com/diff/section09__06_custom_css_jinja2)
 :::
 
 Let's create another `block` in our base template so that we can change things there per template. In this video I'll show you how you can use that together with `style` tags to customize the CSS easily.

diff --git a/curriculum/section09/lectures/07_handle_css_larger_pages/README.md b/curriculum/section09/lectures/07_handle_css_larger_pages/README.md
@@ -22,7 +22,7 @@ draft: false
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/b95f3d07a8cd4a3aa02d1ce1f1a3844a](https://diff-store.com/diff/b95f3d07a8cd4a3aa02d1ce1f1a3844a)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section09__07_handle_css_larger_pages](https://diff-store.com/diff/section09__07_handle_css_larger_pages)
 :::
 
 Using BEM and an external stylesheet (or more than one) is still the best way to go, for example by giving out `todo.html` paragraphs classes:

diff --git a/curriculum/section09/lectures/08_jinja2_tests/README.md b/curriculum/section09/lectures/08_jinja2_tests/README.md
@@ -23,7 +23,7 @@ draft: false
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/6a481a2959a8483b83b5415cdef3c981](https://diff-store.com/diff/6a481a2959a8483b83b5415cdef3c981)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section09__08_jinja2_tests](https://diff-store.com/diff/section09__08_jinja2_tests)
 :::
 
 Jinja2 tests allow us to evaluate conditionals using the `is` keyword.

diff --git a/curriculum/section09/lectures/10_jinja_routing/README.md b/curriculum/section09/lectures/10_jinja_routing/README.md
@@ -21,7 +21,7 @@ draft: false
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/d57f52bee7a74e9991a8d26fad928011](https://diff-store.com/diff/d57f52bee7a74e9991a8d26fad928011)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section09__10_jinja_routing](https://diff-store.com/diff/section09__10_jinja_routing)
 
 Note that the code diffs are split into two. One implements a plain menu bar into the app (inside `/templates`), without using `url_for`.
 

diff --git a/curriculum/section10/lectures/02_displaying_and_saving_habits/README.md b/curriculum/section10/lectures/02_displaying_and_saving_habits/README.md
@@ -18,7 +18,7 @@ draft: true
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/18ad1f56e51d4239bc2ac024b877ae68](https://diff-store.com/diff/18ad1f56e51d4239bc2ac024b877ae68)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section10__02_displaying_and_saving_habits](https://diff-store.com/diff/section10__02_displaying_and_saving_habits)
 :::
 
 Let's start off our project by allowing users to add new habits and display the habits they've already added to the database.

diff --git a/curriculum/section10/lectures/03_styling_habit_tracker/README.md b/curriculum/section10/lectures/03_styling_habit_tracker/README.md
@@ -18,7 +18,7 @@ draft: true
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/cf80936ec06e4a8c984c3bd2f41221e9](https://diff-store.com/diff/cf80936ec06e4a8c984c3bd2f41221e9)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section10__03_styling_habit_tracker](https://diff-store.com/diff/section10__03_styling_habit_tracker)
 :::
 
 Let's code some CSS! In this video we'll style the header and the add habit form. We won't worry about the habits themselves yet, that's coming later on when we talk about completions.

diff --git a/curriculum/section10/lectures/04_date_navigation/README.md b/curriculum/section10/lectures/04_date_navigation/README.md
@@ -18,7 +18,7 @@ draft: true
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/ba9f5dd5fe6f41d589f1b39c867d3389](https://diff-store.com/diff/ba9f5dd5fe6f41d589f1b39c867d3389)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section10__04_date_navigation](https://diff-store.com/diff/section10__04_date_navigation)
 :::
 
 Let's add the date navigator: a few links under the header that allow the user to go to a date a few days in the past or in the future, to check past habits or what they'll be doing the next day.

diff --git a/curriculum/section10/lectures/05_styling_date_navigator/README.md b/curriculum/section10/lectures/05_styling_date_navigator/README.md
@@ -19,7 +19,7 @@ draft: true
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/0e898f37ca13458ba8cfacba3cfe0fa4](https://diff-store.com/diff/0e898f37ca13458ba8cfacba3cfe0fa4)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section10__05_styling_date_navigator](https://diff-store.com/diff/section10__05_styling_date_navigator)
 :::
 
 ## Implementation

diff --git a/curriculum/section10/lectures/06_completing_habits/README.md b/curriculum/section10/lectures/06_completing_habits/README.md
@@ -11,13 +11,13 @@ excerpt: "Implement the habit completion functionality and work on the styling f
 draft: true
 ---
 
-# Lecture Title
+# Completing habits
 
 [[toc]]
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/568e68ad5fd84f5faa9abdc938f9074c](https://diff-store.com/diff/568e68ad5fd84f5faa9abdc938f9074c)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section10__06_completing_habits](https://diff-store.com/diff/section10__06_completing_habits)
 :::
 
 Let's add habit completion so that our users can complete habits on the day they've got currently selected.

diff --git a/curriculum/section10/lectures/07_flask_blueprints/README.md b/curriculum/section10/lectures/07_flask_blueprints/README.md
@@ -17,7 +17,7 @@ draft: true
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/ce6051701cc947e5b5f2626eaf95fa59](https://diff-store.com/diff/ce6051701cc947e5b5f2626eaf95fa59)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section10__07_flask_blueprints](https://diff-store.com/diff/section10__07_flask_blueprints)
 :::
 
 A blueprint in Flask is basically a collection of routes. We can register zero or more blueprints with an application so that our routes can be split across different files and not all in `app.py`.

diff --git a/curriculum/section10/lectures/09_using_mongodb_in_project/README.md b/curriculum/section10/lectures/09_using_mongodb_in_project/README.md
@@ -18,7 +18,7 @@ draft: true
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/0e9a679a73a94df2ae3380772d0443ff](https://diff-store.com/diff/0e9a679a73a94df2ae3380772d0443ff)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section10__09_using_mongodb_in_project](https://diff-store.com/diff/section10__09_using_mongodb_in_project)
 :::
 
 We'll store habit data in MongoDB: a unique `_id` for each habit alongside the habit `name`.

diff --git a/curriculum/section10/lectures/10_deploy_app_heroku/README.md b/curriculum/section10/lectures/10_deploy_app_heroku/README.md
@@ -16,7 +16,7 @@ draft: true
 ## In this video... (TL;DR)
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/b898d123dec44165a886b32b0ab599fe](https://diff-store.com/diff/b898d123dec44165a886b32b0ab599fe)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section10__10_deploy_app_heroku](https://diff-store.com/diff/section10__10_deploy_app_heroku)
 :::
 
 Recap what we need in order to deploy a Flask app to Heroku: a GitHub repo, the `Procfile`, and `runtime.txt`.

diff --git a/curriculum/section12/lectures/02_making_flask_app/README.md b/curriculum/section12/lectures/02_making_flask_app/README.md
@@ -15,7 +15,7 @@ draft: true
 # Making the Flask app for our project
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/014e90fa830a48b8b7fea88ddff11c77](https://diff-store.com/diff/014e90fa830a48b8b7fea88ddff11c77)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section12__02_making_flask_app](https://diff-store.com/diff/section12__02_making_flask_app)
 :::
 
 So far we've been writing Flask apps using a very simple project structure:

diff --git a/curriculum/section12/lectures/03_base_template_and_nav_bar/README.md b/curriculum/section12/lectures/03_base_template_and_nav_bar/README.md
@@ -15,7 +15,7 @@ draft: true
 # Creating the base template and navbar
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/a97d12da472546a2966a5198bcac71cd](https://diff-store.com/diff/a97d12da472546a2966a5198bcac71cd)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section12__03_base_template_and_nav_bar](https://diff-store.com/diff/section12__03_base_template_and_nav_bar)
 :::
 
 Let's get started by creating a base template for all our other templates.

diff --git a/curriculum/section12/lectures/04_adding_about_page_to_flask_app/README.md b/curriculum/section12/lectures/04_adding_about_page_to_flask_app/README.md
@@ -14,7 +14,7 @@ draft: true
 # Adding an about page to our Flask app
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/af011a44b5aa42fcad724641709ecdd9](https://diff-store.com/diff/af011a44b5aa42fcad724641709ecdd9)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section12__04_adding_about_page_to_flask_app](https://diff-store.com/diff/section12__04_adding_about_page_to_flask_app)
 :::
 
 Let's continue our Portfolio project by adding the "About" page. These are usually very simple, often with a photo and some text telling the reader about you.

diff --git a/curriculum/section12/lectures/05_adding_contact_page_to_flask_app/README.md b/curriculum/section12/lectures/05_adding_contact_page_to_flask_app/README.md
@@ -15,7 +15,7 @@ draft: true
 # Adding a contact page to our Flask app
 
 ::: tip
-List of all code changes made in this lecture: [https://diff-store.com/diff/401766ee7dce439585678a83f6a7e314](https://diff-store.com/diff/401766ee7dce439585678a83f6a7e314)
+List of all code changes made in this lecture: [https://diff-store.com/diff/section12__05_adding_contact_page_to_flask_app](https://diff-store.com/diff/section12__05_adding_contact_page_to_flask_app)
 :::
 
 Let's continue our Portfolio project by working on the contact page. Here, we'll display our contact information. Optionally you could add a contact form here, although that feels a bit too formal and businesslike, rather than belonging to a personal portfolio page.