Skip to content
OverviewSolutions
8
Comments
7
P

Jason Nembhard

@jNembhard320 points

Hi I'm Jason! Learning new skills to tackle exciting and complex challenges is what keeps me motivated. I also watch a little anime and do some lifting.

Latest solutions

View more solutions

Latest comments

  • P
    Jason Nembhard•320
    @jNembhard

    This is good! I also did NOT know you could add an @ symbol to point directly to folders instead of writing out the entire file path when importing files...brb need to make some updates haha.

  • P
    Jason Nembhard•320
    @jNembhard

    Nice animations! I suggest you try to build something with a React framework next and checkout the Framer Motion library. It's a bit more advanced and the codebase is kept more up to date. It takes a little getting used to, but you can do some really creative things to enhance your webpages.

    If you plan on putting this on a portfolio, I'd update the favicon to match the project and also add a custom meta description. Companies like to see that you are actively aware of the importance of branding and SEO strategies.

  • P
    Jason Nembhard•320
    @jNembhard

    Hey Francisldn,

    These pages are actually pretty clean. My advice? Build your next project with Styled Components or Sass instead of css. Some css code you write may not be compatible across all browsers and using these tools helps to keep the code consistent across all major browsers. Other than that, if you're building a portfolio, I'd definitely put this on there as it can be very eye-catching to people. Hope this helps!

  • P
    Jason Nembhard•320
    @jNembhard

    Great attempt Andrew! If you want to display the image properly, one strategy would be to wrap the form content and picture in it's own container, and then wrap both those containers in a wrapper and put a flex property on the "master container." Set the picture container to have a min-width of the full size of the picture and then make the picture responsive: (width: 100% height: auto) and it will fill that space. you also want to set a property called aspect-ratio directly on the picture with css code that mirrors the width and height of the picture. This will prevent cumulative layout shift (CLS) while the picture is loading and also keep your lighthouse performance scores nice and high. Hope this helps.

    Marked as helpful
  • P
    Jason Nembhard•320
    @jNembhard

    Site looks good!

    Couple of fixes: on the laptop layouts the About link in the footer bleeds over the Scoot logo.

    When your pages get wider than 1440px, the layouts get screwed up. Set a max width of 1440px for each section and then use margin: 0 auto; to keep the page centered. at larger sizes.

    The main image on the landing page only loads sometimes for some reason on my end.

    To make this even better you could try playing with animations. It's not necessary but is definitely a way to make your site stand out even more. Great work though!

  • P
    Jason Nembhard•320
    @jNembhard

    Hey @Jeth0214,

    This a great attempt at a portfolio, but I'd suggest you re-do it completely after you build more projects.

    Why? Looking at what you have now, the implementation is clean and understandable, but people who hire also like to know why you make certain design decisions and used certain coding tools. If you started with a framework, you could've cut this down to 3 static pages and one dynamic page instead of 7 static pages.

    You did exactly what the instructions said, and that's a good start, but what can you do to make it yours? Clickable portfolio pictures, your own language for the projects, animations perhaps? You get the picture. Get as creative as possible!

View more comments