Sankalp20487 / SankalpBiswal.github.io

0 stars 0 forks source link

Suggestions for common UI issues #2

Open piyushswain opened 3 weeks ago

piyushswain commented 3 weeks ago

Just some small UI suggestions.

  1. https://github.com/user-attachments/assets/fda5ee87-7140-4ff6-ad49-d66d597bc37b1. Once this animation is done, let the text stay on the page, Like a list of things
  2. Add a button here `(View Projects) that scrolls down to your project section on click. Also, remove the extra space in the text. Screenshot 2024-09-13 at 11 12 02 AM
  3. Can you move the View/Download Resume button to the top ? It's unclear if you are giving an option to download/view the resume as it is too far down the page. Screenshot 2024-09-13 at 11 12 56 AM
piyushswain commented 3 weeks ago

BTW Good Job!

Sankalp20487 commented 2 weeks ago

Thanks for the feedback bro! I'll implement these changes. I wanted to ask few things -

  1. When you open my portfolio, does the first image get cropped out and interfere with Nav bar?
  2. Can try to open this on your mobile and suggest some change that I can make to make this mobile friendly?

On Fri, Sep 13, 2024 at 1:50 AM piyushswain @.***> wrote:

BTW Good Job!

— Reply to this email directly, view it on GitHub https://github.com/Sankalp20487/SankalpBiswal.github.io/issues/2#issuecomment-2348083687, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOPAAHORJ2UXOQY7X5JLXDTZWJ4JFAVCNFSM6AAAAABOEUNVOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNBYGA4DGNRYG4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

piyushswain commented 2 weeks ago

Thanks for the feedback bro! I'll implement these changes. I wanted to ask few things - 1. When you open my portfolio, does the first image get cropped out and interfere with Nav bar? 2. Can try to open this on your mobile and suggest some change that I can make to make this mobile friendly? On Fri, Sep 13, 2024 at 1:50 AM piyushswain @.> wrote: BTW Good Job! — Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOPAAHORJ2UXOQY7X5JLXDTZWJ4JFAVCNFSM6AAAAABOEUNVOSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNBYGA4DGNRYG4 . You are receiving this because you are subscribed to this thread.Message ID: @.>

  1. Yes.

    • Don't use any weird JS or CSS translations and animations.
    • Use rem instead of px scale in your css everywhere. (1 rem = 10px) (But, rem is relative to the rendered size of your root element, so it will scale accordingly on the rendered screen) (Never use px).
    • Design a simple div structure below your navbar element image
    • <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem;">
        <div name="left box"></div>
        <div name="right box"></div>
      </div>
  2. Screenshot 2024-09-17 at 9 32 57 AM
    • Change to rem first and remove custom CSS or JS sizing from the code and then check the output
    • In case of issues still, use css media queries to adjust your page. Faster and lighter on the system.
    • Common list of media query sizes used. media_query_sizes