COMP229– Web Application Development
Assignment 1
Portfolio Site
Due: Week 4(------------------------) @ 11:59pm.
Value 15%
React Portfolio Site Maximum Mark: 100
Overview: Create your Personal Portfolio Website using React
Instructions:
This 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.
1. Your Site must include the appropriate content for a Personal Portfolio (65 Marks: Content)
a. You must include a Navigation Bar or other Navigation scheme that allows the user to view
each page of your site.
b. You must include a Custom Logo for your site, this should be placed in or around the
main Navigation bar. The Custom Logo can be as simple or artistic as you desire (e.g. you
could use a primitive colour-filled shape like a triangle or hexagon with your initials
positioned inside). Please do not use a logo that belongs to another company or person.
c. Your Home Page should include some sort of welcome message and link or button that
allows the user to redirect to your About Me Page and / or other pages. I recommend
also including some sort of Mission Statement.
d. Your About Me Page should include your legal name, an image of you (I recommend a head
and shoulders shot), a short paragraph about who you are. Keep this clean and simple as it
may be viewed by perspective employers.
e. Your About Me page should include a link to a PDF version of your Resume.
f. Your Projects Page should include images and information for at least 3 Projects you wish
to highlight. These could be current projects you are working on or past projects you
have completed. Include an image for each Project and a short description of your role
and the outcome.
g. Your Services Page should include a short list of services you offer (e.g. general
programming, web development, mobile apps, etc.). I recommend including images
that make this more appealing to view.
h. Your Contact Page should include your contact information in a panel or other construct.
i. Your Contact Page should include a short interactive form that allows the user send you a
message and provide basic contact information (First Name, Last Name, Contact Number,
Email Address, Message, etc.). This form does not have to be fully functional initially.
However, it should be able to capture the information entered by the user and redirect
them back to the Home Page.
j. Your JavaScript, CSS and Multimedia Asset Files are functional.
k. All Your Code (HTML, CSS, JavaScript, jQuery, etc.) is error free.
2. Include Internal Documentation for your site (5 Marks: Internal Documentation):
a. Ensure you include a comment header for your CSS and JavaScript files that indicate: the
File name, Student’s Name, StudentID, and Date.
b. Ensure you include a section headers for all of your HTML structure, CSS style sections,
and any JavaScript functions.
c. Ensure all your code uses contextual variable names that help make the files human-
readable.
3. Share your files on GitHub to demonstrate Version Control Best Practices and push your site to a
cloud host (10 Marks: Cloud Hosting).
a. Your repository must include your code and be well structured.
b. Your repository must include commits that demonstrate the project being updated at
different stages of development – each time a major change is implemented.
c. You must deploy your site to your Cloud Server using git
SUBMITTING YOUR WORK
Your submission should include:
1. A zip archive of your website’s Project files – 5 marks
2. A link to GitHub (preferable). – 5 marks
3. A link to your live portfolio site hosted to your Cloud Server using git. – 10 marks
This assignment is weighted 15% of your total mark for this course.
Late submissions:
20% deducted for each day late.
