网页定制 | Project 3: Professional Portfolio

这个project是自定义设计几个网页，运用html，css，bootstrap框架等知识
Project 3: Professional Portfolio
Description:
Project 3 consists of creating a professional or academic portfolio. The purpose of project 3 is to use the
knowledge of HTML, CSS, and Bootstrap 4 to create a portfolio website.
Students can design the layout and structure of their website, but the professional portfolio should have:
1. Responsive website
All elements and image of the entire project 3 should be responsive.
2. Folder and files organization
Files should be organized in their respective folder and subfolders
3. Navigation tabs
-Navigation tabs can be placed on the top or side upon your own preference
-The navigation tabs should either have a scrollspy effect OR navigate to different page, and
collapsible when change to small/medium screen size. If it has a scrollspy effect, there should be
4 different sections; if you use different pages, then at least 4 pages should be added.
4. Animation
At least two different animations
5. Introduction picture
At least one introduction picture of yourself or a picture relative to your major
6. Introduction paragraph
Introduce yourself using a Jumbotron. In the introduction you should include the following info:
– Your current major.
– Future inspiration: plan after graduation, and what field do you plan to achieve your career
goals.
7. Project section/page
Use cards to design the project section. In the project section you should introduce project 1
and 2. In the card presentation it should show an image of the project and a title.
The card you have a hover effect
When click on the card, it should open a model window. The model dialog should have to
different close button, modal title, project image, the project description and the reason/s why
you picked the topic, and a link to the project.

8. The Class Activities section/page MUST have three cards;
In this example, it displayed HTML, CSS, and Bootstrap activities cards.
9. The contact information
This part should have phone number, email, address, and social media icons that will link to its
respective website. The information doesn’t need to be real.
Note:
You can also use your own contents representing your project, which means you can use your
own pictures and text; you can change section/page name and all the wording, but the
REQUIRED section layout and topic as above should be reflected in your project.
For those who already created your website layout and have added contents on, you could
either add required sections or did some minor modification to meet the requirements.
Upon your own choice, you can get the result by using either Bootstrap or CSS or both.
Recommended Project Development Timeline:
 Step 1: Thursday, December 12, 2019 – Complete navigation tabs, introduction picture,
introduction paragraph, and animation.

 Step 2: Monday, December 16, 2019 – Complete project section and contact section.
Complete activities section, check that project 3 is complete, and upload project 3 to
your GitHub account (if you choose GitHub to host your website).
 Final Project Presentation: Tuesday, 12/17/2019 – Time: 6:00PM 8:30PM Room: T-T13