Personal Portfolio - Breezy Web Dev

[bbs2527]

Hello Everyone!

Finally was able to complete my personal portfolio page.

I love the color blue but wanted to get others opinion on my color choices.

Here is my Portfolio Page for review.

I made sure to check both my HTML and CSS in the W3C Validator and everything seems to be error free. Also, the site seems to pass the FCC user story requirements. If I missed something, feel free to let me know!

As always, open to suggestions and recommendations :).

[AndyG]

Hello @bbs2527 your portfolio looks very good. Personally think the colors you choose fit very well.
1.My recommendation would be to give a better use to this blank space, optimize the space and remember web responsibility.

2.To improve the visibility of the content and the presentation. The order of the elements could be better.
Hope this helps.

[AndrewAung11]

Hi @bbs2527,

Your site look great. And the color theme seem perfect.

There are a few things to review:

• At the screen width of 365px , some parts of the h1 goes under the nav element:
  

  

• At the screen width of 370px , the title of the section is not centered anymore:
  

  

• At the screen width of 900px , the .project-iframe iframes overlaps their titles .project-heading:
  

  

• When the screen width is less than 916px , the nav bar become oversized.
  Screen width at 916px :
  

  

Screen width at 915px :

---

Suggestions

You can customize your page’s scroll bar with ::-webkit-scrollbar CSS selector for the bar. And ::-webkit-scrollbar-thumb CSS selector for the button on the bar.

You can learn more about it here:
Learn how to create a custom scrollbar with CSS. - W3Schools

Hope this Helps!

[bbs2527]

Thanks for this! I made sure to adjust the width to accomodate the full screen.

[bbs2527]

Thanks for the feedback! Sadly, I am having some difficulty trying to figure out how to adjust the various media query sizes. I will try to see what I can do and then get back with you. Sadly this newbie might take a few days. For some reason the media queries for the smaller sizes don’t adjust to well :(.

[bbs2527]

Hello Again!

Apologies for the late response.

I finally figured out how to adjust the media queries and hopefully it helps with some different screen sizes :). It is not exactly perfect as I would like but definitely much better than before!

Thanks again for the suggestions :).

[AndrewAung11]

Everything looks good

[Roma]

Your page looks good @bbs2527. A couple of things to revisit;

• The link to “more projects here” brings the user to their personal codepen page, not yours. You’ll need to use your codepen id rather than “your-link”.
• A suggestion, rather than having your projects open in a pen, have them open full screen.

[Rickard]

Can you spot a little misspelling here?

[bbs2527]

Ah! Good catch! Thanks :).

[bbs2527]

Thanks so much for the suggestions!
I didn’t realize it was going to a personal codepen. I hoped the link I changed works properly now.

I also changed the links for the projects to go to full page instead :).

Thanks as always for the help :).

[Roma]

@bbs2527

I didn’t realize it was going to a personal codepen. I hoped the link I changed works properly now.

It now goes to your codepen pens.

Glad to help.

[adrianoenache]

Hello there, Barbara @bbs2527 and @AndyG

When you are developing for the web you need to remember that browsers implement things differently, in the past was worse, today you have many browsers using the same engine as Chrome.

So when you code something you will like that what you are creating appears almost the same or exactly the same across many devices and browsers and that can be a problem, because companies implement things differently.

For the scroll styling, this is the case and I’m using this approach to deal with scrolls. Base on Firefox limitations I am using a minimum of style to Chromium browsers and Mozilla browsers look the same as possible.

.custom-scroll {
  --scroll-thumb-background: #666666;
  --scroll-thumb-background-hover: #aaaaaa;
  --scroll-bar-background: #000000;
  --scroll-bar-width-firefox: thin;
  --scroll-bar-width-chromium: 8px;
  /* Rules */
  /* -moz- Firefox custom scroll */
  scrollbar-color: var(--scroll-thumb-background) var(--scroll-bar-background);
  scrollbar-width: var(--scroll-bar-width-firefox);
}

/* -webkit- Edge, Chrome, Opera, Safari custom scroll */
.custom-scroll::-webkit-scrollbar {
  background: var(--scroll-bar-background);
  width: var(--scroll-bar-width-chromium);
  height: var(--scroll-bar-width-chromium);
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-background);
  border: solid 1px var(--scroll-bar-background);
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-background-hover);
}

[bbs2527]

@adrianoenache

.custom-scroll {
  --scroll-thumb-background: #666666;
  --scroll-thumb-background-hover: #aaaaaa;
  --scroll-bar-background: #000000;
  --scroll-bar-width-firefox: thin;
  --scroll-bar-width-chromium: 8px;
  /* Rules */
  /* -moz- Firefox custom scroll */
  scrollbar-color: var(--scroll-thumb-background) var(--scroll-bar-background);
  scrollbar-width: var(--scroll-bar-width-firefox);
}

/* -webkit- Edge, Chrome, Opera, Safari custom scroll */
.custom-scroll::-webkit-scrollbar {
  background: var(--scroll-bar-background);
  width: var(--scroll-bar-width-chromium);
  height: var(--scroll-bar-width-chromium);
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-background);
  border: solid 1px var(--scroll-bar-background);
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-background-hover);
}

Ah! Good to know! That makes sense, especially to make the look consistent.