Create your portfolio in which you will write followings about yourself according to given conditions/methods.
Code Limitation
Your portfolio will be according to following web layout.
Requirements
Following terms and conditions must be applied on the portfolio. If you want to add more, then it would be highly appreciated.
- All codes must be written in react environment according to following conditions.
- You will write all of your HTML code in “App.js” file that is already created when react environment is created. In this assignment, you will create one page portfolio. Therefore, the “App.js” is the home-page of your portfolio website.
- Define a <header> section. In this section, there will be two sub-sections (<div>). One is for you name and introduction. While, second section is for your picture.
- Your name will be displayed by using <h1> tag.
- Your introduction will be displayed by using <p> tag.
- At top of your the page, your name, introduction and profile photo will be shown. Introduction will contain maximum of 20 words. Both name and introduction should be center-aligned. While, image is right aligned.
- Width of introduction-text should be slightly greater than your name-text.
- Below header section, a navigation menu should exist. In this menu, there are links to different sections of your portfolio. You will create following sections in this assignment. It is noted that your portfolio is one page application and you will only specify IDs of different sections in
hrefattribute of <a> tag.- Educational History
- Professional Skills
- Professional Projects
- Hobbies
- Life Ambitions
- Efforts for Country
- Contact Me
- All links in above navigation menu should be shown left side. But “Contact Me” should be displayed at right side.
- In this assignment, there is no need to add hover effect on navigation links.
- Create a section for “Educational History”. This section must fulfill following conditions.
- A heading as “Educational History” in H2 category
- A table having following columns
- Sr. No.
- Degree Title
- Passing Year
- Total Marks
- Obtained Marks
- Percentage
- The table has proper border.
- All columns except “Degree Title” should be centered aligned.
- Table should be display full width of screen
- Link this section and navigation bar such that when click on respective link, then this section will be displayed.
- Create a section for “Skills”. This section must fulfill following conditions.
- A heading “Professional Skills” under “H2” heading category
- List down your skills in numbered format.
- Link this section and navigation bar such that when click on respective link, then this section will be displayed.
- Create a section for “Professional Projects”. This section must fulfill following conditions.
- A heading “Professional Projects” under “H2” heading category
- List down your projects in numbered format.
- Link this section and navigation bar such that when click on respective link, then this section will be displayed.
- Create a section for “Hobbies”. This section must fulfill following conditions.
- A heading “Hobbies” under “H2” heading category
- List down your hobbies in bullet format.
- Link this section and navigation bar such that when click on respective link, then this section will be displayed.
- Create a section for “Life Ambitions”. This section must fulfill following conditions.
- A heading “Life Ambitions” under “H2” heading category.
- List down your life ambitions in bullet format. One list item will be “Achieved” and second is “Struggling”.
- List down your achieved life ambitions (in bullet format) under “Achieved” list item. There should be at least four achieved life-ambitions.
- List down your struggling life ambitions (in bullet format) under “Struggling” list item. There should be at least four struggling life-ambitions.
- Both “Achieved” and “Struggling” list items should be shown in bold format.
- Link this section and navigation bar such that when click on respective link, then this section will be displayed.
- Create a section for “Efforts for Country”. This section must fulfill following conditions.
- A heading “Efforts for Country” under “H2” heading category
- List down your efforts for country in bullet format. One list item will be “Succeeded” and second is “Struggling”.
- List down your succeeded efforts (in bullet format) under “Succeeded” list item. There should be at least four succeeded efforts for your country.
- List down your struggling efforts (in bullet format) under “Struggling” list item. There should be at least four struggling efforts.
- Both “Succeeded” and “Struggling” list items should be shown in bold format.
- Link this section and navigation bar such that when click on respective link, then this section will be displayed.
- Footer section must fulfill following conditions.
- Your contact information (email only)
- Icons for WhatsApp, Facebook, Instagram, YouTube, LinkedIn and Twitter. These icons should be in one line. Note: You can download icons (in PNG format) by clicking on below buttons.
- All icon should be linkable. When click on any icon, then a link should be open related to clicked icon.
- All above contents must be center aligned.
- This section has some background color.
- This section must has margin 20px from top, 0px from left, right and button.
- This section must has 20px padding for both top and button and 0px from both left and right.
- Link this section and navigation bar such that when click on respective link, then this section will be displayed.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
…
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
courseCS.WordPress.com 
