mstc-da-iict/react-portfolio

react-portfolio's Issues

Refactor the code and file structure

The code for the portfolio website is kept in only one file i.e App.js. But we need to divide the code in different modules just in the way react allows.

The code contains all the information about different sections like navbar, contact section, footer etc. Just create new files like Navbar.js, Contact.js and put the code into it.

[x] Navbar
[x] Main Section
[x] About Section
[x] Services Section
[x] Skills Section
[x] Projects Section
[x] Contact Section
[x] Footer

Logo for the portfolio

Create a logo for this portfolio to be shown on title bar(browser) and on the navbar.

Please don't plagiarise or copy the from any other sources. Show your logo designing skills.

Mobile friendly responsive

Hello.
This portfolio seems to be very great!!!
Yesterday I open the web page on my phone(iPhone Pro 14) but the web site had a bit problem with responsive.
I look forward to hearing any update from you.

Bug in Services Section

There is an issue in services section. When we hover the card in services section, the text inside the card is not visible.
Change the services.css file bit to remove the bug and improve the design a little bit.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.

Attach a snap of changes made by you in your PR.

Design Contact Section

Design the contact section using css and js(if required). The css should be kept in a new file named Contact.css inside the css folder.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.

Make sure you attach a snap of the changes made by you in your PR.

Redesign the home screen

Redesign the Home screen to give some description and social media links of the portfolio holder. Give an intro, some description, and social media links on the left half and a Vector on the right side.

Images load

Image load after the content loads and since it is of large size, it takes some time to load without any loader/animation.

Reload the website to see the image load.
Images should load after the content loads and a loader should appear while the images loads.

Contact form on devices with width<880px

The contact form on devices with width less than 880px extends to 100% of the width and doesn't look visually appealing.

Steps to reproduce the behavior:

1. Go to web tools section of browser
2. Open the website on a device with width less than 880px
3. Scroll to Contact section.

White space on both right side and left side of the form would be more visually appealing.

Screenshots

Smartphone:

• Device: Oneplus7t
• OS: Android 11
• Browser: Chrome

Design the Footer

Design the footer of the website. The css should be kept in a new file named Footer.css inside the css folder.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.

Make sure you attach a snap of the changes made by you in your PR.

Do the color balancing of all components and UI update!

Since this is an open-source project and people created this from the beginning so there is color differencing in all the components,
i.e., in one component there is the dark theme and in another, there is the regular color theme.
and also update the UI of the App.

The signup Button needs Alignment

In This The button looks little offset

Image Folder Path

The File hierarchy of react suggest the images which are being used in main content should be stored in public folder so as to they can be used in direct "/images/img.png" . so it reduces code and imports which helps the rendering faster .

Organize component files into their own /components directory

Is your feature request related to a problem? Please describe.
It is tougher to navigate the project and harder to understand at first glance when all the component files (navbar.js For example) are in the /src Folder. The /src Folder is meant for the main App and Index files.

Describe the solution you'd like
I think it would be much more useful to have these component files their own /components Folder.

Describe alternatives you've considered
There isn’t really a better option then the one I have offered. It is a standard practice among React projects.

Additional context

Navbar issues in mobile view

There are two different navbars i.e navbar large and navbar small. In the mobile view both of them appear and thus make it look messy. Look into the issue and try to solve it.

Deploy the Project on vercel or netlify

Is your feature request related to a problem? Please describe.
As when we deploy the project is lots more easy for contributors to find bug and fix them

Describe the solution you'd like
Any deployment platform of your preference will work

Design My Services Section

Design the services section using css and js(if required). The css should be kept in a new file named Services.css inside the css folder.

The UI for this section should be eye catching. So a good amount of knowledge of css is required to work on this issue.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.

Make sure you attach a snap of the changes made by you in your PR.

Add a Documentation

Prepare a documentation for normal people out there looking for a good porfolio.

• It should include the info like change #me to your name, change email in contact page etc. Also It should contain the file names they need to change.

• Then prepare a section in doc for making it ready for deployment i.e. how to see the changes and then creating the build.

Take your time and prepare the doc well so that even a non-developer finds it easy to use.

Create a new file documentation.md for the documentation. Later on we can merge it in readme.

About Section

Currently the main section is only the text and no design.

Design the about section using css. The css should be kept in a new file named About.css inside the css folder.
The About section contains almost all the information needed except the design.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.

When submitting a PR, please attach a snap of changes you made to the webpage.

Design Projects Section

Design the projects section using css and js(if required). The css should be kept in a new file named Projects.css inside the css folder.

Create a gallery type view for showing the projects.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.

Make sure you attach a snap of the changes made by you in your PR.

Add a preview link to the description of the repo

Is your feature request related to a problem? Please describe.
As of now, I don’t, along with others, know what the final design of this portfolio looks like. It would be helpful if I could so then I don’t just jump into things right away.

