Student Portfolio Analyser

Maximum Marks - 34

 ✅ Submitted link is a github.io link - 1 mark
 ✅ Basic components (navbar, about, skills, projects, contact) present with respective IDs - 1 mark
 ✅ Navbar contains required elements with respective IDs - 1 mark
 ✅ Elements of the navbar are linked to the respective sections  - 5 marks
 ✅ Name is present - 1 mark
 ✅ Formal introduction is present - 1 mark
 ✅ About section is titled - 1 marks
 ✅ Professional photo is present - 1 marks
 ✅ Minimum of 4 samples of projects are present - 2 marks
 ✅ All project cards have an image, title, deployed link, repository link - 4 marks
 ✅ Each skills card has the corresponding image and name - 1 mark
 ✅ Links to GitHub and LinkedIn profiles are present - 2 marks
 ✅ Phone number is present - 1 mark
 ✅ Email address is present - 1 mark
 ✅ Resume buttons are present in the Resume section and the Home/About section - 2 marks
 ✅ Clicking on the resume button in the Resume section opens the link in a new tab and downloads the resume in PDF format - 2 marks
 ✅ Clicking on the resume button in the Home/About section section opens the link in a new tab and downloads the resume in PDF format - 2 marks
 ✅ GitHub calendar heatmap is present - 1 mark
 ✅ GitHub streak stats are present - 1 mark
 ✅ GitHub top languages card is present - 1 mark
 ✅ GitHub stats card is present - 1 mark
 ✅ Checked tech words in user about section - 1 mark

You haven't been taught cypress to run the test cases locally, you can see the passed/ failed test cases and test errors on CP itself.

CP will attempt to take screenshots of each component in your portfolio. You can view these screenshots in the "Screenshots" dropdown in the logs page. The marks allotted to you are independent of these.

Some Rules to follow:-

• Before writing a single line of code please read the problem statement very carefully.
• If you don't follow these rules you might not get any marks even if you do everything correctly.
• Have a look at the TestErrors on the logs page and Google them if any of your test cases have failed to figure out what might have gone wrong.

Problem Statement and Instructions:-

• Create a portfolio with the following components using the following attributes:
  • Navbar : id="nav-menu"
  • Home section : id="home"
  • About section : id="about" class="about section"
  • Skills section : id="skills"
  • Projects section : id="projects"
  • Contact section : id="contact"
• The elements within the navbar linked to the above 4 sections should have the following.
  • Element linked to Home section : class="nav-link home"
  • Element linked to About section : class="nav-link about"
  • Element linked to Skills section : class="nav-link skills"
  • Element linked to Projects section : class="nav-link projects"
  • Element linked to Contact section : class="nav-link contact"
  • Element linked to Resume : class="nav-link resume"
• The following must be present within elements with the respective IDs:
  • Name : id="user-detail-name"
  • Formal introduction : id="user-detail-intro"
• Contact elements must have the following IDs:
  • GitHub profile link : id="contact-github"
  • LinkedIn profile link : id="contact-linkedin"
  • Phone number : id="contact-phone"
  • Email address : id="contact-email"
• The image linking your professional photo must have class="home-img"
• Each project card in the Projects section should have class="project-card" and the following:
  • Image of the project
  • Title : class="project-title"
  • Description : class="project-description"
  • Tech stack used : class="project-tech-stack"
  • Link to GitHub repository : class="project-github-link"
  • Deployed link or video link : class="project-deployed-link"
• Each skills card in the Skills section should have class="skills-card" and the following:
  • Image : class="skills-card-img"
  • Name : class="skills-card-name"
• There must be two buttons for resume. Clicking on them should open the resume in a new tab and download it as a PDF. They must have the following IDs:
  • For the button in the Resume section : id="resume-button-1"
  • For the button in the Home/About section : id="resume-button-2"
• If you're using anchor elements for the resume buttons, they must have the following IDs:
  • For the button in the Resume section : id="resume-link-1"
  • For the button in the Home/About section : id="resume-link-2"
• For the GitHub calendar: class="react-activity-calendar" (the class is automatically included if you're using the react-github-calendar npm package)
• The GitHub statistics images must have the following IDs:
  • GitHub streak stats : id="github-streak-stats" [Link to refer : https://github-readme-streak-stats.herokuapp.com/demo/]
  • GitHub top languages : id="github-top-langs" [Link to refer : https://github.com/anuraghazra/github-readme-stats]
  • GitHub stats card : id="github-stats-card" [Link to refer : https://github.com/anuraghazra/github-readme-stats]
• Do not repeat any of the above class names and ID names for any other element.

General guidelines

• The system on cp.masaischool.com may take between 1-20 minutes for responding,
• so we request you to read the problem carefully and debug it before itself
• we also request you not just submit it last minute
• try to keep one submission at a time