piyushgarg-dev/piyushgargdev-nextjs

Piyush Garg

Free Open Source BootCamp

This repository is a part of "Free Open Source BootCamp". Checkout Open Source Bootcamp Playlist on Youtube.

Setting up Locally

1. Copy the .env.example to .env.local

cp .env.example .env.local

2. Install Packages via yarn

yarn install

3. Run the Next.JS Development Server

yarn dev

Setting Up the Project

Click here to view the video tutorial which will teach you step by step on how to set up this project

Repo Activity

piyushgargdev-nextjs's Issues

Responsive UI of Hero components for small devices is not Organised.

Describe the bug
while viewing website on phones or Small screens its clear that home screen UI is ugly due to Hero component .
the picture slid down below the description instead of being remain at the top, which makes UI poor.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'home Screen'
2. Inspect the web Site if on pc to see the responsive design on small screens. (no need to perform this step if on phone/mobile)
3. Now you can see that image falls down below the description even below "Join -Discord" button which is not ideal way of presentation any web App.
4. this is not the case in Larger screen

Expected behavior
In small devices profile photo either should be at the top or at the side with the the title and greeting.
No way its below the "Join Discord " Button.

Desktop (please complete the following information):

• OS: windows
• Browser : Brave
• Version :1.52.119 brave

Smartphone (please complete the following information):

• Device: Samsung
• OS: Android
• Browser :chrome
• Version:

Screenshots

[BUG]: At Courses section in homepage courses item's/card's tags are not responsive.

Describe the bug
In Courses Section at homepage Cards/items of courses tags are not responsive after 576px width and before 992px width. It is coming out of cards/items of courses.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'HomePage'
2. Scroll down to 'Courses Section'
3. Inspect the webpage and click toggle device toolbar.
4. adjust the dimensions to IPAD air and Samsung galaxy s8+.

Expected behavior
The tags in the cards (in which courses details is written) should not come out of it.

Screenshots

Additional context
make the courses item section responsive.

The alignment of the hero image is incorrect

Describe the bug
Hero image is not well aligned, there is some extra space on the right side

To Reproduce
Steps to reproduce the behavior:

1. Go to the Home page
2. Check the alignments of the hero section -> hero image

Expected behavior
The image should have the same space as the left content

Screenshots

[BUG] Hide close button in mobile-menu after click hambarger button

Describe the bug
When we click Hamburger button to navigate nav-links after clicks close button shown hide

To Reproduce
Steps to reproduce the behavior:

1. Go to mobile-menu
2. Click on Hamburger
3. Shown hide close button

[BUG] Blog card overlapping to other cards

Describe the bug
Blog cards overlap with other cards in the blog section of the home page on both desktop and mobile.

To Reproduce
Steps to reproduce the behavior:

1. Go to the home page
2. Scroll down to the Blog section
3. Hover over any of the blog cards

Expected behavior
It should scale the blog card less than the current one on both the desktop and mobile. For e.g. the current card scale is 1.5 then it should be 1.2

Screenshots
Desktop -

Mobile -

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 10

Smartphone (please complete the following information):

• Device: OnePlus
• OS: Android 13
• Browser: Chrome

BUG : Testimonial Slider Arrows Not Working.

Describe the bug
The testimonial carousel/slider on the Home page contains left and right arrows, but they are unresponsive to user clicks.

To Reproduce
Steps to reproduce the behavior:

1. Go to the 'Home page.
2. Scroll down to the Testimony section.
3. Try clicking on the arrows, and observe that there is no response in the UI.

Expected behavior
There can be 2 expected behaviors:

1. The direction of the slider should change, that is if the testimonies are sliding by default towards the left and if the user clicks the right arrow then the testimonies should slide towards the right. OR
2. Instead of having the testimonies slide at every point in time, how about we have bootstrap-type carousels.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 10

Additional context
The main problem that this issue wants to solve is to bring some functionality to the arrow keys that are present in the Testimonials section on the Home page.

bug: [My Gears page] top cards hight

