[IMPROVEMENT] UI and Text Improvement Of Site

[singhJasvinder101]

Feature Description

We need to revamp and standardize the UI components of the Tech Bytes website to enhance the overall user experience. This includes addressing issues related to header text color, footer design, header alignment, and card layouts. The goal is to create a cohesive and visually appealing interface that improves usability and maintains consistency across the site.

Use Case

The current UI of the Tech Bytes website has various issues reported by users, such as inconsistent header text colors, misaligned headers and footers, and non-uniform card designs. These issues affect the website's visual appeal and can lead to a less engaging user experience. By standardizing these elements, we can ensure a more professional and polished look, making it easier for users to navigate and interact with the site.

Potential Solution

Header Text Color: Standardize the color scheme for header texts across all pages. Ensure readability by selecting colors with high contrast against the background. Footer Design: Redesign the footer to be consistent with the overall site theme. Ensure all footer elements are properly aligned and easy to navigate. Header Alignment: Ensure headers are properly aligned on all pages, both horizontally and vertically. Use a consistent font size and style for all headers. Card Layouts: Standardize the design of cards used throughout the site. Ensure consistency in padding, margins, and font styles. Implement a uniform hover effect for interactive cards.

Additional Context

Here are some examples of the current UI issues:

98 #97 #92 #87 #85 #81 #80 #76 #61 #56 #53 #48 #44

This comprehensive update aims to address all these problems in a single, coordinated effort to enhance the user experience on the Tech Bytes website. And closing these issues. Also carefully review your code before making pull request their should not be any conflicting code other then changes to your respective issue

[asthanegi14]

Hey @singhJasvinder101 , I would like to work on this issue, assign this to me under GSSOC'24.

[AkhilaSunesh]

Hi, I have been redirected to this issue. I think I have the potential to work on this. Kindly assign me this issue. GSSOC'24

[drick-infinity]

can you assign this issue to me

[drick-infinity]

under gssoc'24

[singhJasvinder101]

I have assigned the tasks as requested. Please contribute actively and effectively. Make sure to check your code and UI multiple times before creating a pull request.

[singhJasvinder101]

Is there any progress from @drick-infinity, @AkhilaSunesh, or @asthanegi14 on the assigned task, or should I unassign it?

[asthanegi14]

@singhJasvinder101 I'm working on it. I am resolving every issue number you have mentioned one by one, as for now, I have resolved issue numbers 98, 97, 87, 81, and 80. Give me a few more days.

[drick-infinity]

@singhJasvinder101 I'm eager to work on this issue But I share you that I don't open this project locally as I added the .env file what should I do to contribute this in this issue Can you help me out to setup locally in my system It just start loader on after that it doesnot appear the website

[asthanegi14]

@drick-infinity you have to create .env file and MongoDB database and put some data in the database. I was facing the same issue and that's how I resolve it. In this blog website, the homepage also requires the API fetched data from the backend, so your page is not showing anything but a white screen after loading.

And @singhJasvinder101 please update your documentation and put the details to set up your project so that no one will face this issue in the future.

[singhJasvinder101]

I have added this in the pre requisites the .env.example file will update in the greet of issue creation also

[asthanegi14]

Hey @singhJasvinder101 is this looking okay?

https://github.com/singhJasvinder101/MyBlog/assets/93486108/7f8ed412-653b-4bcf-bfb6-18976fa5148d

Changes I have made

1. Added a small text and image above BestPostHeader.
2. Added hover effect on Navbar
3. Resolved issue numbers (97, 98, 87, 56, 48, 80)
4. Improved login, sign up, and footer.
5. Removed the second blog card section. You can add them on another page, but I would suggest not showing them the way they are on the current website instead we can add them in a carousel like a picture below with the three cards that have already been displayed

Please let me know what you think or if you need any changes.

[venkat2295]

@singhJasvinder101 i can make way better ui than these assign me this issue i can also make you a figma design and add designs according to your choice

[singhJasvinder101]

Hey @singhJasvinder101 is this looking okay?

Tech.Blog.-.Google.Chrome.2024-06-25.17-02-17.mp4

Changes I have made

1. Added a small text and image above BestPostHeader.
2. Added hover effect on Navbar
3. Resolved issue numbers (97, 98, 87, 56, 48, 80)
4. Improved login, sign up, and footer.
5. Removed the second blog card section. You can add them on another page, but I would suggest not showing them the way they are on the current website instead we can add them in a carousel like a picture below with the three cards that have already been displayed

Please let me know what you think or if you need any changes.

its looking too much simple @asthanegi14

[singhJasvinder101]

@singhJasvinder101 i can make way better ui than these assign me this issue i can also make you a figma design and add designs according to your choice

you can work on now

[venkat2295]

I will start it from tomorrow

[singhJasvinder101]

I will start it from tomorrow

have you done it ?

[venkat2295]

i will finish it by this sunday