Describe the solution you'd like
It would be great for the viewer to be able to have a link to the live demo in the description like so:

Describe alternatives you've considered

Additional context

Design the Navbar

Currently the navbar is only the text and no design.

Design the Navbar using css and js(if required). The css should be kept in a new file named Navbar.css inside the css folder.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.

Design a logo

Create avatar Logo For React Portfolio.

Fixing the responsive design

The navbar and the photo is not responsive and overflows on a phone making it an unpleasant experience to use on a phone.

To Reproduce
Steps to reproduce the behavior:

1. Open the website on a phone
2. Scroll towards right

Expected behavior
A scroll shouldn't be allowed and the options to navigate should be visible on landing on the page.

Screenshots

Device:
Smartphone:

• Device: Oneplus 7t
• OS: Android 11
• Browser: Google Chrome

Master JSON file for easier content management

Is your feature request related to a problem? Please describe.
When a viewer finds this repo and wants to make it their next portfolio website, they can go in the code base the traditional way and edit the content inside all the tags.

However for new React coders and others, it would be better to have a simpler approach.

Describe the solution you'd like
A master JSON file with all the content in it. Then, this data can be passed to the React components.

It would look something like this:

{
  firstName: ‘Brayden’,
  lastName: ‘Wright’,
  social: {
    github: ‘BraydenTW’,
    dribbble: ‘BraydenTW’,
  }
  . . .
}

Describe alternatives you've considered
This is the best approach in my opinion. It would be much neater and more organized for anyone getting a look at it for the first time.

Addition of progress bar in skills section

Is your feature request related to a problem? Please describe.
It's not an issue, this is just a feature which would improve the UI of the project

Describe the solution you'd like
A progress bar which shows the user's techstack progress instead of percentage numbers in the #skills section.

Describe alternatives you've considered
On top of that, different colored progress bars could be added for each skill.

Additional context
Example uni-colored progress bars are attached here:

Design My Skills Section

Design the skills section using css and js(if required). The css should be kept in a new file named Skills.css inside the css folder.

Use your designing knowledge to show the skills. Make it dynamic so that anyone can add new skill easily.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.

Make sure you attach a snap of the changes made by in you your PR.

Prepare a Documentation

Prepare a documentation for normal people out there looking for a good porfolio.

• It should include the info like change #me to your name, change email in contact page etc. Also It should contain the file names they need to change.

• Then prepare a section in doc for making it ready for deployment i.e. how to see the changes and then creating the build.

Take your time and prepare the doc well so that even a non-developer finds it easy to use.

Create a new file documentation.md for the documentation. Later on we can merge it in readme.

Replacing the favicon

Describe the bug
The website shows the default react icon as its favicon.

To Reproduce
Steps to reproduce the behavior:

1. Go to website
2. Look for the photo on the tab

Expected behavior
MSTC logo similar to the one on the landing page or the photo on the landing page would be a better alternative compared to the react favicon. (The photo on landing page is probably better to have a more general and usable implementation)

Screenshots

Desktop (please complete the following information):

• OS: Fedora34
• Browser: Firefox

Change the skills icons

The icons used in skills section i.e html icon, css icon etc are blurry and it affects the looks of the complete section. So change the logos to the technology names. This would make it easy for any user to add the skill easily.

Sticky navbar on scroll

Is your feature request related to a problem? Please describe.
To make the navbar more accessible throughout the scrolling journey of the website, we can make it sticky.

Describe the solution you'd like
Make the navbar sticky

Navbar overflowing on <900px screens

While working on #23 for the project, I came across the following bug-

Describe the bug
The navbar overflows on small sized devices which makes the text beneath it unreadable

To Reproduce
Steps to reproduce the behavior:

1. Choose a device with screen width <900 px or Resize the window to <900px width.
2. Scroll down to about me or skills section
3. See overflow

Expected behavior
The text beneath to be readable and the navbar elements to enter a toggle menu on resizing the window to <900px.

Screenshots

Footer social media icons hover bug

Social media icons don't seem to respond how they were intended on hover. Here is a gif of the same.

The animation also seems a bit over the top, it would be better to do something minimal.

Contact Me Needs Improvement

The Contatct Me slide in focus needs the imporvment as it is hard to read what to write there and the site there the color system seems to be little distracted
and i would like to work on this .

Social Media Icons in Footer

Improve the social media icons in the footer.
Add some animations/transitions and colors to improve the designs.

Add a loader on the website

Loader to be shown before full content loads on screen

Design Main Section

Currently the main section is only the text and no design.

Design the main section using css and js(if required). The css should be kept in a new file named Main.css inside the css folder.
The main section should look appealing as it is the first thing that user sees as website loads.

Website color theme:

1. white
2. crimson

Both these colors are primary colors of the website. You may use any other colors for too but make sure that should not oppose the color theme.