Describe the bug
The height of the top card in my gear is not right compared to the others because the height of the cards images is incorrect."

To Reproduce
Steps to reproduce the behavior:

1. Go to 'My Gear tab'
   2 Analyze the top row of cards
2. See error

Expected behavior
The card height has to be the same as the others in the middle row and the bottom row

Screenshots

the bug ^

and want to be^

Improve the Youtube Subscribe button

youtube subscribe button looks very basic

I would change the button show below similar

button-subscribe.mp4

Youtube Stats Mobile View Alignment is not correct

Describe the bug
The Alignment of the video cards on Homepage is not centered in mobile view.

To Reproduce
Steps to reproduce the behavior:

1. Go to piyushgarg.dev on Mobile View
2. Navigate to Youtube Stats Section
3. See the youtube videos card

Expected behavior
The cards must be centered or take the full width of the screen.

Screenshots

BUG : Typos in the home page

Fix the name typos of Piyushh to Piyush

Youtube Channel Stats are not up-to-date.

Describe the bug
Youtube Channel Stats are not up to date.

To Reproduce
Steps to reproduce the behavior:

1. Go to piyushgarg.dev
2. Scroll down to 'Youtube Section'
3. See error : Displayed Stats → 1.01K subscribers | 114 videos

Expected behavior
Current Channel Stats on (Jun 5 2023): 5.12K subscribers | 214 videos

Screenshots

[FEAT] : Give a cursor : pointer effect on Slider

Is your feature request related to a problem? Please describe.
Slider don't have a cursor pointer effect

image:

[enhancement] font-size incress of Checkout my recent blogs

Describe the bug
font-size of incress Checkout my recent blogs

To Reproduce
Steps to reproduce the behavior:

1. Go to blog.piyushgarg.dev
2. As you can see if incress the font-size of this text "blog.piyushgarg.dev" it looks beter.

Feature : Make Email Contact Clickable for Easy Email Redirection

Is your feature request related to a problem? Please describe.

Yes, the problem is that currently, the user can see the email address in the contact section, but to send an email to Piyush, they have to manually copy the email address and paste it into their email client's "compose" section. This process can be inconvenient and prone to errors.

Describe the solution you'd like

I would like to have an email icon or a clickable email address in the contact section. When the user clicks on the email icon or the email address, it should automatically redirect them to their default email client, with the "To" field pre-filled with the email address "[email protected]". This will allow users to send an email to Piyush directly without the need for manual copy-pasting.

Describe alternatives you've considered

I have considered other alternatives such as providing a contact form on the website, where users can fill in their details and write a message to Piyush. However, implementing the email redirect feature described above would provide a more streamlined and familiar experience for users who are accustomed to using their preferred email client.

Additional context

Currently, the contact section displays the email address "[email protected]" without any direct link or functionality. Adding the email redirect feature would enhance user convenience and make it easier for visitors to reach out to Piyush via email.

Typing Error in hero component : "Incorrect Name"

Describe the bug
A Extra "h" in name: "Piyushh". On the home page.

To Reproduce
Steps to reproduce the behavior:

1. Go to '.home'
2. Change "Piyushh" to "Piyush"

Expected behavior
It should Show "Piyush"

Screenshots
Attached

[FEAT] : Hover effect on card buttons on Home Page

Is your feature request related to a problem? Please describe.
No this is not a problem , I am just beautifying UI of website.

Describe the solution you'd like
I will apply hover effect on buttons of card which are on Home Page.

Feature Request: Dark/Light Theme Toggle Support

What this feature is all about ?

I would like to request the addition of dark theme and light theme toggle support to enhance the user experience of the application/repository.
Dark themes have gained popularity in recent years due to their benefits such as reducing eye strain, improving readability, and providing a more visually appealing experience in low-light environments. By incorporating both dark and light theme options, users would have the flexibility to choose the visual style that suits their preferences and working conditions.

How it can be done ?

To implement dark theme/light theme support, a common approach is to utilize CSS classes or variables that control the styling elements. This would allow users to switch between themes seamlessly, altering aspects such as text color, background color, and other relevant visual elements.

