Overview: Create your Personal Portfolio Website using ExpressJS and implementing the Pug templating engine. Your site must be hosted live on a cloud service such as Heroku, or Digital Ocean.
Sample Student Portfolios:
[login to view URL]
[login to view URL]
This Express site must include the pages from your Personal Portfolio 5 pages – your Home page, an About Me page, a Projects page, a Services page, and a Contact Me page.
Your Portfolio site will use ExpressJS and NodeJS and your web pages have been split to use different Viewtemplates and partials by implementing the Pug templating engine and Express Routes (4Marks: GUI, 4 Marks: Functionality):
You need minimum 1 view template (4 Marks: Functionality, 4 Marks: GUI).
An Express Route must exist for each page of your site. Note: You will need to use the [login to view URL](path, callback(req, res, next)) method structure with a [login to view URL](view, locals) method call to render each view
Your site will use the new structure created by the Express Generator. Your site files will be migrated to work within the public, routes and views folders(20 Marks: Site Structure):
Generate your site structure with the Express Generator. Note: You must use the
–view=pug option to ensure that you implement the Pug templating engine for Express
You will define routes for all of your site pages in the [login to view URL] file in your routes folder (1 Mark: Site Structure).
Your views folder will contain your Pugpage templates. You will create a separate folder named partials for all of your partial Pugfiles. You will need at least 2 partials: [login to view URL] and footer.pug. ( Site Structure).
The latest version of your site will be hosted live and error free on a Cloud Hosting Service ( Site Structure).
Include Internal Documentation for your site(: Internal Documentation):
Ensure all your code uses contextual variable names that help make the files human-readable (: Internal Documentation).
Ensure you include inline comments that describe your GUI Design and Functionality. Note: Please avoid “over-commenting” ( Internal Documentation)
Use the ReactJS front-end framework to improve interactivity and to implement the MVC design pattern .
Create a working contact form on the Contact Me page using node.js and appropriate node packages .
Create an external document (MS Word or PDF) that includes page wireframes, an explanation of the technologies used, and a Style Guide that details visual elements such as fonts and colours .