Project Tracking Intro Component

What are you most proud of, and what would you do differently next time?

Will try to create responsive layout for main section in the future.

What challenges did you encounter, and how did you overcome them?

• Make the main section more responsive to prevent image distortion on larger screens, while maintaining a consistent wrapper width for both the navbar and hero section. Here is how i acheived it for now:

  main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-block: var(--spacing-md);
    gap: var(--spacing-lg);
    overflow-x: hidden;
  }

  main .main-img{
      min-width: 130%;
      transform: translate(4%);
  }

What specific areas of your project would you like help with?

• Make the main section more responsive to prevent image distortion on larger screens, while maintaining a consistent wrapper width for both the navbar and hero section. Here is how i acheived it for now:

  main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-block: var(--spacing-md);
    gap: var(--spacing-lg);
    overflow-x: hidden;
  }

  main .main-img{
      min-width: 130%;
      transform: translate(4%);
  }

• To create an image overflow effect on the right side, I used the following approach:

  main .main-img{
      min-width: 130%;
      transform: translate(4%);
  }

• I explored multiple approaches for larger screens and ultimately settled on this layout.:

   main{
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        overflow: auto;
        max-width: 90%;
        padding: calc(var(--spacing-lg)*2.65) var(--spacing-md);
        margin: 0 auto;
        padding-inline: 0;
        padding-inline-start: 1rem;
        margin-right: 0;
        gap: 1rem;
        height: 100%;
    }

   

    main .main-img{
        min-width: 60%;
        transform: translate(10%);
        flex: 1;
        height: 100%;
    }

• Any constructive suggestions—especially regarding the main section layout and image handling—are most welcome.