Benefits

Adding dark theme/light theme support brings several benefits to the application/repository.

• It improves accessibility for users who prefer or require high contrast interfaces, reduces eye strain and fatigue, and allows for better usability in different lighting conditions.
• By accommodating user preferences, the application/repository can provide a more personalized experience, leading to higher user satisfaction and engagement.

cursor color not showing

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Add text-shadow effect to primary heading

The primary heading text looks very basic so I want to add text shadow to it

text-shadow design

text-shadow.mp4

Hero-Image margin right on max screen

Describe the bug
When hero section viewed in larger screen size, it is not properly aligned and instead have margin right causing this.

To Reproduce
Steps to reproduce the behavior:

1. Go to inspect elements
2. Click on responsivness button on top left
3. Change widht to >=1200px
4. Can see extensive margin

Screenshots

Screen.Recording.2023-06-07.at.5.33.20.PM.mov

[Bug] sepling extra add "h" i "Piyushh"

Describe the bug
Extra "h" add in "Piyushh"

[BUG]:Testimonial left Button Not Visible on Mobile

Describe the bug
Currently, on mobile devices, the left button in the testimonial section is not visible, causing a usability issue. This issue impacts the user experience and prevents users from accessing the full functionality of the testimonial section.

To Reproduce
Steps to reproduce the behavior:

1. Open the website on a mobile device.
2. Navigate to the testimonial section.
3. Observe that only the right button is visible, and the left button is missing.

Expected behavior
Both the left and right buttons should be visible in the testimonial section on mobile devices, ensuring consistent functionality and design across different screen sizes.

Screenshots

Piyush.Garg.-.Dev.and.Instructor.-.Google.Chrome.2023-06-08.11-21-32.mp4

Desktop (please complete the following information):

• OS: Windows
• Browser chrome

Additional context
Add any other context about the problem here.

Feature: There should be hover effect on the social icons in top menu bar.

[bug] : Feedbacks spelling is wrong

Describe the bug
wrong spelling of Feedbacks

To Reproduce
Steps to reproduce the behavior:

1. Go to homepage
2. Scroll down to testimonial section
3. Below testimonial section ,see error

Screenshots

[BUG]Incorrect Name spelling

Describe the bug
there is an extra 'h' in 'piyush'

To Reproduce
change the

tag in home page

Expected behavior
name should be 'piyush'

Subscribers and number of videos on YT channel should be presented Dynamically without Hardcoding

Describe the bug
As we take a look at the website,

we can see the number of subscribers is not the same as now the number of subscribers as well as the number of YT videos has grown/increased therefore, It should be a good thing to dynamically add the number of subscribers of the YT channel and the number of videos to the website so that the website displays the up-to-date YT channel details (subscribers and no. of YT videos). Also, Hardcoding should be avoided.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[FEAT] social media icons should be either unfilled or filled state

Is your feature request related to a problem? Please describe.
Header and Footer social media icons should be the same either regular/unfilled or bold/filled states to maintain consistency in the design.

Describe the solution you'd like
Icons should be bold/filled like the header's YouTube or Twitter icon because the page background color is similar to night mode. Bold/filled would be attractive for users.

Header -

Footer -

Describe alternatives you've considered
You can either go with regular/unfilled state for icons.

Email Client should be launched as email icon is clicked.

Is your feature request related to a problem? Please describe.
Email Client should be launched as email icon is clicked.

Additional context

[FEAT] hover color on header social media icon

Is your feature request related to a problem? Please describe.
Not a problem. There should be a hover color on header social media icons like the footer so that users can see which icon they're hovering.

Describe the solution you'd like
It should be like the footer social media icon.
Hover color - #0a58ca

Add a Contact Me Form on HomePage

Is your feature request related to a problem? Please describe.
There is no Contact Me Form on the Page, There is no way for users to contact the owner and add a message to communicate with the site owner.

Describe the solution you'd like
Create a Contact Form on HomePage or on the Contact Us page. The Contact Us form should be connected to a backend using Vercel API Routes that can save the submissions to Google Sheets or any other free service.

Describe alternatives you've considered
There is an email ID given on the homepage which can be used to manually send an email to the site owner.

Additional context

[enhancement] font-size of "Checkout My Interactive Courses" should increase

Describe the bug
In the cource section font -size of "Checkout My Interactive Courses" is small and less vigilent.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.piyushgarg.dev/#
2. Scroll down to 'cources'
3. see checkout my cources

Expected behavior
font-size should be increased of "Checkout My Interactive Courses" and should be bold.

Screenshots

[BUG] In -Contact me section social media icon open in existing tab fix this and open a icon in new tab.

Describe the bug
In contact me section social media icon open in existing tab fix this and open a icon in new tab

To Reproduce
Steps to reproduce the behavior:

1. Go to - UI
2. Click on - Contact.jsx
3. Classname - classes.social__links

Screenshots

[bug]:. Typo in pyushh name on hompage

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[BUG] : Card Height in Gear Section is not uniform.

Describe the bug
Card size is not uniform in Gears Section.

To Reproduce
Steps to reproduce the behavior:

1. Go to Home Page First
2. Locate My Gears in Navbar
3. Go to That Page.
4. See cards in Gears Section.

Expected behavior
After my code Card will have their uniform Height.

Screenshot

[BUG] : Adjust YouTube section in Homepage and make it consistent with respect to the webpage.

Describe the bug
YouTube section at homepage doesnt look good, and consistent.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Homepage.'
2. Scroll down to Youtube section before course section
3. See the UI

Expected behavior
Youtube Title should be parallel to HELLO title on Homepage.

Screenshots

Additional context
This should be clearer if owner makes us know how he want his YouTube section to look like.

to autmatically update subscriber count

Is your feature request related to a problem? Please describe.
when i opened the site , its still showing the old data of 1k subscribers and 114 videos but now its 5k+ subs and more videos on the channel.can we do something so it can automatically updates the subscriber count.

Describe the solution you'd like
here are some solutions that i found online -
-Set up a project and obtain API credentials: Visit the Google Cloud Console (console.cloud.google.com) and create a new project. Enable the YouTube Data API for your project and generate API credentials (API key or OAuth client ID) that will allow your website to access the YouTube Data API.
-Install the necessary dependencies: In your ReactJS project, you'll need to install a library for making API requests. One popular choice is Axios, which simplifies the process of making HTTP requests.
-Make an API request: Use Axios to make a GET request to the YouTube Data API, specifically the channels endpoint. Pass in your API key and specify the part parameter as statistics. This will return information about your channel, including the current subscriber count.Replace YOUR_API_KEY with your actual API key and YOUR_CHANNEL_ID with your YouTube channel's ID. You can find the channel ID in the URL when you visit your channel.
-Update the subscriber count on your website: Once you receive the response from the API request, extract the subscriber count and update it on your website. You can use React's state or any other mechanism you prefer to store and display the subscriber count.

Describe alternatives you've considered
the above given solution is found on internet but one should have decent knowledge of how authorization works and must have strong knowledge of API's to implement this feature.

Additional context
Add any other context or screenshots about the feature request here.

BUG : there is a typo in the HERO component

Describe the bug
The spelling of Piyushh has to be Piyush

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Home page'
2. Look at the Hero component

Expected behavior
Spelling to be Piyush

Screenshots

Desktop (please complete the following information):

• OS: [windows]
• Browser [e.g. chrome]

improve cards design

Is your feature request related to a problem? Please describe.
the cards we are using in website can be modified according to modern websites, it wont change or show any animation on hover.

Describe the solution you'd like
we can use transform property on hover to little zoomOut the card and can also apply transition property to make it more smoother,
eg : .card:hover {
transform : scale(1.15);
transition: transform 0.5s;
}
NOTE : This is just an example to give you the idea . how we can approach the feature. Things could be different on the code base.
Thankyou.

