Simple-Responsive-Portfolio

Create your portfolio in which you will write followings about yourself according to given conditions/methods.

Code Limitation

You will create your portfolio 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.

Define a <header> section in App.js. In this section, there will be two sub-sections. One sub-section is for you name and introduction. While, second sub-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 portfolio 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.
- Responsive Feature:
  - For large devices, header text (name and introduction) and image would be displayed side by side. In this case, text would be displayed at left side and image would be at right side.
  - For small screen, text and image would be displayed top and bottom. In this case, text would be displayed at top and image would be at bottom.
Below header section, a navigation menu should exist. In this menu, there are links to different sections of your portfolio. It is noted that your portfolio is one page application and you will only specify IDs of different sections in href attribute of <a> tag. You will create following sections in this assignment.
- Navigation Links:
  - Educational History
  - Professional Skills
  - Professional Projects
  - Hobbies
  - Life Ambitions
  - Efforts for Country
  - Contact Me
- Responsive Feature:
  - For large devices, all navigation links will be displayed horizontally and in normal font-size as <li> holds.
  - For small devices, font-size will be decreased such that all links will be displayed horizontally on small screen, properly.
All links in above navigation menu should be shown left side. But “Contact Me” should be displayed at right side.
- Responsive Feature:
  - For large devices, all links will be displayed as mentioned above.
  - For small devices, all links will be displayed at left side including “Contact Me”.
Navigation bar can be more responsive by using JavaScript. You may skip this feature at this stage for simplicity.
When you move cursor over the link, then text-color of the link should be changed. This changes is called hover effect. In other words, hover effect should be added to links of navigation bar.
Create a container named as “leftContent“. This container will contain a sub-container “Skills” (section). The “Skills” 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 container named as “rightContent“. This container will contain a sub-container “Projects” (section). The “Projects” 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 container named as “mainContent“. This container will contain following sub-containers (section). Each of these section are elaborated in next list-items.
- Educational History
- Hobbies
- Life Ambitions
- Efforts for Country
The “Educational History” section must fulfill following conditions.
- A heading as “Educational History” in H2 category
- A table having following columns. The table is not necessary to be responsive.
  - 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.
The “Hobbies” 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.
The “Life Ambitions” 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.
The “Efforts for Country” 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.
Responsive Feature: You created three main containers below navigation bar. One is “leftContainer”, seconds is “rightContent” and third is “mainContainer”.
- For small devices, they should be displayed from top to botton, in same sequence as they defined i.e., leftContainer, then rightContent and then mainContainer.
- For large devices, all containers should be displayed side by side such that sequence will become as leftContainer-mainContainer-rightContent.
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.

Code Limitation

Requirements

Share this: