The name of the person is hard coded in the Hero.jsx component and Footer component Change it to be dynamic by fetching it from /src/constants/index.js

Description

Added new styles for the scrollbar to better fit the website theme, it works for chromium based browsers and firefox.

Fixes #27

Type of change

• [x] New feature (non-breaking change which adds functionality)

Similar to #17, The intro of the person is hard coded in the Hero component Change it to be dynamic by fetching it from /src/constants/index.js

Very similar to #34

The 'LetsConnect' component has my linkedin hardcoded at line 8

Change it to dynamically fetch from /src/constants/index.js. This can be done by: Create a new constant called callToAction in the /src/constants/index.js file and use this instead of the hardcoded LinkedIn URL

Styling the scrollbar

Hello, I would like to implement some styling to make the scrollbar have the same dark theme as the website. Please let me know if it interests you, if it does, assign me and I will happily open a PR with the following code, the --primary and --secondary color variables, names, values are subject to change to respect the project styling.

:root {
  --primary: #363636;
  --secondary: lightblue;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) var(--primary);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 15px;
}

*::-webkit-scrollbar-track {
  background: var(--primary);
  border-radius: 0px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 14px;
  border: 3px solid var(--primary);
}

Before

After

The entire site is contained in a max-width of 1280px, however, the footer is not. This breaks the flow of the site and makes it look unusual. If you feel this is a valid issue, please assign it to me and I will fix it under Hacktoberfest.

Change the title of webpage to name instead of "Vite + React". Use logo instead of default favicon. TODO: Fetch name and logo from constants.

It would be nice to have a dedicated section for people to display their achievements like competitions, conferences, awards, etc Similar to #39, would like to see some design(s) before coding it out.

One of the things that I have in mind is that the user should be able to filter out the achievements based on some criteria. This can be done similar to the navigation on the Open Source Contribution section where you can filter out contributions based on the organisation. Here it could be filtered out based on the type (like extra curricular and curricular)

Currently, the open source contributions have to be manually typed into the /src/constants/index.js file.

It would be better if we could fetch them automatically using the GitHub API. This should include all the PRs and issues opened by the person in all repos except the ones owned by him or that are part of his organisation(s).

It will need some discussion before proceeding, so feel free to discuss it here!

Lottie files have this cool feature of animating only upon some action. The interactivity guide can be accessed here - https://lottiefiles.com/interactivity

This needs some discussion as to how it can be utilised for the two lotties used. Feel free to add your ideas here as comments before we can make PRs.