Before

After

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

BUG : github icon not present in Navbar social media section

Describe the bug
The Github icon is present in the contact me section but not in Navabar

To Reproduce
Steps to reproduce the behavior:

1. Just compare the navbar social media icons and the one in the contact me section

Expected behavior
There should be a GitHub icon in the navbar

Screenshots

Navbar :

Contact me :

Desktop (please complete the following information):

• OS: [windows]
• Browser [Chrome]

[Bug] - Buttons doesn't change the container(box)

Describe the bug
These two buttons doesn't work for changing the containers(right to left).

To Reproduce
Steps to reproduce the behavior:

1. Go to the website in testimonal section
2. Click on Left & Right Buttons
3. These doesn't work
4. See error

Expected behavior
On Click Left btn show its left content and Right btn show its right content.

Screenshots

[bug] repetition of word Contact

Describe the bug
Instead of contact with me "connect with me" making more sense.

To Reproduce
Steps to reproduce the behavior:

1. Go to homepage
2. Scroll down to Contact me Section
3. See error

Screenshots

feature : when you hover on cources it should pop up

Is your feature request related to a problem? Please describe.
whenver we are hovering on cource we are unable to understand on which cource our mouse is

Describe the solution you'd like
we should enchance the hover effect on cources as whenver someone hovers the cource should pop up like in youtube videos

Describe alternatives you've considered
an alternative could be to give box shadow to cource on hovering

Additional context

wrong text of button on homepage

Describe the bug
The text of the button says " join open source bootcamp but instead takes it to discord invite "

To Reproduce
Steps to reproduce the behavior:

1. Go to 'the homepage'
2. Locate the button that says join open source bootcamp.
3. 3. click on the button
4. You will be redirected to discord invite.

Expected behavior
The must say "Join discord server"

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[BUG] Heading of home page cursor

Describe the bug
When you hover the cursor on the heading "Piyush Garg" of top left corner it should not show pointer otherwise link something to that.

To Reproduce
Steps to reproduce the behavior:

1. Go to Home
2. Hover the cursor on the heading "Piyush Garg" which is on the top left corner

#internal server error 500 after discord login

not sure if only i am facing this issue , but when i registered and authorized myself after verification email, instead of taking me to the landing page or the page it supposed to take it displayed error 500. i am attaching the screenshots that i took in my mobile.

Wrong Text of the Button on Home Page

Describe the bug
The text of the button says "Join Open Source BootCamp" but instead takes to the discord server invite.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Home Page
2. Locate the Button that says Join Open Source BootCamp
3. Click on the button
4. You'll be redirected to the Discord invite

Expected behavior
The button must say "Join Discord Server" or anything related.

Screenshots

[Bug]: Typo in word "Piyushh" on hompage of the application

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://piyushgarg.dev'

Expected behavior
Expected Word: "Piyush"

BUG : Social media links to be opened at other tabs

Describe the bug
The social media icons in the contact me section, when clicked, open the link in the same tab. Thereby taking our user away from the portfolio website.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Home Page'
2. Scroll down to 'Contact me'
3. Now click on the icons

Expected behavior
When the user clicks any of those social media links , it should open in a separate tab.

Screenshots

Desktop (please complete the following information):

• OS: [Windows]
• Browser [chrome]

Additional context
The social media icons which are present on the navbar , if clicked take the user to separate tab but same is not the case with the icons in the contact me section .

Video

[BUG]: Typo error in word "Piyushh" in homepage.

Describe the bug
Typo error in word "Piyushh" in homepage. There is a extra "h" in the word.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'link'
2. Check on homepage

Screenshots

Desktop (please complete the following information):

• OS:
• Browser chrome
• Version 22

Smartphone (please complete the following information):

• Device: iPhone12

Logo :: when the cursor point go through it's not showing any others color

Is your feature request related to a problem? Please describe.
a first home page right side logo option there is no any color showing
Describe the solution you'd like
It is best for when the cursor point show for the other color it is good for UI
Describe alternatives you've considered