Reference no: EM132074725

Overview:

You are to build a responsive portfolio site. The objective of this assignment is to build a framework where you can input current and future projects from MMDD in your portfolio. The goal of a portfolio is to visually showcase your work. Portfolio items should be easily organized and enticing to click. When an item is  clicked, the user will be given more details about the project and additional images. Your focus is to create a responsive navigation and grid layout using the concepts covered in class. You are required to create / code the following:

• Your portfolio site must have a white background and black (or dark grey) text.
• You will select a pair of Google fonts for your website. See https://fontpair.co/ for font pairing suggestions.
• You can select one accent color for your site. The accent color will be used to highlight links, selections, or content. It is to be used minimally and purposefully.
• You will create a logo for the site that will be placed in your navigation. Your logo will be your name or initials. This can be a styled wordmark or you can use one of your Google fonts.
• Your website must be responsive. Content needs to adapt to any screen width that will view your website. Use media queries covered in class.
• You must use HTML5 semantics, <HEADER>, <NAV>, <SECTION>, <FOOTER>, etc.to organize the elements of your page.
• The <HEADER> will contain your <NAV> and have your logo and the following links: portfolio, about, contact. When a user clicks on the logo it will take you to the home -index.html - page.
• The navigation needs to use flexbox to style the content.
• <SECTION> will hold the content for your portfolio, about and contact.
• The layout for the site needs to use CSS Grid.
• <FOOTER> section will hold links to your social accounts.
• Use ONE CSS3 / jQuery code snippet presented in-class.
• Use CSS animations and transitions as needed; do not overstyle, but use them to enhance the presentation and interactivity of your site. i.e. when you hover over a link,
• add a .5s transition to fade between colours.
• Make sure you validate your HTML and CSS code using the W3C validator.
• The following websites should be used for visual guidance. Notice the clean layout and ability for a user to easily click and view the different portfolio items:
• Charles Daoud - https://www.charlesdaoud.com/

Purpose:

This assignment is created to give you the structural elements for your portfolio. At the completion of your site, when someone types www.yourname.com your portfolio website will show up. The focus is to build the navigation and pages. You will populate your site with
additional portfolio items at a later date (summer, Semester 3 & 4). If you do not have any portfolio items, sample photos will be provided.